add error pages and start of admin pages to view suggestions

Author: brandonnorsworthy

src/App.tsx

@@ -3,10 +3,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from '@/components/Toaster';
 
 import LandingPage from './pages/LandingPage';
-import DeveloperPage from './pages/DeveloperPage';
+import AdminPage from './pages/admin/AdminPage';
 import LoginPage from './pages/LoginPage';
+import NotfoundPage from './pages/NotfoundPage';
+import UnauthorizedPage from './pages/UnauthorizedPage';
 
 import './App.css';
+import Background from './components/Background';
 
 const queryClient = new QueryClient()
 
@@ -19,11 +22,19 @@ function App() {
           {/* public routes */}
           <Route path="/" element={<LandingPage />} />
           <Route path="/login" element={<LoginPage />} />
+          <Route path="/unauthorized" element={<UnauthorizedPage />} />
 
-          {/* protected routes */}
-          <Route path="/dev" element={<DeveloperPage />} />
+          {/* admin routes */}
+          <Route path="/admin" element={<AdminPage />} />
+          <Route path="/admin/suggestions" element={<div>Admin Suggestions</div>} />
+          <Route path="/admin/quests" element={<div>Admin Quests</div>} />
+          <Route path="/admin/users" element={<div>Admin Users</div>} />
+
+          {/* user routes */}
+          <Route path="*" element={<NotfoundPage />} />
         </Routes>
       </Router>
+      <Background />
     </QueryClientProvider>
   )
 }

src/hocs/WithAuth/WithAuth.tsx

@@ -1,29 +1,37 @@
 import React, { useEffect, useState, ComponentType } from "react";
 import { useNavigate } from "react-router-dom";
 
-const withAuth = <P extends object>(WrappedComponent: ComponentType<P>) => {
+const withAuth = <P extends object>(WrappedComponent: ComponentType<P>, requiredRole?: "admin") => {
   const ComponentWithAuth: React.FC<P> = (props) => {
     const navigate = useNavigate();
     const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+    const [userRole, setUserRole] = useState<string | null>(null);
 
     useEffect(() => {
       const token = localStorage.getItem("token");
+      const role = localStorage.getItem("role"); // Assuming the role is stored in local storage
       if (!token) {
         navigate("/login");
         return;
       }
 
       setIsAuthenticated(true);
+      setUserRole(role);
     }, [navigate]);
 
     if (!isAuthenticated) {
       return null;
     }
 
+    if (requiredRole && userRole !== requiredRole) {
+      navigate("/unauthorized");
+      return null;
+    }
+
     return <WrappedComponent {...props} />;
   };
 
   return ComponentWithAuth;
 };
 
-export default withAuth;
+export default withAuth;

src/hocs/WithAuth/index.ts

@@ -1,3 +1,3 @@
-import withAuth from './WithAuth';
+import withAuth from './withAuth';
 
 export default withAuth;

src/pages/LandingPage.tsx

@@ -5,7 +5,6 @@ import MenuSpacer from "../components/MenuSpacer"
 
 import logoImg from '../assets/placeholder-logo.png'
 import useAuth from "@/hooks/useAuth";
-import Background from "@/components/Background";
 import questService from "@/service/questService";
 import { Quest } from "@/models/QuestModels/questResponse";
 import { useEffect, useState } from "react";
@@ -89,13 +88,13 @@ const LandingPage = () => {
           <MenuButton text="NEWS" onClick={undefined} />
           <MenuButton text="completed quests" onClick={undefined} />
           <MenuButton text="SUGGESTIONS" onClick={() => setIsSuggestionsOpen(true)} />
-          {
-            user && user.role === "admin" &&
-            <MenuButton text="DEVELOPER" onClick={() => navigate("/dev")} />
-          }
           <MenuSpacer />
 
           <MenuButton text="SETTINGS" onClick={undefined} />
+          {
+            user && user.role === "admin" &&
+            <MenuButton text="ADMIN" onClick={() => navigate("/admin")} />
+          }
           <MenuSpacer />
 
           {
@@ -131,12 +130,10 @@ const LandingPage = () => {
 
       {
         isSuggestionsOpen &&
-        <SuggestionsPanel 
+        <SuggestionsPanel
           onClose={() => setIsSuggestionsOpen(false)}
         />
       }
-
-      <Background />
     </main>
   );
 }

src/pages/LoginPage.tsx

@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
 import LoginPanel from "@/components/LoginPanel";
-import Background from "@/components/Background";
 
 const LoginPage: React.FC = () => {
   const navigate = useNavigate();
@@ -12,8 +11,6 @@ const LoginPage: React.FC = () => {
         onLoginSuccess={() => navigate("/")}
         onRegistrationSuccess={() => navigate("/")}
       />
-
-      <Background />
     </main>
   );
 }

src/pages/NotfoundPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Button from "@/components/Button";
+import { useNavigate } from "react-router-dom";
+
+const NotfoundPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="flex flex-col p-4 rounded-md bg-secondary text-text">
+        <h2 className="text-2xl font-bold">Error: 404</h2>
+        <span className="py-2">Looks like you got lost</span>
+        <Button type="confirm" text="back to base" onClick={() => navigate("/")} />
+      </div>
+    </div>
+  );
+}
+
+export default NotfoundPage;

