Add configure profile dialog (#711)

* Start working on configure profile dialog

* Use separate dialog for configure profile

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 (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function ProfileSettingsForm() {
+    return (
+      <FormControl component="fieldset">
+        <FormLabel component="legend">Profile settings</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={<Switch checked={squeakProfile.getFollowing()} onChange={handleSettingsFollowingChange} />}
+            label="Following"
+          />
+          <FormControlLabel
+            control={<Switch checked={squeakProfile.getSharing()} onChange={handleSettingsSharingChange} />}
+            label="Sharing"
+          />
+        </FormGroup>
+      </FormControl>
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Configure Profile</DialogTitle>
+  <form className={classes.root} noValidate autoComplete="off">
+  <DialogContent>
+    {squeakProfile
+      && ProfileSettingsForm()}
+  </DialogContent>
+  <DialogActions>
+    {MakeCancelButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

frontend/src/components/ConfigureProfileDialog/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ConfigureProfileDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "ConfigureProfileDialog.js"
+}

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)",
+    },
+  },
+}));

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() {
         <p>
           Address: {squeakProfile.getAddress()}
         </p>
-        {ProfileSettingsForm()}
         {ViewSqueaksButton()}
         {DeleteProfileButton()}
+        {ConfigureProfileButton()}
         {squeakProfile.getHasPrivateKey() &&
           ExportPrivateKeyButton()
         }
@@ -111,24 +103,6 @@ export default function ProfilePage() {
     )
   }
 
-  function ProfileSettingsForm() {
-    return (
-      <FormControl component="fieldset">
-        <FormLabel component="legend">Profile settings</FormLabel>
-        <FormGroup>
-          <FormControlLabel
-            control={<Switch checked={squeakProfile.getFollowing()} onChange={handleSettingsFollowingChange} />}
-            label="Following"
-          />
-          <FormControlLabel
-            control={<Switch checked={squeakProfile.getSharing()} onChange={handleSettingsSharingChange} />}
-            label="Sharing"
-          />
-        </FormGroup>
-      </FormControl>
-    )
-  }
-
   function DeleteProfileButton() {
     return (
       <>
@@ -180,6 +154,23 @@ export default function ProfilePage() {
     )
   }
 
+  function ConfigureProfileButton() {
+    return (
+      <>
+      <Grid item xs={12}>
+        <div className={classes.root}>
+          <Button
+            variant="contained"
+            onClick={() => {
+              handleClickOpenConfigureDialog();
+            }}>Configure Profile
+          </Button>
+        </div>
+      </Grid>
+      </>
+    )
+  }
+
   function DeleteProfileDialogContent() {
     return (
       <>
@@ -204,6 +195,19 @@ export default function ProfilePage() {
     )
   }
 
+  function ConfigureProfileDialogContent() {
+    return (
+      <>
+        <ConfigureProfileDialog
+          open={configureDialogOpen}
+          handleClose={handleCloseConfigureDialog}
+          squeakProfile={squeakProfile}
+          reloadProfile={handleReloadProfile}
+          ></ConfigureProfileDialog>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title={'Squeak Profile: ' + (squeakProfile ? squeakProfile.getProfileName() : null)} />
@@ -215,6 +219,7 @@ export default function ProfilePage() {
       </div>
       {DeleteProfileDialogContent()}
       {ExportPrivateKeyDialogContent()}
+      {ConfigureProfileDialogContent()}
     </>
   );
 }