From dadd37e3e886cf2a99516b922334402bb8ddc3aa Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Tue, 26 Jan 2021 21:18:44 -0800
Subject: [PATCH] Use react timeline for thread (#716)

* Show conversation thread with react timeline

* Use material timeline for squeak page

* Use react timeline for main timeline page

* Use faceicon instead of dot in timeline

* Fix aligment of material ui timeline

* Use material ui timeline for squeakaddress page
---
 frontend/package-lock.json                    |  24 +++
 frontend/package.json                         |   1 +
 frontend/src/pages/squeak/Squeak.js           | 158 ++++++++++++------
 frontend/src/pages/squeak/styles.js           |   4 +
 .../src/pages/squeakaddress/SqueakAddress.js  |  44 +++--
 frontend/src/pages/squeakaddress/styles.js    |   4 +
 frontend/src/pages/timeline/Timeline.js       |  44 +++--
 frontend/src/pages/timeline/styles.js         |   4 +
 8 files changed, 213 insertions(+), 70 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 398060e7..0c75527b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1421,6 +1421,30 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.57",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz",
+      "integrity": "sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.11.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+          "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0 || ^17.0.0"
+          }
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b4cbfd3a..f047d6e2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "@grpc/proto-loader": "~0.5.4",
     "@material-ui/core": "^4.3.0",
     "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.3.0",
     "apexcharts": "^3.22.2",
     "async": "~1.5.2",
diff --git a/frontend/src/pages/squeak/Squeak.js b/frontend/src/pages/squeak/Squeak.js
index 9c5748fc..97b1ae99 100644
--- a/frontend/src/pages/squeak/Squeak.js
+++ b/frontend/src/pages/squeak/Squeak.js
@@ -8,6 +8,16 @@ import {
   Box,
 } from "@material-ui/core";
 
+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';
+
+import FaceIcon from '@material-ui/icons/Face';
+
 // styles
 import useStyles from "./styles";
 
