Merge pull request #22 from Aksh-Bansal-dev/patch-4

Latest

Author: MananJethwani

CONTRIBUTING.md

@@ -36,6 +36,7 @@ commit messages are standardized:
 - Run `npm install` to install all dependencies
 - Make a `.env` file with all secrets. You also need to generate google client id and secret key. You may refer [to this](https://developers.google.com/identity/protocols/oauth2https://developers.google.com/adwords/api/docs/guides/authentication#create_a_client_id_and_client_secret) for the steps.
   > Note: Put `<server_url>/api/auth/google/redirect` in redirect url when generating google client id and secret.
+- You also need to generate access token and refresh token for sending emails. Follow [this guide](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) to generate you own.
 - Run `npm run dev` to start server
 
 ### Frontend setup

frontend/package.json

@@ -2,19 +2,25 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
+    "@date-io/date-fns": "1.x",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "date-fns": "^2.22.1",
     "formik": "^2.2.6",
+    "jwt-decode": "^3.1.2",
     "query-string": "^7.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
+    "react-swipeable-views": "^0.13.9",
     "swr": "^0.5.6",
     "web-vitals": "^0.2.4",
     "yup": "^0.32.9",
@@ -48,10 +54,12 @@
     ]
   },
   "devDependencies": {
+    "@types/jwt-decode": "^3.1.0",
     "@types/node": "^15.0.2",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-swipeable-views": "^0.13.0",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
     "eslint": "^7.26.0",

frontend/src/App.css

@@ -1,5 +1,6 @@
 html,
 body {
+  width: 100vw;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
@@ -13,6 +14,7 @@ body {
   --background-gradient: linear-gradient(to bottom right, #3650c7, #42abdc);
   --golden: #ffac2f;
   --dark-golden: #ff9c08;
+  --light-golden: #ffd166;
 }
 
 body::-webkit-scrollbar {

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { updateAccessToken } from "./utils/updateAccessToken";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import useTokenStore from "./store/tokenStore";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -17,9 +18,10 @@ const useStyles = makeStyles((theme: Theme) =>
 const App: React.FC = () => {
   const classes = useStyles();
   const [loading, setLoading] = React.useState(true);
+  const setToken = useTokenStore((state) => state.setToken);
   React.useEffect(() => {
-    updateAccessToken(setLoading);
-  });
+    updateAccessToken(setToken, setLoading);
+  }, []);
   return (
     <>
       <Routes />

frontend/src/Routes.tsx

@@ -8,13 +8,18 @@ import Registration from "./pages/Registration";
 import GoogleRedirect from "./pages/GoogleRedirect";
 import Meeting from "./pages/Meeting";
 import { updateAccessToken } from "./utils/updateAccessToken";
+import useTokenStore from "./store/tokenStore";
 
+const REFRESH_TIME_MS = 50 * 60 * 1000;
 const Routes: React.FC = () => {
-  const REFRESH_TIME_MS = 60 * 60 * 1000;
+  const accessToken = useTokenStore((state) => state.token);
+  const setToken = useTokenStore((state) => state.setToken);
   React.useEffect(() => {
     const interval = setInterval(() => {
-      console.log("Refreshing token...");
-      updateAccessToken();
+      if (!!accessToken) {
+        console.log("Refreshing token...");
+        updateAccessToken(setToken);
+      }
     }, REFRESH_TIME_MS);
 
     // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.

frontend/src/components/Buttons/BackButton.tsx

@@ -0,0 +1,23 @@
+import { IconButton, IconButtonProps } from "@material-ui/core";
+import { ArrowBack } from "@material-ui/icons";
+import React from "react";
+import { useHistory } from "react-router";
+
+type BackButtonProps = {
+  //
+} & IconButtonProps;
+const BackButton: React.FC<BackButtonProps> = ({ ...props }) => {
+  const history = useHistory();
+  const handleClick = () => {
+    history.push("/");
+  };
+  return (
+    <>
+      <IconButton onClick={handleClick} {...props}>
+        <ArrowBack />
+      </IconButton>
+    </>
+  );
+};
+
+export default BackButton;

frontend/src/components/Cards/DomainCard.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles(() =>
       margin: "1vh",
       height: "38vh",
       width: "30vh",
-      background: "#FFD166",
+      background: "#ffd166",
     },
     title: {
       fontSize: "1.2rem",

frontend/src/components/FormikDateTimeField.tsx

@@ -0,0 +1,60 @@
+import "date-fns";
+import DateFnsUtils from "@date-io/date-fns";
+import { Grid } from "@material-ui/core";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+  KeyboardTimePicker,
+} from "@material-ui/pickers";
+import { FieldHookConfig, useField, useFormikContext } from "formik";
+import React from "react";
+
+type FormikDateTimeFieldProps = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+} & FieldHookConfig<string>;
+
+const FormikDateTimeField: React.FC<FormikDateTimeFieldProps> = ({
+  ...props
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [field, meta] = useField<any>(props);
+  const { setFieldValue } = useFormikContext();
+  const errorText = meta.error && meta.touched ? meta.error : "";
+  // const obj = {
+  //   label,
+  //   type,
+  // };
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Grid container direction="column" justify="center">
+        <KeyboardDatePicker
+          {...field}
+          margin="normal"
+          id="date-picker-dialog"
+          label="Date"
+          format="MM/dd/yyyy"
+          helperText={errorText}
+          error={!!errorText}
+          onChange={(val) => setFieldValue(field.name, val)}
+          KeyboardButtonProps={{
+            "aria-label": "change date",
+          }}
+        />
+        <KeyboardTimePicker
+          {...field}
+          margin="normal"
+          id="time-picker"
+          label="Time"
+          helperText={errorText}
+          onChange={(val) => setFieldValue(field.name, val)}
+          error={!!errorText}
+          KeyboardButtonProps={{
+            "aria-label": "change time",
+          }}
+        />
+      </Grid>
+    </MuiPickersUtilsProvider>
+  );
+};
+
+export default FormikDateTimeField;

…nts/RegistrationForm/FormikTextField.tsx …ntend/src/components/FormikTextField.tsxfrontend/src/components/RegistrationForm/FormikTextField.tsx renamed to frontend/src/components/FormikTextField.tsx frontend/src/components/RegistrationForm/FormikTextField.tsx renamed to frontend/src/components/FormikTextField.tsx

@@ -0,0 +1,45 @@
+import { IconButton, IconButtonProps } from "@material-ui/core";
+import { Create } from "@material-ui/icons";
+import React from "react";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import MeetingForm from "./meetingStuff/MeetingForm";
+import PollForm from "./pollStuff/PollForm";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      background: "rgba(255, 255, 255, 0.5)",
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
+      zIndex: 3,
+    },
+  })
+);
+
+type CreateButtonProps = {
+  formType: number;
+} & IconButtonProps;
+const CreateButton: React.FC<CreateButtonProps> = ({ formType, ...props }) => {
+  const classes = useStyles();
+  const [formOpen, setFormOpen] = React.useState(false);
+  const forms = [
+    <MeetingForm open={formOpen} close={() => setFormOpen(false)} />,
+    <PollForm open={formOpen} close={() => setFormOpen(false)} />,
+  ];
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        className={classes.root}
+        onClick={() => setFormOpen(true)}
+        {...props}
+      >
+        <Create />
+      </IconButton>
+      {forms[formType]}
+    </>
+  );
+};
+
+export default CreateButton;