GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-15 12:50:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add timeline page (#130)

Browse source 
* Add timeline page

* Add timeline to sidebar

* Show number of squeaks in timeline page

* Revert dashboard page back to original

* Remove dashboard and notifications pages from sidebar
This commit is contained in:
Jonathan Zernik 2020-07-23 15:13:29 -07:00 • committed by GitHub
parent 6ed772f34e
commit a95f7bbded
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 141 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/react-material-admin/src/components/Layout/Layout.js vendored
View file

@ -15,6 +15,7 @@ import Header from "../Header";
import Sidebar from "../Sidebar";
// pages
import Timeline from "../../pages/timeline";
import Dashboard from "../../pages/dashboard";
import SqueakAddress from "../../pages/squeakaddress";
import Profile from "../../pages/profile";
@ -48,6 +49,7 @@ function Layout(props) {
>
<div className={classes.fakeToolbar} />
<Switch>
<Route path="/app/timeline" component={Timeline} />
<Route path="/app/dashboard" component={Dashboard} />
<Route path="/app/squeakaddress/:address" component={SqueakAddress} />
<Route path="/app/profile/:id" component={Profile} />

12
frontend/react-material-admin/src/components/Sidebar/Sidebar.js vendored
View file

@ -31,18 +31,12 @@ import {
} from "../../context/LayoutContext";
const structure = [
{ id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
{ id: 0, label: "Timeline", link: "/app/timeline", icon: <HomeIcon /> },
{ id: 1, label: "Profiles", link: "/app/profiles", icon: <ProfilesIcon /> },
{ id: 2, label: "Lightning", link: "/app/lightning", icon: <LightningIcon /> },
{ id: 3, label: "Make Squeak", link: "/app/makesqueak", icon: <MakeSqueakIcon /> },
{
id: 3,
label: "Notifications",
link: "/app/notifications",
icon: <NotificationsIcon />,
},
{ id: 4, label: "Make Squeak", link: "/app/makesqueak", icon: <MakeSqueakIcon /> },
{
id: 5,
id: 4,
label: "UI Elements",
link: "/app/ui",
icon: <UIElementsIcon />,

31
frontend/react-material-admin/src/pages/dashboard/Dashboard.js vendored
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from "react";
import {
Grid,
LinearProgress,
@ -33,12 +33,6 @@ import Dot from "../../components/Sidebar/components/Dot";
import Table from "./components/Table/Table";
import BigStat from "./components/BigStat/BigStat";
import { HelloRequest,
HelloReply } from "../../proto/squeak_admin_pb"
import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
const mainChartData = getMainChartData();
const PieChartData = [
{ name: "Group A", value: 400, color: "primary" },
@ -48,38 +42,15 @@ const PieChartData = [
];
export default function Dashboard(props) {
console.log('starting Dashboard....');
var classes = useStyles();
var theme = useTheme();
// local
var [mainChartState, setMainChartState] = useState("monthly");
const [msg, setMsg] = useState("waiting for message...");
const getMsg = () => {
console.log("called getMsg");
var helloRequest = new HelloRequest()
helloRequest.setName('World');
client.sayHello(helloRequest, {}, (err, response) => {
console.log(response.getMessage());
setMsg(response.getMessage())
});
};
useEffect(()=>{
getMsg()
},[]);
return (
<>
<PageTitle title="Dashboard" button="Latest Reports" />
<div>
Message : {msg}
</div>
<Grid container spacing={4}>
<Grid item lg={3} md={4} sm={6} xs={12}>
<Widget

1
frontend/react-material-admin/src/pages/lightning/Lightning.js vendored
View file

@ -45,7 +45,6 @@ export default function LightningPage() {
client.lndGetInfo(getInfoRequest, {}, (err, response) => {
console.log(response);
console.log(response.getColor());
setLndInfo(response);
});
};

11
frontend/react-material-admin/src/pages/profile/Profile.js vendored
View file

@ -23,15 +23,12 @@ export default function ProfilePage() {
const getSqueakProfile = () => {
console.log("called getSqueakProfile with profileId: " + id);
var getSqueaksRequest = new GetSqueakProfileRequest()
getSqueaksRequest.setProfileId(id);
console.log(getSqueaksRequest);
var getSqueakProfileRequest = new GetSqueakProfileRequest()
getSqueakProfileRequest.setProfileId(id);
console.log(getSqueakProfileRequest);
client.getSqueakProfile(getSqueaksRequest, {}, (err, response) => {
console.log(err);
client.getSqueakProfile(getSqueakProfileRequest, {}, (err, response) => {
console.log(response);
console.log(response.getSqueakProfile());
// console.log(response.getSqueakDisplayEntriesList(),length);
setSqueakProfile(response.getSqueakProfile())
});
};

74
frontend/react-material-admin/src/pages/profiles/Profiles.js vendored
View file

@ -84,41 +84,19 @@ const useStyles = makeStyles((theme) => ({
export default function Profiles() {
const classes = useStyles();
const [msg, setMsg] = useState("waiting for message...");
const [squeaks, setSqueaks] = useState([]);
const [signingProfiles, setSigningProfiles] = useState([]);
const history = useHistory();
const getMsg = () => {
console.log("called getMsg");
var helloRequest = new HelloRequest()
helloRequest.setName('World');
client.sayHello(helloRequest, {}, (err, response) => {
console.log(response.getMessage());
setMsg(response.getMessage())
});
};
const getSqueaks = () => {
console.log("called getSqueaks");
var getSqueaksRequest = new GetFollowedSqueakDisplaysRequest()
client.getFollowedSqueakDisplays(getSqueaksRequest, {}, (err, response) => {
console.log(response);
console.log(response.getSqueakDisplayEntriesList());
// console.log(response.getSqueakDisplayEntriesList(),length);
setSqueaks(response.getSqueakDisplayEntriesList())
});
};
const getLndInfo = () => {
console.log("called getLndInfo");
var getInfoRequest = new GetInfoRequest()
client.lndGetInfo(getInfoRequest, {}, (err, response) => {
if (err) {
console.log(err.message);
return;
}
console.log(response);
});
};
@ -128,9 +106,12 @@ export default function Profiles() {
var getSigningProfilesRequest = new GetSigningProfilesRequest()
client.getSigningProfiles(getSigningProfilesRequest, {}, (err, response) => {
if (err) {
console.log(err.message);
return;
}
console.log(response);
var signingProfileRows = response.getSqueakProfilesList().map(p => [p.getProfileName(), p.getAddress(), p.getFollowing().toString(), p.getSharing().toString()]);
setSigningProfiles(signingProfileRows);
setSigningProfiles(response.getSqueakProfilesList());
});
};
@ -142,12 +123,6 @@ export default function Profiles() {
history.push("/app/squeakaddress/" + squeakAddress);
};
useEffect(() => {
getMsg()
}, []);
useEffect(() => {
getSqueaks()
}, []);
useEffect(() => {
getLndInfo()
}, []);
@ -176,16 +151,27 @@ export default function Profiles() {
</div>
</Grid>
<Grid item xs={12}>
<MUIDataTable title="Profile List" data={signingProfiles} columns={["Name", "Address", "Following", "Sharing"]} options={{
filter: false,
print: false,
viewColumns: false,
selectableRows: "none",
onRowClick: rowData => {
var address = rowData[1];
goToSqueakAddressPage(address);
}
}}/>
<MUIDataTable
title="Profile List"
data={signingProfiles.map(p =>
[
p.getProfileName(),
p.getAddress(),
p.getFollowing().toString(),
p.getSharing().toString(),
]
)}
columns={["Name", "Address", "Following", "Sharing"]}
options={{
filter: false,
print: false,
viewColumns: false,
selectableRows: "none",
onRowClick: rowData => {
var address = rowData[1];
goToSqueakAddressPage(address);
}
}}/>
</Grid>
</Grid>
< />);

80
frontend/react-material-admin/src/pages/timeline/Timeline.js vendored Normal file
View file

@ -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";
import { useTheme } from "@material-ui/styles";
import {
ResponsiveContainer,
ComposedChart,
AreaChart,
LineChart,
Line,
Area,
PieChart,
Pie,
Cell,
YAxis,
XAxis,
} from "recharts";
// styles
import useStyles from "./styles";
// components
import PageTitle from "../../components/PageTitle";
import Widget from "../../components/Widget";
import { Typography } from "../../components/Wrappers";
import { GetInfoRequest, WalletBalanceRequest } from "../../proto/lnd_pb"
import {HelloRequest, GetFollowedSqueakDisplaysRequest, GetSigningProfilesRequest} 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 TimelinePage() {
var classes = useStyles();
var theme = useTheme();
const [squeaks, setSqueaks] = useState([]);
const getSqueaks = () => {
console.log("called getSqueaks");
var getSqueaksRequest = new GetFollowedSqueakDisplaysRequest()
client.getFollowedSqueakDisplays(getSqueaksRequest, {}, (err, response) => {
console.log(response);
setSqueaks(response.getSqueakDisplayEntriesList())
});
};
useEffect(()=>{
getSqueaks()
},[]);
function NoInfoContent() {
return (
<div>
Unable to squeaks.
</div>
)
}
function InfoContent() {
return (
<div>
Number of squeaks: {squeaks.length}
</div>
)
}
return (
<>
<PageTitle title="Timeline" />
{(squeaks)
? InfoContent()
: NoInfoContent()
}
</>
);
}

6
frontend/react-material-admin/src/pages/timeline/package.json Normal file
View file

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

15
frontend/react-material-admin/src/pages/timeline/styles.js vendored Normal file
View file

@ -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),
},
}));