Merge pull request #5 from rutvikpumak/history

feat : added history functionality

src/App.css

@@ -71,7 +71,7 @@
     background: var(--container-color-dark);
 }
 
-.option-list div .fa {
+.fa {
     margin-right: 5px;
 }
 
@@ -89,6 +89,31 @@
     grid-gap: 3rem;
 }
 
+.message-container {
+    flex-direction: column;
+    height: calc(100vh - 144px);
+    gap: 1rem
+}
+
+.btn-start-watch {
+    background: var(--primary-color);
+}
+
+.btn-trash {
+    color: var(--danger-color)
+}
+
+.btn-clear {
+    padding: 5px 10px
+}
+
+.container-title-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
 @media screen and (max-width: 1450px) {
     .card {
         width: 20rem;
@@ -100,7 +125,7 @@
     .video-list-container {
         margin-left: 0rem;
         z-index: 2;
-        padding:2rem 1rem
+        padding: 2rem 1rem
     }
 
     .responsive-grid {
@@ -116,6 +141,10 @@
         width: 100%;
     }
 
+    .container-title {
+        width: 90%;
+    }
+
     .card {
         width: 18rem;
         cursor: default
@@ -135,4 +164,17 @@
     .responsive-grid {
         grid-gap: 3rem;
     }
+
+    .btn-clear {
+        padding: 0px 3px;
+        font-size: 15px;
+    }
+
+    .btn-clear .fa {
+        margin-right: 0;
+    }
+
+    .btn-clear span {
+        display: none;
+    }
 }

src/component/Sidebar/Sidebar.js

@@ -1,8 +1,10 @@
 import "./Sidebar.css";
 import React from "react";
-import { NavLink } from "react-router-dom";
-
+import { NavLink, useNavigate } from "react-router-dom";
+import { useAuth } from "../../context/auth/authContext";
 export function Sidebar() {
+  const { token } = useAuth();
+  const navigate = useNavigate();
   return (
     <div className="sidebar-container trans-off">
       <ul>
@@ -52,7 +54,7 @@ export function Sidebar() {
         </li>
         <li>
           <NavLink
-            to="/history"
+            to={token ? "/history" : "login"}
             className={({ isActive }) =>
               isActive ? "sidebar-option active" : "sidebar-option"
             }

src/context/data/videoContext.js

@@ -53,6 +53,7 @@ const DataProvider = ({ children }) => {
         sortBy: state.sortBy,
         dispatch: dispatch,
         search: state.search,
+        history: state.history,
       }}
     >
       {children}

src/index.css

@@ -14,6 +14,7 @@
     --container-color: #222230;
     --container-color-dark: #34343d;
     --primary-color:#d3931c;
+    --danger-color:#e76464;
     color: var(--font-color)
 }
 

src/pages/History/History.js

@@ -1,17 +1,52 @@
 import React from "react";
+import { useData } from "../../context/data/videoContext";
 import "./History.css";
+import { useNavigate } from "react-router-dom";
 import { HistoryCard } from "./HistoryCard";
+import { clearHistory } from "../../services";
+import { useAuth } from "../../context/auth/authContext";
 
 export function History() {
+  const { history, dispatch } = useData();
+  const { token } = useAuth();
+  const isHistoryFill = history.length > 0;
+  const navigate = useNavigate();
+
   return (
     <div className="video-list-container">
       <div className="container-title">
         <h3>History</h3>
-        <span>2 videos</span>
-      </div>
-      <div className="responsive-grid">
-        <HistoryCard />
+        {isHistoryFill && (
+          <div className="container-title-header">
+            <span>({history.length} videos) </span>
+            <button
+              className="btn danger btn-clear"
+              onClick={() => clearHistory(dispatch, token)}
+            >
+              <i className="fa fa-trash" aria-hidden="true" />
+              <span>Clear History</span>
+            </button>
+          </div>
+        )}
       </div>
+      {isHistoryFill ? (
+        <div>
+          <div className="responsive-grid">
+            {history.map((video) => (
+              <HistoryCard key={video.id} video={video} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="message-container flex-center">
+          <p className="paragraph-md">
+            Looks like you haven't watch anything yet.
+          </p>
+          <button className="btn btn-start-watch" onClick={() => navigate("/")}>
+            Start Watching Now
+          </button>
+        </div>
+      )}
     </div>
   );
 }

src/pages/Home/components/VideoCard.js

@@ -1,17 +1,29 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./VideoCard.css";
 import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../../../context/auth/authContext";
+import { useData } from "../../../context/data/videoContext";
+import { addToHistory } from "../../../services";
 
 export default function VideoCard({ video }) {
   const navigate = useNavigate();
+  const { token } = useAuth();
+  const { dispatch, history } = useData();
   const [showList, setShowList] = useState(false);
   const { _id, title, creator } = video;
+
+  const isInHistory = history.find((historyVideo) => historyVideo._id === _id);
+
+  const clickToVideoHandler = () => {
+    navigate(`/${_id}`);
+    token && !isInHistory && addToHistory(dispatch, video, token);
+  };
   return (
     <div className="card">
       <img
         className="card-img"
         src={`https://i.ytimg.com/vi/${_id}/0.jpg`}
-        onClick={() => navigate(`/${_id}`)}
+        onClick={() => clickToVideoHandler()}
       />
       <div className="card-info" title={title}>
         <div className="card-title">

src/reducer/videoReducer.js

@@ -5,17 +5,24 @@ export const initialState = {
   category: [],
   sortBy: "",
   search: "",
+  history: [],
 };
 
 export const videoReducer = (state, action) => {
   switch (action.type) {
     case ACTION_TYPE.INIT_VIDEOS:
-      return { ...state, videos: action.payload };
+      return {
+        ...state,
+        videos: action.payload,
+      };
     case ACTION_TYPE.INIT_CATEGORIES:
       return {
         ...state,
         category: [
-          ...action.payload.map((cat) => ({ ...cat, isActive: false })),
+          ...action.payload.map((cat) => ({
+            ...cat,
+            isActive: false,
+          })),
         ],
       };
     case ACTION_TYPE.SORT_BY:
@@ -24,10 +31,31 @@ export const videoReducer = (state, action) => {
         sortBy: action.payload,
         category: state.category.map((cat) =>
           cat.categoryName === action.payload
-            ? { ...cat, isActive: true }
-            : { ...cat, isActive: false }
+            ? {
+                ...cat,
+                isActive: true,
+              }
+            : {
+                ...cat,
+                isActive: false,
+              }
         ),
       };
+    case ACTION_TYPE.ADD_TO_HISTORY:
+      return {
+        ...state,
+        history: [...action.payload],
+      };
+    case ACTION_TYPE.REMOVE_FROM_HISTORY:
+      return {
+        ...state,
+        history: [...action.payload],
+      };
+    case ACTION_TYPE.CLEAR_HISTORY:
+      return {
+        ...state,
+        history: [...action.payload],
+      };
     case ACTION_TYPE.SEARCH:
       return {
         ...state,
@@ -36,6 +64,7 @@ export const videoReducer = (state, action) => {
     case ACTION_TYPE.LOG_OUT:
       return {
         ...state,
+        // history: [],
       };
   }
 };

src/services/history/historyService.js

@@ -0,0 +1,71 @@
+import axios from "axios";
+import { ACTION_TYPE } from "../../utils";
+
+export const addToHistory = (dispatch, video, token) => {
+  try {
+    (async () => {
+      const {
+        data: { history },
+      } = await axios.post(
+        "/api/user/history",
+        {
+          video,
+        },
+        {
+          headers: {
+            authorization: token,
+          },
+        }
+      );
+      history &&
+        dispatch({
+          type: ACTION_TYPE.ADD_TO_HISTORY,
+          payload: history,
+        });
+    })();
+  } catch (error) {
+    console.log("Error in add to history handler", error);
+  }
+};
+
+export const removeFromHistory = (dispatch, id, token) => {
+  try {
+    (async () => {
+      const {
+        data: { history },
+      } = await axios.delete(`/api/user/history/${id}`, {
+        headers: {
+          authorization: token,
+        },
+      });
+      history &&
+        dispatch({
+          type: ACTION_TYPE.REMOVE_FROM_HISTORY,
+          payload: history,
+        });
+    })();
+  } catch (error) {
+    console.log("Error in remove from history handler", error);
+  }
+};
+
+export const clearHistory = (dispatch, token) => {
+  try {
+    (async () => {
+      const {
+        data: { history },
+      } = await axios.delete("/api/user/history/all", {
+        headers: {
+          authorization: token,
+        },
+      });
+      history &&
+        dispatch({
+          type: ACTION_TYPE.CLEAR_HISTORY,
+          payload: history,
+        });
+    })();
+  } catch (error) {
+    console.log("Error in clear history handler", error);
+  }
+};

src/services/index.js

@@ -1,3 +1,8 @@
 export { sortVideos, searchVideos } from "./getSortVideos";
 export { loginService } from "./login/loginService";
 export { signUpService } from "./signUp/signUpService";
+export {
+  addToHistory,
+  removeFromHistory,
+  clearHistory,
+} from "./history/historyService";

src/utils/constant.js

@@ -5,4 +5,7 @@ export const ACTION_TYPE = {
   SORT_BY: "SORT_BY",
   SEARCH: "SEARCH",
   LOG_OUT: "LOG_OUT",
+  ADD_TO_HISTORY: "ADD_TO_HISTORY",
+  REMOVE_FROM_HISTORY: "REMOVE_FROM_HISTORY",
+  CLEAR_HISTORY: "CLEAR_HISTORY",
 };