From 7f8bedf45570294f72940d32739e6fa3dc04b4a9 Mon Sep 17 00:00:00 2001 From: Nick Nyanjui Date: Wed, 26 Apr 2023 16:24:15 +0000 Subject: [PATCH] update backend server data fetching and error handling with toast --- frontend/src/components/Comments.tsx | 43 ++++++++++++++++++- frontend/src/components/HomeLayout.tsx | 4 +- frontend/src/components/Sidebar.tsx | 14 +++---- frontend/src/components/Upload.tsx | 57 +++++++++----------------- 4 files changed, 68 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/Comments.tsx b/frontend/src/components/Comments.tsx index 583347a..54eb580 100644 --- 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>([]); const [comments, setComments] = useState>([]); const [currentUser, setUser] = useState({ _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 ( - + setNewComment(e.target.value)} + /> + {comments.map((comment) => ( diff --git a/frontend/src/components/HomeLayout.tsx b/frontend/src/components/HomeLayout.tsx index d1f5eca..3f0947d 100644 --- 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 = () => { <>
- !mode}/> + !mode}/> diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 9f4b32b..aa03930 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -130,7 +130,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = } BEST OF VideoTube @@ -139,7 +139,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = @@ -148,7 +148,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = @@ -157,7 +157,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = @@ -166,7 +166,7 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = @@ -203,10 +203,6 @@ const SideBar = ({ darkMode, setDarkMode }: { darkMode:any, setDarkMode:any }) = Help - {/* setDarkMode(!darkMode)}> - - {darkMode ? "Light" : "Dark"} Mode - */} ); diff --git a/frontend/src/components/Upload.tsx b/frontend/src/components/Upload.tsx index c1621c4..537654e 100644 --- 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 ( - {/* setOpen(false)}>X */} Upload a New Video {videoPerc > 0 ? (