Fix state management and bugs in pages

hanichris · Apr 27, 2023 · 2ea98b0 · 2ea98b0
1 parent cd330a0
commit 2ea98b0
Show file tree

Hide file tree

Showing 9 changed files with 248 additions and 43 deletions.
diff --git a/frontend/src/pages/history.page.tsx b/frontend/src/pages/history.page.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import VideoCard from "../components/VideoCard";
+import axios from "axios";
+import {IVideo} from "../utils/types"
+import SearchBar from "../components/SearchBar"
+import useStore from "../store";
+
+const Container = styled.div`
+  padding: 2em;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const HistoryPage = () => {
+  const store = useStore();
+  const user = store.authUser;
+  const [videos, setVideos] = useState([]);
+
+  useEffect(() => {
+    const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
+    const fetchVideos = async () => {
+      const res = await axios.get(`${SERVER_ENDPOINT}/users/${user?._id}/history`, {withCredentials: true});
+      setVideos(res.data);
+    };
+    fetchVideos();
+  }, []);
+
+  return (
+    <>
+      <SearchBar />
+      <Container>
+        {videos.map((video: IVideo) => (
+          <VideoCard key={video._id} type={null} video={video}/>
+        ))}
+      </Container>
+    </>
+  );
+};
+
+export default HistoryPage;
diff --git a/frontend/src/pages/login.page.tsx b/frontend/src/pages/login.page.tsx
@@ -80,9 +80,9 @@ const LoginPage = () => {
   } = methods;
 
   useEffect(() => {
-    if (isSubmitSuccessful) {
-      reset();
-    }
+    // if (isSubmitSuccessful) {
+    //   reset();
+    // }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSubmitSuccessful]);
 

diff --git a/frontend/src/pages/profile.page.tsx b/frontend/src/pages/profile.page.tsx
@@ -2,7 +2,18 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import useStore from "../store";
-import { IUser } from "../utils/types";
+import { IUser, IChannel } from "../utils/types";
+import styled from 'styled-components';
+
+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;
 
@@ -26,6 +37,7 @@ const ProfilePage = () => {
       store.setRequestLoading(false);
 
       store.setAuthUser(user);
+      store.setCurrentChannel(user.channels[0] as unknown as IChannel);
     } catch (error: any) {
       store.setRequestLoading(false);
       if (error.error) {
@@ -53,6 +65,52 @@ const ProfilePage = () => {
     }
   };
 
+  const createChannel = async (data: any) => {
+    try {
+      store.setRequestLoading(true);
+      const response = await fetch(
+        `${SERVER_ENDPOINT}/channels`,
+        {
+          method: "POST",
+          credentials: "include",
+          body: JSON.stringify(data),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (!response.ok) {
+        throw await response.json();
+      }
+
+      toast.success("Channel created successfully", {
+        position: "top-right",
+      });
+      store.setRequestLoading(false);
+      navigate("/profile");
+    } catch (error: any) {
+      store.setRequestLoading(false);
+      if (error.error) {
+        error.error.forEach((err: any) => {
+          toast.error(err.message, {
+            position: "top-right",
+          });
+        });
+        return;
+      }
+      const resMessage =
+        (error.response &&
+          error.response.data &&
+          error.response.data.message) ||
+        error.message ||
+        error.toString();
+
+      toast.error(resMessage, {
+        position: "top-right",
+      });
+    }
+  };
+
   useEffect(() => {
     fetchUser();
   }, []);
@@ -81,10 +139,16 @@ const ProfilePage = () => {
                 <p className="mb-3">ID: {user._id}</p>
                 <p className="mb-3">Username: {user.username}</p>
                 <p className="mb-3">Email: {user.email}</p>
-                <p className="mb-3">Subscriptions: {Array(user.subscriptions).length}</p>
+                <p className="mb-3">Subscriptions: {user.subscriptions.length}</p>
                 <p className="mb-3">Channels: {user.channels.length}</p>
+                <p className="mb-3">Default Channel: {user.channels.length > 0 ? (user.channels[0] as unknown as IUser)._id : ""}</p>
                 <p className="mb-3">Provider: {user.fromGoogle ? "Google" : "Default"}</p>
               </div>
+              <div>
+                {/* <Button onClick={createChannel}>
+                  Create channel
+                </Button> */}
+              </div>
             </div>
           )}
         </div>

diff --git a/frontend/src/pages/register.page.tsx b/frontend/src/pages/register.page.tsx
@@ -25,6 +25,8 @@ const registerUserModel = object({
 
 export type RegisterInput = TypeOf<typeof registerUserModel>;
 
+const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
+
 const RegisterPage = () => {
   const navigate = useNavigate();
   const store = useStore();
@@ -33,8 +35,6 @@ const RegisterPage = () => {
   const registerUser = async (data: RegisterInput) => {
     try {
       store.setRequestLoading(true);
-      const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
-      console.log(SERVER_ENDPOINT)
       const response = await fetch(
         `${SERVER_ENDPOINT}/auth/register`,
         {
@@ -90,9 +90,9 @@ const RegisterPage = () => {
   } = methods;
 
   useEffect(() => {
-    if (isSubmitSuccessful) {
-      reset();
-    }
+    // if (isSubmitSuccessful) {
+    //   reset();
+    // }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSubmitSuccessful]);
 

diff --git a/frontend/src/pages/resetPassword.page.tsx b/frontend/src/pages/resetPassword.page.tsx
@@ -31,11 +31,12 @@ const ResetPasswordPage = () => {
   const from = ((location.state as any)?.from.pathname as string) || "/profile";
 
   const resetUserPassword = async (data: resetPasswordInput) => {
+    console.log("here")
     try {
       store.setRequestLoading(true);
       const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
       const response = await fetch(`${SERVER_ENDPOINT}/auth/reset-password`, {
-        method: "POST",
+        method: "PUT",
         credentials: "include",
         body: JSON.stringify(data),
         headers: {
@@ -83,9 +84,9 @@ const ResetPasswordPage = () => {
   } = methods;
 
   useEffect(() => {
-    if (isSubmitSuccessful) {
-      reset();
-    }
+    // if (isSubmitSuccessful) {
+    //   reset();
+    // }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSubmitSuccessful]);
 
@@ -118,22 +119,22 @@ const ResetPasswordPage = () => {
                 placeholder="Create new password"
                 {...register("password")}
               />
-              {errors.email && (
+              {errors.password && (
                 <p className="text-red-700 text-sm mt-1">
-                  {errors.email?.message}
+                  {errors.password?.message}
                 </p>
               )}
             </div>
-			<div className="mb-6">
+            <div className="mb-6">
               <input
                 type="password"
                 className="form-control block w-full px-4 py-5 text-sm font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
-                placeholder="Re-enter the password"
-                {...register("password")}
+                placeholder="Confirm Password"
+                {...register("passwordConfirm")}
               />
-              {errors.email && (
+              {errors.passwordConfirm && (
                 <p className="text-red-700 text-sm mt-1">
-                  {errors.email?.message}
+                  {errors.passwordConfirm?.message}
                 </p>
               )}
             </div>

diff --git a/frontend/src/pages/search.page.tsx b/frontend/src/pages/search.page.tsx
@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import VideoCard from "../components/VideoCard";
 import { IVideo } from "../utils/types";
+import SearchBar from "../components/SearchBar"
 
 const Container = styled.div`
   display: flex;
