Update components structure, backend api data fetching and fix bugs w…

…ith making requests without token
hanichris · Apr 27, 2023 · cd330a0 · cd330a0
1 parent 6855965
commit cd330a0
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 59 deletions.
diff --git a/frontend/src/components/ChannelCard.tsx b/frontend/src/components/ChannelCard.tsx
@@ -0,0 +1,108 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import {format} from "timeago.js";
+import { IVideo, IChannel } from "../utils/types"
+
+const Container = styled.div`
+  width: ${(props: any) => props.type !== "sm" && "360px"};
+  margin-bottom: ${(props: any) => (props.type === "sm" ? "10px" : "45px")};
+  cursor: pointer;
+  display: ${(props: any) => props.type === "sm" && "flex"};
+  gap: 10px;
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: ${(props: any) => (props.type === "sm" ? "120px" : "202px")};
+  background-color: #999;
+  flex: 1;
+`;
+
+const Details = styled.div`
+  display: flex;
+  margin-top: ${(props: any) => props.type !== "sm" && "16px"};
+  gap: 12px;
+  flex: 1;
+`;
+
+const ChannelImage = styled.img`
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background-color: #999;
+  display: ${(props: any) => props.type === "sm" && "none"};
+`;
+
+const Texts = styled.div``;
+
+const Title = styled.h1`
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: capitalize;
+  color: ${({ theme }) => theme.text};
+`;
+
+const ChannelName = styled.h2`
+  font-size: 14px;
+  color: ${({ theme }) => theme.textSoft};
+  margin: 9px 0px;
+`;
+
+const Info = styled.div`
+  font-size: 14px;
+  color: ${({ theme }) => theme.textSoft};
+`;
+
+const ChannelCard = ({ channel }: { channel:IChannel}) => {
+  // const [channel, setChannel] = useState<IChannel>({
+  //   _id: "",
+  //   name: "",
+  //   description: "",
+  //   imgUrl: "",
+  //   views: 0,
+  //   tags: [],
+  //   likes: [],
+  //   dislikes: [],
+  //   videos: [],
+  //   subscribers: 0,
+  //   isPublic: false,
+  // });
+  const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
+  // useEffect(() => {
+  //   const fetchChannel = async () => {
+  //     const res = await axios.get(`${SERVER_ENDPOINT}/channels/${channel.channelId}/view`);
+  //     setChannel(res.data);
+  //   };
+  //   fetchChannel();
+  // }, [channel.userId]);
+
+  return (
+    <Link to={`/channels/${channel._id}`} style={{ textDecoration: "none" }}>
+      <Container
+        // type={type}
+        >
+        <Image
+          // type={type}
+          src={channel.imgUrl}
+        />
+        <Details 
+        // type={type}
+        >
+          <ChannelImage
+            // type={type}
+            src={channel.imgUrl}
+          />
+          <Texts>
+            <Title>{channel.name}</Title>
+            <ChannelName>{channel.name}</ChannelName>
+            <Info>{channel.views} views • {format(channel.createdAt)}</Info>
+          </Texts>
+        </Details>
+      </Container>
+    </Link>
+  );
+};
+
+export default ChannelCard;
diff --git a/frontend/src/components/Comment.tsx b/frontend/src/components/Comment.tsx
@@ -2,6 +2,8 @@ import axios from "axios";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { IChannel, IComment } from "../utils/types";
+import {format} from "timeago.js";
+import useStore from "../store";
 
 const Container = styled.div`
   display: flex;
@@ -38,38 +40,39 @@ const Text = styled.span`
 `;
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
-const Comment = ({ comment }: {comment: IComment}) => {
-  const [channel, setChannel] = useState<IChannel>({
-    _id: "",
-    name: "",
-    description: "",
-    imgUrl: "",
-    views: 0,
-    tags: [],
-    likes: [],
-    dislikes: [],
-    videos: [],
-    subscribers: 0,
-    isPublic: false,
-  });
+const Comment = ({ videoId, comment }: {videoId: string, comment: IComment}) => {
+  const store = useStore();
+  const user = store.authUser;
+  // const [channel, setChannel] = useState<IChannel>({
+  //   _id: "",
+  //   name: "",
+  //   description: "",
+  //   imgUrl: "",
+  //   views: 0,
+  //   tags: [],
+  //   likes: [],
+  //   dislikes: [],
+  //   videos: [],
+  //   subscribers: 0,
+  //   isPublic: false,
+  //   createdAt: ""
+  // });
 
   useEffect(() => {
-    if (comment.userId) {
       const fetchComment = async () => {
-        const videoRes = await axios.get(`${SERVER_ENDPOINT}/videos/${comment.videoId}`);
-        // const channelRes = await axios.get(`${SERVER_ENDPOINT}/channels/${videoRes.data.channelId}`);
-        // setChannel(channelRes.data)
+        const videoRes = await axios.get(`${SERVER_ENDPOINT}/videos/${videoId}`);
+        // const userRes = await axios.get(`${SERVER_ENDPOINT}/users/${videoRes.data.userId}`);
+        // setChannel(userRes.data)
       };
       fetchComment();
-    }
-  }, [comment.userId]);
+  }, [videoId]);
 
   return (
     <Container>
-      <Avatar src={channel.imgUrl} />
+      <Avatar src={user?.avatar} />
       <Details>
         <Name>
-          {channel.name} <Date>1 day ago</Date>
+          {user?.username} • {format(comment.createdAt)}
         </Name>
         <Text>{comment.description}</Text>
       </Details>

diff --git a/frontend/src/components/Comments.tsx b/frontend/src/components/Comments.tsx
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import Comment from './Comment';
 import { IChannel, IUser, IVideo, IComment } from "../utils/types";
 import { useNavigate } from "react-router-dom";
+import useStore from "../store";
+import { toast } from "react-toastify";
 
 const Container = styled.div``;
 
@@ -43,18 +45,20 @@ const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
 
 const Comments = ( {videoId}: {videoId: string} ) => {
   const navigate = useNavigate();
-  const [newcomment, setNewComment] = useState<Array<IComment>>([]);
+  const store = useStore();
+  const [newcomment, setNewComment] = useState<string>();
   const [comments, setComments] = useState<Array<IComment>>([]);
-  const [currentUser, setUser] = useState<IUser>({
-    _id: "",
-  username: "",
-  email: "",
-  avatar: "",
-  subscriptions: [],
-  history: [],
-  channels: [],
-  fromGoogle: false,
-  });
+  // const [currentUser, setUser] = useState<IUser>({
+  //   _id: "",
+  // username: "",
+  // email: "",
+  // avatar: "",
+  // subscriptions: [],
+  // history: [],
+  // channels: [],
+  // fromGoogle: false,
+  // });
+  const currentUser = store.authUser;
 
   useEffect(() => {
     const fetchComments = async () => {
@@ -72,7 +76,11 @@ const Comments = ( {videoId}: {videoId: string} ) => {
 
   const handleAddComment = async () => {
     try {
-      await axios.post(`${SERVER_ENDPOINT}/comments/${currentVideo?._id}`, {newcomment});
+      await axios.post(`${SERVER_ENDPOINT}/comments/${videoId}`, 
+      {description: newcomment},
+      {
+        withCredentials: true,
+      });
     } catch (error: any) {
       console.log(error?.message)
       const resMessage =
@@ -95,17 +103,17 @@ const Comments = ( {videoId}: {videoId: string} ) => {
   return (
     <Container>
       <NewComment>
-        <Avatar src={currentUser.avatar} />
+        <Avatar src={currentUser?.avatar} />
         <Input 
           placeholder="Add a comment..."
           onChange={(e) => setNewComment(e.target.value)}
         />
         <Button onClick={handleAddComment}>
-          Send
+          Add
         </Button>
       </NewComment>
       {comments.map((comment) => (
-        <Comment key={comment._id} comment={comment}/>
+        <Comment key={comment._id} videoId={videoId} comment={comment}/>
       ))}
     </Container>
   );

diff --git a/frontend/src/components/HomeLayout.tsx b/frontend/src/components/HomeLayout.tsx
@@ -5,12 +5,12 @@ import styled from "styled-components";
 
 const SideContainer = styled.aside`
   float:left;
