update: header

Nayana62 · Jan 19, 2024 · aac9e5f · aac9e5f
1 parent 78fcda8
commit aac9e5f
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/CommentsContainer.js b/src/components/CommentsContainer.js
@@ -0,0 +1,14 @@
+import React from "react";
+import CommentsList from "./CommentsList";
+import commentsDummyData from "../constants/commentsDummyData";
+
+const CommentsContainer = () => {
+ return (
+ <div>
+ <h2 className=" font-bold text-lg mb-2">Comments:</h2>
+ <CommentsList comments={commentsDummyData} />
+ </div>
+ );
+};
+
+export default CommentsContainer;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -3,9 +3,7 @@ import Logo from "../assets/youtube_logo.jpg";
 import { useDispatch, useSelector } from "react-redux";
 import { cacheResults } from "../redux/cacheSlice";
 import { Link, useNavigate } from "react-router-dom";
-
-const searchSuggestionsAPI =
- process.env.REACT_APP_YOUTUBE_SEARCH_SUGGESTIONS_API;
+import { YOUTUBE_SEARCH_SUGGESTIONS_API } from "../constants/constants";
 
 const Header = ({ toggleMenu }) => {
  const navigate = useNavigate();
@@ -52,7 +50,7 @@ const Header = ({ toggleMenu }) => {
 
  const getSearchSuggestions = async () => {
  try {
- const data = await fetch(searchSuggestionsAPI + searchQuery);
+ const data = await fetch(YOUTUBE_SEARCH_SUGGESTIONS_API + searchQuery);
  const json = await data.json();
  setSuggestions(json[1]);
 

diff --git a/src/components/SearchResultsContainer.js b/src/components/SearchResultsContainer.js
@@ -0,0 +1,39 @@
+import moment from "moment";
+import React from "react";
+import { Link } from "react-router-dom";
+import Channel from "./Channel";
+
+const SearchResultsContainer = ({ video }) => {
+ return (
+ <Link
+ to={"/watch?v=" + video?.id?.videoId}
+ key={video.id.videoId || video.id.channelId || video.id.playlistId}
+ >
+ {video?.id?.kind !== "youtube#playlist" && (
+ <div className="flex flex-col sm:flex-row gap-2 relative">
+ <img
+ src={video?.snippet?.thumbnails?.medium?.url}
+ alt="thumbnail"
+ className={` mb-5 ${
+ video?.id?.kind === "youtube#channel"
+ ? "rounded-full w-full sm:w-2/12 h-[12rem] mx-[5rem]"
+ : "rounded-xl w-full sm:w-4/12 h-[12rem]"
+ }`}
+ />
+ <div className="w-full sm:w-8/12">
+ <h2 className=" text-lg">{video?.snippet?.title}</h2>
+ <p className=" text-[14px] text-[#606060] ml-1">
+ {moment(video?.snippet?.publishedAt).fromNow()}
+ </p>
+ <div className=" my-4">
+ <Channel channelId={video?.snippet?.channelId} />
+ </div>
+ <p className=" text-xs my-4">{video?.snippet?.description}</p>
+ </div>
+ </div>
+ )}
+ </Link>
+ );
+};
+
+export default SearchResultsContainer;
diff --git a/src/constants/commentsDummyData.js b/src/constants/commentsDummyData.js
@@ -1,35 +1,41 @@
 const commentsDummyData = [
  {
- username: "@user1",
+ id: 1,
+ username: "@john123",
  comment: "Great video!",
  likes: 3,
  replies: [
  {
- username: "@user11",
+ id: 11,
+ username: "@jane456",
  comment: "Thanks! I enjoyed it too.",
  likes: 2,
  replies: [
  {
- username: "@user111",
+ id: 111,
+ username: "@steve789",
  comment: "The content was amazing!",
  likes: 1,
  replies: [
  {
- username: "@user1111",
+ id: 1111,
+ username: "@alice012",
  comment: "I agree! The presenter was fantastic.",
  likes: 3,
  replies: [],
  },
  {
- username: "@user1112",
+ id: 1112,
+ username: "@bob345",
  comment: "Looking forward to more videos like this.",
  likes: 2,
  replies: [],
  },
  ],
  },
  {
- username: "@user12",
+ id: 12,
+ username: "@kate678",
  comment: "Keep up the good work!",
  likes: 1,
  replies: [],
@@ -39,50 +45,58 @@ const commentsDummyData = [
  ],
  },
  {
- username: "@user2",
+ id: 2,
+ username: "@david890",
  comment: "Interesting topic!",
  likes: 5,
  replies: [
  {
- username: "@user21",
+ id: 21,
+ username: "@emily123",
  comment: "I learned a lot from this video.",
  likes: 4,
  replies: [
  {
- username: "@user211",
+ id: 211,
+ username: "@oliver456",
  comment: "Me too! The explanations were clear.",
  likes: 2,
  replies: [],
  },
  {
- username: "@user212",
+ id: 212,
+ username: "@sophia789",
  comment: "The visuals helped a lot in understanding.",
  likes: 3,
  replies: [],
  },
  ],
  },
  {
- username: "@user22",
+ id: 22,
+ username: "@charlotte012",
  comment: "Can you cover more advanced topics?",
  likes: 7,
  replies: [],
  },
  ],
  },
  {
- username: "@user3",
+ id: 3,
+ username: "@ben345",
  comment: "I enjoyed every minute of it!",
  likes: 8,
  replies: [
  {
- username: "@user31",
+ id: 31,
+ username: "@emma678",
  comment: "The examples were really helpful.",
  likes: 5,
  replies: [],
  },
  {
- username: "@user32",
+ id: 32,
+ username: "@liam890",
  comment: "Great job explaining complex concepts.",
  likes: 6,
  replies: [],

diff --git a/src/pages/SearchResults.js b/src/pages/SearchResults.js
@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
 import SearchButtons from "../components/SearchButtons";
 import { getSearchResults } from "../fetchData/getSearchResults";
-import { Link, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { useSelector } from "react-redux";
-import moment from "moment";
-import Channel from "../components/Channel";
 import ErrorPage from "../components/ErrorPage";
+import SearchResultsContainer from "../components/SearchResultsContainer";
 
 const SearchResults = () => {
  const { isMenuOpen } = useSelector((store) => store.app);
@@ -34,44 +33,7 @@ const SearchResults = () => {
  {searchResults.length !== 0 && (
  <div className="m-auto max-w-6xl px-10">
  {searchResults.map((video) => {
- return (
- <Link
- to={"/watch?v=" + video?.id?.videoId}
- key={
- video.id.videoId ||
- video.id.channelId ||
- video.id.playlistId
- }
- >
- {video?.id?.kind !== "youtube#playlist" && (
- <div className="flex flex-col sm:flex-row gap-2 relative">
- <img
- src={video?.snippet?.thumbnails?.medium?.url}
- alt="thumbnail"
- className={` mb-5 ${
- video?.id?.kind === "youtube#channel"
- ? "rounded-full w-full sm:w-2/12 h-[12rem] mx-[5rem]"
- : "rounded-xl w-full sm:w-4/12 h-[12rem]"
- }`}
- />
- <div className="w-full sm:w-8/12">
- <h2 className=" text-lg">
- {video?.snippet?.title}
- </h2>
- <p className=" text-[14px] text-[#606060] ml-1">
- {moment(video?.snippet?.publishedAt).fromNow()}
- </p>
- <div className=" my-4">
- <Channel channelId={video?.snippet?.channelId} />
- </div>
- <p className=" text-xs my-4">
- {video?.snippet?.description}
- </p>
- </div>
- </div>
- )}
- </Link>
- );
+ return <SearchResultsContainer video={video} />;
  })}
  </div>
  )}

diff --git a/src/pages/WatchVideo.js b/src/pages/WatchVideo.js
@@ -7,10 +7,9 @@ import SuggestedVideos from "../components/SuggestedVideos";
 import ButtonsList from "../components/ButtonsList";
 import { getVideo } from "../fetchData/getVideo";
 import Channel from "../components/Channel";
-import CommentsList from "../components/CommentsList";
-import commentsDummyData from "../constants/commentsDummyData";
 import LiveChat from "../components/LiveChat";
 import ErrorPage from "../components/ErrorPage";
+import CommentsContainer from "../components/CommentsContainer";
 
 const WatchVideo = () => {
  const dispatch = useDispatch();
@@ -33,12 +32,6 @@ const WatchVideo = () => {
  // eslint-disable-next-line
  }, []);
 
- // if (videosList.length !== 0) {
- // var suggestedVideos = videosList.filter((videos) => videos.id !== videoId);
- // }
-
- console.log("videosList", videosList);
-
  return (
  <>
  {videosList.error ? (
@@ -70,8 +63,7 @@ const WatchVideo = () => {
  </div>
  </>
  )}
- <h2 className=" font-bold text-lg mb-2">Comments:</h2>
- <CommentsList comments={commentsDummyData} />
+ <CommentsContainer />
  </div>
  </div>
  <div className="hidden w-4/12 lg:block">