Merge pull request #82 from brandonnorsworthy/updates

Updates
brandonnorsworthy · Sep 21, 2024 · d1accf4 · d1accf4
2 parents e285847 + b2d980d
commit d1accf4
Show file tree

Hide file tree

Showing 15 changed files with 557 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,23 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <meta property="og:title" content="Rust Quests">
+  <meta name="description" content="Randomly generate things to do for the game Rust! If you find yourself sitting around your base this is the place for you!" />
+  <meta property="og:type" content="article">
+  <meta property="og:url" content="https://rustquests.com">
+  <meta property="og:image" content="https://placehold.co/1200x630">
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta name="twitter:site" content="Rust Quests">
+  <meta name="twitter:title" content="Random Quest Generator">
+  <meta name="twitter:description" content="Randomly generate things to do for the game Rust! If you find yourself sitting around your base this is the place for you!">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image:src" content="https://placehold.co/1200x630">
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5847064233473326"
     crossorigin="anonymous"></script>
   <title>Rust Quests</title>
-  <meta name="description" content="Randomly generate things to do for the game Rust! If you find yourself sitting around your base this is the place for you!" />
 </head>
 
 <body>

diff --git a/public/assets/text/news.md b/public/assets/text/news.md
@@ -17,4 +17,10 @@ __^^ let us know if this is a feature you'd like to see! ^^__
 # Other
 
 ## About
-This website was created by discord user **zcog** hope you enjoy it!
+This website was created by discord user **zcog** hope you enjoy it!
+
+## Credits
+Thanks to the following people for their contributions:
+- **notacoconut** (developer)
+- **Gilbert** (moderator)
+- **wall2wall3** (feedback)
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,6 +16,9 @@ import UsernameBubble from './components/UsernameBubble';
 import AuthenticatedAdminUsersPage from './pages/admin/AdminUsersPage';
 import AuthenticatedAdminQuestsPage from './pages/admin/AdminQuestsPage';
 import LeaderboardPage from './pages/Leaderboard';
+import AuthenticatedModeratorPage from './pages/moderator/ModeratorPage';
+import AuthenticatedModeratorSuggestionsPage from './pages/moderator/ModeratorSuggestionsPage';
+import AuthenticatedModeratorQuestsPage from './pages/moderator/ModeratorQuestsPage';
 
 const queryClient = new QueryClient()
 
