[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(true);
+ }
+ };
+
+ 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;