-
+
{squeak.getAuthorName()}
diff --git a/frontend/react-material-admin/src/pages/squeak/Squeak.js b/frontend/react-material-admin/src/pages/squeak/Squeak.js
new file mode 100644
index 00000000..f6446d1b
--- /dev/null
+++ b/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 (
+
+ Unable to load squeak.
+
+ )
+ }
+
+ function SqueakContent() {
+ return (
+ <>
+
+
+
+
+ >
+ )
+ }
+
+ return (
+ <>
+
+ {squeak
+ ? SqueakContent()
+ : NoSqueakContent()
+ }
+ >
+ );
+}
diff --git a/frontend/react-material-admin/src/pages/squeak/package.json b/frontend/react-material-admin/src/pages/squeak/package.json
new file mode 100644
index 00000000..b2a07b95
--- /dev/null
+++ b/frontend/react-material-admin/src/pages/squeak/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Squeak",
+ "version": "0.0.0",
+ "main": "Squeak.js",
+ "private": true
+}
diff --git a/frontend/react-material-admin/src/pages/squeak/styles.js b/frontend/react-material-admin/src/pages/squeak/styles.js
new file mode 100644
index 00000000..976accde
--- /dev/null
+++ b/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),
+ },
+}));
diff --git a/frontend/react-material-admin/src/pages/timeline/Timeline.js b/frontend/react-material-admin/src/pages/timeline/Timeline.js
index 7a931009..afe7d7b4 100644
--- a/frontend/react-material-admin/src/pages/timeline/Timeline.js
+++ b/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() {
<>
{squeaks.map(squeak =>
-
+ goToSqueakAddressPage(squeak.getAuthorAddress())}
+ handleSqueakClick={() => goToSqueakPage(squeak.getSqueakHash())}>
+
)}
>