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

Create signing profile button frontend (#114)

Browse source 
* Create signing profile button in profiles page in frontend

* Use beautify to format profile.js

* Add createsigningprofile page with input form

* Make the input form profile name required

* Handle go to create signing profile page from button click

* Add profile page

* Successfully redirect to profile page after creating profile

* Fetch profile from server in profile page in frontend
This commit is contained in:
Jonathan Zernik 2020-07-22 01:14:28 -07:00 • committed by GitHub
parent 3d8a77cdaa
commit 5d6114dfcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 326 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,8 @@ import Sidebar from "../Sidebar";
// pages
import Dashboard from "../../pages/dashboard";
import SqueakAddress from "../../pages/squeakaddress";
import Profile from "../../pages/profile";
import CreateSigningProfile from "../../pages/createsigningprofile";
import Notifications from "../../pages/notifications";
import Maps from "../../pages/maps";
import Profiles from "../../pages/profiles";
@ -46,6 +48,8 @@ function Layout(props) {
<Switch>
<Route path="/app/dashboard" component={Dashboard} />
<Route path="/app/squeakaddress/:id" component={SqueakAddress} />
<Route path="/app/profile/:id" component={Profile} />
<Route path="/app/createsigningprofile" component={CreateSigningProfile} />
<Route path="/app/profiles" component={Profiles} />
<Route path="/app/notifications" component={Notifications} />
<Route

70
frontend/react-material-admin/src/pages/createsigningprofile/CreateSigningProfile.js vendored Normal file
View file

@ -0,0 +1,70 @@
import React, {useState, useEffect} from 'react';
import {useHistory} from "react-router-dom";
import {Grid, TextField, Button, Typography, Paper} from "@material-ui/core";
// styles
import useStyles from "./styles";
// components
import PageTitle from "../../components/PageTitle";
import Widget from "../../components/Widget";
// import { Typography } from "../../components/Wrappers";
import {CreateSigningProfileRequest} 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 CreateSigningProfilePage() {
const [profileName, setProfileName] = useState('');
var classes = useStyles();
const history = useHistory();
const goToProfilePage = (profileId) => {
history.push("/app/profile/" + profileId);
};
function handleSubmit(event) {
event.preventDefault();
console.log( 'profileName:', profileName);
// You should see email and password in console.
// ..code to submit form to backend here...
createSigningProfile(profileName)
}
const createSigningProfile = (profileName) => {
console.log("called createSigningProfile");
var createSigningProfileRequest = new CreateSigningProfileRequest()
createSigningProfileRequest.setProfileName(profileName);
console.log(createSigningProfileRequest);
client.createSigningProfile(createSigningProfileRequest, {}, (err, response) => {
console.log(response);
console.log(response.getProfileId());
goToProfilePage(response.getProfileId());
});
};
return (
<>
< PageTitle title = "Create Signing Profile" />
<Paper>
<form className={classes.root} onSubmit={handleSubmit} >
<TextField required
value={profileName}
label="Profile name"
onInput={ e=>setProfileName(e.target.value)}
/>
<Typography className={classes.divider} />
<Button
type="submit"
className={classes.button}
>
Create
</Button>
</form>
</Paper>
</>);
}

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

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

21
frontend/react-material-admin/src/pages/createsigningprofile/styles.js vendored Normal file
View file

@ -0,0 +1,21 @@
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),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
width: '25ch',
},
},
}));

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

@ -0,0 +1,62 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Grid } from "@material-ui/core";
// styles
import useStyles from "./styles";
// components
import PageTitle from "../../components/PageTitle";
import Widget from "../../components/Widget";
// import { Typography } from "../../components/Wrappers";
import { GetSqueakProfileRequest } 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 ProfilePage() {
var classes = useStyles();
const { id } = useParams();
const [squeakProfile, setSqueakProfile] = useState(null);
const getSqueakProfile = () => {
console.log("called getSqueakProfile with profileId: " + id);
var getSqueaksRequest = new GetSqueakProfileRequest()
getSqueaksRequest.setProfileId(id);
console.log(getSqueaksRequest);
client.getSqueakProfile(getSqueaksRequest, {}, (err, response) => {
console.log(err);
console.log(response);
console.log(response.getSqueakProfile());
// console.log(response.getSqueakDisplayEntriesList(),length);
setSqueakProfile(response.getSqueakProfile())
});
};
useEffect(()=>{
getSqueakProfile()
},[]);
function NoProfileContent() {
return <p>No profile loaded...</p>;
}
function ProfileContent() {
return <p>{squeakProfile.getProfileName()}</p>;
}
return (
<>
<PageTitle title={'Squeak Profile: ' + (squeakProfile ? squeakProfile.getProfileName() : null)} />
<div>
Hello!
{squeakProfile
? ProfileContent()
: NoProfileContent()
}
</div>
</>
);
}

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

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

