TICKET 18 Delete Poll Frontend (#54)

* delete poll button * delete poll * isCreator field in PollInfo * conditional rendering of delete poll button * padding
neu-cs4530 · Apr 8, 2023 · f35e3e8 · f35e3e8
1 parent 951499c
commit f35e3e8
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 10 deletions.
diff --git a/frontend/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollCard/PollCard.tsx b/frontend/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollCard/PollCard.tsx
@@ -1,6 +1,16 @@
-import React from 'react';
-import { Button } from '@chakra-ui/react';
+import React, { useRef } from 'react';
+import {
+  Button,
+  useDisclosure,
+  AlertDialog,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+} from '@chakra-ui/react';
 import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '../../../icons/CloseIcon';
 import { PollInfo } from '../../../../../../generated/client/models/PollInfo';
 
 const useStyles = makeStyles({
@@ -43,7 +53,7 @@ const useStyles = makeStyles({
     textAlign: 'left',
     fontWeight: 'bold',
     fontSize: 18,
-    padding: '1em 1em 0.1em 0.8em',
+    padding: '1em 4em 0.1em 0.8em',
     gridRow: '1 / span 1',
     gridColumn: '1 / span 2',
   },
@@ -58,15 +68,26 @@ const useStyles = makeStyles({
     gridRow: '2 / span 1',
     gridColumn: '2 / span 1',
   },
+  deleteButton: {
+    margin: '0.5rem',
+    justifySelf: 'end',
+    flexDirection: 'column',
+    float: 'right',
+    gridRow: '1 / span 1',
+    gridColumn: '2 / span 1',
+  },
 });
 
 interface PollCardProps {
   body: PollInfo;
-  clickVoteOrViewResults: (pollID: string, userHasVoted: boolean) => void;
+  clickVoteOrViewResults: (pollId: string, userHasVoted: boolean) => void;
+  deletePoll: (pollId: string) => void;
 }
 
-export default function PollCard({ body, clickVoteOrViewResults }: PollCardProps) {
+export default function PollCard({ body, clickVoteOrViewResults, deletePoll }: PollCardProps) {
   const classes = useStyles();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   const voteOrViewResults = () => {
     clickVoteOrViewResults(body.pollId, body.voted);
@@ -84,6 +105,31 @@ export default function PollCard({ body, clickVoteOrViewResults }: PollCardProps
           <div className={classes.creatorInfo}>Asked by {body.creatorName}</div>
           <div> {totalVotersText}</div>
         </div>
+        <AlertDialog isOpen={isOpen} onClose={onClose} leastDestructiveRef={cancelRef}>
+          <AlertDialogOverlay>
+            <AlertDialogContent>
+              <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+                Delete Poll
+              </AlertDialogHeader>
+
+              <AlertDialogBody>Are you sure you want to delete this poll?</AlertDialogBody>
+
+              <AlertDialogFooter>
+                <Button ref={cancelRef} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button colorScheme='red' onClick={() => deletePoll(body.pollId)} ml={3}>
+                  Delete
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogOverlay>
+        </AlertDialog>
+        {body.isCreator ? (
+          <Button onClick={onOpen} className={classes.deleteButton}>
+            <CloseIcon />
+          </Button>
+        ) : null}
         <Button
           colorScheme={body.voted ? 'green' : 'facebook'}
           mr={3}

diff --git a/...end/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollsList/PollsList.tsx b/...end/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollsList/PollsList.tsx
@@ -7,9 +7,10 @@ import { VotePollModal } from '../VotePoll/VotePollModal';
 interface PollsListProps {
   polls: PollInfo[];
   fetchPollsInfo: () => void;
+  deletePoll: (pollId: string) => void;
 }
 
-export default function PollsList({ polls, fetchPollsInfo }: PollsListProps) {
+export default function PollsList({ polls, fetchPollsInfo, deletePoll }: PollsListProps) {
   const [selectedPollID, setSelectedPollID] = useState<string>('');
   const [isResultsModalOpen, setIsResultsModalOpen] = useState<boolean>(false);
   const [isVoteModalOpen, setIsVoteModalOpen] = useState(false);
@@ -38,7 +39,11 @@ export default function PollsList({ polls, fetchPollsInfo }: PollsListProps) {
       {polls.map(poll => {
         return (
           <React.Fragment key={poll.pollId}>
-            <PollCard body={poll} clickVoteOrViewResults={clickVoteOrViewResults} />
+            <PollCard
+              body={poll}
+              clickVoteOrViewResults={clickVoteOrViewResults}
+              deletePoll={deletePoll}
+            />
           </React.Fragment>
         );
       })}

diff --git a/frontend/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollsWindow.tsx b/frontend/src/components/VideoCall/VideoFrontend/components/PollsWindow/PollsWindow.tsx
@@ -73,6 +73,11 @@ export default function PollsWindow() {
     setPolls(await coveyTownController.getAllPolls());
   }, [coveyTownController]);
 
+  const deletePoll = async (pollId: string) => {
+    await coveyTownController.deletePoll(pollId);
+    setPolls(await coveyTownController.getAllPolls());
+  };
+
   useEffect(() => {
     fetchPollsInfo();
 
@@ -100,7 +105,7 @@ export default function PollsWindow() {
             New +
           </Button>
         </div>
-        <PollsList polls={polls} fetchPollsInfo={fetchPollsInfo} />
+        <PollsList polls={polls} fetchPollsInfo={fetchPollsInfo} deletePoll={deletePoll} />
       </div>
       {isCreateModalOpen && (
         <CreatePollModal

diff --git a/frontend/src/generated/client/models/PollInfo.ts b/frontend/src/generated/client/models/PollInfo.ts
@@ -10,5 +10,6 @@ export type PollInfo = {
     options: Array<string>;
     voted: boolean;
     totalVoters: number;
+    isCreator: boolean;
 };
 
diff --git a/shared/generated/swagger.json b/shared/generated/swagger.json
@@ -249,6 +249,9 @@
 					"totalVoters": {
 						"type": "number",
 						"format": "double"
+					},
+					"isCreator": {
+						"type": "boolean"
 					}
 				},
 				"required": [
@@ -258,7 +261,8 @@
 					"question",
 					"options",
 					"voted",
-					"totalVoters"
+					"totalVoters",
+					"isCreator"
 				],
 				"type": "object",
 				"additionalProperties": false

diff --git a/shared/types/CoveyTownSocket.d.ts b/shared/types/CoveyTownSocket.d.ts
@@ -93,7 +93,8 @@ export interface PollInfo {
   question: string,
 	options: string[],
   voted: boolean,
-  totalVoters: number;
+  totalVoters: number,
+  isCreator: boolean;
 }
 
 export interface ServerToClientEvents {

diff --git a/townService/generated/routes.ts b/townService/generated/routes.ts
@@ -123,6 +123,7 @@ const models: TsoaRoute.Models = {
             "options": {"dataType":"array","array":{"dataType":"string"},"required":true},
             "voted": {"dataType":"boolean","required":true},
             "totalVoters": {"dataType":"double","required":true},
+            "isCreator": {"dataType":"boolean","required":true},
         },
         "additionalProperties": false,
     },

diff --git a/townService/src/town/Town.test.ts b/townService/src/town/Town.test.ts
@@ -1022,6 +1022,7 @@ describe('Town', () => {
           options: testOptions1,
           voted: false,
           totalVoters: 0,
+          isCreator: false,
         };
 
         expectedPollInfo2 = {
@@ -1032,6 +1033,7 @@ describe('Town', () => {
           options: testOptions2,
           voted: false,
           totalVoters: 0,
+          isCreator: false,
         };
       });
       it('Successfully get all active polls', async () => {
@@ -1041,6 +1043,22 @@ describe('Town', () => {
         ]);
       });
 
+      it('Correctly display the isCreator field', async () => {
+        expectedPollInfo1.isCreator = true;
+        expect(town.getAllPolls(testCreator1.id)).toStrictEqual([
+          expectedPollInfo1,
+          expectedPollInfo2,
+        ]);
+
+        expectedPollInfo1.isCreator = false;
+        expectedPollInfo2.isCreator = true;
+
+        expect(town.getAllPolls(testCreator2.id)).toStrictEqual([
+          expectedPollInfo1,
+          expectedPollInfo2,
+        ]);
+      });
+
       it('Correctly display the voted field', async () => {
         const testVoter1 = { id: 'voter1', name: 'Jess' };
         const testVoter2 = { id: 'voter2', name: 'David' };

diff --git a/townService/src/town/Town.ts b/townService/src/town/Town.ts
@@ -536,6 +536,7 @@ export default class Town {
       options: poll.options,
       voted: poll.userVoted(userId),
       totalVoters: poll.getVoters().length,
+      isCreator: userId === poll.creator.id,
     };
     return pollInfo;
   }