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