Merge branch 'main' into improve-checkboxes

Alforoan · Jun 30, 2024 · 2b20c7a · 2b20c7a
2 parents f4c8cc4 + 7dd69a1
commit 2b20c7a
Show file tree

Hide file tree

Showing 17 changed files with 372 additions and 75 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,9 +5,12 @@ import Account from "./pages/Account";
 import Landing from "./pages/Landing";
 import Loading from "./components/Loading";
 import { useAuth0 } from "@auth0/auth0-react";
+import AdminDashboard from './pages/AdminDashboard';
+import { useAuth } from './context/AuthContext';
 
 function App() {
   const { isAuthenticated, isLoading } = useAuth0();
+  const {isAdmin} = useAuth();
 
   if (isLoading) {
     return <Loading />;
@@ -29,6 +32,10 @@ function App() {
           path="/account"
           element={isAuthenticated ? <Account /> : <Navigate to="/" />}
         />
+        <Route
+          path="/admin_dashboard"
+          element={isAdmin ? <AdminDashboard /> : <Navigate to="/" />}
+        />
         <Route
           path="/callback"
           element={isAuthenticated ? <Home /> : <Navigate to="/home" />}

diff --git a/client/src/components/CreateBoardComponent.tsx b/client/src/components/CreateBoardComponent.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Board } from "../types";
 import { v4 as uuidv4 } from "uuid";
 import { useBoard } from "../context/BoardContext";
+import ErrorMessage from "./ErrorMessage";
 
 interface CreateBoardComponentProps {
   handleCancel: () => void;
@@ -18,7 +19,7 @@ const CreateBoardComponent: React.FC<CreateBoardComponentProps> = ({
 }) => {
   const [newBoard, setNewBoard] = useState<Board>(emptyBoard);
   const [error, setError] = useState<string | null>(null);
-  const { handleAddNewBoard } = useBoard();
+  const { handleAddNewBoard, userBoards } = useBoard();
 
   useEffect(() => {
     setNewBoard((prevBoard) => ({
@@ -41,6 +42,12 @@ const CreateBoardComponent: React.FC<CreateBoardComponentProps> = ({
       return;
     }
 
+    // Check if the board name already exists locally
+    if (userBoards.some((board) => board.name === newBoard.name)) {
+      setError("Board name already exists. Please choose another.");
+      return;
+    }
+
     try {
       handleAddNewBoard(newBoard);
     } catch (err) {
@@ -77,7 +84,8 @@ const CreateBoardComponent: React.FC<CreateBoardComponentProps> = ({
           Cancel
         </button>
       </div>
-      {error && <p className="text-red-500 mt-2">{error}</p>}
+      {/* {error && <p className="text-red-500 mt-2">{error}</p>} */}
+      <ErrorMessage message={error} />
     </div>
   );
 };

diff --git a/client/src/components/EditBoardName.tsx b/client/src/components/EditBoardName.tsx
@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 import { useBoard } from "../context/BoardContext";
+import ErrorMessage from "./ErrorMessage";
 
 interface EditBoardNameProps {
   onSuccess?: (updatedName: string) => void; // callback for successful name updates
@@ -30,6 +31,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
     setIsEditing(false);
     setNewName(originalName); // Revert to the most recently saved board name in case of cancel
     updateTitleText();
+		setError(null);
   }, [originalName]);
 
   useEffect(() => {
@@ -54,9 +56,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       return;
     }
 
-    setIsLoading(true);
-    setError(null);
-    updateTitleText();
+
     try {
       const token = localStorage.getItem("jwt");
       const response = await axios.put(
@@ -79,6 +79,7 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       if (axios.isAxiosError(err)) {
         if (err.response?.status === 400) {
           setError("Board name already exists, please try another.");
+					return;
         } else {
           setError("Failed to update board name. Please try again later.");
         }
@@ -87,6 +88,9 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
       }
       setIsLoading(false);
     }
+		setIsLoading(true);
+    setError(null);
+    updateTitleText();
   };
 
   return (
@@ -99,35 +103,39 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({ onSuccess }) => {
           Edit
         </button>
       ) : (
-        <>
-          <input
-            type="text"
-            value={newName}
-            onChange={handleInputChange}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                handleSubmit();
-              }
-            }}
-            size={newName.length - 1}
-            className="text-3xl font-bold font-primary border rounded px-2"
-            maxLength={30}
-          />
-          <button
-            onClick={handleSubmit}
-            disabled={isLoading}
-            className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
-          >
-            Save
-          </button>
-          <button
-            onClick={handleCancel}
-            className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
-          >
-            Cancel
-          </button>
-          {error && <p className="text-red-500 mt-2">{error}</p>}
-        </>
+
+        <main className='flex-col'>
+					<div>
+						<input
+							type="text"
+							value={newName}
+							onChange={handleInputChange}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
+									handleSubmit();
+								}
+							}}
+							size={newName.length - 1}
+							className="text-3xl font-bold font-primary border rounded px-2"
+							maxLength={30}
+						/>
+						<button
+							onClick={handleSubmit}
+							disabled={isLoading}
+							className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
+						>
+							Save
+						</button>
+						<button
+							onClick={handleCancel}
+							className="ml-2 bg-secondaryElements font-primary text-primaryText px-4 py-2 rounded hover:text-primaryTextLighter"
+						>
+							Cancel
+						</button>
+					</div>
+          <ErrorMessage message={error} />
+        </main>
+
       )}
     </div>
   );

diff --git a/client/src/components/ErrorMessage.tsx b/client/src/components/ErrorMessage.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface ErrorMessageProps {
+  message: string | null;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
+  return message ? <p className="text-red-500 mt-2 text-center">{message}</p> : null;
+};
+
+export default ErrorMessage;
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -3,6 +3,7 @@ import { Transition } from "@headlessui/react";
 import { Link } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
 import Logo from "../assets/noun-study-logo2.png";
+import { useAuth } from '../context/AuthContext';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -88,6 +89,7 @@ const Navbar: React.FC = () => {
 
 const AuthButtonsLinks: React.FC = () => {
   const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
+  const { isAdmin } = useAuth();
 
   return (
     <>
@@ -120,13 +122,17 @@ const AuthButtonsLinks: React.FC = () => {
           >
             Account
           </Link>
+          {isAdmin ? <Link
+            to="/admin_dashboard"
+            className="font-primary text-primaryText hover:text-primaryTextLighter"
+          >
+            Admin Dashboard
+          </Link> : ''}
           <button
-            onClick={() =>
-              {
-                logout({ logoutParams: { returnTo: window.location.origin } })
-                localStorage.removeItem('jwt');
-              }
-            }
+            onClick={() => {
+              logout({ logoutParams: { returnTo: window.location.origin } });
+              localStorage.removeItem("jwt");
+            }}
             className="font-primary text-primaryText hover:text-primaryTextLighter"
           >
             Log out

diff --git a/client/src/context/AuthContext.tsx b/client/src/context/AuthContext.tsx
@@ -6,6 +6,7 @@ interface AuthContextType {
   token: string | null;
   isAuthenticated: boolean;
   setToken: React.Dispatch<React.SetStateAction<string | null>>;
+  isAdmin: boolean;
 }
 
 interface AuthProviderProps {
@@ -15,16 +16,16 @@ interface AuthProviderProps {
 export const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
-  const { isAuthenticated, user, getAccessTokenSilently } = useAuth0();
+  const { isAuthenticated, user } = useAuth0();
   const [token, setToken] = useState<string | null>(
     localStorage.getItem("jwt")
   );
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
 
   useEffect(() => {
     const getToken = async () => {
       try {
-        const token = await getAccessTokenSilently();
-        handleAuthentication(token);
+        handleAuthentication();
       } catch (error) {
         console.log("Error getting access token:", error);
       }
@@ -35,7 +36,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, [isAuthenticated]);
 
-  const handleAuthentication = async (token: string) => {
+  const handleAuthentication = async () => {
     if (isAuthenticated && user) {
 
       try {
@@ -45,18 +46,13 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           endpoint,
           {
             email: user.email,
-            token: token,
           },
-          {
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }
         );
-
+        console.log('response from signing in', response);
+
         try {
           localStorage.setItem("jwt", response.data.access_token);
-          console.log("Token set in localStorage:", response.data.access_token);
+          setIsAdmin(response?.data?.is_admin);
           setToken(response.data.access_token);
         } catch (localStorageError) {
           console.error(
@@ -72,7 +68,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   return (
     <AuthContext.Provider 
-    value={{ token, isAuthenticated, setToken }}
+    value={{ token, isAuthenticated, setToken, isAdmin }}
     >
       {children}
     </AuthContext.Provider>

diff --git a/client/src/context/BoardContext.tsx b/client/src/context/BoardContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useState, useContext, ReactNode } from "react";
-import { Board, Card, Columns } from "../types";
+import { createContext, useState, useContext, ReactNode } from "react";
+import { Board, Card } from "../types";
 import usePostNewBoard from "../hooks/usePostNewBoard";
 
 import usePostNewCard from "../hooks/usePostNewCard";
@@ -47,7 +47,7 @@ export const BoardProvider = ({ children }: { children: ReactNode }) => {
   const [tileText, setTitleText] = useState("Home");
   const [isAddingNewBoard, setIsAddingNewBoard] = useState(false);
   const { postNewCard } = usePostNewCard();
-  const { postNewBoard, error: postBoardError } = usePostNewBoard();
+  const { postNewBoard } = usePostNewBoard();
   const { editCard } = useEditCard();
   const { deleteCard } = useDeleteCard();
 

diff --git a/client/src/hooks/useGetCards.tsx b/client/src/hooks/useGetCards.tsx
@@ -40,7 +40,6 @@ const useGetCards = () => {
 
         return card;
       });
-      console.log("CARDS: ", { cards });
 
       return cards;
     } catch (err) {

diff --git a/client/src/hooks/useGetUserBoards.tsx b/client/src/hooks/useGetUserBoards.tsx
@@ -33,7 +33,34 @@ const useGetUserBoards = () => {
 		}
 	};
 
-	return { getUserBoards, isLoading, error };
+	const getAllBoards = async (): Promise<Board[]> => {
+    setIsNewBoard(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem("jwt");
+      const response = await axios.get(
+        `${import.meta.env.VITE_BACKEND_URL}/api/boards/admin`,
+        {
+          params: { email: user?.email ?? "something@wentwronghere.com" },
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+      setIsNewBoard(false);
+      const boards: Board[] = response.data.map((board: Board) => ({
+        ...board,
+        cards: [],
+      }));
+      return boards;
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err);
+        setIsNewBoard(false);
+      }
+      return [];
+    }
+  };
+
+  return { getUserBoards, getAllBoards, isLoading, error };
 };
 
 export default useGetUserBoards;
diff --git a/client/src/hooks/usePostNewBoard.tsx b/client/src/hooks/usePostNewBoard.tsx
@@ -8,7 +8,8 @@ const usePostNewBoard = () => {
 	const [error, setError] = useState<Error | null>(null);
 	const { user } = useAuth0();
 	const token = localStorage.getItem("jwt");
-
+	console.log("TOKEN FROM USEPOST NEW BOARD ", token);
+
 	const postNewBoard = async (board: Board) => {
 		setIsLoading(true);
 		setError(null);