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
2026-08-18 13:09:08 +02:00 · 2021-01-26 21:18:44 -08:00 · 2021-01-26 21:18:44 -08:00 · dadd37e3e8
commit dadd37e3e8
parent e968954793
8 changed files with 213 additions and 70 deletions
--- 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",
--- 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",
--- 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>
    )
  }

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