feat(frontend): finish polls feature

Author: Aksh-Bansal-dev

frontend/src/components/Meeting/MeetingTabs.tsx

@@ -64,7 +64,7 @@ const useStyles = makeStyles(() => ({
 
 type clubType = { authority: "admin" | "member"; _id: string; name: string };
 export type pollType = {
-  voter: string[];
+  voters: { userId: string; optionId: string }[];
   _id: string;
   question: string;
   club: string;

frontend/src/components/Meeting/pollStuff/PollCard.tsx

@@ -7,6 +7,10 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormControl from "@material-ui/core/FormControl";
 import MoreOptionsButton from "../MoreOptionsButton";
 import { pollType } from "../MeetingTabs";
+import { votePoll } from "src/utils/pollCalls";
+import useTokenStore from "src/store/tokenStore";
+import { server } from "src/store/global";
+import { mutate } from "swr";
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -44,14 +48,33 @@ interface PollCardProps {
   userId: string;
 }
 
-const PollCard: React.FC<PollCardProps> = ({ pollData, isAdmin }) => {
+const PollCard: React.FC<PollCardProps> = ({ pollData, isAdmin, userId }) => {
   const classes = useStyles();
+  const accessToken = useTokenStore((state) => state.token);
   const [option, setOption] = React.useState<string | null>(null);
   const [polled, setPolled] = React.useState<boolean>(false);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setOption((event.target as HTMLInputElement).value);
-    setPolled(true);
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const res = await votePoll(
+      (event.target as HTMLInputElement).value,
+      accessToken,
+      pollData._id
+    );
+    if (res.done) {
+      setOption((event.target as HTMLInputElement).value);
+      setPolled(true);
+      mutate([`${server}/api/poll/get_all`, accessToken]);
+    } else {
+      console.log(res.err);
+    }
   };
+  React.useEffect(() => {
+    for (let i = 0; i < pollData.voters.length; i++) {
+      if (pollData.voters[i].userId === userId) {
+        setOption(pollData.voters[i].optionId);
+        setPolled(true);
+      }
+    }
+  }, [pollData]);
   return (
     <Card className={classes.root}>
       <CardContent>
@@ -68,10 +91,10 @@ const PollCard: React.FC<PollCardProps> = ({ pollData, isAdmin }) => {
               <FormControlLabel
                 key={key}
                 disabled={polled}
-                value={e.name}
+                value={e._id}
                 color="inherit"
                 control={<Radio />}
-                label={e.name}
+                label={`${e.name} (${e.votes} votes)`}
               />
             ))}
           </RadioGroup>

frontend/src/components/Meeting/pollStuff/PollForm.tsx

@@ -1,10 +1,21 @@
-import { Button, Dialog, DialogContent, Theme } from "@material-ui/core";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Snackbar,
+  Theme,
+} from "@material-ui/core";
 import { Formik, Form, FieldArray } from "formik";
 import React from "react";
 import FormikTextField from "../../FormikTextField";
 import * as yup from "yup";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import { pollType } from "../MeetingTabs";
+import { Alert } from "@material-ui/lab";
+import { createPoll, updatePoll } from "src/utils/pollCalls";
+import useTokenStore from "src/store/tokenStore";
+import { mutate } from "swr";
+import { server } from "src/store/global";
 
 export const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -53,13 +64,17 @@ export const useStyles = makeStyles((theme: Theme) =>
 );
 
 const validSchema = yup.object({
-  question: yup.string().required().min(3).max(64),
-  options: yup
-    .array()
-    .of(yup.string().required().min(2).max(64))
-    .required()
-    .min(2, "Atleast two options required")
-    .max(10),
+  club: yup.string().required("Club name is required").min(3).max(32),
+  question: yup.string().required("Question cannot be empty").min(3).max(64),
+  options: yup.array().of(
+    yup.object().shape({
+      name: yup
+        .string()
+        .required("Option cannot be empty")
+        .min(3, "Option cannot be empty")
+        .max(32),
+    })
+  ),
 });
 
 interface PollFormProps {
@@ -70,24 +85,64 @@ interface PollFormProps {
 
 const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
   const classes = useStyles();
+  const accessToken = useTokenStore((state) => state.token);
+  const [openError, setOpenError] = React.useState(false);
+  const [errorText, setErrorText] = React.useState("Permission Denied");
+
+  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpenError(false);
+  };
 
   return (
     <Dialog aria-labelledby="poll-dialog" open={open}>
       <DialogContent>
         <Formik
           initialValues={{
+            club: initialVal ? initialVal.club : "",
             question: initialVal ? initialVal.question : "",
-            options: initialVal ? initialVal.options : [""],
+            options: initialVal ? initialVal.options : [{ name: "" }],
           }}
           validationSchema={validSchema}
           onSubmit={async (data, { setSubmitting }) => {
             setSubmitting(true);
-            console.log(data);
+            if (data.options.length < 2 || data.options.length > 5) {
+              setErrorText("Poll must have 2-5 options");
+              setOpenError(true);
+            } else {
+              if (initialVal) {
+                const res = await updatePoll(data, initialVal._id, accessToken);
+                if (!res.done) {
+                  setErrorText("Permission Denied");
+                  setOpenError(true);
+                } else {
+                  mutate([`${server}/api/poll/get_all`, accessToken]);
+                  close();
+                }
+              } else {
+                const res = await createPoll(data, accessToken);
+                if (!res.done) {
+                  setErrorText("Permission Denied");
+                  setOpenError(true);
+                } else {
+                  mutate([`${server}/api/poll/get_all`, accessToken]);
+                  close();
+                }
+              }
+            }
             setSubmitting(false);
           }}
         >
           {({ isSubmitting, values }) => (
             <Form className={classes.root} noValidate autoComplete="off">
+              <FormikTextField
+                label="Club Name"
+                className={classes.input}
+                name="club"
+              />
               <FormikTextField
                 label="Question"
                 className={classes.input}
@@ -103,7 +158,7 @@ const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
                           <FormikTextField
                             label={`Option ${key + 1}`}
                             className={classes.optInput}
-                            name={`options.${key}`}
+                            name={`options.${key}.name`}
                           />
                           <Button
                             className={classes.optBtn}
@@ -114,7 +169,10 @@ const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
                           </Button>
                         </div>
                       ))}
-                      <Button onClick={() => arr.push("")} variant="outlined">
+                      <Button
+                        onClick={() => arr.push({ name: "" })}
+                        variant="outlined"
+                      >
                         Add
                       </Button>
                     </div>
@@ -145,6 +203,11 @@ const PollForm: React.FC<PollFormProps> = ({ close, open, initialVal }) => {
           )}
         </Formik>
       </DialogContent>
+      <Snackbar open={openError} autoHideDuration={6000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="error">
+          {errorText}
+        </Alert>
+      </Snackbar>
     </Dialog>
   );
 };

frontend/src/utils/pollCalls.ts

@@ -0,0 +1,57 @@
+import { server } from "src/store/global";
+
+type pollType = {
+  question: string;
+  options: { name: string }[];
+  club: string;
+};
+
+export const votePoll = async (
+  optionId: string,
+  token: string,
+  pollId: string
+): Promise<{ done: boolean; err?: string }> => {
+  const res = await fetch(server + "/api/poll/vote/" + pollId, {
+    method: "PATCH",
+    headers: {
+      Authorization: "bearer " + token,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ optionId }),
+  });
+  const data = res.json();
+  return data;
+};
+
+export const createPoll = async (
+  pollData: pollType,
+  token: string
+): Promise<{ done: boolean; err?: string }> => {
+  const res = await fetch(server + "/api/poll/create", {
+    method: "POST",
+    headers: {
+      Authorization: "bearer " + token,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(pollData),
+  });
+  const data = res.json();
+  return data;
+};
+
+export const updatePoll = async (
+  pollData: pollType,
+  pollId: string,
+  token: string
+): Promise<{ done: boolean; err?: string }> => {
+  const res = await fetch(server + "/api/poll/update/" + pollId, {
+    method: "PATCH",
+    headers: {
+      Authorization: "bearer " + token,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(pollData),
+  });
+  const data = res.json();
+  return data;
+};

server/src/model/Poll.ts

@@ -9,7 +9,7 @@ type optionType = {
 interface PollInterface extends mongoose.Document {
   question: string;
   club: string;
-  voters: string[];
+  voters: { userId: string; optionId: string }[];
   options: optionType[];
 }
 
@@ -23,7 +23,12 @@ const pollSchema: mongoose.Schema = new mongoose.Schema(
       type: String,
       required: true,
     },
-    voters: [String],
+    voters: [
+      {
+        userId: String,
+        optionId: String,
+      },
+    ],
     options: [
       {
         name: {

server/src/routes/pollRoutes.ts

@@ -93,7 +93,7 @@ Router.patch(
       if (!options) {
         return res.json({ done: false, err: "Invalid poll" });
       }
-      const hasVotedBefore = poll.voters.find((e) => e === userId);
+      const hasVotedBefore = poll.voters.find((e) => e.userId === userId);
       if (hasVotedBefore) {
         return res.json({ done: false, err: "You cannot vote again" });
       }
@@ -108,7 +108,7 @@ Router.patch(
       const ret = await Poll.updateOne(
         { _id: pollId },
         {
-          voters: [...voters, userId],
+          voters: [...voters, { userId, optionId }],
           options: updatedOptions,
         }
       );