feat(admin): add poll page

client/src/components/admin_v2/Poll/PolllDialogBox.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+
+const DialogPoll = ({ dialogBoxOpen, setDialogBoxOpen }) => {
+  const [value, setValue] = useState(0);
+  const [live, setLive] = useState('offline');
+  const [Options, setOptions] = useState('');
+  const DialogBoxClose = () => {
+    setDialogBoxOpen(false);
+    setValue(0);
+    setLive('offline');
+  };
+  const handleOptions = (e) => {
+    setOptions(e.target.value);
+  };
+  const handleValue = (e) => {
+    setValue(e.target.value);
+  };
+  const handleLive = () => {
+    setLive('Live');
+  };
+  const handleSave = () => {
+    DialogBoxClose();
+  };
+  const classes = useStyles();
+  useEffect(() => {
+    console.log(live);
+  }, [live]);
+  return (
+    <>
+      <Dialog
+        open={dialogBoxOpen}
+        onClose={DialogBoxClose}
+        scroll='paper'
+        aria-labelledby='scroll-dialog-title'
+        aria-describedby='scroll-dialog-description'
+        fullWidth
+        maxWidth='md'
+      >
+        <DialogTitle id='scroll-dialog-title' className={classes.dialogtitle}>
+          Create Poll
+        </DialogTitle>
+        {live === 'offline' ? (
+          <DialogContent>
+            <div>
+              <Typography variant='h6'>Question</Typography>
+              <TextField
+                multiline
+                variant='outlined'
+                placeholder='Poll Question'
+                sx={{ width: '100%', marginBottom: '1rem ', marginTop: '1rem' }}
+              ></TextField>
+            </div>
+            <FormControl sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id='demo-multiple-name-label'>Options</InputLabel>
+              <Select
+                labelId='demo-multiple-name-label'
+                id='demo-multiple-name'
+                label='Options'
+                onChange={handleValue}
+                renderValue={(selected) => {
+                  return selected;
+                }}
+              >
+                {[...Array(10).keys()].map((num) => {
+                  return <MenuItem value={num + 1}>{num + 1}</MenuItem>;
+                })}
+              </Select>
+            </FormControl>
+            {[...Array(value).keys()].map((num) => {
+              return (
+                <div>
+                  <TextField
+                    onChange={(e) => handleOptions(e)}
+                    key={num}
+                    placeholder={`Poll Option ${num + 1}`}
+                    variant='outlined'
+                    margin='dense'
+                    fullWidth
+                  />
+                </div>
+              );
+            })}
+          </DialogContent>
+        ) : (
+          <DialogContent className={classes.livereturn}>
+            <Typography variant='h3'>Poll Going Live </Typography>
+          </DialogContent>
+        )}
+
+        <div className={classes.btnbox}>
+          <Button
+            className={classes.livebtn}
+            onClick={() => {
+              handleLive();
+            }}
+          >
+            Live
+          </Button>
+          <Button
+            className={classes.livebtn}
+            onClick={() => {
+              handleSave();
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </Dialog>
+    </>
+  );
+};
+const useStyles = makeStyles((theme) => ({
+  dialogtitle: {
+    textAlign: 'center',
+  },
+  btnbox: {
+    display: 'flex',
+    justifyContent: 'end',
+  },
+  livebtn: {
+    width: '3rem',
+    margin: '1rem 1rem 1rem 0',
+    backgroundColor: 'green',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#f50057',
+    },
+  },
+  livereturn: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '10rem',
+    width: '100%',
+  },
+}));
+export default DialogPoll;

client/src/pages/admin_v2/poll.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Poll from '../../screens/admin_v2/Poll';
+import getAccess from '../../utils/getAccess';
+import { parseCookies } from 'nookies';
+import { getGraphClient } from '../../context/ApolloContextProvider';
+import Custom500 from '../500.jsx';
+
+const PollPage = ({ isError, PollList }) => {
+  if (isError) {
+    return <Custom500 />;
+  }
+  return <Poll PollList={PollList} />;
+};
+export default PollPage;
+export async function getServerSideProps(ctx) {
+  try {
+    const requiredPermissions = ['poll.write.restricted'];
+    const userPermissions = await getAccess({ ctx });
+
+    if (!userPermissions.data) {
+      return {
+        redirect: {
+          destination: '/',
+          permanent: false,
+        },
+      };
+    }
+
+    const acsessPermitted = requiredPermissions.every((permission) => {
+      return userPermissions?.data?.includes(permission);
+    });
+
+    if (!acsessPermitted) {
+      return {
+        redirect: {
+          destination: '/',
+          permanent: false,
+        },
+      };
+    }
+    const cookies = parseCookies(ctx);
+    const graphClient = getGraphClient(false, cookies.firebaseToken);
+    return {
+      props: { userPermissions },
+    };
+  } catch {
+    return {
+      props: {
+        isError: true,
+      },
+    };
+  }
+}

client/src/screens/admin_v2/Poll.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import Marginals from '../../components/admin_v2/Marginals/Marginals';
+//mui
+import { styled } from '@mui/material/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Button from '@mui/material/Button';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import DialogPoll from '../../components/admin_v2/Poll/PolllDialogBox';
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 13,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+const Poll = ({ PollList }) => {
+  const [dialogBoxOpen, setDialogBoxOpen] = useState(false);
+  const handleDialogBoxOpen = () => setDialogBoxOpen(true);
+  return (
+    <>
+      <div>
+        <Marginals>
+          <DialogPoll
+            dialogBoxOpen={dialogBoxOpen}
+            setDialogBoxOpen={setDialogBoxOpen}
+          />
+          <Button
+            sx={{
+              marginBottom: '10px',
+            }}
+            variant='contained'
+            color='primary'
+            onClick={handleDialogBoxOpen}
+          >
+            <AddCircleOutlineIcon sx={{ marginRight: '10px' }} />
+            Add Poll
+          </Button>
+          <Table sx={{ minWidth: 700 }} stickyHeader aria-label='sticky table'>
+            <TableHead>
+              <TableRow>
+                <StyledTableCell align='left'>Content</StyledTableCell>
+                <StyledTableCell align='center'>Date</StyledTableCell>
+                <StyledTableCell align='center'>Timer</StyledTableCell>
+                <StyledTableCell align='center'>Status</StyledTableCell>
+                <StyledTableCell align='center'>Edit</StyledTableCell>
+                <StyledTableCell align='center'>Delete</StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody></TableBody>
+          </Table>
+          <Button>Load More</Button>
+        </Marginals>
+      </div>
+    </>
+  );
+};
+export default Poll;