Add Search Feature

package.json

@@ -13,6 +13,7 @@
     "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "timeago.js": "^4.0.0-beta.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -131,6 +131,7 @@ input {
 
 .video-wrapper {
   flex-direction: row;
+  justify-content: center;
 }
 
 .play-image-icon {

src/App.js

@@ -1,13 +1,20 @@
 import React, { useEffect, useState } from "react";
 import "./App.css";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 
 import GlobalContext from "./context/GlobalContext";
-import { HomeScreen, VideoDetailsScreen, ErrorScreen } from "../src/screens";
+import {
+  HomeScreen,
+  VideoDetailsScreen,
+  ErrorScreen,
+  SearchResultsScreen,
+} from "../src/screens";
 import { Header, Footer, Loading, SearchQuery } from "../src/components";
 import { youtubeApiSearch, youtubeApiTrending } from "./apis/youtubeApi";
 
 function App() {
+  //Navigate
+  const navigate = useNavigate();
   /* States */
 
   //Loading
@@ -41,7 +48,11 @@ function App() {
   const handleSearchApi = async (userSearch) => {
     try {
       const response = await youtubeApiSearch(userSearch);
-      console.log(response.data.items);
+      setSearchResults(response.data.items);
+      setUserSearch("");
+
+      //Navigate
+      navigate(`/search/${userSearch}`);
     } catch (error) {
       console.log(error);
     }
@@ -62,10 +73,16 @@ function App() {
         />
       </div>
       <div className="screen-container">
-        <GlobalContext.Provider value={{ trendingVideos, setTrendingVideos }}>
+        <GlobalContext.Provider
+          value={{ trendingVideos, setTrendingVideos, searchResults }}
+        >
           <Routes>
             <Route path="/" element={<HomeScreen />} />
             <Route path="/video/:title" element={<VideoDetailsScreen />} />
+            <Route
+              path="/search/:searchQuery"
+              element={<SearchResultsScreen />}
+            />
             <Route path="*" element={<ErrorScreen />} />
           </Routes>
         </GlobalContext.Provider>

src/apis/youtubeApi.js

@@ -25,7 +25,7 @@ export const youtubeApiSearch = async (searchQuery) => {
         part: "snippet,id",
         regionCode: "IN",
         maxResults: "50",
-        order: "date",
+        order: "relevance",
       },
       headers: {
         "X-RapidAPI-Key": process.env.REACT_APP_YOUTUBE_RAPID_API_KEY,

src/components/VideoCardResults.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { MdOutlineSlowMotionVideo } from "react-icons/md";
+import { format } from "timeago.js";
+
+const VideoCardResults = ({ data }) => {
+  return (
+    <div className="video-wrapper">
+      <div className="card-container">
+        <div className="card-video">
+          <img
+            src={data.snippet.thumbnails.medium.url}
+            className="video-thumbnail"
+            alt={`${data.snippet.title} video thumbnail`}
+          />
+          <MdOutlineSlowMotionVideo
+            size={50}
+            color="#00BFFF"
+            className="play-image-icon"
+          />
+
+          <div className="video-details">
+            <div className="video-title">{data.snippet.title}</div>
+            <br />
+            <div>Uploader: {data.snippet.channelTitle}</div>
+            <div>{format(data.snippet.publishTime)}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoCardResults;

src/components/index.js

@@ -3,3 +3,4 @@ export { default as Footer } from "./Footer";
 export { default as Loading } from "./Loading";
 export { default as SearchQuery } from "./SearchQuery";
 export { default as VideoCard } from "./VideoCard";
+export { default as VideoCardResults } from "./VideoCardResults";

src/data/videoResult.js

@@ -0,0 +1,37 @@
+const videoResult = {
+  kind: "youtube#searchResult",
+  id: {
+    kind: "youtube#video",
+    videoId: "wmf0_pxCtxk",
+  },
+  snippet: {
+    publishedAt: "2022-11-18T09:37:09Z",
+    channelId: "UC2h1GsM_Ls1Cg6M-Mk42UYQ",
+    title:
+      "India Vs New Zealand 1st T20 Full Match Highlights | Ind Vs Nz 1st T20 Full Match Highlights |Pandya",
+    description:
+      "HIGHLIGHTS #LIVE #IndiavsEngland #IndvsEng #indvsengt202022 #Ipl2022 #RohitSharma​ #ViratKohli​ #JaspritBumrah​ ...",
+    thumbnails: {
+      default: {
+        url: "https://i.ytimg.com/vi/wmf0_pxCtxk/default.jpg",
+        width: 120,
+        height: 90,
+      },
+      medium: {
+        url: "https://i.ytimg.com/vi/wmf0_pxCtxk/mqdefault.jpg",
+        width: 320,
+        height: 180,
+      },
+      high: {
+        url: "https://i.ytimg.com/vi/wmf0_pxCtxk/hqdefault.jpg",
+        width: 480,
+        height: 360,
+      },
+    },
+    channelTitle: "Sports Edge Cricket",
+    liveBroadcastContent: "none",
+    publishTime: "2022-11-18T09:37:09Z",
+  },
+};
+
+export default videoResult;

src/screens/HomeScreen.js

@@ -5,6 +5,7 @@ import GlobalContext from "../context/GlobalContext";
 
 const HomeScreen = () => {
   const { trendingVideos } = useContext(GlobalContext);
+
   return (
     <div>
       <div className="trending-title">Trending Videos</div>

src/screens/SearchResultsScreen.js

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+
+import GlobalContext from "../context/GlobalContext";
+import { VideoCardResults } from "../components";
+
+const SearchResultsScreen = () => {
+  const { searchResults } = useContext(GlobalContext);
+  return (
+    <div>
+      <div className="trending-title">Search Results</div>
+      {searchResults?.length > 0 ? (
+        searchResults.map((video, index) => {
+          return <VideoCardResults data={video} key={index} />;
+        })
+      ) : (
+        <div>Videos not found</div>
+      )}
+    </div>
+  );
+};
+
+export default SearchResultsScreen;

src/screens/index.js

@@ -1,3 +1,4 @@
 export { default as HomeScreen } from "./HomeScreen";
 export { default as VideoDetailsScreen } from "./VideoDetailsScreen";
+export { default as SearchResultsScreen } from "./SearchResultsScreen";
 export { default as ErrorScreen } from "./ErrorScreen";