@@ -89,80 +99,132 @@ export default function SqueakPage() {
       )
     }
     return (
-      <div>
-          <Box
-            key={squeakHash}
-            >
-          <SqueakThreadItem
-            hash={squeakHash}
-            key={squeakHash}
-            squeak={null}>
-          </SqueakThreadItem>
-          <Divider />
-          </Box>
-      </div>
+      <TimelineItem>
+<TimelineOppositeContent
+  className={classes.oppositeContent}
+  color="textSecondary"
+></TimelineOppositeContent>
+<TimelineSeparator>
+  <TimelineDot>
+    <FaceIcon />
+  </TimelineDot>
+  <TimelineConnector />
+</TimelineSeparator>
+<TimelineContent>
+<SqueakThreadItem
+  hash={squeakHash}
+  key={squeakHash}
+  squeak={null}>
+</SqueakThreadItem>
+</TimelineContent>
+</TimelineItem>
     )
   }
 
   function AncestorsContent() {
     return (
-      <div>
+      <>
         {ancestorSqueaks.slice(0, -1)
           //.reverse()
           .map(ancestorSqueak =>
-          <Box
-            key={ancestorSqueak.getSqueakHash()}
-            >
-          <SqueakThreadItem
-            hash={ancestorSqueak.getSqueakHash()}
-            key={ancestorSqueak.getSqueakHash()}
-            squeak={ancestorSqueak}
-            network={network}>
-          </SqueakThreadItem>
-          <Divider />
-          </Box>
+            <TimelineItem>
+  <TimelineOppositeContent
+    className={classes.oppositeContent}
+    color="textSecondary"
+  ></TimelineOppositeContent>
+  <TimelineSeparator>
+    <TimelineDot>
+      <FaceIcon />
+    </TimelineDot>
+    <TimelineConnector />
+  </TimelineSeparator>
+  <TimelineContent>
+  <Box
+    key={ancestorSqueak.getSqueakHash()}
+    >
+  <SqueakThreadItem
+    hash={ancestorSqueak.getSqueakHash()}
+    key={ancestorSqueak.getSqueakHash()}
+    squeak={ancestorSqueak}
+    network={network}>
+  </SqueakThreadItem>
+  </Box>
+  </TimelineContent>
+</TimelineItem>
         )}
-      </div>
+      </>
+    )
+  }
+
+  function CurrentSqueakContent() {
+    return (
+      <TimelineItem>
+<TimelineOppositeContent
+  className={classes.oppositeContent}
+  color="textSecondary"
+></TimelineOppositeContent>
+<TimelineSeparator>
+  <TimelineDot>
+    <FaceIcon />
+  </TimelineDot>
+</TimelineSeparator>
+<TimelineContent>
+<SqueakDetailItem
+  hash={hash}
+  squeak={squeak}
+  network={network}>
+</SqueakDetailItem>
+<Divider />
+</TimelineContent>
+</TimelineItem>
     )
   }
 
   function RepliesContent() {
     console.log("replySqueaks: " + replySqueaks);
     return (
-      <div>
+      <>
         {replySqueaks
           .map(replySqueak =>
-          <Box
-            p={1}
-            key={replySqueak.getSqueakHash()}
-            >
-          <SqueakThreadItem
-            hash={replySqueak.getSqueakHash()}
-            key={replySqueak.getSqueakHash()}
-            squeak={replySqueak}
-            network={network}>
-          </SqueakThreadItem>
-          <Divider />
-          </Box>
+            <TimelineItem>
+  <TimelineOppositeContent
+    className={classes.oppositeContent}
+    color="textSecondary"
+  ></TimelineOppositeContent>
+  <TimelineSeparator>
+    <TimelineDot>
+      <FaceIcon />
+    </TimelineDot>
+  </TimelineSeparator>
+  <TimelineContent>
+  <Box
+    p={1}
+    key={replySqueak.getSqueakHash()}
+    >
+  <SqueakThreadItem
+    hash={replySqueak.getSqueakHash()}
+    key={replySqueak.getSqueakHash()}
+    squeak={replySqueak}
+    network={network}>
+  </SqueakThreadItem>
+  </Box>
+  </TimelineContent>
+</TimelineItem>
         )}
-      </div>
+      </>
     )
   }
 
   function SqueakContent() {
     return (
-      <>
+      <Timeline align="left">
+
         {UnkownReplyToContent()}
         {AncestorsContent()}
-        <div>
-          <SqueakDetailItem
-            hash={hash}
-            squeak={squeak}
-            network={network}>
-          </SqueakDetailItem>
-        </div>
+        {CurrentSqueakContent()}
         {RepliesContent()}
-      </>
+
+      </Timeline>
     )
   }
 
diff --git a/frontend/src/pages/squeak/styles.js b/frontend/src/pages/squeak/styles.js
index 976accde..248c1ae5 100644
--- a/frontend/src/pages/squeak/styles.js
+++ b/frontend/src/pages/squeak/styles.js
@@ -12,4 +12,8 @@ export default makeStyles(theme => ({
   text: {
     marginBottom: theme.spacing(2),
   },
+  oppositeContent: {
+  // TODO: adjust this value accordingly
+    flex: 0.0
+  }
 }));
diff --git a/frontend/src/pages/squeakaddress/SqueakAddress.js b/frontend/src/pages/squeakaddress/SqueakAddress.js
index 6e6d7704..50bff007 100644
--- a/frontend/src/pages/squeakaddress/SqueakAddress.js
+++ b/frontend/src/pages/squeakaddress/SqueakAddress.js
@@ -16,6 +16,16 @@ import Widget from "../../components/Widget";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 import CreateContactProfileDialog from "../../components/CreateContactProfileDialog";
 
