add link to verify page from claim page

only appears for admins
celestemods-com · Oct 20, 2024 · 2b36ea7 · 2b36ea7
1 parent f5d09c2
commit 2b36ea7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/pages/claim-users/index.tsx b/src/pages/claim-users/index.tsx
@@ -4,10 +4,12 @@ import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { Layout } from "~/components/layout/layout";
 import { cmlDiscordInviteUrl } from "~/consts/cmlDiscordInviteUrl";
-import { CLAIM_USER_PATHNAME } from "~/consts/pathnames";
+import { CLAIM_USER_PATHNAME, VERIFY_CLAIM_PATHNAME } from "~/consts/pathnames";
+import { ADMIN_PERMISSION_STRINGS } from "~/server/api/utils/permissions";
 import { pageContentHeightPixels } from "~/styles/pageContentHeightPixels";
 import { pageTitle } from "~/styles/pageTitle";
 import { api } from "~/utils/api";
+import { isPermitted } from "~/utils/permissions";
 
 
 
@@ -25,7 +27,7 @@ const useStyles = createStyles(
             height: `${pageContentHeightPixels}px`,
             color: theme.white,
         },
-        discordLink: {
+        link: {
             textDecoration: "underline",
         },
         sectionTitle: {
@@ -43,7 +45,7 @@ const useStyles = createStyles(
 
 
 const ClaimUser: NextPage = () => {
-    const { status, data: sessionData } = useSession();
+    const { status: sessionStatus, data: sessionData } = useSession();
     const userId = sessionData?.user.id ?? "";
 
 
@@ -83,10 +85,15 @@ const ClaimUser: NextPage = () => {
     });
 
 
+    const isLoading = sessionStatus === "loading";
+
+    const isAdmin = !isLoading && sessionData !== null && isPermitted(sessionData.user.permissions, ADMIN_PERMISSION_STRINGS);
+
+
     const { classes } = useStyles();
 
 
-    if (status === "unauthenticated") {
+    if (sessionStatus === "unauthenticated") {
         return (
             <Layout
                 pageTitle={PAGE_TITLE}
@@ -110,12 +117,17 @@ const ClaimUser: NextPage = () => {
                 className={classes.scrollArea}
             >
                 <LoadingOverlay
-                    visible={status === "loading"}
+                    visible={isLoading}
                 />
                 <Title className={classes.pageTitle} order={1}>{PAGE_TITLE}</Title>
+                {isAdmin && (
+                    <p>
+                        Click <Link className={classes.link} href={VERIFY_CLAIM_PATHNAME}>here</Link> to verify users.
+                    </p>
+                )}
                 <Title order={2}>Active Claims</Title>
                 <p className={classes.sectionInfo}>
-                    Contact us on <Link href={cmlDiscordInviteUrl} className={classes.discordLink} target="_blank">Discord</Link> to get your claims verified.
+                    Contact us on <Link href={cmlDiscordInviteUrl} className={classes.link} target="_blank">Discord</Link> to get your claims verified.
                 </p>
                 <Table>
                     <thead>

diff --git a/src/pages/claim-users/verify.tsx b/src/pages/claim-users/verify.tsx
@@ -33,7 +33,7 @@ const useStyles = createStyles(
 
 
 const VerifyClaim: NextPage = () => {
-    const { status, data: sessionData } = useSession();
+    const { status: sessionStatus, data: sessionData } = useSession();
 
 
     const userClaimsQuery = api.user.userClaim.getAll.useQuery({}, { queryKey: ["user.userClaim.getAll", {}] });
@@ -61,7 +61,7 @@ const VerifyClaim: NextPage = () => {
     const rejectUserClaimMutation = api.user.userClaim.delete.useMutation({ onSuccess });
 
 
-    const isLoading = status === "loading";
+    const isLoading = sessionStatus === "loading";
 
     const isUserPermitted = !isLoading && sessionData !== null && isPermitted(sessionData.user.permissions, ADMIN_PERMISSION_STRINGS);
 
@@ -89,7 +89,7 @@ const VerifyClaim: NextPage = () => {
             pathname={VERIFY_CLAIM_PATHNAME}
         >
             <Modal
-                opened={!isLoading && claimToVerify !== null}    // TODO!!!: see if `status` can be referenced here directly. TypeScript threw an error here due to an unexpectedly narrowed type.
+                opened={!isLoading && claimToVerify !== null}    // TODO!!!: see if `sessionStatus` can be referenced here directly. TypeScript threw an error here due to an unexpectedly narrowed type.
                 onClose={() => { setClaimToVerify(null); }}
                 title="Verify Claim"
                 centered