From f35e3e8d617278703b1b7987876045275bfdd591 Mon Sep 17 00:00:00 2001 From: tiingweii-shii <57331456+tiingweii-shii@users.noreply.github.com> Date: Fri, 7 Apr 2023 21:35:46 -0400 Subject: [PATCH] TICKET 18 Delete Poll Frontend (#54) * delete poll button * delete poll * isCreator field in PollInfo * conditional rendering of delete poll button * padding --- .../PollsWindow/PollCard/PollCard.tsx | 56 +++++++++++++++++-- .../PollsWindow/PollsList/PollsList.tsx | 9 ++- .../components/PollsWindow/PollsWindow.tsx | 7 ++- .../src/generated/client/models/PollInfo.ts | 1 + shared/generated/swagger.json | 6 +- shared/types/CoveyTownSocket.d.ts | 3 +- townService/generated/routes.ts | 1 + townService/src/town/Town.test.ts | 18 ++++++ townService/src/town/Town.ts | 1 + 9 files changed, 92 insertions(+), 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 index 52d1845..4750612 100644 --- 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(null); const voteOrViewResults = () => { clickVoteOrViewResults(body.pollId, body.voted); @@ -84,6 +105,31 @@ export default function PollCard({ body, clickVoteOrViewResults }: PollCardProps
Asked by {body.creatorName}
{totalVotersText}
+ + + + + Delete Poll + + + Are you sure you want to delete this poll? + + + + + + + + + {body.isCreator ? ( + + ) : null} - + {isCreateModalOpen && ( ; voted: boolean; totalVoters: number; + isCreator: boolean; }; diff --git a/shared/generated/swagger.json b/shared/generated/swagger.json index 3b1cc79..9f498c9 100644 --- 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 index a7956e4..950dcef 100644 --- 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 index 4038101..a7a7127 100644 --- 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 index 50fa8e5..54bd4f1 100644 --- 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 index 0d49ed9..da1307b 100644 --- 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; }