Refactor action bar component (#933)

* Got refactored action bar component working

* Fixed action bar component

* Almost got action bar working in squeak thread item components

* Got action component working for squeak thread item in timeline

* Create reusable component for squeak list

* Add squeak ancestor thread component

* Created squeak replies component

* Use squeak list component in squeak address page

* Update frontend build

frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js

@@ -54,6 +54,7 @@ export default function DeleteSqueakDialog({
 
   function handleSubmit(event) {
     event.preventDefault();
+    event.stopPropagation();
     console.log( 'squeakToDelete:', squeakToDelete);
     var squeakHash = squeakToDelete.getSqueakHash();
     console.log( 'squeakHash:', squeakHash);
@@ -61,10 +62,19 @@ export default function DeleteSqueakDialog({
     handleClose();
   }
 
+  function cancel(event) {
+    event.stopPropagation();
+    handleClose();
+  }
+
+  function ignore(event) {
+    event.stopPropagation();
+  }
+
   function MakeCancelButton() {
     return (
       <Button
-        onClick={handleClose}
+        onClick={cancel}
         variant="contained"
         color="secondary"
       >
@@ -87,7 +97,7 @@ export default function DeleteSqueakDialog({
   }
 
   return (
-    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+    <Dialog open={open} onClose={cancel} onBackdropClick={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
   <DialogTitle id="form-dialog-title">Delete Squeak</DialogTitle>
   <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
   <DialogContent>

frontend/src/components/MakeSqueakDialog/MakeSqueakDialog.js

@@ -106,6 +106,15 @@ export default function MakeSqueakDialog({
     handleClose();
   }
 
+  function cancel(event) {
+    event.stopPropagation();
+    handleClose();
+  }
+
+  function ignore(event) {
+    event.stopPropagation();
+  }
+
   function ReplySqueakContent() {
     return (
       <>
@@ -156,7 +165,7 @@ export default function MakeSqueakDialog({
   function MakeCancelButton() {
     return (
       <Button
-        onClick={handleClose}
+        onClick={cancel}
         variant="contained"
         color="secondary"
       >
@@ -179,7 +188,7 @@ export default function MakeSqueakDialog({
   }
 
   return (
-    <Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
+    <Dialog open={open} onEnter={resetFields} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
   <DialogTitle id="form-dialog-title">Make Squeak</DialogTitle>
   <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
   <DialogContent>

frontend/src/components/SqueakActionBar/SqueakActionBar.js

@@ -0,0 +1,311 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Snackbar,
+  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 LockIcon from '@material-ui/icons/Lock';
+
+import ReplyIcon from '@material-ui/icons/Reply';
+import RepeatIcon from '@material-ui/icons/Repeat';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import DeleteIcon from '@material-ui/icons/Delete';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import ZoomInIcon from '@material-ui/icons/ZoomIn';
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+import MakeSqueakDialog from "../../components/MakeSqueakDialog";
+import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
+import BuySqueakDialog from "../../components/BuySqueakDialog";
+import SqueakDetailsDialog from "../../components/SqueakDetailsDialog";
+
+
+import {
+  syncSqueakRequest,
+  likeSqueakRequest,
+  unlikeSqueakRequest,
+} from "../../squeakclient/requests"
+
+import {
+  getBlockDetailUrl,
+} from "../../bitcoin/blockexplorer"
+
+import moment from 'moment';
+
+import {
+  goToSqueakAddressPage,
+} from "../../navigation/navigation"
+
+
+export default function SqueakActionBar({
+  hash,
+  squeak,
+  network,
+  reloadSqueak,
+  ...props
+}) {
+  var classes = useStyles();
+
+  const history = useHistory();
+
+  const [replyDialogOpen, setReplyDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [viewDetailsDialogOpen, setViewDetailsDialogOpen] = useState(false);
+
+
+  const handleClickOpenReplyDialog = () => {
+    setReplyDialogOpen(true);
+  };
+
+  const handleCloseReplyDialog = () => {
+     setReplyDialogOpen(false);
+  };
+
+  const handleClickOpenDeleteDialog = () => {
+    setDeleteDialogOpen(true);
+    console.log("deleteDialogOpen: " + deleteDialogOpen);
+  };
+
+  const handleCloseDeleteDialog = () => {
+     setDeleteDialogOpen(false);
+  };
+
+  const handleClickOpenViewDetailsDialog = () => {
+    setViewDetailsDialogOpen(true);
+  };
+
+  const handleCloseViewDetailsDialog = () => {
+    setViewDetailsDialogOpen(false);
+  };
+
+  const handleLikeSqueak = () => {
+    console.log("liked.");
+    likeSqueakRequest(hash, (response) => {
+      reloadSqueak();
+    });
+  };
+
+  const handleUnlikeSqueak = () => {
+    console.log("unliked.");
+    unlikeSqueakRequest(hash, (response) => {
+      reloadSqueak();
+    });
+  };
+
+  const onReplyClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling reply click...");
+    if (!squeak) {
+      return;
+    }
+    handleClickOpenReplyDialog();
+  }
+
+  const onResqueakClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling resqueak click...");
+    if (!squeak) {
+      return;
+    }
+    // TODO: handleClickOpenReplyDialog();
+  }
+
+  const onLikeClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling like click...");
+    if (!squeak) {
+      return;
+    }
+    handleLikeSqueak();
+  }
+
+  const onUnlikeClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling like click...");
+    if (!squeak) {
+      return;
+    }
+    handleUnlikeSqueak();
+  }
+
+  const onDeleteClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling delete click...");
+    if (!squeak) {
+      return;
+    }
+    handleClickOpenDeleteDialog();
+    event.stopPropagation();
+  }
+
+  const onZoomInClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling zoomin click...");
+    if (!squeak) {
+      return;
+    }
+    handleClickOpenViewDetailsDialog();
+  }
+
+
+      function MakeSqueakDialogContent() {
+        return (
+          <>
+            <MakeSqueakDialog
+              open={replyDialogOpen}
+              handleClose={handleCloseReplyDialog}
+              replytoSqueak={squeak}
+              ></MakeSqueakDialog>
+          </>
+        )
+      }
+
+      function DeleteSqueakDialogContent() {
+        return (
+          <>
+            <DeleteSqueakDialog
+              open={deleteDialogOpen}
+              handleClose={handleCloseDeleteDialog}
+              squeakToDelete={squeak}
+              ></DeleteSqueakDialog>
+          </>
+        )
+      }
+
+      function ViewDetailsDialogContent() {
+        return (
+          <>
+            {squeak &&
+            <SqueakDetailsDialog
+              open={viewDetailsDialogOpen}
+              handleClose={handleCloseViewDetailsDialog}
+              hash={hash}
+              squeak={squeak}
+              ></SqueakDetailsDialog>
+            }
+          </>
+        )
+      }
+
+      function ActionBarContent() {
+          return (
+            <>
+            <Divider />
+            <Grid
+              container
+              direction="row"
+              justify="flex-start"
+              alignItems="flex-start"
+            >
+              <Grid item xs={3} sm={1}>
+                {ReplyIconContent()}
+              </Grid>
+              <Grid item xs={3} sm={1}>
+                {ResqueakIconContent()}
+              </Grid>
+              <Grid item xs={3} sm={1}>
+                {LikeIconContent()}
+              </Grid>
+              <Grid item xs={3} sm={1}>
+                {DeleteIconContent()}
+              </Grid>
+              <Grid item xs={3} sm={1}>
+                {DetailsIconContent()}
+              </Grid>
+            </Grid>
+            </>
+          )
+      }
+
+      function ReplyIconContent() {
+          return (
+            <IconButton aria-label="reply"
+              onClick={onReplyClick}
+              >
+              <ReplyIcon />
+            </IconButton>
+          )
+      }
+
+      function ResqueakIconContent() {
+          return (
+            <IconButton aria-label="resqueak"
+              onClick={onResqueakClick}
+              >
+              <RepeatIcon />
+            </IconButton>
+          )
+      }
+
+      function LikeIconContent() {
+        if (squeak && !squeak.getLikedTimeS()) {
+          return (
+            <IconButton aria-label="like"
+              onClick={onLikeClick}
+              >
+              <FavoriteIcon />
+            </IconButton>
+          )
+        } else {
+          return (
+            <IconButton aria-label="unlike"
+              onClick={onUnlikeClick}
+              >
+              <FavoriteIcon
+              color="secondary"
+                />
+            </IconButton>
+          )
+        }
+      }
+
+      function DeleteIconContent() {
+          return (
+            <IconButton aria-label="delete"
+              onClick={onDeleteClick}
+              >
+              <DeleteIcon />
+            </IconButton>
+          )
+      }
+
+      function DetailsIconContent() {
+          return (
+            <IconButton aria-label="details"
+              onClick={onZoomInClick}
+              >
+              <ZoomInIcon />
+            </IconButton>
+          )
+      }
+
+  return (
+    <>
+    {ActionBarContent()}
+    {MakeSqueakDialogContent()}
+    {DeleteSqueakDialogContent()}
+    {ViewDetailsDialogContent()}
+    </>
+  )
+}

frontend/src/components/SqueakActionBar/package.json

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

frontend/src/components/SqueakActionBar/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: {
+    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)",
+    },
+  },
+}));

frontend/src/components/SqueakDetailItem/SqueakDetailItem.js

@@ -34,6 +34,7 @@ import MakeSqueakDialog from "../../components/MakeSqueakDialog";
 import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
 import BuySqueakDialog from "../../components/BuySqueakDialog";
 import SqueakDetailsDialog from "../../components/SqueakDetailsDialog";
+import SqueakActionBar from "../../components/SqueakActionBar";
 
 
 import {
@@ -509,7 +510,12 @@ export default function SqueakDetailItem({
               {SqueakTime()}
             </Grid>
           </Grid>
-          {squeak && ActionBarContent()}
+          <SqueakActionBar
+            hash={hash}
+            squeak={squeak}
+            network={network}
+            reloadSqueak={reloadSqueak}
+          ></SqueakActionBar>
     </Paper>
     {MakeSqueakDialogContent()}
     {DeleteSqueakDialogContent()}

frontend/src/components/SqueakDetailsDialog/SqueakDetailsDialog.js

@@ -50,6 +50,15 @@ export default function SqueakDetailsDialog({
       getSqueakDetailsRequest(hash, setSqueakDetails);
   };
 
+  function cancel(event) {
+    event.stopPropagation();
+    handleClose();
+  }
+
+  function ignore(event) {
+    event.stopPropagation();
+  }
+
   useEffect(()=>{
     getSqueakDetails(hash)
   },[hash]);
@@ -116,7 +125,7 @@ export default function SqueakDetailsDialog({
   }
 
   return (
-    <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+    <Dialog open={open} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
   <DialogTitle id="form-dialog-title">View Squeak Details</DialogTitle>
   <form className={classes.root} noValidate autoComplete="off">
   <DialogContent>

frontend/src/components/SqueakList/SqueakList.js

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+import LockIcon from '@material-ui/icons/Lock';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+// styles
+import useStyles from "./styles";
+
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import Widget from "../../components/Widget";
+
+import moment from 'moment';
+
+import {
+  getTimelineSqueakDisplaysRequest,
+  getNetworkRequest,
+  getSqueakDisplayRequest,
+} from "../../squeakclient/requests"
+
+
+export default function SqueakList({
+  squeaks,
+  network,
+  setSqueaksFn,
+  ...props
+}) {
+  var classes = useStyles();
+
+  const history = useHistory();
+
+  function reloadSqueakItem(itemHash) {
+    // Get the new squeak.
+    getSqueakDisplayRequest(itemHash, (newSqueak) => {
+      const newSqueaks = squeaks.map((item) => {
+        // TODO: .hash or .getHash() ?
+        if (item.getSqueakHash() === itemHash) {
+          return newSqueak;
+        }
+        return item;
+      });
+      setSqueaksFn(newSqueaks);
+    })
+  }
+
+  const handleReloadSqueakItem = (itemHash) => {
+    const innerFunc = () => {
+      reloadSqueakItem(itemHash);
+    }
+    return innerFunc;
+  }
+
+  return (
+    <div>
+    {squeaks.map(squeak =>
+      <Timeline
+        align="left"
+        key={squeak.getSqueakHash()}
+      >
+
+      <TimelineItem>
+      <TimelineOppositeContent
+      className={classes.oppositeContent}
+      color="textSecondary"
+      ></TimelineOppositeContent>
+      <TimelineSeparator>
+        <SqueakUserAvatar
+          squeakProfile={squeak.getAuthor()}
+        />
+      </TimelineSeparator>
+      <TimelineContent>
+      <SqueakThreadItem
+        key={squeak.getSqueakHash()}
+        hash={squeak.getSqueakHash()}
+        squeak={squeak}
+        network={network}
+        reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}>
+      </SqueakThreadItem>
+      </TimelineContent>
+      </TimelineItem>
+
+      </Timeline>
+    )}
+    </div>
+  )
+}

frontend/src/components/SqueakList/package.json

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

frontend/src/components/SqueakList/styles.js

@@ -0,0 +1,9 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  oppositeContent: {
+    // TODO: adjust this value accordingly
+    flex: 0.0,
+    padding: 0,
+  },
+}));

frontend/src/components/SqueakReplies/SqueakReplies.js

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+import LockIcon from '@material-ui/icons/Lock';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+// styles
+import useStyles from "./styles";
+
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import Widget from "../../components/Widget";
+
+import moment from 'moment';
+
+import {
+  getTimelineSqueakDisplaysRequest,
+  getNetworkRequest,
+  getSqueakDisplayRequest,
+} from "../../squeakclient/requests"
+
+
+export default function SqueakReplies({
+  squeaks,
+  network,
+  setSqueaksFn,
+  ...props
+}) {
+  var classes = useStyles();
+
+  const history = useHistory();
+
+  function reloadSqueakItem(itemHash) {
+    // Get the new squeak.
+    getSqueakDisplayRequest(itemHash, (newSqueak) => {
+      const newSqueaks = squeaks.map((item) => {
+        // TODO: .hash or .getHash() ?
+        if (item.getSqueakHash() === itemHash) {
+          return newSqueak;
+        }
+        return item;
+      });
+      setSqueaksFn(newSqueaks);
+    })
+  }
+
+  const handleReloadSqueakItem = (itemHash) => {
+    const innerFunc = () => {
+      reloadSqueakItem(itemHash);
+    }
+    return innerFunc;
+  }
+
+  return (
+    <>
+      {squeaks
+        .map(squeak =>
+          <TimelineItem
+          key={squeak.getSqueakHash()}
+          >
+          <TimelineOppositeContent
+            className={classes.oppositeContent}
+            color="textSecondary"
+          ></TimelineOppositeContent>
+          <TimelineSeparator>
+            <SqueakUserAvatar
+              squeakProfile={squeak.getAuthor()}
+            />
+          </TimelineSeparator>
+          <TimelineContent>
+          <Box
+            p={1}
+            key={squeak.getSqueakHash()}
+            >
+          <SqueakThreadItem
+            hash={squeak.getSqueakHash()}
+            key={squeak.getSqueakHash()}
+            squeak={squeak}
+            network={network}
+            reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}>
+          </SqueakThreadItem>
+          </Box>
+          </TimelineContent>
+          </TimelineItem>
+      )}
+    </>
+  )
+}

frontend/src/components/SqueakReplies/package.json

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

frontend/src/components/SqueakReplies/styles.js

@@ -0,0 +1,9 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  oppositeContent: {
+    // TODO: adjust this value accordingly
+    flex: 0.0,
+    padding: 0,
+  },
+}));

frontend/src/components/SqueakThread/SqueakThread.js

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+import LockIcon from '@material-ui/icons/Lock';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+// styles
+import useStyles from "./styles";
+
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import Widget from "../../components/Widget";
+
+import moment from 'moment';
+
+import {
+  getTimelineSqueakDisplaysRequest,
+  getNetworkRequest,
+  getSqueakDisplayRequest,
+} from "../../squeakclient/requests"
+
+
+export default function SqueakList({
+  squeaks,
+  network,
+  setSqueaksFn,
+  ...props
+}) {
+  var classes = useStyles();
+
+  const history = useHistory();
+
+  function reloadSqueakItem(itemHash) {
+    // Get the new squeak.
+    getSqueakDisplayRequest(itemHash, (newSqueak) => {
+      const newSqueaks = squeaks.map((item) => {
+        // TODO: .hash or .getHash() ?
+        if (item.getSqueakHash() === itemHash) {
+          return newSqueak;
+        }
+        return item;
+      });
+      setSqueaksFn(newSqueaks);
+    })
+  }
+
+  const handleReloadSqueakItem = (itemHash) => {
+    const innerFunc = () => {
+      reloadSqueakItem(itemHash);
+    }
+    return innerFunc;
+  }
+
+  return (
+    <>
+      {squeaks
+        //.reverse()
+        .map(squeak =>
+          <TimelineItem
+          key={squeak.getSqueakHash()}
+          >
+          <TimelineOppositeContent
+            className={classes.oppositeContent}
+            color="textSecondary"
+          ></TimelineOppositeContent>
+          <TimelineSeparator>
+            <SqueakUserAvatar
+              squeakProfile={squeak.getAuthor()}
+            />
+            <TimelineConnector />
+          </TimelineSeparator>
+          <TimelineContent>
+          <Box
+            key={squeak.getSqueakHash()}
+            >
+          <SqueakThreadItem
+            hash={squeak.getSqueakHash()}
+            key={squeak.getSqueakHash()}
+            squeak={squeak}
+            network={network}
+            reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}>
+          </SqueakThreadItem>
+          </Box>
+          </TimelineContent>
+          </TimelineItem>
+      )}
+    </>
+  )
+}

frontend/src/components/SqueakThread/package.json

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

frontend/src/components/SqueakThread/styles.js

@@ -0,0 +1,9 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  oppositeContent: {
+    // TODO: adjust this value accordingly
+    flex: 0.0,
+    padding: 0,
+  },
+}));

frontend/src/components/SqueakThreadItem/SqueakThreadItem.js

@@ -20,6 +20,8 @@ import DownloadIcon from '@material-ui/icons/CloudDownload';
 import useStyles from "./styles";
 
 import Widget from "../../components/Widget";
+import SqueakActionBar from "../../components/SqueakActionBar";
+
 
 import {
   getBlockDetailUrl,
@@ -36,6 +38,7 @@ export default function SqueakThreadItem({
   hash,
   squeak,
   network,
+  reloadSqueak,
   ...props
 }) {
   var classes = useStyles();
@@ -201,6 +204,12 @@ export default function SqueakThreadItem({
               {SqueakTime()}
             </Grid>
           </Grid>
+          <SqueakActionBar
+            hash={hash}
+            squeak={squeak}
+            network={network}
+            reloadSqueak={reloadSqueak}
+          ></SqueakActionBar>
     </Paper>
   )
 }

frontend/src/pages/liked/Liked.js

@@ -44,6 +44,7 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import { Typography } from "../../components/Wrappers";
 import MakeSqueakDialog from "../../components/MakeSqueakDialog";
 import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import SqueakList from "../../components/SqueakList";
 
 import {
   getLikedSqueakDisplaysRequest,
@@ -84,54 +85,14 @@ export default function LikedPage() {
     )
   }
 
-  function TimelineUserAvatar(squeak) {
-    const handleAvatarClick = () => {
-      console.log("Avatar clicked...");
-      goToSqueakAddressPage(history, squeak.getAuthorAddress());
-    };
-    return (
-      <TimelineDot
-      onClick={handleAvatarClick}
-      style={{cursor: 'pointer'}}
-      >
-        <FaceIcon />
-      </TimelineDot>
-    )
-  }
-
   function SqueaksContent() {
     return (
       <>
-        <div>
-        {squeaks.map(squeak =>
-          <Timeline
-            align="left"
-            key={squeak.getSqueakHash()}
-          >
-
-          <TimelineItem>
-    <TimelineOppositeContent
-  className={classes.oppositeContent}
-  color="textSecondary"
-    ></TimelineOppositeContent>
-    <TimelineSeparator>
-      <SqueakUserAvatar
-        squeakProfile={squeak.getAuthor()}
-      />
-    </TimelineSeparator>
-    <TimelineContent>
-    <SqueakThreadItem
-      key={squeak.getSqueakHash()}
-      hash={squeak.getSqueakHash()}
-      squeak={squeak}
-      network={network}>
-    </SqueakThreadItem>
-    </TimelineContent>
-    </TimelineItem>
-
-          </Timeline>
-        )}
-        </div>
+        <SqueakList
+          squeaks={squeaks}
+          network={network}
+          setSqueaksFn={setSqueaks}
+        ></SqueakList>
       </>
     )
   }

frontend/src/pages/liked/styles.js

@@ -17,9 +17,4 @@ export default makeStyles(theme => ({
     bottom: theme.spacing(4),
     right: theme.spacing(4),
   },
-  oppositeContent: {
-    // TODO: adjust this value accordingly
-    flex: 0.0,
-    padding: 0,
-  }
 }));

frontend/src/pages/squeak/Squeak.js

@@ -29,6 +29,8 @@ import Widget from "../../components/Widget";
 import SqueakDetailItem from "../../components/SqueakDetailItem";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import SqueakThread from "../../components/SqueakThread";
+import SqueakReplies from "../../components/SqueakReplies";
 
 
 import {
@@ -149,38 +151,11 @@ export default function SqueakPage() {
 
   function AncestorsContent() {
     return (
-      <>
-        {ancestorSqueaks.slice(0, -1)
-          //.reverse()
-          .map(ancestorSqueak =>
-            <TimelineItem
-            key={ancestorSqueak.getSqueakHash()}
-            >
-  <TimelineOppositeContent
-    className={classes.oppositeContent}
-    color="textSecondary"
-  ></TimelineOppositeContent>
-  <TimelineSeparator>
-    <SqueakUserAvatar
-      squeakProfile={ancestorSqueak.getAuthor()}
-    />
-    <TimelineConnector />
-  </TimelineSeparator>
-  <TimelineContent>
-  <Box
-    key={ancestorSqueak.getSqueakHash()}
-    >
-  <SqueakThreadItem
-    hash={ancestorSqueak.getSqueakHash()}
-    key={ancestorSqueak.getSqueakHash()}
-    squeak={ancestorSqueak}
-    network={network}>
-  </SqueakThreadItem>
-  </Box>
-  </TimelineContent>
-</TimelineItem>
-        )}
-      </>
+      <SqueakThread
+        squeaks={ancestorSqueaks.slice(0, -1)}
+        network={network}
+        setSqueaksFn={setAncestorSqueaks}
+      ></SqueakThread>
     )
   }
 
@@ -211,37 +186,11 @@ export default function SqueakPage() {
 
   function RepliesContent() {
     return (
-      <>
-        {replySqueaks
-          .map(replySqueak =>
-            <TimelineItem
-            key={replySqueak.getSqueakHash()}
-            >
-  <TimelineOppositeContent
-    className={classes.oppositeContent}
-    color="textSecondary"
-  ></TimelineOppositeContent>
-  <TimelineSeparator>
-    <SqueakUserAvatar
-      squeakProfile={replySqueak.getAuthor()}
-    />
-  </TimelineSeparator>
-  <TimelineContent>
-  <Box
-    p={1}
-    key={replySqueak.getSqueakHash()}
-    >
-  <SqueakThreadItem
-    hash={replySqueak.getSqueakHash()}
-    key={replySqueak.getSqueakHash()}
-    squeak={replySqueak}
-    network={network}>
-  </SqueakThreadItem>
-  </Box>
-  </TimelineContent>
-</TimelineItem>
-        )}
-      </>
+      <SqueakReplies
+        squeaks={replySqueaks}
+        network={network}
+        setSqueaksFn={setReplySqueaks}
+      ></SqueakReplies>
     )
   }
 

frontend/src/pages/squeakaddress/SqueakAddress.js

@@ -16,6 +16,7 @@ import Widget from "../../components/Widget";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 import CreateContactProfileDialog from "../../components/CreateContactProfileDialog";
 import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import SqueakList from "../../components/SqueakList";
 
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
@@ -123,38 +124,11 @@ export default function SqueakAddressPage() {
 
   function SqueaksContent() {
     return (
-      <>
-        <div>
-          {squeaks.map(squeak =>
-            <Timeline
-              align="left"
-              key={squeak.getSqueakHash()}
-            >
-
-            <TimelineItem>
-      <TimelineOppositeContent
-    className={classes.oppositeContent}
-    color="textSecondary"
-      ></TimelineOppositeContent>
-      <TimelineSeparator>
-        <SqueakUserAvatar
-          squeakProfile={squeak.getAuthor()}
-        />
-      </TimelineSeparator>
-      <TimelineContent>
-      <SqueakThreadItem
-        hash={squeak.getSqueakHash()}
-        key={squeak.getSqueakHash()}
-        squeak={squeak}
-        network={network}>
-      </SqueakThreadItem>
-      </TimelineContent>
-      </TimelineItem>
-
-            </Timeline>
-          )}
-        </div>
-      </>
+      <SqueakList
+        squeaks={squeaks}
+        network={network}
+        setSqueaksFn={setSqueaks}
+      ></SqueakList>
     )
   }
 

frontend/src/pages/timeline/Timeline.js

@@ -44,10 +44,12 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import { Typography } from "../../components/Wrappers";
 import MakeSqueakDialog from "../../components/MakeSqueakDialog";
 import SqueakUserAvatar from "../../components/SqueakUserAvatar";
+import SqueakList from "../../components/SqueakList";
 
 import {
   getTimelineSqueakDisplaysRequest,
   getNetworkRequest,
+  getSqueakDisplayRequest,
 } from "../../squeakclient/requests"
 import {
   goToSqueakAddressPage,
@@ -104,54 +106,14 @@ export default function TimelinePage() {
     )
   }
 
-  function TimelineUserAvatar(squeak) {
-    const handleAvatarClick = () => {
-      console.log("Avatar clicked...");
-      goToSqueakAddressPage(history, squeak.getAuthorAddress());
-    };
-    return (
-      <TimelineDot
-      onClick={handleAvatarClick}
-      style={{cursor: 'pointer'}}
-      >
-        <FaceIcon />
-      </TimelineDot>
-    )
-  }
-
   function SqueaksContent() {
     return (
       <>
-        <div>
-        {squeaks.map(squeak =>
-          <Timeline
-            align="left"
-            key={squeak.getSqueakHash()}
-          >
-
-          <TimelineItem>
-    <TimelineOppositeContent
-  className={classes.oppositeContent}
-  color="textSecondary"
-    ></TimelineOppositeContent>
-    <TimelineSeparator>
-      <SqueakUserAvatar
-        squeakProfile={squeak.getAuthor()}
-      />
-    </TimelineSeparator>
-    <TimelineContent>
-    <SqueakThreadItem
-      key={squeak.getSqueakHash()}
-      hash={squeak.getSqueakHash()}
-      squeak={squeak}
-      network={network}>
-    </SqueakThreadItem>
-    </TimelineContent>
-    </TimelineItem>
-
-          </Timeline>
-        )}
-        </div>
+        <SqueakList
+          squeaks={squeaks}
+          network={network}
+          setSqueaksFn={setSqueaks}
+        ></SqueakList>
       </>
     )
   }

frontend/src/pages/timeline/styles.js

@@ -17,9 +17,4 @@ export default makeStyles(theme => ({
     bottom: theme.spacing(4),
     right: theme.spacing(4),
   },
-  oppositeContent: {
-    // TODO: adjust this value accordingly
-    flex: 0.0,
-    padding: 0,
-  }
 }));

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,25 +1,25 @@
 {
   "files": {
-    "main.js": "/static/js/main.567e5ed0.chunk.js",
-    "main.js.map": "/static/js/main.567e5ed0.chunk.js.map",
+    "main.js": "/static/js/main.034d1d90.chunk.js",
+    "main.js.map": "/static/js/main.034d1d90.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.9f0ba400.js",
     "runtime-main.js.map": "/static/js/runtime-main.9f0ba400.js.map",
-    "static/css/2.ea4ba2f0.chunk.css": "/static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.9730688a.chunk.js": "/static/js/2.9730688a.chunk.js",
-    "static/js/2.9730688a.chunk.js.map": "/static/js/2.9730688a.chunk.js.map",
+    "static/css/2.15110fae.chunk.css": "/static/css/2.15110fae.chunk.css",
+    "static/js/2.0c6b0365.chunk.js": "/static/js/2.0c6b0365.chunk.js",
+    "static/js/2.0c6b0365.chunk.js.map": "/static/js/2.0c6b0365.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js": "/precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js",
+    "precache-manifest.184ee12ba2fdaeed60b4b1122e7b2a5e.js": "/precache-manifest.184ee12ba2fdaeed60b4b1122e7b2a5e.js",
     "service-worker.js": "/service-worker.js",
-    "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
-    "static/js/2.9730688a.chunk.js.LICENSE.txt": "/static/js/2.9730688a.chunk.js.LICENSE.txt",
+    "static/css/2.15110fae.chunk.css.map": "/static/css/2.15110fae.chunk.css.map",
+    "static/js/2.0c6b0365.chunk.js.LICENSE.txt": "/static/js/2.0c6b0365.chunk.js.LICENSE.txt",
     "static/media/font-awesome.min.css": "/static/media/fontawesome-webfont.fee66e71.woff",
     "static/media/google.svg": "/static/media/google.695a3160.svg",
     "static/media/logo.svg": "/static/media/logo.a0185b04.svg"
   },
   "entrypoints": [
     "static/js/runtime-main.9f0ba400.js",
-    "static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.9730688a.chunk.js",
-    "static/js/main.567e5ed0.chunk.js"
+    "static/css/2.15110fae.chunk.css",
+    "static/js/2.0c6b0365.chunk.js",
+    "static/js/main.034d1d90.chunk.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.9730688a.chunk.js"></script><script src="/static/js/main.567e5ed0.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.15110fae.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.0c6b0365.chunk.js"></script><script src="/static/js/main.034d1d90.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.184ee12ba2fdaeed60b4b1122e7b2a5e.js

@@ -1,23 +1,23 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "746661bdd186ed0ecbf8a192460db429",
+    "revision": "fd1c96fb663a7957a730e5a22d39c333",
     "url": "/index.html"
   },
   {
-    "revision": "de2597d66eae0798c929",
-    "url": "/static/css/2.ea4ba2f0.chunk.css"
+    "revision": "610bb8a208dd140f5277",
+    "url": "/static/css/2.15110fae.chunk.css"
   },
   {
-    "revision": "de2597d66eae0798c929",
-    "url": "/static/js/2.9730688a.chunk.js"
+    "revision": "610bb8a208dd140f5277",
+    "url": "/static/js/2.0c6b0365.chunk.js"
   },
   {
     "revision": "7156b2c9571000777b9be03b3c6006ee",
-    "url": "/static/js/2.9730688a.chunk.js.LICENSE.txt"
+    "url": "/static/js/2.0c6b0365.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "4042141c87696a664b9f",
-    "url": "/static/js/main.567e5ed0.chunk.js"
+    "revision": "6f4463451ba09518e46b",
+    "url": "/static/js/main.034d1d90.chunk.js"
   },
   {
     "revision": "cc9816de5a8639d377ea",

squeaknode/admin/webapp/static/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js"
+  "/precache-manifest.184ee12ba2fdaeed60b4b1122e7b2a5e.js"
 );
 
 self.addEventListener('message', (event) => {