From 96c72f640eabd245a08511e7317dfdf5e0ddb7a5 Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Sat, 25 Jul 2020 00:11:35 -0700 Subject: [PATCH] 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 --- .../src/components/Layout/Layout.js | 2 + .../src/components/Squeak/Squeak.js | 27 ++++++- .../src/pages/squeak/Squeak.js | 80 +++++++++++++++++++ .../src/pages/squeak/package.json | 6 ++ .../src/pages/squeak/styles.js | 15 ++++ .../src/pages/timeline/Timeline.js | 19 ++++- 6 files changed, 142 insertions(+), 7 deletions(-) create mode 100644 frontend/react-material-admin/src/pages/squeak/Squeak.js create mode 100644 frontend/react-material-admin/src/pages/squeak/package.json create mode 100644 frontend/react-material-admin/src/pages/squeak/styles.js diff --git a/frontend/react-material-admin/src/components/Layout/Layout.js b/frontend/react-material-admin/src/components/Layout/Layout.js index 32eccb69..801af561 100644 --- a/frontend/react-material-admin/src/components/Layout/Layout.js +++ b/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) { + diff --git a/frontend/react-material-admin/src/components/Squeak/Squeak.js b/frontend/react-material-admin/src/components/Squeak/Squeak.js index 8374d02a..55b2855b 100644 --- a/frontend/react-material-admin/src/components/Squeak/Squeak.js +++ b/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 ( - + - + {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())}> + )}