@@ -12,24 +13,29 @@ const Container = styled.div`
 `;
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
-const SearchPage = ({type}: {type:string}) => {
+const SearchPage = () => {
   const [videos, setVideos] = useState<Array<IVideo>>([]);
   const query = useLocation().search;
+  const searchQuery = query.toString().includes("q") ? `search${query}` : `tags${query}`;
 
   useEffect(() => {
     const fetchVideos = async () => {
-      // const searchQuery = "search" in type ? `search${query}` : type;
-      const res = await axios.get(`${SERVER_ENDPOINT}/videos/${type}`);
+      const res = await axios.get(`${SERVER_ENDPOINT}/videos/${searchQuery}`);
       setVideos(res.data);
     };
     fetchVideos();
-  }, [type]);
+  }, [searchQuery]);
 
-  return <Container>
-    {videos.map(video=>(
-      <VideoCard key={video._id} type={null} video={video}/>
-    ))}
-  </Container>;
+  return (
+    <>
+      <SearchBar />
+      <Container>
+      {videos.map(video=>(
+        <VideoCard key={video._id} type={null} video={video}/>
+      ))}
+    </Container>
+    </>
+  )
 };
 
 export default SearchPage;
diff --git a/frontend/src/pages/subscriptions.page.tsx b/frontend/src/pages/subscriptions.page.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import ChannelCard from "../components/ChannelCard";
+import axios from "axios";
+import {IChannel} from "../utils/types"
+import SearchBar from "../components/SearchBar"
+import useStore from "../store";
+
+const Container = styled.div`
+  padding: 2em;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const SubscriptionsPage = () => {
+  const store = useStore();
+  const user = store.authUser;
+  const [channels, setChannels] = useState([]);
+
+  useEffect(() => {
+    const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
+    const fetchVideos = async () => {
+      const res = await axios.get(`${SERVER_ENDPOINT}/users/${user?._id}/subscriptions`, {withCredentials: true});
+      setChannels(res.data);
+    };
+    fetchVideos();
+  }, []);
+
+  return (
+    <>
+      <SearchBar />
+      <Container>
+        {channels.map((channel: IChannel) => (
+          <ChannelCard key={channel._id} channel={channel}/>
+        ))}
+      </Container>
+    </>
+  );
+};
+
+export default SubscriptionsPage;
diff --git a/frontend/src/pages/upload.page.tsx b/frontend/src/pages/upload.page.tsx
@@ -14,10 +14,13 @@ const Container = styled.div`
 `;
 
 const UploadPage = () => {
+  const store = useStore();
+  const channelId = store.currentChannel?._id || "";
+  console.log(channelId)
   return (
     <>
       <Container>
-        <Upload/>
+        <Upload channelId={channelId}/>
       </Container>
     </>
   );