Created
November 11, 2021 06:40
-
-
Save arifikhsan/55bb6a3918142920c75fea8f34229c8b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment