update backend server data fetching and error handling with toast

hanichris · Apr 26, 2023 · 7f8bedf · 7f8bedf
1 parent 7824f4e
commit 7f8bedf
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 50 deletions.
diff --git a/frontend/src/components/Comments.tsx b/frontend/src/components/Comments.tsx
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Comment from './Comment';
 import { IChannel, IUser, IVideo, IComment } from "../utils/types";
+import { useNavigate } from "react-router-dom";
+
 const Container = styled.div``;
 
 const NewComment = styled.div`
@@ -27,10 +29,21 @@ const Input = styled.input`
   padding: 5px;
   width: 100%;
 `;
+const Button = styled.button`
+  border-radius: 3px;
+  border: 1px;
+  padding: 10px 20px;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #cc1a00;
+  color: white;
+`;
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
 
 const Comments = ( {videoId}: {videoId: string} ) => {
+  const navigate = useNavigate();
+  const [newcomment, setNewComment] = useState<Array<IComment>>([]);
   const [comments, setComments] = useState<Array<IComment>>([]);
   const [currentUser, setUser] = useState<IUser>({
     _id: "",
@@ -57,13 +70,39 @@ const Comments = ( {videoId}: {videoId: string} ) => {
     fetchComments();
   }, [videoId]);
 
-  // TODO: ADD NEW COMMENT FUNCTIONALITY
+  const handleAddComment = async () => {
+    try {
+      await axios.post(`${SERVER_ENDPOINT}/comments/${currentVideo?._id}`, {newcomment});
+    } catch (error: any) {
+      console.log(error?.message)
+      const resMessage =
+        (error.response &&
+          error.response.data &&
+          error.response.data.message) ||
+        error.message ||
+        error.toString();
+
+      if (error?.message === "You are not logged in") {
+        navigate("/login");
+      }
+
+      toast.error(resMessage, {
+        position: "top-right",
+      });
+    }
+  };
 
   return (
     <Container>
       <NewComment>
         <Avatar src={currentUser.avatar} />
-        <Input placeholder="Add a comment..." />
+        <Input 
+          placeholder="Add a comment..."
+          onChange={(e) => setNewComment(e.target.value)}
+        />
+        <Button onClick={handleAddComment}>
+          Send
+        </Button>
       </NewComment>
       {comments.map((comment) => (
         <Comment key={comment._id} comment={comment}/>

diff --git a/frontend/src/components/HomeLayout.tsx b/frontend/src/components/HomeLayout.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import Header from "./Header";
-import Sidebar from "./SideBar";
+import SideBar from "./Sidebar";
 import styled from "styled-components";
 
 const SideContainer = styled.aside`
@@ -18,7 +18,7 @@ const HomeLayout = () => {
     <>
       <Header />
       <SideContainer>
-        <Sidebar darkMode={"Light"} setDarkMode={(mode) => !mode}/>
+        <SideBar darkMode={"Light"} setDarkMode={(mode: any) => !mode}/>
       </SideContainer>
       <MainContainer>
         <Outlet/>

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -130,7 +130,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
         }
         <Title>BEST OF VideoTube</Title>
         <Link
-          to="tags?q=music"
+          to="/videos/tags?q=music"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -139,7 +139,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="tags?q=sports"
+          to="/videos/tags?q=sports"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -148,7 +148,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="tags?q=gaming"
+          to="/videos/tags?q=gaming"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -157,7 +157,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="tags?q=movies"
+          to="/videos/tags?q=movies"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -166,7 +166,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           </Item>
         </Link>
         <Link
-          to="tags?q=news"
+          to="/videos/tags?q=news"
           style={{ textDecoration: "none", color: "inherit" }}
         >
           <Item>
@@ -203,10 +203,6 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) =
           Help
           </Item>
         </Link>
-        {/* <Item onClick={() => setDarkMode(!darkMode)}>
-          <SettingsBrightnessOutlinedIcon />
-          {darkMode ? "Light" : "Dark"} Mode
-        </Item> */}
       </Wrapper>
     </Container>
   );

diff --git a/frontend/src/components/Upload.tsx b/frontend/src/components/Upload.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import axios from "axios";
 import { useNavigate } from "react-router-dom";
-
+import useStore from "../store";
 
 const Container = styled.div`
   width: 100%;
@@ -62,7 +62,7 @@ const Label = styled.label`
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
 
-const Upload = () => {
+const Upload = (channelId: string) => {
   const [img, setImg] = useState(undefined);
   const [video, setVideo] = useState(undefined);
   const [imgPerc, setImgPerc] = useState(0);
@@ -71,6 +71,8 @@ const Upload = () => {
   const [tags, setTags] = useState([]);
 
   const navigate = useNavigate()
+  const store = useStore();
+  const channel = store.currentChannel;
 
   const handleChange = (e: any) => {
     setInputs((prev) => {
@@ -83,37 +85,6 @@ const Upload = () => {
   };
 
   const uploadFile = (file: File, urlType: string) => {
-    // const storage = getStorage(app);
-    // const fileName = new Date().getTime() + file.name;
-    // const storageRef = ref(storage, fileName);
-    // const uploadTask = uploadBytesResumable(storageRef, file);
-
-    // uploadTask.on(
-    //   "state_changed",
-    //   (snapshot: any) => {
-    //     const progress =
-    //       (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-    //     urlType === "imgUrl" ? setImgPerc(Math.round(progress)) : setVideoPerc(Math.round(progress));
-    //     switch (snapshot.state) {
-    //       case "paused":
-    //         console.log("Upload is paused");
-    //         break;
-    //       case "running":
-    //         console.log("Upload is running");
-    //         break;
-    //       default:
-    //         break;
-    //     }
-    //   },
-    //   (error: any) => {console.log(error)},
-    //   () => {
-    //     getDownloadURL(uploadTask.snapshot.ref).then((downloadURL: any) => {
-    //       setInputs((prev) => {
-    //         return { ...prev, [urlType]: downloadURL };
-    //       });
-    //     });
-    //   }
-    // );
   };
 
   useEffect(() => {
@@ -126,15 +97,27 @@ const Upload = () => {
 
   const handleUpload = async (e: any)=>{
     e.preventDefault();
-    const res = await axios.post(`${SERVER_ENDPOINT}/channels/${channelId}/upload`, {...inputs, tags})
-    // setOpen(false)
-    res.status===200 && navigate(`${SERVER_ENDPOINT}/videos/${res.data._id}`)
+    try {
+      const res =  await axios.post(`${SERVER_ENDPOINT}/channels/${channel._id}/upload`, {...inputs, tags})
+    } catch (error: any) {
+      console.log(error?.message)
+      const resMessage =
+        (error.response &&
+          error.response.data &&
+          error.response.data.message) ||
+        error.message ||
+        error.toString();
+
+      toast.error(resMessage, {
+        position: "top-right",
+      });
+    }
+    res.status===200 && navigate(`/videos/${res.data._id}`)
   }
 
   return (
     <Container>
       <Wrapper>
-        {/* <Close onClick={() => setOpen(false)}>X</Close> */}
         <Title>Upload a New Video</Title>
         <Label>Video:</Label>
         {videoPerc > 0 ? (