+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';
+
+import FaceIcon from '@material-ui/icons/Face';
+
 import {
   getSqueakProfileByAddressRequest,
   getAddressSqueakDisplaysRequest,
@@ -99,17 +109,29 @@ export default function SqueakAddressPage() {
       <>
         <div>
           {squeaks.map(squeak =>
-            <Box
-              p={1}
-              key={squeak.getSqueakHash()}
-              >
-            <SqueakThreadItem
-              hash={squeak.getSqueakHash()}
-              key={squeak.getSqueakHash()}
-              squeak={squeak}
-              network={network}>
-            </SqueakThreadItem>
-            </Box>
+            <Timeline align="left">
+
+            <TimelineItem>
+      <TimelineOppositeContent
+    className={classes.oppositeContent}
+    color="textSecondary"
+      ></TimelineOppositeContent>
+      <TimelineSeparator>
+        <TimelineDot>
+          <FaceIcon />
+        </TimelineDot>
+      </TimelineSeparator>
+      <TimelineContent>
+      <SqueakThreadItem
+        hash={squeak.getSqueakHash()}
+        key={squeak.getSqueakHash()}
+        squeak={squeak}
+        network={network}>
+      </SqueakThreadItem>
+      </TimelineContent>
+      </TimelineItem>
+
+            </Timeline>
           )}
         </div>
       </>
diff --git a/frontend/src/pages/squeakaddress/styles.js b/frontend/src/pages/squeakaddress/styles.js
index 976accde..1921f812 100644
--- a/frontend/src/pages/squeakaddress/styles.js
+++ b/frontend/src/pages/squeakaddress/styles.js
@@ -12,4 +12,8 @@ export default makeStyles(theme => ({
   text: {
     marginBottom: theme.spacing(2),
   },
+  oppositeContent: {
+    // TODO: adjust this value accordingly
+    flex: 0.0
+  }
 }));
diff --git a/frontend/src/pages/timeline/Timeline.js b/frontend/src/pages/timeline/Timeline.js
index 3c5911ea..2dc72db0 100644
--- a/frontend/src/pages/timeline/Timeline.js
+++ b/frontend/src/pages/timeline/Timeline.js
@@ -23,6 +23,16 @@ import {
 } from "recharts";
 import EditIcon from '@material-ui/icons/Edit';
 
+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';
+
+import FaceIcon from '@material-ui/icons/Face';
+
 // styles
 import useStyles from "./styles";
 
@@ -98,17 +108,29 @@ export default function TimelinePage() {
       <>
         <div>
         {squeaks.map(squeak =>
-          <Box
-            p={1}
-            key={squeak.getSqueakHash()}
-            >
-          <SqueakThreadItem
-            key={squeak.getSqueakHash()}
-            hash={squeak.getSqueakHash()}
-            squeak={squeak}
-            network={network}>
-          </SqueakThreadItem>
-          </Box>
+          <Timeline align="left">
+
+          <TimelineItem>
+    <TimelineOppositeContent
+  className={classes.oppositeContent}
+  color="textSecondary"
+    ></TimelineOppositeContent>
+    <TimelineSeparator>
+      <TimelineDot>
+        <FaceIcon />
+      </TimelineDot>
+    </TimelineSeparator>
+    <TimelineContent>
+    <SqueakThreadItem
+      key={squeak.getSqueakHash()}
+      hash={squeak.getSqueakHash()}
+      squeak={squeak}
+      network={network}>
+    </SqueakThreadItem>
+    </TimelineContent>
+    </TimelineItem>
+
+          </Timeline>
         )}
         </div>
       </>
diff --git a/frontend/src/pages/timeline/styles.js b/frontend/src/pages/timeline/styles.js
index 92fd73df..878fa3e1 100644
--- a/frontend/src/pages/timeline/styles.js
+++ b/frontend/src/pages/timeline/styles.js
@@ -17,4 +17,8 @@ export default makeStyles(theme => ({
     bottom: theme.spacing(4),
     right: theme.spacing(4),
   },
+  oppositeContent: {
+    // TODO: adjust this value accordingly
+    flex: 0.0
+  }
 }));