From 6d7247eb1381156ccd0891c09e4a914ee2dbf912 Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Thu, 23 Jul 2020 16:38:50 -0700
Subject: [PATCH] Show squeaks timeline (#131)

* Show list of squeaks in timeline page

* Change text for no info in timeline page

* Shows squeaks in timeline
---
 .../src/components/Squeak/Squeak.js           | 67 +++++++++++++++++++
 .../src/components/Squeak/package.json        |  6 ++
 .../src/components/Squeak/styles.js           | 43 ++++++++++++
 .../src/pages/timeline/Timeline.js            | 32 +++++++--
 4 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 frontend/react-material-admin/src/components/Squeak/Squeak.js
 create mode 100644 frontend/react-material-admin/src/components/Squeak/package.json
 create mode 100644 frontend/react-material-admin/src/components/Squeak/styles.js

diff --git a/frontend/react-material-admin/src/components/Squeak/Squeak.js b/frontend/react-material-admin/src/components/Squeak/Squeak.js
new file mode 100644
index 00000000..fbeffc4f
--- /dev/null
+++ b/frontend/react-material-admin/src/components/Squeak/Squeak.js
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import classnames from "classnames";
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+
+export default function Squeak({
+  hash,
+  isUnlocked,
+  contentStr,
+  isReply,
+  replyTo,
+  isAuthorKnown,
+  authorName,
+  blockHeight,
+  blockTime,
+  ...props
+}) {
+  var classes = useStyles();
+
+  // local
+  // var [moreButtonRef, setMoreButtonRef] = useState(null);
+  // var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
+
+  return (
+    <Grid item xs={12}>
+        <Widget
+          disableWidgetMenu
+          upperTitle
+          bodyClass={classes.fullHeightBody}
+          className={classes.card}
+        >
+          <Grid
+            container
+            direction="row"
+            justify="space-between"
+            alignItems="center"
+          >
+            <Grid item>
+              <Typography size="md">{contentStr}</Typography>
+            </Grid>
+            <Grid item>
+              <Typography color="text" colorBrightness="secondary">
+                {authorName}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography color="text" colorBrightness="secondary">
+                {new Date(blockTime*1000).toString()} (Block # {blockHeight})
+              </Typography>
+            </Grid>
+          </Grid>
+        </Widget>
+    </Grid>
+  )
+}
diff --git a/frontend/react-material-admin/src/components/Squeak/package.json b/frontend/react-material-admin/src/components/Squeak/package.json
new file mode 100644
index 00000000..20f32318
--- /dev/null
+++ b/frontend/react-material-admin/src/components/Squeak/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "Squeak",
+  "version": "0.0.0",
+  "private": true,
+  "main": "Squeak.js"
+}
diff --git a/frontend/react-material-admin/src/components/Squeak/styles.js b/frontend/react-material-admin/src/components/Squeak/styles.js
new file mode 100644
index 00000000..f2d64da1
--- /dev/null
+++ b/frontend/react-material-admin/src/components/Squeak/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/react-material-admin/src/pages/timeline/Timeline.js b/frontend/react-material-admin/src/pages/timeline/Timeline.js
index 0460d46a..060a0684 100644
--- a/frontend/react-material-admin/src/pages/timeline/Timeline.js
+++ b/frontend/react-material-admin/src/pages/timeline/Timeline.js
@@ -23,6 +23,7 @@ import useStyles from "./styles";
 // components
 import PageTitle from "../../components/PageTitle";
 import Widget from "../../components/Widget";
+import Squeak from "../../components/Squeak";
 import { Typography } from "../../components/Wrappers";
 
 import { GetInfoRequest, WalletBalanceRequest } from "../../proto/lnd_pb"
@@ -55,16 +56,39 @@ export default function TimelinePage() {
   function NoInfoContent() {
     return (
       <div>
-        Unable to squeaks.
+        Unable to load squeaks.
       </div>
     )
   }
 
   function InfoContent() {
     return (
-      <div>
-        Number of squeaks: {squeaks.length}
-      </div>
+      <>
+        <Grid container spacing={4} >
+        {squeaks.map(i =>
+          <Squeak
+            hash={i.getSqueakHash()}
+            contentStr={i.getContentStr()}
+            authorName={i.getAuthorName()}
+            blockHeight={i.getBlockHeight()}
+            blockTime={i.getBlockTime()}
+            disableWidgetMenu
+            upperTitle
+            bodyClass={classes.fullHeightBody}
+            className={classes.card}
+          >
+            <div className={classes.visitsNumberContainer}>
+            <Typography color="text" colorBrightness="secondary">
+              {i.getSqueakHash()}
+            </Typography>
+              <Typography size="md" weight="medium">
+                {i.getContentStr()}
+              </Typography>
+            </div>
+          </Squeak>
+        )}
+        </Grid>
+      </>
     )
   }