15
frontend/react-material-admin/src/pages/profile/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),
},
}));

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

@ -1,8 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import { Grid } from "@material-ui/core";
import React, {useState, useEffect} from 'react';
import {useHistory} from "react-router-dom";
import {Grid, Button} from "@material-ui/core";
import MUIDataTable from "mui-datatables";
// styles
import {makeStyles} from '@material-ui/core/styles';
// components
import PageTitle from "../../components/PageTitle";
import Widget from "../../components/Widget";
@ -11,127 +14,169 @@ import Table from "../dashboard/components/Table/Table";
// data
import mock from "../dashboard/mock";
import { GetInfoRequest } from "../../proto/lnd_pb"
import { HelloRequest,
GetFollowedSqueakDisplaysRequest,
GetSigningProfilesRequest } from "../../proto/squeak_admin_pb"
import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
import {GetInfoRequest} 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')
const datatableData = [
["Joe James", "Example Inc.", "Yonkers", "NY"],
["John Walsh", "Example Inc.", "Hartford", "CT"],
["Bob Herm", "Example Inc.", "Tampa", "FL"],
["James Houston", "Example Inc.", "Dallas", "TX"],
["Prabhakar Linwood", "Example Inc.", "Hartford", "CT"],
["Kaui Ignace", "Example Inc.", "Yonkers", "NY"],
["Esperanza Susanne", "Example Inc.", "Hartford", "CT"],
["Christian Birgitte", "Example Inc.", "Tampa", "FL"],
["Meral Elias", "Example Inc.", "Hartford", "CT"],
["Deep Pau", "Example Inc.", "Yonkers", "NY"],
["Sebastiana Hani", "Example Inc.", "Dallas", "TX"],
["Marciano Oihana", "Example Inc.", "Yonkers", "NY"],
["Brigid Ankur", "Example Inc.", "Dallas", "TX"],
["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
["Avram Sylva", "Example Inc.", "Hartford", "CT"],
["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
["Gaston Festus", "Example Inc.", "Tampa", "FL"],
[
"Joe James", "Example Inc.", "Yonkers", "NY"
],
[
"John Walsh", "Example Inc.", "Hartford", "CT"
],
[
"Bob Herm", "Example Inc.", "Tampa", "FL"
],
[
"James Houston", "Example Inc.", "Dallas", "TX"
],
[
"Prabhakar Linwood", "Example Inc.", "Hartford", "CT"
],
[
"Kaui Ignace", "Example Inc.", "Yonkers", "NY"
],
[
"Esperanza Susanne", "Example Inc.", "Hartford", "CT"
],
[
"Christian Birgitte", "Example Inc.", "Tampa", "FL"
],
[
"Meral Elias", "Example Inc.", "Hartford", "CT"
],
[
"Deep Pau", "Example Inc.", "Yonkers", "NY"
],
[
"Sebastiana Hani", "Example Inc.", "Dallas", "TX"
],
[
"Marciano Oihana", "Example Inc.", "Yonkers", "NY"
],
[
"Brigid Ankur", "Example Inc.", "Dallas", "TX"
],
[
"Anna Siranush", "Example Inc.", "Yonkers", "NY"
],
[
"Avram Sylva", "Example Inc.", "Hartford", "CT"
],
[
"Serafima Babatunde", "Example Inc.", "Tampa", "FL"
],
[
"Gaston Festus", "Example Inc.", "Tampa", "FL"
]
];
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1)
}
}
}));
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");
console.log("called getMsg");
var helloRequest = new HelloRequest()
helloRequest.setName('World');
var helloRequest = new HelloRequest()
helloRequest.setName('World');
client.sayHello(helloRequest, {}, (err, response) => {
console.log(response.getMessage());
setMsg(response.getMessage())
});
client.sayHello(helloRequest, {}, (err, response) => {
console.log(response.getMessage());
setMsg(response.getMessage())
});
};
const getSqueaks = () => {
console.log("called getSqueaks");
console.log("called getSqueaks");
var getSqueaksRequest = new GetFollowedSqueakDisplaysRequest()
var getSqueaksRequest = new GetFollowedSqueakDisplaysRequest()
client.getFollowedSqueakDisplays(getSqueaksRequest, {}, (err, response) => {
console.log(response);
console.log(response.getSqueakDisplayEntriesList());
// console.log(response.getSqueakDisplayEntriesList(),length);
setSqueaks(response.getSqueakDisplayEntriesList())
});
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");
console.log("called getLndInfo");
var getInfoRequest = new GetInfoRequest()
var getInfoRequest = new GetInfoRequest()
client.lndGetInfo(getInfoRequest, {}, (err, response) => {
console.log(response);
});
client.lndGetInfo(getInfoRequest, {}, (err, response) => {
console.log(response);
});
};
const getSigningProfiles = () => {
console.log("called getSigningProfiles");
console.log("called getSigningProfiles");
var getSigningProfilesRequest = new GetSigningProfilesRequest()
var getSigningProfilesRequest = new GetSigningProfilesRequest()
client.getSigningProfiles(getSigningProfilesRequest, {}, (err, response) => {
console.log(response);
var signingProfileRows = response.getSqueakProfilesList().map(p =>
[
p.getProfileName(),
p.getAddress(),
p.getFollowing().toString(),
p.getSharing().toString(),
]
);
setSigningProfiles(signingProfileRows);
});
client.getSigningProfiles(getSigningProfilesRequest, {}, (err, response) => {
console.log(response);
var signingProfileRows = response.getSqueakProfilesList().map(p => [p.getProfileName(), p.getAddress(), p.getFollowing().toString(), p.getSharing().toString()]);
setSigningProfiles(signingProfileRows);
});
};
useEffect(()=>{
getMsg()
},[]);
useEffect(()=>{
getSqueaks()
},[]);
useEffect(()=>{
getLndInfo()
},[]);
useEffect(()=>{
getSigningProfiles()
},[]);
return (
<>
<PageTitle title="Profiles" />
<Grid container spacing={4}>
<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 => {
console.log(rowData);
var address = rowData[1];
console.log(address);
history.push("/app/squeakaddress/" + address);
},
}}
/>
</Grid>
</Grid>
</>
);
const goToCreateSigningProfilePage = () => {
history.push("/app/createsigningprofile");
};
const goToSqueakAddressPage = (squeakAddress) => {
history.push("/app/squeakaddress/" + squeakAddress);
};
useEffect(() => {
getMsg()
}, []);
useEffect(() => {
getSqueaks()
}, []);
useEffect(() => {
getLndInfo()
}, []);
useEffect(() => {
getSigningProfiles()
}, []);
return (<> < PageTitle title = "Profiles" /> <Grid container="container" spacing={4}>
<Grid item="item" xs={12}>
<div className={classes.root}>
<Button variant="contained" onClick={() => {
goToCreateSigningProfilePage();
}}>Create Signing Profile</Button>
<Button variant="contained" onClick={() => {
alert('Add contact button clicked')
}}>Add contact</Button>
</div>
</Grid>
<Grid item="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);
}
}}/>
</Grid>
</Grid> < />);
}

2
frontend/react-material-admin/src/pages/squeakaddress/SqueakAddress.js vendored
View file

@ -41,12 +41,10 @@ export default function SqueakAddressPage() {
return (
<>
<PageTitle title={'Squeak Address: ' + id} />
<Grid container spacing={4}>
<div>
Hello!
Number of squeaks for address: {squeaks.length}
</div>
</Grid>
</>
);
}