[Feature] Add Edit Functionality

src/components/ActNowPage/LoggedIn.js

@@ -1,27 +1,46 @@
 import { Box, Button } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
 import clsx from "clsx";
 import { signOut } from "next-auth/react";
 import Image from "next/image";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useState } from "react";
 
 import useStyles from "./useStyles";
 
 import actNowLogo from "@/promisetracker/assets/actNowLogo2x.png";
 import ContentPage from "@/promisetracker/components/ContentPage";
 import Section from "@/promisetracker/components/ContentPage/Section";
+import IndividualUpdateFormDialog from "@/promisetracker/components/IndividualUpdateFormDialog";
 import Petitions from "@/promisetracker/components/Petitions";
 import Tabs from "@/promisetracker/components/Tabs";
 
 function ActNowLoggedInPage({
   footer,
   title,
+  onClose,
   navigation,
+  onClick,
   signedPetitions,
+  open: openProp,
+  individualUpdateDialogArgs,
   ownedPetitions,
   ...props
 }) {
   const classes = useStyles(props);
+  const [open, setOpen] = useState(openProp);
+  const [openDialog, setOpenDialog] = useState();
+
+  const handleClose = () => {
+    setOpenDialog(undefined);
+    if (onClose) {
+      onClose();
+    } else {
+      setOpen(false);
+    }
+  };
+
+  const handleClickIndividual = () => setOpenDialog("individual");
 
   const formatedItems = [
     { title: "Signed", petitions: signedPetitions },
@@ -35,22 +54,42 @@ function ActNowLoggedInPage({
   });
 
   const aside = (
-    <Box display="flex" justifyContent="flex-end">
-      <Button
-        variant="outlined"
-        onClick={() => signOut()}
-        className={clsx(classes.accountButton, classes.accountLogout)}
-      >
-        Logout
-      </Button>
+    <div>
+      <Box display="flex" justifyContent="flex-end">
+        <Button
+          variant="outlined"
+          onClick={() => signOut()}
+          className={clsx(classes.accountButton, classes.accountLogout)}
+        >
+          Logout
+        </Button>
+
+        <Button
+          variant="outlined"
+          open={open}
+          onClick={handleClickIndividual}
+          className={clsx(classes.accountButton, classes.accountEdit)}
+        >
+          Edit
+        </Button>
 
-      <Button
-        variant="outlined"
-        className={clsx(classes.accountButton, classes.accountEdit)}
-      >
-        Edit
-      </Button>
-    </Box>
+        <IndividualUpdateFormDialog
+          {...individualUpdateDialogArgs}
+          key={openDialog === "individual"}
+          onClose={handleClose}
+          open={openDialog === "individual"}
+        />
+      </Box>
+      <div>
+        {open === false ? (
+          <Alert severity="success">
+            Your Profile details have been updated!
+          </Alert>
+        ) : (
+          ""
+        )}
+      </div>
+    </div>
   );
   return (
     <ContentPage
@@ -107,7 +146,11 @@ ActNowLoggedInPage.propTypes = {
   navigation: PropTypes.shape({}),
   signedPetitions: PropTypes.arrayOf(PropTypes.shape({})),
   ownedPetitions: PropTypes.arrayOf(PropTypes.shape({})),
+  individualUpdateDialogArgs: PropTypes.shape({}),
+  open: PropTypes.bool,
   title: PropTypes.string,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func,
 };
 
 ActNowLoggedInPage.defaultProps = {
@@ -116,6 +159,10 @@ ActNowLoggedInPage.defaultProps = {
   ownedPetitions: undefined,
   signedPetitions: undefined,
   title: undefined,
+  onClick: undefined,
+  onClose: undefined,
+  open: undefined,
+  individualUpdateDialogArgs: undefined,
 };
 
 export default ActNowLoggedInPage;

src/components/IndividualRegistrationForm/index.js

@@ -81,6 +81,7 @@ function IndividualRegistrationForm({
               headers,
               body: JSON.stringify(body),
             });
+
             const responseJson = await response.json();
             if (response.status === 201) {
               setStatus({ children: undefined });

src/components/IndividualUpdateForm/Form.js

@@ -0,0 +1,210 @@
+import { Button, FormHelperText, Grid } from "@material-ui/core";
+import { ErrorMessage, Form as FForm } from "formik";
+import PropTypes from "prop-types";
+import React from "react";
+
+import useStyles from "./useStyles";
+
+import Input from "@/promisetracker/components/Form/Input";
+import Label from "@/promisetracker/components/Form/Label";
+
+function Form({
+  disabled,
+  errors,
+  fields,
+  name: nameProp,
+  onSubmit,
+  status,
+  ...props
+}) {
+  const classes = useStyles(props);
+  const name = nameProp || "individual-update-form";
+
+  return (
+    <FForm className={classes.root}>
+      <Grid container>
+        <Grid item xs={12}>
+          <Label error={errors?.firstName} htmlFor={`${name}-first-name`}>
+            {fields?.firstName?.label}
+          </Label>
+          <Input
+            id={`${name}-first-name`}
+            name="firstName"
+            placeholder={fields?.firstName?.placeholder}
+            aria-describedby={`${name}-first-name-helper-text`}
+          />
+          <FormHelperText
+            id={`${name}-first-name-helper-text`}
+            error={errors?.firstName}
+          >
+            <ErrorMessage name="firstName" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <Label error={errors?.lastName} htmlFor={`${name}-last-name`}>
+            {fields?.lastName?.label}
+          </Label>
+          <Input
+            id={`${name}-last-name`}
+            name="lastName"
+            placeholder={fields?.lastName?.placeholder}
+            aria-describedby={`${name}-last-name-helper-text`}
+          />
+          <FormHelperText
+            id={`${name}-last-name-helper-text`}
+            error={errors?.lastName}
+          >
+            <ErrorMessage name="lastName" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <Label error={errors?.bio} htmlFor={`${name}-bio`}>
+            {fields?.bio?.label}
+          </Label>
+          <Input
+            id={`${name}-bio`}
+            name="bio"
+            multiline
+            placeholder={fields?.bio?.placeholder}
+          />
+          <FormHelperText id={`${name}-bio-helper-text`} error={errors?.bio}>
+            <ErrorMessage name="bio" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <Label error={errors?.location} htmlFor={`${name}-location`}>
+            {fields?.location?.label}
+          </Label>
+          <Input
+            id={`${name}-location`}
+            name="location"
+            multiline
+            placeholder={fields?.location?.placeholder}
+          />
+          <FormHelperText
+            id={`${name}-location-helper-text`}
+            error={errors?.location}
+          >
+            <ErrorMessage name="location" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <Label error={errors?.phoneNumber} htmlFor={`${name}-phone-number`}>
+            {fields?.phoneNumber?.label}
+          </Label>
+          <Input
+            id={`${name}-phone-number`}
+            name="phoneNumber"
+            type="tel"
+            placeholder={fields?.phoneNumber?.placeholder}
+          />
+          <FormHelperText
+            id={`${name}-phone-number-helper-text`}
+            error={errors?.phoneNumber}
+          >
+            <ErrorMessage name="phoneNumber" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <Label error={errors?.socialMedia} htmlFor={`${name}-social-media`}>
+            {fields?.socialMedia?.label}
+          </Label>
+          <Input
+            id={`${name}-social-media`}
+            name="socialMedia"
+            type="url"
+            placeholder={fields?.socialMedia?.placeholder}
+          />
+          <FormHelperText
+            id={`${name}-social-media-helper-text`}
+            error={errors?.socialMedia}
+          >
+            <ErrorMessage name="socialMedia" />
+          </FormHelperText>
+        </Grid>
+        <Grid item xs={12}>
+          <FormHelperText
+            className={!status.error ? classes.success : ""}
+            id={`${name}-status-helper-text`}
+            {...status}
+          />
+          <Button
+            variant="contained"
+            color="secondary"
+            disabled={disabled}
+            onClick={onSubmit}
+            className={classes.buttonSubmit}
+          >
+            {fields?.submit?.label}
+          </Button>
+        </Grid>
+      </Grid>
+    </FForm>
+  );
+}
+
+Form.propTypes = {
+  disabled: PropTypes.bool,
+  fields: PropTypes.shape({
+    agree: PropTypes.shape({
+      label: PropTypes.string,
+    }),
+    bio: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    firstName: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    lastName: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    location: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    message: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    phoneNumber: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    socialMedia: PropTypes.shape({
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+    }),
+    submit: PropTypes.shape({
+      label: PropTypes.string,
+    }),
+  }),
+  errors: PropTypes.shape({
+    agree: PropTypes.string,
+    bio: PropTypes.string,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+    location: PropTypes.string,
+    message: PropTypes.string,
+    phoneNumber: PropTypes.string,
+    socialMedia: PropTypes.string,
+  }),
+  name: PropTypes.string,
+  onSubmit: PropTypes.func,
+  status: PropTypes.shape({
+    error: PropTypes.shape({}),
+  }),
+};
+
+Form.defaultProps = {
+  disabled: undefined,
+  errors: undefined,
+  fields: undefined,
+  name: undefined,
+  onSubmit: undefined,
+  status: undefined,
+};
+
+export default Form;