Profile.jsx

import React, { useState } from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import EditIcon from "@material-ui/icons/Edit";
import IconButton from "@material-ui/core/IconButton";
import format from "date-fns/format";

import { useAuth } from "../../context/AuthUserContext";
import MessageDialog from "../MessageDialog";
import MessageVerifyDialog from "../MessageVerifyDialog";
import UpdateFieldDialog from "../UpdateFieldDialog";
import Bookings from "./Bookings";
import SideBar from "./SideBar";
import Spinner from "../Spinner";

import Verify from './Verify';

const useStyles = makeStyles(({ spacing }) => ({
  root: {
    display: "flex",
    flexGrow: 1,
    justifyContent: "center",
    flexDirection: "column",
  },
  withSideBar: {
    display: "flex",
    justifyContent: "flex-end",
    marginBottom: spacing(2),
  },
  mainContainer: {
    display: 'flex',
    flexGrow: 1,
  },
  sideBar: {
    height: "100%",
    minWidth: 260,
    padding: spacing(1),
  },
  paper: {
    marginRight: spacing(3),
    padding: spacing(4, 3),
  },
  avatar: {
    width: "100px",
    height: "100px",
  },
  img: {
    margin: "auto",
    display: "block",
    maxWidth: "100%",
    maxHeight: "100%",
  },
  displayName: {
    display: "flex",
  },
  actionItems: {
    textAlign: "right",
  },
  accountInfoItem: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",

    "& > div": {
      display: "flex",
    },

    "& svg": {
      fontSize: "1rem",
    },
  },
  accountInfoItem2Lines: {
    flexDirection: "column",

    "& p": {
      fontSize: "0.8rem",
      marginBottom: "0.4rem",
    },
  },
}));

