Use component for profile details (#750)

frontend/src/components/SqueakProfileDetailItem/SqueakProfileDetailItem.js

@@ -0,0 +1,186 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+  Divider,
+  Button,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+
+import CardHeader from '@material-ui/core/CardHeader';
+import Avatar from '@material-ui/core/Avatar';
+
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+
+
+
+import {
+  syncSqueakRequest,
+} from "../../squeakclient/requests"
+
+import {
+  getBlockDetailUrl,
+} from "../../bitcoin/blockexplorer"
+import {
+  getProfileImageSrcString,
+} from "../../squeakimages/images"
+
+import moment from 'moment';
+
+export default function SqueakProfileDetailItem({
+  squeakProfile,
+  handleViewSqueaksClick,
+  handleConfigureClick,
+  handleRenameClick,
+  handleChangeImageClick,
+  handleExportClick,
+  handleDeleteClick,
+  ...props
+}) {
+  var classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const history = useHistory();
+
+  const goToSqueakAddressPage = () => {
+    history.push("/app/squeakaddress/" + squeakProfile.getAddress());
+  };
+
+  const onViewSqueaksClick = () => {
+    console.log("Handling view squeaks click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    goToSqueakAddressPage();
+  }
+
+  const onConfigureClick = () => {
+    console.log("Handling configure click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    handleConfigureClick();
+  }
+
+  const onRenameClick = () => {
+    console.log("Handling rename click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    handleRenameClick();
+  }
+
+  const onChangeImageClick = () => {
+    console.log("Handling change image click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    handleChangeImageClick();
+  }
+
+  const onExportClick = () => {
+    console.log("Handling export click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    handleExportClick();
+  }
+
+  const onDeleteClick = () => {
+    console.log("Handling delete click...");
+    handleClose();
+    if (!squeakProfile) {
+      return;
+    }
+    handleDeleteClick();
+  }
+
+
+    const profileImageBase64String = squeakProfile.getProfileImage();
+    return (
+        <Card className={classes.root}>
+
+        <CardHeader
+  action={
+    <>
+    <IconButton aria-label="settings" onClick={handleClick}>
+      <MoreVertIcon />
+    </IconButton>
+    <Menu
+      id="simple-menu"
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={handleClose}
+    >
+      <MenuItem onClick={onConfigureClick}>Configure</MenuItem>
+      <MenuItem onClick={handleClose}>Rename</MenuItem>
+      <MenuItem onClick={handleClose}>Change Image</MenuItem>
+      {squeakProfile.getHasPrivateKey() &&
+        <MenuItem onClick={onExportClick}>Export</MenuItem>
+      }
+      <MenuItem onClick={onDeleteClick}>Delete</MenuItem>
+    </Menu>
+    </>
+  }
+  title={squeakProfile.getProfileName()}
+/>
+
+            <CardMedia
+              className={classes.media}
+              image={`${getProfileImageSrcString(squeakProfile)}`}
+              title="Profile Image"
+            />
+            <CardContent>
+              <Typography gutterBottom variant="h5" component="h2">
+                {squeakProfile.getHasPrivateKey() && <VpnKeyIcon />}
+              </Typography>
+              <Typography variant="body2" color="textSecondary" component="p">
+                {squeakProfile.getAddress()}
+              </Typography>
+            </CardContent>
+          <CardActions>
+            <Button
+              onClick={() => {
+                onViewSqueaksClick();
+              }}
+              size="small" color="primary">
+              View Squeaks
+            </Button>
+          </CardActions>
+        </Card>
+      );
+}

frontend/src/components/SqueakProfileDetailItem/package.json

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

frontend/src/components/SqueakProfileDetailItem/styles.js

@@ -0,0 +1,49 @@
+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: {
+    padding: '6px 12px',
+  },
+  secondaryTail: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  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)",
+    },
+  },
+  root: {
+    maxWidth: 345,
+  },
+  media: {
+    height: 180,
+  },
+}));

frontend/src/pages/profile/Profile.js

@@ -38,6 +38,7 @@ import Widget from "../../components/Widget";
 import DeleteProfileDialog from "../../components/DeleteProfileDialog";
 import ExportPrivateKeyDialog from "../../components/ExportPrivateKeyDialog";
 import ConfigureProfileDialog from "../../components/ConfigureProfileDialog";
+import SqueakProfileDetailItem from "../../components/SqueakProfileDetailItem";
 
 import {
   getSqueakProfileRequest,
@@ -111,6 +112,10 @@ export default function ProfilePage() {
     getSqueakProfile(id);
   };
 
+  const handleViewSqueaks = () => {
+    goToSqueakAddressPage(squeakProfile.getAddress());
+  };
+
   function ProfileContent() {
     return (
       <>
@@ -122,57 +127,15 @@ export default function ProfilePage() {
   function SqueakProfileImageDisplay() {
     const profileImageBase64String = squeakProfile.getProfileImage();
     return (
-        <Card className={classes.root}>
-
-        <CardHeader
-  action={
-    <>
-    <IconButton aria-label="settings" onClick={handleClick}>
-      <MoreVertIcon />
-    </IconButton>
-    <Menu
-      id="simple-menu"
-      anchorEl={anchorEl}
-      keepMounted
-      open={Boolean(anchorEl)}
-      onClose={handleClose}
-    >
-      <MenuItem onClick={handleClickOpenConfigureDialog}>Configure</MenuItem>
-      <MenuItem onClick={handleClose}>Rename</MenuItem>
-      <MenuItem onClick={handleClose}>Change Image</MenuItem>
-      {squeakProfile.getHasPrivateKey() &&
-        <MenuItem onClick={handleClickOpenExportPrivateKeyDialog}>Export</MenuItem>
-      }
-      <MenuItem onClick={handleClickOpenDeleteDialog}>Delete</MenuItem>
-    </Menu>
-    </>
-  }
-  title={squeakProfile.getProfileName()}
-/>
-
-            <CardMedia
-              className={classes.media}
-              image={`${getProfileImageSrcString(squeakProfile)}`}
-              title="Profile Image"
-            />
-            <CardContent>
-              <Typography gutterBottom variant="h5" component="h2">
-                {squeakProfile.getHasPrivateKey() && <VpnKeyIcon />}
-              </Typography>
-              <Typography variant="body2" color="textSecondary" component="p">
-                {squeakProfile.getAddress()}
-              </Typography>
-            </CardContent>
-          <CardActions>
-            <Button
-              onClick={() => {
-                goToSqueakAddressPage(squeakProfile.getAddress());
-              }}
-              size="small" color="primary">
-              View Squeaks
-            </Button>
-          </CardActions>
-        </Card>
+        <SqueakProfileDetailItem
+          squeakProfile={squeakProfile}
+          handleViewSqueaksClick={handleViewSqueaks}
+          handleConfigureClick={handleClickOpenConfigureDialog}
+          handleRenameClick={null}
+          handleChangeImageClick={null}
+          handleExportClick={handleClickOpenExportPrivateKeyDialog}
+          handleDeleteClick={handleClickOpenDeleteDialog}
+        />
       );
   }
 

frontend/src/pages/profile/styles.js

@@ -12,10 +12,4 @@ export default makeStyles(theme => ({
   text: {
     marginBottom: theme.spacing(2),
   },
-    root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 180,
-  },
 }));