Edit button visible only to Quest owner

Was visible to all during design feedback phase
MetaFam · Jun 28, 2023 · 71c3fa3 · 71c3fa3
1 parent 4245d5c
commit 71c3fa3
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/packages/web/components/Quest/QuestDetailsHeader.tsx b/packages/web/components/Quest/QuestDetailsHeader.tsx
@@ -10,7 +10,7 @@ import {
 } from '@metafam/ds';
 import { MetaLink } from 'components/Link';
 import { PlayerAvatar } from 'components/Player/PlayerAvatar';
-import { Quest, QuestFragment } from 'graphql/autogen/types';
+import { Quest, QuestFragment, QuestStatus_Enum } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
 import { usePlayerName } from 'lib/hooks/player/usePlayerName';
 import { usePlayerURL } from 'lib/hooks/player/usePlayerURL';
@@ -86,25 +86,25 @@ export const QuestDetailsHeader: React.FC<Props> = ({ quest }) => {
         </Flex>
       </Box>
 
-      {/* isMyQuest conditional here to show edit/delete {isMyQuest && ...} */}
-      <Box w="full" maxW={{ base: '100%', md: '12rem' }}>
-        {/* Stacked vertically after md breakpoint */}
-        <Stack spacing={5} direction={{ base: 'row', md: 'column' }}>
-          <Button
-            variant="outline"
-            borderWidth={2}
-            size="lg"
-            fontSize="md"
-            w="full"
-          >
-            Edit quest
-          </Button>
-
-          <Button variant="warning" size="lg" fontSize="md" w="full">
-            Delete quest
-          </Button>
-        </Stack>
-      </Box>
+      {/* Edit button is displayed to the Quest Owner */}
+      {isMyQuest && status === QuestStatus_Enum.Open && (
+        <Box w="full" maxW={{ base: '100%', md: '12rem' }}>
+          {/* Stacked vertically after md breakpoint */}
+          <Stack spacing={5} direction={{ base: 'row', md: 'column' }}>
+            <Button
+              as="a" // so it can be used as a link
+              href={`/quest/${quest.id}/edit`}
+              variant="outline"
+              borderWidth={2}
+              size="lg"
+              fontSize="md"
+              w="full"
+            >
+              Edit quest
+            </Button>
+          </Stack>
+        </Box>
+      )}
     </Flex>
   );
 };