-  width:25%;
+  width:20%;
 `;
 
 const MainContainer = styled.div`
   float:right;
-  width: 75%;
+  width: 80%;
 `;
 
 const HomeLayout = () => {

diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
 import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
-import VideoCallOutlinedIcon from "@mui/icons-material/VideoCallOutlined";
 import { Link, useNavigate } from "react-router-dom";
 
 

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -85,7 +85,8 @@ const Title = styled.h2`
 
 const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) => {
   const store = useStore();
-  const currentUser = null;
+  const currentUser = store.authUser;
+
   return (
     <Container>
       <Wrapper>
@@ -130,7 +131,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
         }
         <Title>BEST OF VideoTube</Title>
         <Link
-          to="/videos/tags?q=music"
+          to="/videos/search?tags=music"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -139,7 +140,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="/videos/tags?q=sports"
+          to="/videos/search?tags=sports"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -148,7 +149,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="/videos/tags?q=gaming"
+          to="/videos/search?tags=gaming"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -157,7 +158,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="/videos/tags?q=movies"
+          to="/videos/search?tags=movies"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -166,14 +167,23 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="/videos/tags?q=news"
+          to="/videos/search?tags=news"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
           <ArticleOutlinedIcon />
           News
           </Item>
         </Link>
+        <Link
+          to="/videos/search?tags=tutorials"
+          style={{ textDecoration: "none", color: "inherit" }}
+        >
+          <Item>
+          <VideoLibraryOutlinedIcon />
+          Tutorials
+          </Item>
+        </Link>
 
         <Hr />
         <Link