@@ -36,6 +39,11 @@ function App() {
           {/* authorized routes */}
           {/* <Route path="/all-quests" element={<CompletedQuestsPage />} /> */}
 
+          {/* moderator routes */}
+          <Route path="/moderator" element={<AuthenticatedModeratorPage />} />
+          <Route path="/moderator/suggestions" element={<AuthenticatedModeratorSuggestionsPage />} />
+          <Route path="/moderator/quests" element={<AuthenticatedModeratorQuestsPage />} />
+
           {/* admin routes */}
           <Route path="/admin" element={<AuthenticatedAdminPage />} />
           <Route path="/admin/suggestions" element={<AuthenticatedAdminSuggestionsPage />} />

diff --git a/src/components/UsernameBubble/UsernameBubble.tsx b/src/components/UsernameBubble/UsernameBubble.tsx
@@ -14,7 +14,7 @@ const UsernameBubble: React.FC<UsernameBubbleProps> = ({ user }) => {
         <span className="font-bold">Hello, {user.username}</span>
         {
           (user.role === "admin" || user.role === "moderator") &&
-          <span className="font-bold text-red-500"> [{user.role}]</span>
+          <span className={`font-bold ${user.role === "admin" ? "text-red-500" : user.role === "moderator" ? "text-blue-500"  : ""}`}> [{user.role}]</span>
         }
       </p>
     </div>

diff --git a/src/hocs/withAuth.tsx b/src/hocs/withAuth.tsx
@@ -1,8 +1,8 @@
-import { UserToken } from "@/models/AuthModels/userToken";
+import { role, UserToken } from "@/models/AuthModels/userToken";
 import React, { useEffect, useState, ComponentType } from "react";
 import { useNavigate } from "react-router-dom";
 
-const withAuth = <P extends object>(WrappedComponent: ComponentType<P>, requiredRole?: "admin") => {
+const withAuth = <P extends object>(WrappedComponent: ComponentType<P>, requiredRole?: role) => {
   const ComponentWithAuth: React.FC<P> = (props) => {
     const navigate = useNavigate();
     const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
@@ -23,7 +23,7 @@ const withAuth = <P extends object>(WrappedComponent: ComponentType<P>, required
       return null;
     }
 
-    if (requiredRole && user.role !== requiredRole) {
+    if (user.role !== "admin" && user.role !== requiredRole) {
       navigate("/unauthorized");
       return null;
     }

diff --git a/src/modals/EditQuest/EditQuest.tsx b/src/modals/EditQuest/EditQuest.tsx
@@ -7,7 +7,7 @@ import { DEFAULT_IMG_URL } from '@/constants';
 
 interface ModalProps {
   onClose: () => void;
-  onDeleteQuest: () => void;
+  onDeleteQuest?: () => void;
   onEditQuest: (newQuest: EditQuestRequest) => void;
   quest: Quest;
   categories: Category[];
@@ -153,12 +153,15 @@ const EditQuest: React.FC<ModalProps> = (props) => {
               onClick={onClose}>
               close
             </Button>
-            <Button
-              type='cancel'
-              onClick={onDeleteQuest}
-            >
-              delete
-            </Button>
+            {
+              onDeleteQuest &&
+              <Button
+                type='cancel'
+                onClick={onDeleteQuest}
+              >
+                delete
+              </Button>
+            }
           </div>
           <div className="flex flex-col w-full gap-2 mt-2 sm:w-fit sm:mt-0 sm:flex-row sm:justify-end">
             <Button

diff --git a/src/modals/EditSuggestions/EditSuggestions.tsx b/src/modals/EditSuggestions/EditSuggestions.tsx
@@ -7,10 +7,11 @@ import { DEFAULT_IMG_URL } from '@/constants';
 
 interface ModalProps {
   onClose: () => void;
-  onDeleteSuggestion: () => void;
+  onDeleteSuggestion?: () => void;
   onCreateQuest: (newQuest: convertSuggestionIntoQuestBodyRequest) => void;
   suggestion: Suggestion;
   categories: Category[];
+  viewOnly?: boolean;
 }
 
 const EditSuggestion: React.FC<ModalProps> = (props) => {
@@ -19,7 +20,8 @@ const EditSuggestion: React.FC<ModalProps> = (props) => {
     onDeleteSuggestion,
     onCreateQuest,
     suggestion,
-    categories
+    categories,
+    viewOnly = false
   } = props;
 
   const [previewQuest, setPreviewQuest] = useState(true);
@@ -152,23 +154,29 @@ const EditSuggestion: React.FC<ModalProps> = (props) => {
               onClick={onClose}>
               close
             </Button>
-            <Button
-              type='cancel'
-              onClick={onDeleteSuggestion}
-            >
-              delete
-            </Button>
+            {
+              onDeleteSuggestion &&
+              <Button
+                type='cancel'
+                disabled={viewOnly}
+                onClick={onDeleteSuggestion}
+              >
+                delete
+              </Button>
+            }
           </div>
           <div className="flex flex-col w-full gap-2 mt-2 sm:w-fit sm:mt-0 sm:flex-row sm:justify-end">
             <Button
               type="info"
+              disabled={viewOnly}
               onClick={() => setPreviewQuest(prev => !prev)}>
               {previewQuest ? 'edit' : 'preview'}
             </Button>
             {
               onCreateQuest &&
               <Button
                 type="confirm"
+                disabled={viewOnly}
                 onClick={() => onCreateQuest({
                   title,
                   description,

diff --git a/src/models/AuthModels/userToken.ts b/src/models/AuthModels/userToken.ts
@@ -3,7 +3,9 @@ import metadata from '../UserModels/metadata';
 export interface UserToken {
   userId: number;
   username: string;
-  role: "user" | "admin" | "moderator" | "guest";
+  role: role;
   iat: number;
-  metadata?: metadata
-}
+  metadata?: metadata;
+}
+
+export type role = "user" | "admin" | "moderator" | "guest";
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
@@ -223,7 +223,15 @@ const LandingPage = () => {
             }}
           />
           {
-            user && user.role === "admin" &&
+            user && (user.role === "admin" || user.role === "moderator") &&
+            <MenuButton
+              text="MODERATOR"
+              disabled={disableButtons}
+              onClick={() => navigate("/moderator")}
+            />
+          }
+          {
+            user && (user.role === "admin") &&
             <MenuButton
               text="ADMIN"
               disabled={disableButtons}

diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx
@@ -14,13 +14,9 @@ const AdminPage = () => {
         <img src={logoImg} alt="logo" className="h-36 md:h-32" />
 
         <div className="flex flex-col items-start mt-20">
-          <MenuButton text="edit suggestions" onClick={() => navigate("/admin/suggestions")} />
-          <MenuSpacer />
-
-          <MenuButton text="edit quests" onClick={() => navigate("/admin/quests")} />
-          <MenuSpacer />
-
-          <MenuButton text="edit users" onClick={() => navigate("/admin/users")} />
+          <MenuButton text="suggestions" onClick={() => navigate("/admin/suggestions")} />
+          <MenuButton text="quests" onClick={() => navigate("/admin/quests")} />
+          <MenuButton text="users" onClick={() => navigate("/admin/users")} />
           <MenuSpacer />
 
           <MenuButton text="back" onClick={() => navigate("/")} />

diff --git a/src/pages/admin/AdminQuestsPage.tsx b/src/pages/admin/AdminQuestsPage.tsx
@@ -85,17 +85,20 @@ const AdminQuestsPage = () => {
     if (!selectedQuest || !accessToken) return;
 
     const onConfirm = async () => {
-      await questService.deleteQuest(accessToken, selectedQuest.id)
-      fetchQuests();
+      try {
+        await questService.deleteQuest(accessToken, selectedQuest.id)
+        fetchQuests();
+      } catch (error) {
+        toast.error("Failed to delete quest", error);
+      } finally {
+        setConfirmDialog(null);
+      }
     };
 
     setConfirmDialog({
       title: "Are you sure?",
       description: "If you delete this suggestion, you will lose all changes.",
-      onConfirm: async () => {
-        await onConfirm();
-        setConfirmDialog(null);
-      }
+      onConfirm: onConfirm,
     });
   };
 
@@ -120,16 +123,15 @@ const AdminQuestsPage = () => {
           return toast.error(error.response?.data.message, error);
         }
         toast.error("Failed to update quest", error);
+      } finally {
+        setConfirmDialog(null);
       }
     }
 
     setConfirmDialog({
       title: "Are you sure?",
       description: "Overwrite the current quest with the new data",
-      onConfirm: async () => {
-        await editQuest();
-        setConfirmDialog(null);
-      }
+      onConfirm: editQuest,
     });
   };
 

diff --git a/src/pages/moderator/ModeratorPage.tsx b/src/pages/moderator/ModeratorPage.tsx
@@ -0,0 +1,30 @@
+import { useNavigate } from "react-router-dom";
+
+import MenuButton from "@/components/MenuButton"
+import MenuSpacer from "@/components/MenuSpacer"
+
+import logoImg from '@/assets/placeholder-logo.png'
+import withAuth from "@/hocs/withAuth";
+
+const ModeratorPage = () => {
+  const navigate = useNavigate();
+  return (
+    <main className="flex justify-center overflow-hidden h-dvh w-dvw">
+      <div className="flex flex-col xl:max-w-[86rem] items-start mt-1 w-full ml-2 text-5xl sm:mt-10 sm:ml-10 text-white/50">
+        <img src={logoImg} alt="logo" className="h-36 md:h-32" />
+
+        <div className="flex flex-col items-start mt-20">
+          <MenuButton text="suggestions" onClick={() => navigate("/moderator/suggestions")} />
+          <MenuButton text="quests" onClick={() => navigate("/moderator/quests")} />
+          <MenuSpacer />
+
+          <MenuButton text="back" onClick={() => navigate("/")} />
+        </div>
+      </div>
+    </main>
+  );
+}
+
+const AuthenticatedModeratorPage = withAuth(ModeratorPage, "moderator");
+
+export default AuthenticatedModeratorPage;