function Profile() {
  const [messageData, setMessageData] = useState(undefined);
  const [messageDataVerify, setMessageDataVerify] = useState(undefined);
  const [updateFieldDialogData, setUpdateFieldDialogData] = useState(false);

  const classes = useStyles();

  const {
    loading,
    authUser,
    connectWithFacebook,
    connectWithGoogle,
    verifyEmail,
    updateEmail,
    updateDisplayName,
    updateUserData,
  } = useAuth();


  const onVerifyId = async () => {
    setMessageDataVerify({
      title: "Verify ID",
      message: "Here you will have the Government Id verification flow.",
    });
  };

  const onVerifyEmail = async () => {
    await verifyEmail();
    setMessageData({
      title: "Verify Email",
      message:
        "A verification email was sent, please follow the instructions in order to finish the email verification.",
    });
  };

  const onMessageClose = async () => {
    setMessageDataVerify(undefined);
    setMessageData(undefined);
  };

  const updateAddress = (address) => {
    updateUserData({ userId: authUser.id, address });
  };

  const onEditDisplayNameClick = () =>
    setUpdateFieldDialogData({
      title: "Update Display Name",
      name: "displayName",
      fields: {
        displayName: {
          name: "displayName",
          label: "Display Name",
        },
      },
    });

  const onEditEmailClick = () =>
    setUpdateFieldDialogData({
      title: "Update Email",
      name: "email",
      message:
        "Please provide the new Email and your current password to update your email.",
      fields: {
        email: {
          name: "email",
          type: "email",
          label: "New Email",
        },
        password: {
          name: "password",
          type: "password",
          label: "Confirm Password",
        },
      },
    });

  const onEditAddressClick = () =>
    setUpdateFieldDialogData({
      title: "Update Address",
      name: "address",
      message: "Please provide address.",
      fields: {
        addressLine1: {
          name: "addressLine1",
          type: "text",
          label: "Address Line 1",
        },
        addressLine2: {
          name: "addressLine2",
          type: "text",
          label: "Address Line 2",
        },
        zipCode: {
          name: "zipCode",
          type: "text",
          label: "ZipCode",
        },
        city: {
          name: "city",
          type: "text",
          label: "City",
        },
        state: {
          name: "state",
          type: "text",
          label: "State",
        },
        country: {
          name: "country",
          type: "text",
          label: "Country",
        },
      },
    });

  const handleFieldUpdate = async (name, values) => {
    switch (name) {
      case "displayName":
        await updateDisplayName(values.displayName);
        break;
      case "email":
        await updateEmail(values.email, values.password);
        break;
      case "address":
        await updateAddress(values);
        break;
      default:
        break;
    }
  };

  const formatAddress = ({ addressLine1, addressLine2, zipCode, city, state, country }) =>
    `${addressLine1}, ${addressLine2}, ${city}, ${state} ${zipCode}, ${country}`;

  return (
    <>
      <MessageDialog messageData={messageData} onClose={onMessageClose} />
      <MessageVerifyDialog messageData={messageDataVerify} onClose={onMessageClose} />
      <UpdateFieldDialog
        dialogData={updateFieldDialogData}
        setDialogData={setUpdateFieldDialogData}
        onUpdate={handleFieldUpdate}
      />
      <Container>
        <div className={classes.root}>
          <div className={classes.withSideBar}>
            <div className={classes.mainContainer}>
              {loading && <Spinner />}
              {!loading && authUser && (
                <Paper className={classes.paper}>
                  <Grid container spacing={3}>
                    <Grid item container spacing={2} justifyContent="center">
                      <Avatar
                        className={classes.avatar}
                        alt={`${authUser.displayName}'s Profile Picture`}
                        src={authUser.photoURL}
                      />
                    </Grid>
                    <Grid item container direction="column">
                      <Grid item className={classes.displayName}>
                        <Typography variant="h5">
                          {authUser.displayName}
                        </Typography>
                        <IconButton
                          size="small"
                          aria-label="edit-name"
                          onClick={onEditDisplayNameClick}
                        >
                          <EditIcon />
                        </IconButton>
                      </Grid>
                      <Grid item>
                        <Typography variant="subtitle1">
                          Joined {format(authUser.created, "PP")}
                        </Typography>
                        <br />
                      </Grid>
                      <Grid container item justifyContent="space-evenly">
                        <Container width="xl">
                          <div className={classes.accountInfoItem}>
                            <Typography variant="subtitle2">
                              Approved to Drive
                            </Typography>
                            <Button
                              aria-label="verify-id"
                              size="small"
                              color="primary"
                              onClick={onVerifyId}
                              disabled={authUser.approvedToDrive}
                            >
                              {authUser.approvedToDrive
                                ? "Verified"
                                : "Verify ID"}
                            </Button>
                            {/* <Verify /> */}
                          </div>
                          <div className={classes.accountInfoItem}>
                            <div>
                              <Typography variant="subtitle2">
                                Email: {authUser.email}
                              </Typography>
                              <IconButton
                                size="small"
                                aria-label="edit-email"
                                onClick={onEditEmailClick}
                              >
                                <EditIcon />
                              </IconButton>
                            </div>
                            <Button
                              aria-label="verify-email"
                              size="small"
                              color="primary"
                              disabled={authUser.emailVerified}
                              onClick={onVerifyEmail}
                            >
                              {authUser.emailVerified ? "Verified" : "Verify"}
                            </Button>
                          </div>
                          <div className={classes.accountInfoItem}>
                            <div className={classes.accountInfoItem2Lines}>
                              <Typography variant="subtitle2">
                                Address:{" "}
                              </Typography>
                              <Typography variant="body1">
                                {authUser.address
                                  ? formatAddress(authUser.address)
                                  : ""}
                              </Typography>
                            </div>
                            <Button
                              aria-label="edit-address"
                              size="small"
                              color="primary"
                              onClick={onEditAddressClick}
                            >
                              Edit
                            </Button>
                          </div>
                          <Typography variant="subtitle2">Phone</Typography>
                          <div className={classes.accountInfoItem}>
                            <Typography variant="subtitle2">
                              Facebook Account
                            </Typography>
                            <Button
                              aria-label="connect-facebook"
                              size="small"
                              color="primary"
                              onClick={connectWithFacebook}
                              disabled={!!authUser.providers?.facebook}
                            >
                              {authUser.providers?.facebook
                                ? "Connected"
                                : "Connect"}
                            </Button>
                          </div>
                          <div className={classes.accountInfoItem}>
                            <Typography variant="subtitle2">
                              Google Account
                            </Typography>
                            <Button
                              aria-label="connect-google"
                              size="small"
                              color="primary"
                              onClick={connectWithGoogle}
                              disabled={!!authUser.providers?.google}
                            >
                              {authUser.providers?.google
                                ? "Connected"
                                : "Connect"}
                            </Button>
                          </div>
                        </Container>
                      </Grid>
                    </Grid>
                  </Grid>
                </Paper>
              )}
            </div>
            <SideBar className={classes.sideBar} />
          </div>
          {!loading && authUser?.id && <Bookings userId={authUser.id} />}
        </div>
      </Container>
    </>
  );
}

export default Profile;