Add squeak page (#139)

* Create squeak page

* Fix click address on squeak item handler

* Add handle squeak click handler

* Fix handle squeak click in timeline page

frontend/react-material-admin/src/components/Layout/Layout.js

@@ -18,6 +18,7 @@ import Sidebar from "../Sidebar";
 import Timeline from "../../pages/timeline";
 import Dashboard from "../../pages/dashboard";
 import SqueakAddress from "../../pages/squeakaddress";
+import Squeak from "../../pages/squeak";
 import Profile from "../../pages/profile";
 import CreateSigningProfile from "../../pages/createsigningprofile";
 import CreateContactProfile from "../../pages/createcontactprofile";
@@ -53,6 +54,7 @@ function Layout(props) {
               <Route path="/app/timeline" component={Timeline} />
               <Route path="/app/dashboard" component={Dashboard} />
               <Route path="/app/squeakaddress/:address" component={SqueakAddress} />
+              <Route path="/app/squeak/:hash" component={Squeak} />
               <Route path="/app/profile/:id" component={Profile} />
               <Route path="/app/createsigningprofile" component={CreateSigningProfile} />
               <Route path="/app/createcontactprofile" component={CreateContactProfile} />

frontend/react-material-admin/src/components/Squeak/Squeak.js

@@ -20,6 +20,8 @@ import Widget from "../../components/Widget";
 
 export default function Squeak({
   squeak,
+  handleAddressClick,
+  handleSqueakClick,
   ...props
 }) {
   var classes = useStyles();
@@ -30,8 +32,27 @@ export default function Squeak({
 
   const history = useHistory();
 
+  const onAddressClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log("Handling address click...");
+    if (handleAddressClick) {
+      handleAddressClick();
+    }
+  }
+
+  const onSqueakClick = (event) => {
+    event.preventDefault();
+    console.log("Handling squeak click...");
+    if (handleSqueakClick) {
+      handleSqueakClick();
+    }
+  }
+
   return (
-    <Grid item xs={12}>
+    <Grid item xs={12}
+      onClick={onSqueakClick}
+    >
         <Widget
           disableWidgetMenu
           upperTitle
@@ -46,8 +67,8 @@ export default function Squeak({
           >
             <Grid item>
                 <Box fontWeight="fontWeightBold">
-                  <Link href={"#/app/squeakaddress/" + squeak.getAuthorAddress()}
-                    >
+                  <Link href="#"
+                    onClick={onAddressClick}>
                     {squeak.getAuthorName()}
                   </Link>
                 </Box>

frontend/react-material-admin/src/pages/squeak/Squeak.js

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import {useHistory} from "react-router-dom";
+import { Grid, Button } from "@material-ui/core";
+
+// styles
+import useStyles from "./styles";
+
+// components
+import PageTitle from "../../components/PageTitle";
+import Widget from "../../components/Widget";
+import Squeak from "../../components/Squeak";
+
+import { GetSqueakDisplayRequest } from "../../proto/squeak_admin_pb"
+import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+
+var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+
+export default function SqueakPage() {
+  var classes = useStyles();
+  const history = useHistory();
+  const { hash } = useParams();
+  const [squeak, setSqueak] = useState(null);
+
+  const getSqueak = (hash) => {
+      var getSqueakDisplayRequest = new GetSqueakDisplayRequest()
+      getSqueakDisplayRequest.setHash(hash);
+      console.log(getSqueakDisplayRequest);
+
+      client.getSqueakDisplay(getSqueakDisplayRequest, {}, (err, response) => {
+        if (err) {
+          console.log(err.message);
+          alert('Error getting squeak with hash: ' + err.message);
+          return;
+        }
+        console.log(response);
+        console.log(response.getSqueakDisplayEntry());
+        setSqueak(response.getSqueakDisplayEntry())
+      });
+};
+
+  const goToCreateProfilePage = (profileId) => {
+    history.push("/app/profile/" + profileId);
+  };
+
+  useEffect(()=>{
+    getSqueak(hash)
+  },[hash]);
+
+  function NoSqueakContent() {
+    return (
+      <div>
+        Unable to load squeak.
+      </div>
+    )
+  }
+
+  function SqueakContent() {
+    return (
+      <>
+        <Grid container spacing={4} >
+          <Squeak
+            key={squeak.getSqueakHash()}
+            squeak={squeak}>
+          </Squeak>
+        </Grid>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <PageTitle title="Squeak" />
+      {squeak
+        ? SqueakContent()
+        : NoSqueakContent()
+      }
+    </>
+  );
+}

frontend/react-material-admin/src/pages/squeak/package.json

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

frontend/react-material-admin/src/pages/squeak/styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  dashedBorder: {
+    border: "1px dashed",
+    borderColor: theme.palette.primary.main,
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    marginTop: theme.spacing(1),
+  },
+  text: {
+    marginBottom: theme.spacing(2),
+  },
+}));

frontend/react-material-admin/src/pages/timeline/Timeline.js

@@ -35,20 +35,26 @@ var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080
 export default function TimelinePage() {
   var classes = useStyles();
   var theme = useTheme();
-
   const [squeaks, setSqueaks] = useState([]);
+  const history = useHistory();
 
   const getSqueaks = () => {
     console.log("called getSqueaks");
-
     var getSqueaksRequest = new GetFollowedSqueakDisplaysRequest()
-
     client.getFollowedSqueakDisplays(getSqueaksRequest, {}, (err, response) => {
       console.log(response);
       setSqueaks(response.getSqueakDisplayEntriesList())
     });
   };
 
+  const goToSqueakAddressPage = (squeakAddress) => {
+    history.push("/app/squeakaddress/" + squeakAddress);
+  };
+
+  const goToSqueakPage = (hash) => {
+    history.push("/app/squeak/" + hash);
+  };
+
   useEffect(()=>{
     getSqueaks()
   },[]);
@@ -66,7 +72,12 @@ export default function TimelinePage() {
       <>
         <Grid container spacing={4} >
         {squeaks.map(squeak =>
-          <Squeak key={squeak.getSqueakHash()} squeak={squeak}></Squeak>
+          <Squeak
+            key={squeak.getSqueakHash()}
+            squeak={squeak}
+            handleAddressClick={() => goToSqueakAddressPage(squeak.getAuthorAddress())}
+            handleSqueakClick={() => goToSqueakPage(squeak.getSqueakHash())}>
+          </Squeak>
         )}
         </Grid>
       </>