added toast for signup

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-toastify": "^8.2.0",
     "uuid": "^8.3.2"
   },
   "scripts": {

src/components/videocard/VideoCard.js

@@ -10,13 +10,14 @@ import {
   removeFromWatchLater,
 } from "../../utils";
 import { usePlayList } from "../../contexts/PlayListProvider";
+import "react-toastify/dist/ReactToastify.css";
 
 export function VideoCard({ video }) {
   const [showModal, setShowModal] = useState(false);
   const { playListDispatch, playListState } = usePlayList();
   const _likedVideos = playListState.likedVideos;
   const watchLaterVideos = playListState.watchLaterVideos;
-
+ 
   const likedHandler = (videoId, _likedVideos) => {
     IsVideoAlreadyLiked(videoId, _likedVideos)
       ? RemoveFromLikedVideos(videoId, playListDispatch)
@@ -48,7 +49,9 @@ export function VideoCard({ video }) {
                   ? "fas fa-heart save-to-icon"
                   : "fa-regular fa-heart save-to-icon"
               }`}
-              onClick={() => likedHandler(video._id, _likedVideos)}
+              onClick={() => {
+                likedHandler(video._id, _likedVideos);
+              }}
             ></i>
             <i
               className="fa-regular fa-save save-to-icon"

src/contexts/VideoProvider.js

@@ -9,6 +9,7 @@ function VideoProvider({ children }) {
     videos: [],
     categories: [],
     selectedCategory: "All",
+    signup: false
   };
   useEffect(() => {
     (async () => {

src/pages/explore/Explore.js

@@ -1,16 +1,26 @@
-import React from "react";
+import { React, useEffect } from "react";
 import { SideBar, VideoCard } from "../../components";
 import "./explore.css";
 import { useVideo } from "../../contexts/VideoProvider";
 import { getVideosByCategory } from "../../utils";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 export function Explore() {
   const { videoState, videoDispatch } = useVideo();
   const videosData = videoState.videos;
   const videos = getVideosByCategory(videosData, videoState.selectedCategory);
   const categories = videoState.categories;
+  const signup = videoState.signup;
+  let notify = () =>
+    toast(signup ? "Sucessfully made an account." : "Please do signup!");
+  useEffect(() => {
+    notify();
+  }, [notify]);
+
   return (
     <div className="explore-page">
+      <ToastContainer />
       <SideBar />
       <div className="video-section">
         <div className="category-filter-list">

src/pages/login/Login.js

@@ -23,7 +23,7 @@ export function Login() {
       });
       playListDispatch({
         type: "INITIALIZE_PLAYLISTS",
-        payload: value.data.foundUser.playlists
+        payload: value.data.foundUser.playlists,
       });
       navigate("/");
     } catch (e) {

src/pages/signup/SignUp.js

@@ -4,6 +4,7 @@ import "../login/login.css";
 import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
 import { usePlayList } from "../../contexts";
+import { useVideo } from "../../contexts";
 
 export function SignUp() {
   const [userData, setUserData] = useState({
@@ -14,6 +15,7 @@ export function SignUp() {
     lastName: "",
   });
   let navigate = useNavigate();
+  const { videoState } = useVideo();
   const { playListDispatch } = usePlayList();
 
   const onHandleSubmit = async () => {
@@ -30,9 +32,9 @@ export function SignUp() {
       });
       playListDispatch({
         type: "INITIALIZE_PLAYLISTS",
-        payload: value.data.createdUser.playlists
+        payload: value.data.createdUser.playlists,
       });
-
+      videoState.signup = true;
       navigate("/");
     } catch (e) {
       console.log("error", e);