Create squeak address page and go to it from table (#107)

This commit is contained in:
Jonathan Zernik 2020-07-21 14:57:14 -07:00 committed by GitHub
parent c8ee3537dc
commit 08af3e1679
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 106 deletions

View file

@ -46,6 +46,7 @@ function Layout(props) {
<Switch>
<Route path="/app/dashboard" component={Dashboard} />
<Route path="/app/typography" component={Typography} />
<Route path="/app/squeakaddress/:id" component={Typography} />
<Route path="/app/tables" component={Tables} />
<Route path="/app/notifications" component={Notifications} />
<Route

View file

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import { Grid } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
@ -42,6 +43,8 @@ export default function Tables() {
const [msg, setMsg] = useState("waiting for message...");
const [squeaks, setSqueaks] = useState([]);
const [signingProfiles, setSigningProfiles] = useState([]);
const history = useHistory();
const getMsg = () => {
console.log("called getMsg");
@ -119,6 +122,12 @@ export default function Tables() {
print: false,
viewColumns: false,
selectableRows: "none",
onRowClick: rowData => {
console.log(rowData);
var address = rowData[1];
console.log(address);
history.push("/app/squeakaddress/" + address);
},
}}
/>
</Grid>

View file

@ -1,4 +1,5 @@
import React from "react";
import { useParams } from 'react-router-dom';
import { Grid } from "@material-ui/core";
// styles
@ -9,117 +10,17 @@ import PageTitle from "../../components/PageTitle";
import Widget from "../../components/Widget";
import { Typography } from "../../components/Wrappers";
export default function TypographyPage() {
export default function SqueakAddressPage() {
var classes = useStyles();
const { id } = useParams();
return (
<>
<PageTitle title="Typography" />
<PageTitle title={'Squeak Address: ' + id} />
<Grid container spacing={4}>
<Grid item xs={12} md={6}>
<Widget title="Headings" disableWidgetMenu>
<div className={classes.dashedBorder}>
<Typography variant="h1" className={classes.text}>
h1. Heading
</Typography>
<Typography variant="h2" className={classes.text}>
h2. Heading
</Typography>
<Typography variant="h3" className={classes.text}>
h3. Heading
</Typography>
<Typography variant="h4" className={classes.text}>
h4. Heading
</Typography>
<Typography variant="h5" className={classes.text}>
h5. Heading
</Typography>
<Typography variant="h6">h6. Heading</Typography>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6}>
<Widget title="Typography Colors" disableWidgetMenu>
<div className={classes.dashedBorder}>
<Typography variant="h1" color="primary" className={classes.text}>
h1. Heading
</Typography>
<Typography variant="h2" color="success" className={classes.text}>
h2. Heading
</Typography>
<Typography
variant="h3"
color="secondary"
className={classes.text}
>
h3. Heading
</Typography>
<Typography variant="h4" color="warning" className={classes.text}>
h4. Heading
</Typography>
<Typography
variant="h5"
color="primary"
colorBrightness="light"
className={classes.text}
>
h5. Heading
</Typography>
<Typography variant="h6" color="info">
h6. Heading
</Typography>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6}>
<Widget title="Basic Text Settings" disableWidgetMenu>
<div className={classes.dashedBorder}>
<Typography className={classes.text}>Basic text</Typography>
<Typography className={classes.text} weight="light">
Basic light text
</Typography>
<Typography className={classes.text} weight="medium">
Basic medium text
</Typography>
<Typography className={classes.text} weight="bold">
Basic bold text
</Typography>
<Typography className={classes.text}>
BASIC UPPERCASE TEXT
</Typography>
<Typography className={classes.text}>
basic lowercase text
</Typography>
<Typography className={classes.text}>
Basic Capitalized Text
</Typography>
<Typography>
<i>Basic Cursive Text</i>
</Typography>
</div>
</Widget>
</Grid>
<Grid item xs={12} md={6}>
<Widget title="Text Size" disableWidgetMenu>
<div className={classes.dashedBorder}>
<Typography className={classes.text} size="sm">
Heading Typography SM Font Size
</Typography>
<Typography className={classes.text}>
Heading Typography Regular Font Size
</Typography>
<Typography className={classes.text} size="md">
Heading Typography MD Font Size
</Typography>
<Typography className={classes.text} size="xl">
Heading Typography XL Font Size
</Typography>
<Typography className={classes.text} size="xxl">
Heading Typography XXL Font Size
</Typography>
</div>
</Widget>
</Grid>
<div>
Hello!
</div>
</Grid>
</>
);