From 85bee41a1dea887e4a96cb75384c21bfe26eafaa Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Tue, 26 Jan 2021 16:26:17 -0800 Subject: [PATCH] Add configure profile dialog (#711) * Start working on configure profile dialog * Use separate dialog for configure profile --- .../ConfigureProfileDialog.js | 120 ++++++++++++++++++ .../ConfigureProfileDialog/package.json | 6 + .../ConfigureProfileDialog/styles.js | 43 +++++++ frontend/src/pages/profile/Profile.js | 79 ++++++------ 4 files changed, 211 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/ConfigureProfileDialog/ConfigureProfileDialog.js create mode 100644 frontend/src/components/ConfigureProfileDialog/package.json create mode 100644 frontend/src/components/ConfigureProfileDialog/styles.js diff --git a/frontend/src/components/ConfigureProfileDialog/ConfigureProfileDialog.js b/frontend/src/components/ConfigureProfileDialog/ConfigureProfileDialog.js new file mode 100644 index 00000000..84f8ca69 --- /dev/null +++ b/frontend/src/components/ConfigureProfileDialog/ConfigureProfileDialog.js @@ -0,0 +1,120 @@ +import React, {useState, useEffect} from 'react'; +import { + Paper, + IconButton, + Menu, + MenuItem, + Typography, + Grid, + Box, + Link, + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + TextField, + DialogActions, + Button, + FormControl, + FormLabel, + FormGroup, + InputLabel, + FormControlLabel, + FormHelperText, + Switch, + Select, +} from "@material-ui/core"; +import { MoreVert as MoreIcon } from "@material-ui/icons"; +import {useHistory} from "react-router-dom"; +import classnames from "classnames"; + +// styles +import useStyles from "./styles"; + +import Widget from "../../components/Widget"; +import SqueakThreadItem from "../../components/SqueakThreadItem"; + +import { + setSqueakProfileFollowingRequest, + setSqueakProfileSharingRequest, +} from "../../squeakclient/requests" + + +export default function ConfigureProfileDialog({ + open, + handleClose, + squeakProfile, + reloadProfile, + ...props +}) { + var classes = useStyles(); + const history = useHistory(); + + const setFollowing = (id, following) => { + setSqueakProfileFollowingRequest(id, following, () => { + reloadProfile(); + }) + }; + const setSharing = (id, sharing) => { + setSqueakProfileSharingRequest(id, sharing, () => { + reloadProfile(); + }) + }; + + const handleSettingsFollowingChange = (event) => { + console.log("Following changed for profile id: " + squeakProfile.getProfileId()); + console.log("Following changed to: " + event.target.checked); + setFollowing(squeakProfile.getProfileId(), event.target.checked); + }; + + const handleSettingsSharingChange = (event) => { + console.log("Sharing changed for profile id: " + squeakProfile.getProfileId()); + console.log("Sharing changed to: " + event.target.checked); + setSharing(squeakProfile.getProfileId(), event.target.checked); + }; + + function MakeCancelButton() { + return ( + + ) + } + + function ProfileSettingsForm() { + return ( + + Profile settings + + } + label="Following" + /> + } + label="Sharing" + /> + + + ) + } + + return ( + + Configure Profile +
+ + {squeakProfile + && ProfileSettingsForm()} + + + {MakeCancelButton()} + +
+ + ) +} diff --git a/frontend/src/components/ConfigureProfileDialog/package.json b/frontend/src/components/ConfigureProfileDialog/package.json new file mode 100644 index 00000000..5412ff81 --- /dev/null +++ b/frontend/src/components/ConfigureProfileDialog/package.json @@ -0,0 +1,6 @@ +{ + "name": "ConfigureProfileDialog", + "version": "0.0.0", + "private": true, + "main": "ConfigureProfileDialog.js" +} diff --git a/frontend/src/components/ConfigureProfileDialog/styles.js b/frontend/src/components/ConfigureProfileDialog/styles.js new file mode 100644 index 00000000..f2d64da1 --- /dev/null +++ b/frontend/src/components/ConfigureProfileDialog/styles.js @@ -0,0 +1,43 @@ +import { makeStyles } from "@material-ui/styles"; + +export default makeStyles(theme => ({ + widgetWrapper: { + display: "flex", + minHeight: "100%", + }, + widgetHeader: { + padding: theme.spacing(3), + paddingBottom: theme.spacing(1), + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, + widgetRoot: { + boxShadow: theme.customShadows.widget, + }, + widgetBody: { + paddingBottom: theme.spacing(3), + paddingRight: theme.spacing(3), + paddingLeft: theme.spacing(3), + }, + noPadding: { + padding: 0, + }, + paper: { + display: "flex", + flexDirection: "column", + flexGrow: 1, + overflow: "hidden", + }, + moreButton: { + margin: -theme.spacing(1), + padding: 0, + width: 40, + height: 40, + color: theme.palette.text.hint, + "&:hover": { + backgroundColor: theme.palette.primary.main, + color: "rgba(255, 255, 255, 0.35)", + }, + }, +})); diff --git a/frontend/src/pages/profile/Profile.js b/frontend/src/pages/profile/Profile.js index 298d74e8..4470ece2 100644 --- a/frontend/src/pages/profile/Profile.js +++ b/frontend/src/pages/profile/Profile.js @@ -20,6 +20,7 @@ import PageTitle from "../../components/PageTitle"; import Widget from "../../components/Widget"; import DeleteProfileDialog from "../../components/DeleteProfileDialog"; import ExportPrivateKeyDialog from "../../components/ExportPrivateKeyDialog"; +import ConfigureProfileDialog from "../../components/ConfigureProfileDialog"; import { getSqueakProfileRequest, @@ -34,21 +35,12 @@ export default function ProfilePage() { const [squeakProfile, setSqueakProfile] = useState(null); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [exportPrivateKeyDialogOpen, setExportPrivateKeyDialogOpen] = useState(false); + const [configureDialogOpen, setConfigureDialogOpen] = useState(false); const history = useHistory(); const getSqueakProfile = (id) => { getSqueakProfileRequest(id, setSqueakProfile); }; - const setFollowing = (id, following) => { - setSqueakProfileFollowingRequest(id, following, () => { - getSqueakProfile(id); - }) - }; - const setSharing = (id, sharing) => { - setSqueakProfileSharingRequest(id, sharing, () => { - getSqueakProfile(id); - }) - }; const goToSqueakAddressPage = (squeakAddress) => { history.push("/app/squeakaddress/" + squeakAddress); @@ -67,6 +59,10 @@ export default function ProfilePage() { setExportPrivateKeyDialogOpen(true); }; + const handleClickOpenConfigureDialog = () => { + setConfigureDialogOpen(true); + }; + const handleCloseDeleteDialog = () => { setDeleteDialogOpen(false); }; @@ -75,16 +71,12 @@ export default function ProfilePage() { setExportPrivateKeyDialogOpen(false); }; - const handleSettingsFollowingChange = (event) => { - console.log("Following changed for profile id: " + id); - console.log("Following changed to: " + event.target.checked); - setFollowing(id, event.target.checked); + const handleCloseConfigureDialog = () => { + setConfigureDialogOpen(false); }; - const handleSettingsSharingChange = (event) => { - console.log("Sharing changed for profile id: " + id); - console.log("Sharing changed to: " + event.target.checked); - setSharing(id, event.target.checked); + const handleReloadProfile = () => { + getSqueakProfile(id); }; function NoProfileContent() { @@ -101,9 +93,9 @@ export default function ProfilePage() {

Address: {squeakProfile.getAddress()}

- {ProfileSettingsForm()} {ViewSqueaksButton()} {DeleteProfileButton()} + {ConfigureProfileButton()} {squeakProfile.getHasPrivateKey() && ExportPrivateKeyButton() } @@ -111,24 +103,6 @@ export default function ProfilePage() { ) } - function ProfileSettingsForm() { - return ( - - Profile settings - - } - label="Following" - /> - } - label="Sharing" - /> - - - ) - } - function DeleteProfileButton() { return ( <> @@ -180,6 +154,23 @@ export default function ProfilePage() { ) } + function ConfigureProfileButton() { + return ( + <> + +
+ +
+ + + ) + } + function DeleteProfileDialogContent() { return ( <> @@ -204,6 +195,19 @@ export default function ProfilePage() { ) } + function ConfigureProfileDialogContent() { + return ( + <> + + + ) + } + return ( <> @@ -215,6 +219,7 @@ export default function ProfilePage() { {DeleteProfileDialogContent()} {ExportPrivateKeyDialogContent()} + {ConfigureProfileDialogContent()} ); }