src/pages/UnauthorizedPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Button from "@/components/Button";
+import { useNavigate } from "react-router-dom";
+
+const NotfoundPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="flex flex-col p-4 rounded-md bg-secondary text-text">
+        <h2 className="text-2xl font-bold">Error: 429</h2>
+        <span className="py-2">Hey, stay out of places your shouldn't be</span>
+        <Button type="confirm" text="I concede" onClick={() => navigate("/")} />
+      </div>
+    </div>
+  );
+}
+
+export default NotfoundPage;

src/pages/DeveloperPage.tsx src/pages/admin/AdminPage.tsx

@@ -7,14 +7,13 @@ import useAuth from "@/hooks/useAuth";
 import MenuButton from "@/components/MenuButton"
 import MenuSpacer from "@/components/MenuSpacer"
 import QuestModal from "@/components/QuestModal";
-import withAuth from "@/hocs/WithAuth";
 
 import logoImg from '@/assets/placeholder-logo.png'
-import Background from "@/components/Background";
 import { Dialog, DialogContent } from "@radix-ui/react-dialog";
 import Button from "@/components/Button";
+import withAuth from "@/hocs/withAuth";
 
-const DeveloperPage = () => {
+const AdminPage = () => {
   const navigate = useNavigate();
   const { accessToken } = useAuth();
   const [currentQuest, setCurrentQuest] = useState<Quest | null>(null);
@@ -34,9 +33,12 @@ const DeveloperPage = () => {
 
         <div className="flex flex-col items-start mt-20">
           <MenuButton text="RANDOM QUEST" onClick={handleGetRandomQuest} />
+          <MenuButton text="TEST MODAL" onClick={() => setIsQuestModalOpen(true)} />
           <MenuSpacer />
 
-          <MenuButton text="TEST MODAL" onClick={() => setIsQuestModalOpen(true)} />
+          <MenuButton text="view suggestions" onClick={() => navigate("/admin/suggestions")} />
+          <MenuButton text="view quests" onClick={() => navigate("/admin/quests")} />
+          <MenuButton text="view users" onClick={() => navigate("/admin/users")} />
           <MenuSpacer />
 
           <MenuButton text="back" onClick={() => navigate("/")} />
@@ -50,7 +52,7 @@ const DeveloperPage = () => {
             className="bg-slate-100"
           >
             <p>
-            {JSON.stringify(currentQuest)}
+              {JSON.stringify(currentQuest)}
             </p>
             <Button type="confirm" text="close" onClick={() => setCurrentQuest(null)} />
           </DialogContent>
@@ -73,12 +75,10 @@ const DeveloperPage = () => {
           "Escape with the loot"
         ]}
       />
-
-      <Background />
     </main>
   );
 }
 
-const AuthenticatedDeveloperPage = withAuth(DeveloperPage);
+const AuthenticatedAdminPage = withAuth(AdminPage, "admin");
 
-export default AuthenticatedDeveloperPage;
+export default AuthenticatedAdminPage;