diff --git a/package-lock.json b/package-lock.json index 4828981..6cd8487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,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" } }, @@ -15871,6 +15872,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/timeago.js": { + "version": "4.0.0-beta.3", + "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.0-beta.3.tgz", + "integrity": "sha512-98KoI4axalqyrlZMEavKfBBtJOJugHtpC1n/TPLx3edS0GFSUg9YkvtqFKAaOHjbaz5729b2U0MczMr39TM65A==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -28431,6 +28437,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "timeago.js": { + "version": "4.0.0-beta.3", + "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.0-beta.3.tgz", + "integrity": "sha512-98KoI4axalqyrlZMEavKfBBtJOJugHtpC1n/TPLx3edS0GFSUg9YkvtqFKAaOHjbaz5729b2U0MczMr39TM65A==" + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/package.json b/package.json index b16a051..c68ecce 100644 --- a/package.json +++ b/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": { diff --git a/src/App.css b/src/App.css index 01d3d39..507b738 100644 --- a/src/App.css +++ b/src/App.css @@ -131,6 +131,7 @@ input { .video-wrapper { flex-direction: row; + justify-content: center; } .play-image-icon { diff --git a/src/App.js b/src/App.js index 45eeb8e..f21e07f 100644 --- a/src/App.js +++ b/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() { />
- + } /> } /> + } + /> } /> diff --git a/src/apis/youtubeApi.js b/src/apis/youtubeApi.js index 896af42..11b5c30 100644 --- a/src/apis/youtubeApi.js +++ b/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, diff --git a/src/components/VideoCardResults.js b/src/components/VideoCardResults.js new file mode 100644 index 0000000..3e9ea5e --- /dev/null +++ b/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 ( +
+
+
+ {`${data.snippet.title} + + +
+
{data.snippet.title}
+
+
Uploader: {data.snippet.channelTitle}
+
{format(data.snippet.publishTime)}
+
+
+
+
+ ); +}; + +export default VideoCardResults; diff --git a/src/components/index.js b/src/components/index.js index 4478308..2793f11 100644 --- a/src/components/index.js +++ b/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"; diff --git a/src/data/videoResult.js b/src/data/videoResult.js new file mode 100644 index 0000000..1d26ee4 --- /dev/null +++ b/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; diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index 88ced49..4cea0b3 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -5,6 +5,7 @@ import GlobalContext from "../context/GlobalContext"; const HomeScreen = () => { const { trendingVideos } = useContext(GlobalContext); + return (
Trending Videos
diff --git a/src/screens/SearchResultsScreen.js b/src/screens/SearchResultsScreen.js new file mode 100644 index 0000000..36d01ff --- /dev/null +++ b/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 ( +
+
Search Results
+ {searchResults?.length > 0 ? ( + searchResults.map((video, index) => { + return ; + }) + ) : ( +
Videos not found
+ )} +
+ ); +}; + +export default SearchResultsScreen; diff --git a/src/screens/index.js b/src/screens/index.js index 802537e..7c50b0d 100644 --- a/src/screens/index.js +++ b/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";