update admin page to check admin permissions & show no permission-states

tablelandnetwork · Sep 19, 2023 · c0b447c · c0b447c
1 parent 070581c
commit c0b447c
Showing 1 changed file with 45 additions and 3 deletions.
diff --git a/garage/src/pages/Admin/index.tsx b/garage/src/pages/Admin/index.tsx
@@ -20,6 +20,8 @@ import {
   Th,
   Tbody,
   HStack,
+  Spinner,
+  Text,
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 import { Database } from "@tableland/sdk";
@@ -33,6 +35,7 @@ import { CreateProposalModal } from "../../components/CreateProposalModal";
 import { useProposals } from "../../hooks/useProposals";
 import { useAdminMisisons } from "../../hooks/useMissions";
 import { secondaryChain, deployment } from "../../env";
+import { useIsAdmin } from "../../hooks/useIsAdmin";
 
 const { ftRewardsTable } = deployment;
 
@@ -274,7 +277,24 @@ const ListMissionsForm = (props: React.ComponentProps<typeof Box>) => {
   );
 };
 
+const NoPermissionsForm = ({
+  title,
+  body,
+  ...props
+}: { title: string; body: string } & React.ComponentProps<typeof Box>) => {
+  return (
+    <Box {...props}>
+      <Heading>{title}</Heading>
+      <Text variant="emptyState" mt={4}>
+        {body}
+      </Text>
+    </Box>
+  );
+};
+
 export const Admin = () => {
+  const { isLoading, data } = useIsAdmin();
+
   return (
     <>
       <Flex
@@ -295,9 +315,31 @@ export const Admin = () => {
           minHeight={`calc(100vh - ${TOPBAR_HEIGHT})`}
         >
           <Flex direction="column" gap={GRID_GAP} align="stretch" width="100%">
-            <GiveFtRewardForm {...MODULE_PROPS} />
-            <ListProposalsForm {...MODULE_PROPS} />
-            <ListMissionsForm {...MODULE_PROPS} />
+            {isLoading || !data ? (
+              <Spinner />
+            ) : (
+              <>
+                <GiveFtRewardForm {...MODULE_PROPS} />
+                {data.votingAdmin ? (
+                  <ListProposalsForm {...MODULE_PROPS} />
+                ) : (
+                  <NoPermissionsForm
+                    title="Proposals"
+                    body="You don't have the right permissions to manage proposals."
+                    {...MODULE_PROPS}
+                  />
+                )}
+                {data.missionsAdin ? (
+                  <ListMissionsForm {...MODULE_PROPS} />
+                ) : (
+                  <NoPermissionsForm
+                    title="Missions"
+                    body="You don't have the right permissions to manage missions."
+                    {...MODULE_PROPS}
+                  />
+                )}
+              </>
+            )}
           </Flex>
         </Flex>
       </Flex>