feature/commentVoting

src/components/CommentContainer.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
+import useGetVotes from "../hooks/useGetVotes"
 import { useParams } from "react-router-dom";
 import { useForm } from "@tanstack/react-form";
 import getIso from "../utils/tokenTools/getIso";
-import useGetVotes from "../hooks/useGetVotes";
-import VoteContainer from "./VoteContainer";
+import CommentVoteContainer from "./CommentVoteContainer"
 import { TComment } from "../types";
 import ReplyContainer from "./ReplyContainer";
 import CommentIcon from "../assets/CommentIcon";
@@ -13,14 +13,15 @@ const CommentContainer = (props: any) => {
   const baseURL = import.meta.env.VITE_BASEURL;
   const params = useParams();
   const voteURL = baseURL + "/comment/uuid/" + props.Uuid;
+  const { data, isLoading, isFetching, isError } = useGetVotes(
+    baseURL + "/comment/votes"
+  );
 
   // State
   const [replyTextareaShow, setReplyTextareaShow] = useState<boolean>(false);
   const [replyButtonShow, setReplyButtonShow] = useState<boolean>(false);
   const [replyButtonText, setReplyButtonText] = useState<string>("Add Reply");
 
-  useGetVotes(baseURL + "/content/votes");
-
   // ----- Reply Start ----- //
   const form = useForm({
     defaultValues: {
@@ -98,7 +99,13 @@ const CommentContainer = (props: any) => {
           {/* Horizontal Vote Container */}
           <div className="flex gap-2">
             <div className="flex w-max p-2 justify-evenly rounded-md text-sm hover:bg-gray-200">
-              <VoteContainer {...props} voteURL={voteURL} />
+            {isLoading || isFetching ? (
+            "..."
+          ) : isError ? (
+            "Error"
+          ) : (
+            <CommentVoteContainer {...props} voteData={data} voteURL={voteURL} />
+          )}
               {/* Comment Container */}
               <button
                 className="flex w-max p-2 justify-evenly rounded-md text-sm hover:bg-gray-200"

src/components/CommentVoteContainer.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { TContent } from '../types';
+import useUpvote from '../hooks/useUpvote';
+import UpvoteIcon from '../assets/UpvoteIcon';
+import DownvoteIcon from '../assets/DownvoteIcon';
+
+const VoteContainer = ({
+  Upvote,
+  Downvote,
+  Uuid,
+  voteData,
+  voteURL,
+}: TContent & { voteURL: string; voteData: any }) => {
+  const [votingState, setVotingState] = useState({
+    upvoteState: false,
+    downvoteState: false,
+    upvoteCount: Upvote,
+    downvoteCount: Downvote,
+    upvoteIconDisplay: '',
+    downvoteIconDisplay: '',
+    upvoteIconFill: 'rgba(0, 0, 0, 1)',
+    downvoteIconFill: 'rgba(0, 0, 0, 1)',
+    upvoteIconStroke: 'none',
+    downvoteIconStroke: 'none',
+  });
+
+  const markVotes = (arr: any) => {
+    arr.forEach((item: any) => {
+      if (item.Upvotes.includes(Uuid)) {
+        setVotingState((prev) => ({
+          ...prev,
+          upvoteState: true,
+          upvoteIconFill: 'rgba(251,191,36,1)',
+          upvoteIconStroke: 'rgba(0, 0, 0, 1)',
+          downvoteIconDisplay: 'hidden ',
+        }));
+      }
+      if (item.Downvotes.includes(Uuid)) {
+        setVotingState((prev) => ({
+          ...prev,
+          downvoteState: true,
+          downvoteIconFill: 'rgba(251,191,36,1)',
+          downvoteIconStroke: 'rgba(0, 0, 0, 1)',
+          upvoteIconDisplay: 'hidden ',
+        }));
+      }
+    });
+  };
+
+  useEffect(() => {
+    markVotes(voteData);
+  }, [voteData]);
+
+  const upvoteClickHandler = (voteURL: string) => {
+    if (votingState.upvoteState === false) {
+      useUpvote(voteURL + '/add-upvote');
+    }
+    if (votingState.upvoteState === true) {
+      useUpvote(voteURL + '/remove-upvote');
+    }
+    setVotingState((prevState) => {
+      const newUpvoteState = !prevState.upvoteState;
+      const newUpvoteCount = newUpvoteState
+        ? prevState.upvoteCount + 1
+        : prevState.upvoteCount - 1;
+
+      return {
+        ...prevState,
+        upvoteState: newUpvoteState,
+        upvoteCount: newUpvoteCount,
+        upvoteIconFill: newUpvoteState
+          ? 'rgba(251,191,36,1)'
+          : 'rgba(0, 0, 0, 1)',
+        upvoteIconStroke: newUpvoteState ? 'rgba(0, 0, 0, 1)' : 'none',
+        downvoteIconDisplay: newUpvoteState ? 'hidden ' : '',
+      };
+    });
+  };
+  const downvoteClickHandler = (voteURL: string) => {
+    if (votingState.downvoteState === false) {
+      useUpvote(voteURL + '/add-downvote');
+    }
+    if (votingState.downvoteState === true) {
+      useUpvote(voteURL + '/remove-downvote');
+    }
+    setVotingState((prevState) => {
+      const newDownvoteState = !prevState.downvoteState;
+      const newDownvoteCount = newDownvoteState
+        ? prevState.downvoteCount + 1
+        : prevState.downvoteCount - 1;
+
+      return {
+        ...prevState,
+        downvoteState: newDownvoteState,
+        downvoteCount: newDownvoteCount,
+        downvoteIconFill: newDownvoteState
+          ? 'rgba(251,191,36,1)'
+          : 'rgba(0, 0, 0, 1)',
+        downvoteIconStroke: newDownvoteState ? 'rgba(0, 0, 0, 1)' : 'none',
+        upvoteIconDisplay: newDownvoteState ? 'hidden ' : '',
+      };
+    });
+  };
+
+  return (
+    <>
+      <button
+        className={votingState.upvoteIconDisplay + 'block hover:cursor-pointer'}
+        onClick={() => upvoteClickHandler(voteURL)}
+      >
+        <UpvoteIcon
+          fill={votingState.upvoteIconFill}
+          stroke={votingState.upvoteIconStroke}
+        />
+      </button>
+      <p className={votingState.upvoteIconDisplay + 'p-2'}>
+        {votingState.upvoteCount}
+      </p>
+      <button
+        className={
+          votingState.downvoteIconDisplay + 'block hover:cursor-pointer'
+        }
+        onClick={() => downvoteClickHandler(voteURL)}
+      >
+        <DownvoteIcon
+          fill={votingState.downvoteIconFill}
+          stroke={votingState.downvoteIconStroke}
+        />
+      </button>
+      <p className={votingState.downvoteIconDisplay + 'p-2'}>
+        {votingState.downvoteCount}
+      </p>
+    </>
+  );
+};
+
+export default VoteContainer;

src/components/ContentContentContainer.tsx

@@ -2,7 +2,7 @@ import getIso from "../utils/tokenTools/getIso";
 import useGetVotes from "../hooks/useGetVotes";
 import { Link } from "react-router-dom";
 import { TContent } from "../types";
-import VoteContainer from "./VoteContainer";
+import VoteContainer from "./ContentVoteContainer";
 import CommentIcon from "../assets/CommentIcon";
 
 const ContentContentContainer = (props: TContent) => {
@@ -11,8 +11,6 @@ const ContentContentContainer = (props: TContent) => {
   const { data, isLoading, isFetching, isError } = useGetVotes(
     baseURL + "/content/votes"
   );
-  console.log(data);
-  console.log(props);
   return (
     <div
       className="p-3 mx-auto my-2 max-w-xl bg-gray-300 xs:rounded-none sm:rounded-md"

src/components/VoteContainer.tsx → src/components/ContentVoteContainer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect} from "react";
 import { TContent } from "../types";
 import useUpvote from "../hooks/useUpvote";
 import UpvoteIcon from "../assets/UpvoteIcon";
@@ -11,6 +11,7 @@ const VoteContainer = ({
   voteData,
   voteURL,
 }: TContent & { voteURL: string; voteData: any }) => {
+
   const [votingState, setVotingState] = useState({
     upvoteState: false,
     downvoteState: false,
@@ -43,6 +44,15 @@ const VoteContainer = ({
         upvoteIconDisplay: "hidden ",
       }));
     }
+    if (voteData?.ContentUuid && voteData.ContentUuid.Upvotes.includes(Uuid)) {
+      setVotingState((prev) => ({
+        ...prev,
+        upvoteState: true,
+        upvoteIconFill: "rgba(251,191,36,1)",
+        upvoteIconStroke: "rgba(0, 0, 0, 1)",
+        downvoteIconDisplay: "hidden ",
+      }));
+    }
   };
 
   useEffect(() => {

src/components/HiveContentContainer.tsx

@@ -3,7 +3,7 @@ import getIso from "../utils/tokenTools/getIso";
 import useGetVotes from "../hooks/useGetVotes";
 import { TContent } from "../types";
 import CommentIcon from "../assets/CommentIcon";
-import VoteContainer from "./VoteContainer";
+import VoteContainer from "./ContentVoteContainer";
 
 const HiveContentContainer = ({ item }: { item: TContent }) => {
   const baseURL = import.meta.env.VITE_BASEURL;

src/components/LoginForm.tsx

@@ -1,17 +1,25 @@
-import { useForm } from "@tanstack/react-form";
-import { useState } from "react";
+import { useState, useContext} from "react";
 import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
+import { useForm } from "@tanstack/react-form";
+import { TSession } from "../types";
 import validateEmail from "../utils/formValidation/validateEmail";
 import setStorage from "../utils/setStorage";
+import SessionContext from "../context/SessionProvider";
 
 type LoginCredentials = {
   email: string;
   password: string;
 };
 
 const LoginForm: React.FC = () => {
+  const context = useContext(SessionContext);
+  if (context === undefined) {
+    throw new Error("Context is undefined");
+  }
+  const { setSession } = context
   const [buttonText, setButtonText] = useState<string>("Submit");
+
   const baseURL = import.meta.env.VITE_BASEURL;
   const navigate = useNavigate();
 
@@ -45,8 +53,16 @@ const LoginForm: React.FC = () => {
       }
       const results = await response.json();
       setStorage(results.Token, results.RefreshToken);
-      navigate("/");
-      location.reload();
+      setSession((prev: TSession) => ({
+        ...prev, 
+        accessToken: localStorage.getItem("accessToken"),
+        refreshToken: localStorage.getItem('refreshToken'),
+        username: localStorage.getItem("username"),
+        accountUUID: localStorage.getItem("accountUUID"),
+        accessTokenExpiry: localStorage.getItem('accessTokenExpiry'),
+        refreshTokenExpiry: localStorage.getItem('refreshTokenExpiry'),
+      }));
+      navigate('/')
     } catch (error) {
       console.error("Login Failed", error);
     }

src/components/Navbar.tsx

@@ -1,8 +1,15 @@
+import { useContext } from "react";
 import { Link } from "react-router-dom";
+import SessionContext from "../context/SessionProvider";
 import CreateDropdown from "./CreateDropdown";
 import UserDropdown from "./UserDropdown";
 
 const Navbar = () => {
+  const context = useContext(SessionContext);
+  if (context === undefined) {
+    throw new Error("Context is undefined");
+  }
+  const { session } = context
   return (
     <nav className="bg-black text-white">
       <ul className="flex justify-between">
@@ -11,10 +18,10 @@ const Navbar = () => {
         </li>
         <div className="flex">
           <li className="p-2">
-            {localStorage.accessToken ? <CreateDropdown /> : null}
+            {session.accessToken ? <CreateDropdown /> : null}
           </li>
           <li className="p-2">
-            {localStorage.accessToken ? <UserDropdown /> : null}
+            {session.accessToken ? <UserDropdown /> : null}
           </li>
         </div>
       </ul>

src/hooks/useGetVotes.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import getNewAccessToken from "../utils/tokenTools/getNewAccessToken";
 import validateToken from "../utils/tokenTools/validateToken";
 
-const useGetVotes = (url: string) => {
+const useGetContentVotes = (url: string) => {
   /*
   This function calls the validateToken helper function.  The validateToken helper function returns an object with two properties - accessTokenExpired and refreshTokenExpired.  Both properties are booleans.
   If the access token is expired, a new token will be fetched from the server before the getData call.  
@@ -33,8 +33,8 @@ const useGetVotes = (url: string) => {
       throw new Error(`${response.status}: Failed to fetch`);
     }
     const data = await response.json();
-    localStorage.setItem("Upvotes", data.Upvotes);
-    localStorage.setItem("Downvotes", data.Downvotes);
+    localStorage.setItem("contentUpvotes", data.Upvotes);
+    localStorage.setItem("contentDownvotes", data.Downvotes);
     return data;
   };
 
@@ -46,4 +46,4 @@ const useGetVotes = (url: string) => {
   return { data, error, refetch, isLoading, isError, isFetching };
 };
 
-export default useGetVotes;
+export default useGetContentVotes;

src/pages/Home.tsx

@@ -1,18 +1,17 @@
-import useGET from "../hooks/useGET";
-import HomeContentContainer from "../components/HomeContentContainer";
-import { TContent } from "../types";
+import useGET from '../hooks/useGET';
+import HomeContentContainer from '../components/HomeContentContainer';
+import { TContent } from '../types';
 
 const Home = () => {
   const baseURL = import.meta.env.VITE_BASEURL;
 
-
   const { data, error, isLoading, isFetching, isError } = useGET(
-    baseURL + "/hive",
+    baseURL + '/hive'
   );
 
   return (
     <>
-        <div className="text-center text-3xl p-8 w-full bg-yellow-400">
+      <div className="text-center text-3xl p-8 w-full bg-yellow-400">
         Select a Hive
       </div>
       {isLoading ? (

src/routes/PrivateRoutes.tsx

@@ -1,9 +1,16 @@
 import { Navigate, Outlet } from 'react-router-dom'
+import { useContext } from 'react'
+import SessionContext from '../context/SessionProvider'
 
 const PrivateRoutes = () => {
+  const context = useContext(SessionContext);
+  if (context === undefined) {
+    throw new Error("Context is undefined");
+  }
+  const { session } = context
 
 return (
-    localStorage.getItem("accessToken") ? <Outlet/> : <Navigate to='/login'/>
+    session.accessToken ? <Outlet/> : <Navigate to='/login'/>
   )
 }