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

Configure eslint (#1097)

Browse source 
* Configure eslint

* Fix eslint for frontend requests file

* Configure no unused import in eslint

* lint requests frontend file

* Run lint on all pages files

* Run lint on all component files

* Run lint on all remaining source files

* Add makefile target for frontend lint

* Update frontend build
This commit is contained in:
Jonathan Zernik 2021-08-28 21:09:22 -07:00 • committed by GitHub
parent 286b5c1e07
commit cb73a6bfd2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
175 changed files with 35647 additions and 17193 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/.eslintrc.js Normal file
View file

@ -0,0 +1,24 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
'unused-imports',
],
rules: {
"unused-imports/no-unused-imports": "error",
},
};

4
frontend/Makefile
View file

@ -13,6 +13,10 @@ build: gen-protos
rm -rf ../squeaknode/admin/webapp/static/build
cp -r build/ ../squeaknode/admin/webapp/static
lint: gen-protos
npm install
eslint src/ --fix
gen-protos:
./build-protos.sh

20261
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

7
frontend/package.json
View file

@ -54,6 +54,13 @@
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unused-imports": "^1.1.4",
"prettier": "^1.19.1",
"terser": "^3.17.0"
}

12
frontend/src/bitcoin/blockexplorer.js
View file

@ -1,12 +1,10 @@
export function getBlockDetailUrl(blockHash, network) {
switch(network) {
switch (network) {
case 'mainnet':
return "https://blockstream.info/block/" + blockHash;
return `https://blockstream.info/block/${blockHash}`;
case 'testnet':
return "https://blockstream.info/testnet/block/" + blockHash;
return `https://blockstream.info/testnet/block/${blockHash}`;
default:
return "";
return '';
}
};
}

24
frontend/src/components/App.js
View file

@ -1,19 +1,21 @@
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import React from 'react';
import {
HashRouter, Route, Switch, Redirect,
} from 'react-router-dom';
// components
import Layout from "./Layout";
import Layout from './Layout';
// pages
import Error from "../pages/error";
import Login from "../pages/login";
import Error from '../pages/error';
import Login from '../pages/login';
// context
import { useUserState } from "../context/UserContext";
import { useUserState } from '../context/UserContext';
export default function App() {
// global
var { isAuthenticated } = useUserState();
const { isAuthenticated } = useUserState();
return (
<HashRouter>
@ -25,7 +27,9 @@ export default function App() {
render={() => <Redirect to="/app/timeline" />}
/>
<PublicRoute path="/app" component={Layout} />
// <PublicRoute path="/login" component={Login} />
//
{' '}
<PublicRoute path="/login" component={Login} />
<Route component={Error} />
</Switch>
</HashRouter>
@ -59,9 +63,7 @@ export default function App() {
return (
<Route
{...rest}
render={props =>
React.createElement(component, props)
}
render={(props) => React.createElement(component, props)}
/>
);
}

148
frontend/src/components/BuyOfferDetailItem/BuyOfferDetailItem.js
View file

@ -1,39 +1,26 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
Paper,
Button,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import moment from 'moment';
import useStyles from './styles';
import {
goToPeerPage,
goToPeerAddressPage,
goToLightningNodePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function BuyOfferDetailItem({
offer,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const [payOfferDialogOpen, setPayOfferDialogOpen] = useState(false);
@ -46,7 +33,7 @@ export default function BuyOfferDetailItem({
offer.getPeerAddress().getHost(),
offer.getPeerAddress().getPort(),
);
}
};
const onLightningNodeClick = (event) => {
event.preventDefault();
@ -55,11 +42,11 @@ export default function BuyOfferDetailItem({
offer.getNodePubkey(),
offer.getNodeHost(),
offer.getNodePort(),
)
}
);
};
const handleClickPayOffer = () => {
console.log("Handle click pay offer.");
console.log('Handle click pay offer.');
setPayOfferDialogOpen(true);
};
@ -71,106 +58,119 @@ export default function BuyOfferDetailItem({
return (
<Typography
size="md"
>Price: {offer.getPriceMsat() / 1000} sats
>
Price:
{' '}
{offer.getPriceMsat() / 1000}
{' '}
sats
</Typography>
)
);
}
function PeerInfoContent() {
console.log(offer);
const peerAddress = offer.getPeerAddress();
const peerAddress = offer.getPeerAddress();
const host = peerAddress.getHost();
const peerAddressText = peerAddress.getHost() + ":" + peerAddress.getPort();
const peerAddressText = `${peerAddress.getHost()}:${peerAddress.getPort()}`;
return (
<Box>
<Typography
size="md"
>Peer: <Link href="#" onClick={onPeerClick}>
>
Peer:
{' '}
<Link href="#" onClick={onPeerClick}>
{peerAddressText}
</Link>
</Typography>
</Box>
)
);
}
function ExpiresInfoContent(offer) {
var invoiceTime = offer.getInvoiceTimestamp();
var invoiceExpiry = offer.getInvoiceExpiry();
var expireTime = invoiceTime + invoiceExpiry;
const invoiceTime = offer.getInvoiceTimestamp();
const invoiceExpiry = offer.getInvoiceExpiry();
const expireTime = invoiceTime + invoiceExpiry;
return (
<Box>
<Typography
size="md"
>
Expires: {moment(expireTime*1000).fromNow()}
</Typography>
>
Expires:
{' '}
{moment(expireTime * 1000).fromNow()}
</Typography>
</Box>
)
);
}
function LightningPeerInfoContent(offer) {
const lightningAddress = offer.getNodeHost() + ":" + offer.getNodePort();
const lightningAddress = `${offer.getNodeHost()}:${offer.getNodePort()}`;
const lightningPubkey = offer.getNodePubkey();
return (
<Box>
<Typography
size="md"
>Lightning Node: <Link href="#" onClick={onLightningNodeClick}>
{lightningPubkey + "@" + lightningAddress}
>
Lightning Node:
{' '}
<Link href="#" onClick={onLightningNodeClick}>
{`${lightningPubkey}@${lightningAddress}`}
</Link>
</Typography>
</Box>
)
);
}
return (
<>
<Box
p={1}
m={0}
style={{backgroundColor: 'white'}}
<Box
p={1}
m={0}
style={{ backgroundColor: 'white' }}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{OfferContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{PeerInfoContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{LightningPeerInfoContent(offer)}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{ExpiresInfoContent(offer)}
</Grid>
</Grid>
</Box>
</Grid>
</Box>
</>
)
);
}

24
frontend/src/components/BuyOfferDetailItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

123
frontend/src/components/BuyOfferItem/BuyOfferItem.js
View file

@ -1,51 +1,45 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import moment from 'moment';
import useStyles from './styles';
export default function BuyOfferItem({
offer,
handleOfferClick,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const onOfferClick = (event) => {
event.preventDefault();
console.log("Handling offer click...");
console.log('Handling offer click...');
if (handleOfferClick) {
handleOfferClick();
}
}
};
function OfferContent() {
return (
<Typography
size="md"
>{offer.getPriceMsat()} msats ({offer.getPriceMsat() / 1000} sats)
>
{offer.getPriceMsat()}
{' '}
msats (
{offer.getPriceMsat() / 1000}
{' '}
sats)
</Typography>
)
);
}
function ProfileInfoContent(peer) {
@ -53,64 +47,67 @@ export default function BuyOfferItem({
<Box>
<Typography
size="md"
>{peer.getPeerName()}
</Typography>
>
{peer.getPeerName()}
</Typography>
</Box>
)
);
}
function ExpiresInfoContent(offer) {
var invoiceTime = offer.getInvoiceTimestamp();
var invoiceExpiry = offer.getInvoiceExpiry();
var expireTime = invoiceTime + invoiceExpiry;
const invoiceTime = offer.getInvoiceTimestamp();
const invoiceExpiry = offer.getInvoiceExpiry();
const expireTime = invoiceTime + invoiceExpiry;
return (
<Box>
<Typography
size="md"
>
Expires: {moment(expireTime*1000).fromNow()}
</Typography>
>
Expires:
{' '}
{moment(expireTime * 1000).fromNow()}
</Typography>
</Box>
)
);
}
return (
<Box
p={1}
m={0}
style={{backgroundColor: 'white'}}
style={{ backgroundColor: 'white' }}
onClick={onOfferClick}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{OfferContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{ProfileInfoContent(offer.getPeer())}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{ExpiresInfoContent(offer)}
</Grid>
</Grid>
<Grid item>
{OfferContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{ProfileInfoContent(offer.getPeer())}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{ExpiresInfoContent(offer)}
</Grid>
</Grid>
</Box>
)
);
}

24
frontend/src/components/BuyOfferItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

159
frontend/src/components/BuySqueakDialog/BuySqueakDialog.js
View file

@ -1,53 +1,31 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
} from '@material-ui/core';
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import BuyOfferItem from "../../components/BuyOfferItem";
import BuyOfferDetailItem from "../../components/BuyOfferDetailItem";
import BuyOfferDetailItem from '../BuyOfferDetailItem';
import {
makeSqueakRequest,
getSigningProfilesRequest,
downloadOffersRequest,
} from "../../squeakclient/requests"
import {
getBuyOffersRequest,
subscribeBuyOffersRequest,
} from "../../squeakclient/requests"
import {
payOfferRequest,
} from "../../squeakclient/requests"
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function BuySqueakDialog({
open,
@ -56,14 +34,14 @@ export default function BuySqueakDialog({
hash,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [selectedOfferId, setSelectedOfferId] = useState("");
const [selectedOfferId, setSelectedOfferId] = useState('');
const [offers, setOffers] = useState([]);
const resetFields = () => {
setSelectedOfferId("");
setSelectedOfferId('');
};
const handleChange = (event) => {
@ -75,7 +53,7 @@ export default function BuySqueakDialog({
};
const handleErr = (err) => {
alert('Error paying offer: ' + err);
alert(`Error paying offer: ${err}`);
};
// const payOffer = (offerID) => {
@ -93,7 +71,7 @@ export default function BuySqueakDialog({
});
};
const downloadOffers = () => {
console.log("downloadOffersRequest with hash: " + hash);
console.log(`downloadOffersRequest with hash: ${hash}`);
downloadOffersRequest(hash, (response) => {
// Do nothing.
});
@ -104,7 +82,7 @@ export default function BuySqueakDialog({
};
const handlePayErr = (err) => {
alert('Payment failure: ' + err.message);
alert(`Payment failure: ${err.message}`);
};
const pay = (offerId) => {
@ -113,13 +91,13 @@ export default function BuySqueakDialog({
const onDownloadClick = (event) => {
event.preventDefault();
console.log("Handling download click...");
console.log("downloadOffersRequest with hash: " + hash);
console.log('Handling download click...');
console.log(`downloadOffersRequest with hash: ${hash}`);
downloadOffers();
}
};
const getSelectedOffer = () => {
var offer;
let offer;
for (offer of offers) {
if (offer.getOfferId() == selectedOfferId) {
return offer;
@ -129,10 +107,10 @@ export default function BuySqueakDialog({
};
const getPeerAddressText = (offer) => {
const peerAddress = offer.getPeerAddress();
const peerAddress = offer.getPeerAddress();
const host = peerAddress.getHost();
return peerAddress.getHost() + ":" + peerAddress.getPort();
}
return `${peerAddress.getHost()}:${peerAddress.getPort()}`;
};
// TODO: load offers using "onRendered" callback.
// useEffect(() => {
@ -141,8 +119,8 @@ export default function BuySqueakDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'selectedOfferId:', selectedOfferId);
if (selectedOfferId == "") {
console.log('selectedOfferId:', selectedOfferId);
if (selectedOfferId == '') {
alert('Offer must be selected.');
return;
}
@ -165,10 +143,9 @@ export default function BuySqueakDialog({
event.stopPropagation();
}
function MakeSelectSigningProfile() {
return (
<FormControl className={classes.formControl} required style={{minWidth: 120}}>
<FormControl className={classes.formControl} required style={{ minWidth: 120 }}>
<InputLabel id="offer-select-label">Offer</InputLabel>
<Select
labelId="offer-select-label"
@ -176,14 +153,19 @@ export default function BuySqueakDialog({
value={selectedOfferId}
onChange={handleChange}
>
{offers.map(offer =>
{offers.map((offer) => (
<MenuItem key={offer.getOfferId()} value={offer.getOfferId()}>
{getPeerAddressText(offer)} ({offer.getPriceMsat() / 1000} sats)
{getPeerAddressText(offer)}
{' '}
(
{offer.getPriceMsat() / 1000}
{' '}
sats)
</MenuItem>
)}
))}
</Select>
</FormControl>
)
);
}
function LoadOffersButton() {
@ -191,27 +173,28 @@ export default function BuySqueakDialog({
<Button
variant="contained"
onClick={onDownloadClick}
>Re-download offers
>
Re-download offers
</Button>
)
);
}
function MakeSqueakContentInput() {
var selectedOffer = getSelectedOffer();
const selectedOffer = getSelectedOffer();
if (selectedOffer == null) {
return <></>
return <></>;
}
return (
<Box
p={1}
key={selectedOffer.getOfferId()}
>
<BuyOfferDetailItem
key={selectedOffer.getOfferId()}
offer={selectedOffer}>
</BuyOfferDetailItem>
>
<BuyOfferDetailItem
key={selectedOffer.getOfferId()}
offer={selectedOffer}
/>
</Box>
)
);
}
function MakeCancelButton() {
@ -223,42 +206,44 @@ export default function BuySqueakDialog({
>
Cancel
</Button>
)
);
}
function MakeSqueakButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Buy Squeak
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Buy Squeak
</Button>
);
}
return (
<Dialog open={open} onRendered={load} onEnter={resetFields} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Buy Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
<Box>
<Typography variant="body1" color="textSecondary" component="p">
{offers.length} offers
</Typography>
</Box>
<Box>
{MakeSelectSigningProfile()}
</Box>
{MakeSqueakContentInput()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{MakeSqueakButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Buy Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
<Box>
<Typography variant="body1" color="textSecondary" component="p">
{offers.length}
{' '}
offers
</Typography>
</Box>
<Box>
{MakeSelectSigningProfile()}
</Box>
{MakeSqueakContentInput()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{MakeSqueakButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/BuySqueakDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

18
frontend/src/components/ChannelItem/ChannelBalanceBar.js
View file

@ -1,16 +1,16 @@
import React from "react";
import React from 'react';
import {
Box,
LinearProgress,
Typography
} from "@material-ui/core";
import useStyles from "../../pages/wallet/styles";
Typography,
} from '@material-ui/core';
import useStyles from '../../pages/wallet/styles';
export default function ChannelBalanceBar({
channel,
...props
}) {
const classes = useStyles()
const classes = useStyles();
return (
<Box className={classes.channelBalanceBarContainer}>
@ -23,7 +23,7 @@ export default function ChannelBalanceBar({
<Box className={classes.channelBalanceBarRow}>
<Box className={classes.balanceContainerLocal}>
<Typography className={classes.balanceLabel}>Local</Typography>
<Typography className={classes.balanceValue} style={{color: 'darkblue'}}>{channel.getLocalBalance()}</Typography>
<Typography className={classes.balanceValue} style={{ color: 'darkblue' }}>{channel.getLocalBalance()}</Typography>
</Box>
<LinearProgress
variant="buffer"
@ -40,9 +40,9 @@ export default function ChannelBalanceBar({
/>
<Box className={classes.balanceContainerRemote}>
<Typography className={classes.balanceLabel}>Remote</Typography>
<Typography className={classes.balanceValue} style={{color: 'darkred'}}>{channel.getRemoteBalance()}</Typography>
<Typography className={classes.balanceValue} style={{ color: 'darkred' }}>{channel.getRemoteBalance()}</Typography>
</Box>
</Box>
</Box>
)
}
);
}

176
frontend/src/components/ChannelItem/ChannelItem.js
View file

@ -1,112 +1,116 @@
import React, {useState} from "react";
import React from 'react';
import {
Typography,
Box,
Chip,
Card,
} from "@material-ui/core";
import {useHistory} from "react-router-dom";
import useStyles from "../../pages/wallet/styles";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import moment from 'moment';
import ChannelBalanceBar from "./ChannelBalanceBar";
import useStyles from '../../pages/wallet/styles';
import ChannelBalanceBar from './ChannelBalanceBar';
import {
goToChannelPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function ChannelItem({
channel,
...props
}) {
const classes = useStyles({
channelStatus: 'open',
clickable: true,
})
const classes = useStyles({
channelStatus: 'open',
clickable: true,
});
const history = useHistory();
const history = useHistory();
const getTxId = (channel) => {
var channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
var pieces = channelPoint.split(":");
return pieces[0];
}
const getTxId = (channel) => {
const channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
const pieces = channelPoint.split(':');
return pieces[0];
};
const getOutputIndex = (channel) => {
var channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
var pieces = channelPoint.split(":");
if (pieces.length < 2) {
return null;
}
return pieces[1];
}
const getOutputIndex = (channel) => {
const channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
const pieces = channelPoint.split(':');
if (pieces.length < 2) {
return null;
}
return pieces[1];
};
const onChannelClick = (event) => {
event.preventDefault();
console.log("Handling channel click...");
var txId = getTxId(channel);
var outputIndex = getOutputIndex(channel);
goToChannelPage(history, txId, outputIndex);
}
const onChannelClick = (event) => {
event.preventDefault();
console.log('Handling channel click...');
const txId = getTxId(channel);
const outputIndex = getOutputIndex(channel);
goToChannelPage(history, txId, outputIndex);
};
function ChannelDetailItem(label, value) {
return <Box className={classes.detailItem}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
function ChannelDetailItem(label, value) {
return (
<Box className={classes.detailItem}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
}
);
}
function ChannelDetailItemVertical(label, value) {
return <Box className={classes.detailItemVertical}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
function ChannelDetailItemVertical(label, value) {
return (
<Box className={classes.detailItemVertical}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
}
);
}
return (
<Card
className={classes.root}
onClick={onChannelClick}
>
<Box className={classes.cardContentContainerVertical}>
<Box className={classes.cardContentFlexColumn}>
<Box className={classes.cardHeaderContainer}>
<Box className={classes.cardHeaderRow}>
<Chip
label="Open"
size="small"
className={classes.channelStatusChip}/>
</Box>
</Box>
<Box className={classes.cardContentSection}>
{ChannelDetailItem("Pubkey", `${channel.getRemotePubkey()}`)}
{ChannelDetailItem("Channel Point", `${channel.getChannelPoint()}`)}
{/*{ChannelDetailItem("Total sats sent", `${channel.getTotalSatoshisSent()}`)}*/}
{/*{ChannelDetailItem("Total sats received", `${channel.getTotalSatoshisReceived()}`)}*/}
{ChannelDetailItem("Lifetime", `${moment.duration(channel.getLifetime(), 'seconds').humanize()}`)}
{ChannelDetailItem("Uptime", `${moment.duration(channel.getUptime(), 'seconds').humanize()}`)}
</Box>
</Box>
<Box className={classes.cardContentFlexColumn}>
<ChannelBalanceBar
channel={channel}
return (
<Card
className={classes.root}
onClick={onChannelClick}
>
<Box className={classes.cardContentContainerVertical}>
<Box className={classes.cardContentFlexColumn}>
<Box className={classes.cardHeaderContainer}>
<Box className={classes.cardHeaderRow}>
<Chip
label="Open"
size="small"
className={classes.channelStatusChip}
/>
</Box>
</Box>
</Box>
<Box className={classes.cardContentSection}>
{ChannelDetailItem('Pubkey', `${channel.getRemotePubkey()}`)}
{ChannelDetailItem('Channel Point', `${channel.getChannelPoint()}`)}
{/* {ChannelDetailItem("Total sats sent", `${channel.getTotalSatoshisSent()}`)} */}
{/* {ChannelDetailItem("Total sats received", `${channel.getTotalSatoshisReceived()}`)} */}
{ChannelDetailItem('Lifetime', `${moment.duration(channel.getLifetime(), 'seconds').humanize()}`)}
{ChannelDetailItem('Uptime', `${moment.duration(channel.getUptime(), 'seconds').humanize()}`)}
</Box>
</Box>
</Card>
)
<Box className={classes.cardContentFlexColumn}>
<ChannelBalanceBar
channel={channel}
/>
</Box>
</Box>
</Card>
);
}

76
frontend/src/components/ClearProfileImageDialog/ClearProfileImageDialog.js
View file

@ -1,41 +1,19 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
clearSqueakProfileImageRequest,
} from "../../squeakclient/requests"
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function ClearProfileImageDialog({
open,
@ -44,7 +22,7 @@ export default function ClearProfileImageDialog({
reloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const handleResponse = (response) => {
@ -52,7 +30,7 @@ export default function ClearProfileImageDialog({
};
const handleErr = (err) => {
alert('Error clearing profile image: ' + err);
alert(`Error clearing profile image: ${err}`);
};
const clearProfileImage = () => {
@ -78,34 +56,34 @@ export default function ClearProfileImageDialog({
>
Cancel
</Button>
)
);
}
function ClearProfileImageButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Clear Profile Image
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Clear Profile Image
</Button>
);
}
return (
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Clear Profile Image</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to clear the image for this profile?
</DialogContent>
<DialogActions>
{CancelButton()}
{ClearProfileImageButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Clear Profile Image</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to clear the image for this profile?
</DialogContent>
<DialogActions>
{CancelButton()}
{ClearProfileImageButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/ClearProfileImageDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

94
frontend/src/components/CloseChannelDialog/CloseChannelDialog.js
View file

@ -1,38 +1,20 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
lndCloseChannelRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function CloseChannelDialog({
open,
@ -41,10 +23,10 @@ export default function CloseChannelDialog({
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [amount, setAmount] = useState(0);
const [amount, setAmount] = useState(0);
const resetFields = () => {
setAmount(0);
@ -60,7 +42,7 @@ export default function CloseChannelDialog({
};
const handleErr = (err) => {
alert('Error closing channel: ' + err);
alert(`Error closing channel: ${err}`);
};
const closeChannel = (txId, outputIndex) => {
@ -69,8 +51,8 @@ export default function CloseChannelDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'txId:', txId);
console.log( 'outputIndex:', outputIndex);
console.log('txId:', txId);
console.log('outputIndex:', outputIndex);
closeChannel(txId, outputIndex);
handleClose();
}
@ -85,10 +67,10 @@ export default function CloseChannelDialog({
value={txId}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function OutputIndexInput() {
@ -101,10 +83,10 @@ export default function CloseChannelDialog({
value={outputIndex}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function LocalFundingAmountInput() {
@ -119,7 +101,7 @@ export default function CloseChannelDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CancelButton() {
@ -131,37 +113,37 @@ export default function CloseChannelDialog({
>
Cancel
</Button>
)
);
}
function CloseChannelButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Close Channel
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Close Channel
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Close Channel</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{TxIdInput()}
</DialogContent>
<DialogContent>
{OutputIndexInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{CloseChannelButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Close Channel</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{TxIdInput()}
</DialogContent>
<DialogContent>
{OutputIndexInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{CloseChannelButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/CloseChannelDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

61
frontend/src/components/ConfigureProfileDialog/ConfigureProfileDialog.js
View file

@ -1,43 +1,24 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
FormLabel,
FormGroup,
InputLabel,
FormControlLabel,
FormHelperText,
Switch,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
setSqueakProfileFollowingRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function ConfigureProfileDialog({
open,
@ -46,18 +27,18 @@ export default function ConfigureProfileDialog({
reloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const setFollowing = (id, following) => {
setSqueakProfileFollowingRequest(id, following, () => {
reloadProfile();
})
});
};
const handleSettingsFollowingChange = (event) => {
console.log("Following changed for profile id: " + squeakProfile.getProfileId());
console.log("Following changed to: " + event.target.checked);
console.log(`Following changed for profile id: ${squeakProfile.getProfileId()}`);
console.log(`Following changed to: ${event.target.checked}`);
setFollowing(squeakProfile.getProfileId(), event.target.checked);
};
@ -70,7 +51,7 @@ export default function ConfigureProfileDialog({
>
Cancel
</Button>
)
);
}
function ProfileSettingsForm() {
@ -84,21 +65,21 @@ export default function ConfigureProfileDialog({
/>
</FormGroup>
</FormControl>
)
);
}
return (
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Configure Profile</DialogTitle>
<form className={classes.root} noValidate autoComplete="off">
<DialogContent>
{squeakProfile
<DialogTitle id="form-dialog-title">Configure Profile</DialogTitle>
<form className={classes.root} noValidate autoComplete="off">
<DialogContent>
{squeakProfile
&& ProfileSettingsForm()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
</DialogActions>
</form>
</DialogContent>
<DialogActions>
{MakeCancelButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/ConfigureProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

48
frontend/src/components/ConnectPeerDialog/ConnectPeerDialog.js
View file

@ -8,37 +8,33 @@ import {
FormControlLabel,
Switch,
TextField,
} from "@material-ui/core";
import { useHistory } from "react-router-dom";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import {makeStyles} from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import {
connectSqueakPeerRequest,
} from "../../squeakclient/requests"
import {
goToPeerPage,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
const useStyles = makeStyles((theme) => ({
form: {
margin: 'auto',
width: 'fit-content',
'& .MuiDialogContent-root': {
overflow: `hidden`
overflow: 'hidden',
},
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
'& .MuiDialogActions-root': {
padding: `1rem`,
padding: '1rem',
},
},
formControlLabel: {
position: `absolute`,
left: `2rem`,
position: 'absolute',
left: '2rem',
},
}));
@ -55,7 +51,7 @@ export default function ConnectPeerDialog({
const [peerName, setPeerName] = useState('');
const [host, setHost] = useState('');
const [port, setPort] = useState('');
const [customPortChecked, setCustomPortChecked] = React.useState(false)
const [customPortChecked, setCustomPortChecked] = React.useState(false);
const resetFields = () => {
setPeerName('');
@ -74,10 +70,10 @@ export default function ConnectPeerDialog({
const handleChangeCustomPortChecked = (event) => {
setPort(
event.target.checked ? '' : portDefaultValue
event.target.checked ? '' : portDefaultValue,
);
setCustomPortChecked(event.target.checked);
}
};
const handleChangePort = (event) => {
setPort(event.target.value);
@ -91,8 +87,8 @@ export default function ConnectPeerDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'host:', host);
console.log( 'port:', port);
console.log('host:', host);
console.log('port:', port);
if (!host) {
alert('Host cannot be empty.');
return;
@ -116,7 +112,7 @@ export default function ConnectPeerDialog({
inputProps={{ maxLength: 128 }}
margin="normal"
/>
)
);
}
function ConnectPortInput() {
@ -131,28 +127,26 @@ export default function ConnectPeerDialog({
disabled={!customPortChecked}
margin="normal"
/>
)
);
}
function CustomPortSwitch() {
return (
<FormControlLabel
className={classes.formControlLabel}
control={
control={(
<Switch
checked={customPortChecked}
onChange={handleChangeCustomPortChecked}
name="use-custom-port"
size="small"
/>
}
)}
label="Use custom port"
/>
)
);
}
function CancelButton() {
return (
<Button
@ -162,7 +156,7 @@ export default function ConnectPeerDialog({
>
Cancel
</Button>
)
);
}
function ConnectPeerButton() {
@ -175,7 +169,7 @@ export default function ConnectPeerDialog({
>
Connect Peer
</Button>
)
);
}
return (
@ -206,5 +200,5 @@ export default function ConnectPeerDialog({
</DialogActions>
</form>
</Dialog>
)
);
}

60
frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js
View file

@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Dialog,
DialogTitle,
@ -6,31 +6,30 @@ import {
TextField,
DialogActions,
Button,
} from "@material-ui/core";
import {useHistory} from "react-router-dom";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import {
createContactProfileRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
goToProfilePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function CreateContactProfileDialog({
open,
handleClose,
initialAddress='',
...props
}) {
var classes = useStyles();
open,
handleClose,
initialAddress = '',
...props
}) {
const classes = useStyles();
const history = useHistory();
var [profileName, setProfileName] = useState('');
var [address, setAddress] = useState(initialAddress);
const [profileName, setProfileName] = useState('');
const [address, setAddress] = useState(initialAddress);
const resetFields = () => {
setProfileName('');
@ -50,7 +49,7 @@ export default function CreateContactProfileDialog({
};
const handleErr = (err) => {
alert('Error creating contact profile: ' + err);
alert(`Error creating contact profile: ${err}`);
};
const createContactProfile = (profileName, squeakAddress) => {
@ -59,8 +58,8 @@ export default function CreateContactProfileDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'profileName:', profileName);
console.log( 'address:', address);
console.log('profileName:', profileName);
console.log('address:', address);
if (!profileName) {
alert('Profile Name cannot be empty.');
return;
@ -85,20 +84,21 @@ export default function CreateContactProfileDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CreateContactAddressInput() {
return (
<TextField required
id="standard-textarea"
label="Address"
required
value={address}
onChange={handleChangeAddress}
inputProps={{ maxLength: 35 }}
<TextField
required
id="standard-textarea"
label="Address"
required
value={address}
onChange={handleChangeAddress}
inputProps={{ maxLength: 35 }}
/>
)
);
}
function CancelButton() {
@ -110,7 +110,7 @@ export default function CreateContactProfileDialog({
>
Cancel
</Button>
)
);
}
function CreateContactProfilButton() {
@ -123,7 +123,7 @@ export default function CreateContactProfileDialog({
>
Create Contact Profile
</Button>
)
);
}
return (
@ -140,5 +140,5 @@ export default function CreateContactProfileDialog({
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/CreateContactProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

51
frontend/src/components/CreatePeerDialog/CreatePeerDialog.js
View file

@ -8,37 +8,36 @@ import {
FormControlLabel,
Switch,
TextField,
} from "@material-ui/core";
import { useHistory } from "react-router-dom";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import {makeStyles} from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import {
createPeerRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
goToPeerPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
const useStyles = makeStyles((theme) => ({
form: {
margin: 'auto',
width: 'fit-content',
'& .MuiDialogContent-root': {
overflow: `hidden`
overflow: 'hidden',
},
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
'& .MuiDialogActions-root': {
padding: `1rem`,
padding: '1rem',
},
},
formControlLabel: {
position: `absolute`,
left: `2rem`,
position: 'absolute',
left: '2rem',
},
}));
@ -55,7 +54,7 @@ export default function CreatePeerDialog({
const [peerName, setPeerName] = useState('');
const [host, setHost] = useState('');
const [port, setPort] = useState('');
const [customPortChecked, setCustomPortChecked] = React.useState(false)
const [customPortChecked, setCustomPortChecked] = React.useState(false);
const resetFields = () => {
setPeerName('');
@ -74,10 +73,10 @@ export default function CreatePeerDialog({
const handleChangeCustomPortChecked = (event) => {
setPort(
event.target.checked ? '' : portDefaultValue
event.target.checked ? '' : portDefaultValue,
);
setCustomPortChecked(event.target.checked);
}
};
const handleChangePort = (event) => {
setPort(event.target.value);
@ -91,9 +90,9 @@ export default function CreatePeerDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'peerName:', peerName);
console.log( 'host:', host);
console.log( 'port:', port);
console.log('peerName:', peerName);
console.log('host:', host);
console.log('port:', port);
if (!host) {
alert('Host cannot be empty.');
return;
@ -119,7 +118,7 @@ export default function CreatePeerDialog({
inputProps={{ maxLength: 64 }}
margin="normal"
/>
)
);
}
function CreateHostInput() {
@ -133,7 +132,7 @@ export default function CreatePeerDialog({
inputProps={{ maxLength: 128 }}
margin="normal"
/>
)
);
}
function CreatePortInput() {
@ -148,28 +147,26 @@ export default function CreatePeerDialog({
disabled={!customPortChecked}
margin="normal"
/>
)
);
}
function CustomPortSwitch() {
return (
<FormControlLabel
className={classes.formControlLabel}
control={
control={(
<Switch
checked={customPortChecked}
onChange={handleChangeCustomPortChecked}
name="use-custom-port"
size="small"
/>
}
)}
label="Use custom port"
/>
)
);
}
function CancelButton() {
return (
<Button
@ -179,7 +176,7 @@ export default function CreatePeerDialog({
>
Cancel
</Button>
)
);
}
function CreatePeerButton() {
@ -192,7 +189,7 @@ export default function CreatePeerDialog({
>
Create Peer
</Button>
)
);
}
return (
@ -224,5 +221,5 @@ export default function CreatePeerDialog({
</DialogActions>
</form>
</Dialog>
)
);
}

80
frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js
View file

@ -1,51 +1,33 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
createSigningProfileRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
goToProfilePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function CreateSigningProfileDialog({
open,
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [profileName, setProfileName] = useState('');
const [profileName, setProfileName] = useState('');
const resetFields = () => {
setProfileName('');
@ -60,7 +42,7 @@ export default function CreateSigningProfileDialog({
};
const handleErr = (err) => {
alert('Error creating signing profile: ' + err);
alert(`Error creating signing profile: ${err}`);
};
const createSigningProfile = (profileName) => {
@ -69,7 +51,7 @@ export default function CreateSigningProfileDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'profileName:', profileName);
console.log('profileName:', profileName);
if (!profileName) {
alert('Profile Name cannot be empty.');
return;
@ -90,7 +72,7 @@ export default function CreateSigningProfileDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CancelButton() {
@ -102,34 +84,34 @@ export default function CreateSigningProfileDialog({
>
Cancel
</Button>
)
);
}
function CreateSigningProfilButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Create Signing Profile
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Create Signing Profile
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Create Signing Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{CreateSigningProfileNameInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{CreateSigningProfilButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Create Signing Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{CreateSigningProfileNameInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{CreateSigningProfilButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/CreateSigningProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

76
frontend/src/components/DeletePeerDialog/DeletePeerDialog.js
View file

@ -1,40 +1,22 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import useStyles from './styles';
import {
deletePeerRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function DeletePeerDialog({
open,
@ -42,7 +24,7 @@ export default function DeletePeerDialog({
peer,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const deletePeer = (peerId) => {
@ -53,9 +35,9 @@ export default function DeletePeerDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'peer:', peer);
var peerId = peer.getPeerId();
console.log( 'peerId:', peerId);
console.log('peer:', peer);
const peerId = peer.getPeerId();
console.log('peerId:', peerId);
deletePeer(peerId);
handleClose();
}
@ -69,34 +51,34 @@ export default function DeletePeerDialog({
>
Cancel
</Button>
)
);
}
function DeletePeerButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Delete peer
</Button>
)
</Button>
);
}
return (
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Delete peer</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this peer?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeletePeerButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Delete peer</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this peer?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeletePeerButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/DeletePeerDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

77
frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.js
View file

@ -1,40 +1,19 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import useStyles from './styles';
import {
deleteProfileRequest,
} from "../../squeakclient/requests"
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function DeleteProfileDialog({
open,
@ -43,7 +22,7 @@ export default function DeleteProfileDialog({
reloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const deleteProfile = (profileId) => {
@ -54,9 +33,9 @@ export default function DeleteProfileDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'profile:', profile);
var profileId = profile.getProfileId();
console.log( 'profileId:', profileId);
console.log('profile:', profile);
const profileId = profile.getProfileId();
console.log('profileId:', profileId);
deleteProfile(profileId);
handleClose();
}
@ -70,34 +49,34 @@ export default function DeleteProfileDialog({
>
Cancel
</Button>
)
);
}
function DeleteProfileButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Delete Profile
</Button>
)
</Button>
);
}
return (
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Delete Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this profile?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeleteProfileButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Delete Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this profile?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeleteProfileButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/DeleteProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

77
frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js
View file

@ -1,41 +1,22 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
deleteSqueakRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function DeleteSqueakDialog({
open,
@ -43,7 +24,7 @@ export default function DeleteSqueakDialog({
squeakToDelete,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const deleteSqueak = (squeakHash) => {
@ -55,9 +36,9 @@ export default function DeleteSqueakDialog({
function handleSubmit(event) {
event.preventDefault();
event.stopPropagation();
console.log( 'squeakToDelete:', squeakToDelete);
var squeakHash = squeakToDelete.getSqueakHash();
console.log( 'squeakHash:', squeakHash);
console.log('squeakToDelete:', squeakToDelete);
const squeakHash = squeakToDelete.getSqueakHash();
console.log('squeakHash:', squeakHash);
deleteSqueak(squeakHash);
handleClose();
}
@ -80,34 +61,34 @@ export default function DeleteSqueakDialog({
>
Cancel
</Button>
)
);
}
function DeleteSqueakButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Delete Squeak
</Button>
)
</Button>
);
}
return (
<Dialog open={open} onClose={cancel} onBackdropClick={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Delete Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this squeak?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeleteSqueakButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Delete Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
Are you sure you want to delete this squeak?
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{DeleteSqueakButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/DeleteSqueakDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

79
frontend/src/components/ExportPrivateKeyDialog/ExportPrivateKeyDialog.js
View file

@ -1,39 +1,20 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
getSqueakProfilePrivateKey,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function ExportPrivateKeyDialog({
open,
@ -41,10 +22,10 @@ export default function ExportPrivateKeyDialog({
profile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [privateKey, setPrivateKey] = useState('');
const [privateKey, setPrivateKey] = useState('');
const resetFields = () => {
setPrivateKey('');
@ -55,7 +36,7 @@ export default function ExportPrivateKeyDialog({
};
const getPrivateKey = () => {
var profileId = profile.getProfileId();
const profileId = profile.getProfileId();
getSqueakProfilePrivateKey(profileId, (response) => {
setPrivateKey(response.getPrivateKey());
});
@ -76,10 +57,10 @@ export default function ExportPrivateKeyDialog({
value={privateKey}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function CancelButton() {
@ -91,34 +72,34 @@ export default function ExportPrivateKeyDialog({
>
Cancel
</Button>
)
);
}
function ShowPrivateKeyButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Show private key
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Show private key
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Export Private Key</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{DisplayPrivateKey()}
</DialogContent>
<DialogActions>
{CancelButton()}
{ShowPrivateKeyButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Export Private Key</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{DisplayPrivateKey()}
</DialogContent>
<DialogActions>
{CancelButton()}
{ShowPrivateKeyButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/ExportPrivateKeyDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

125
frontend/src/components/Header/Header.js
View file

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import {useHistory} from "react-router-dom";
import { useHistory } from 'react-router-dom';
import {
AppBar,
Toolbar,
@ -7,70 +7,65 @@ import {
InputBase,
Menu,
MenuItem,
Fab,
Link
} from "@material-ui/core";
} from '@material-ui/core';
import {
Menu as MenuIcon,
MailOutline as MailIcon,
NotificationsNone as NotificationsIcon,
Person as AccountIcon,
Search as SearchIcon,
Send as SendIcon,
ArrowBack as ArrowBackIcon,
} from "@material-ui/icons";
import classNames from "classnames";
} from '@material-ui/icons';
import classNames from 'classnames';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import { Badge, Typography, Button } from "../Wrappers/Wrappers";
import Notification from "../Notification/Notification";
import UserAvatar from "../UserAvatar/UserAvatar";
import { Badge, Typography } from '../Wrappers/Wrappers';
import Notification from '../Notification/Notification';
// context
import {
useLayoutState,
useLayoutDispatch,
toggleSidebar,
} from "../../context/LayoutContext";
import { useUserDispatch, signOut } from "../../context/UserContext";
} from '../../context/LayoutContext';
import { useUserDispatch } from '../../context/UserContext';
import {
logoutRequest,
getUserRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
const notifications = [];
export default function Header(props) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
// global
var layoutState = useLayoutState();
var layoutDispatch = useLayoutDispatch();
var userDispatch = useUserDispatch();
const layoutState = useLayoutState();
const layoutDispatch = useLayoutDispatch();
const userDispatch = useUserDispatch();
// local
var [notificationsMenu, setNotificationsMenu] = useState(null);
var [isNotificationsUnread, setIsNotificationsUnread] = useState(true);
var [profileMenu, setProfileMenu] = useState(null);
var [isSearchOpen, setSearchOpen] = useState(false);
var [username, setUsername] = useState("bob smith");
const [notificationsMenu, setNotificationsMenu] = useState(null);
const [isNotificationsUnread, setIsNotificationsUnread] = useState(true);
const [profileMenu, setProfileMenu] = useState(null);
const [isSearchOpen, setSearchOpen] = useState(false);
const [username, setUsername] = useState('bob smith');
const getUser = () => {
getUserRequest(setUsername);
};
useEffect(()=>{
getUser()
},[]);
useEffect(() => {
getUser();
}, []);
return (
<AppBar position="fixed" className={classes.appBar}>
@ -132,7 +127,7 @@ export default function Header(props) {
color="inherit"
aria-haspopup="true"
aria-controls="mail-menu"
onClick={e => {
onClick={(e) => {
setNotificationsMenu(e.currentTarget);
setIsNotificationsUnread(false);
}}
@ -146,14 +141,14 @@ export default function Header(props) {
</Badge>
</IconButton>
<IconButton
aria-haspopup="true"
color="inherit"
className={classes.headerMenuButton}
aria-controls="profile-menu"
onClick={e => setProfileMenu(e.currentTarget)}
>
<AccountIcon classes={{ root: classes.headerIcon }} />
</IconButton>
aria-haspopup="true"
color="inherit"
className={classes.headerMenuButton}
aria-controls="profile-menu"
onClick={(e) => setProfileMenu(e.currentTarget)}
>
<AccountIcon classes={{ root: classes.headerIcon }} />
</IconButton>
<Menu
id="notifications-menu"
open={Boolean(notificationsMenu)}
@ -162,7 +157,7 @@ export default function Header(props) {
className={classes.headerMenu}
disableAutoFocusItem
>
{notifications.map(notification => (
{notifications.map((notification) => (
<MenuItem
key={notification.id}
onClick={() => setNotificationsMenu(null)}
@ -174,33 +169,33 @@ export default function Header(props) {
</Menu>
<Menu
id="profile-menu"
open={Boolean(profileMenu)}
anchorEl={profileMenu}
onClose={() => setProfileMenu(null)}
className={classes.headerMenu}
classes={{ paper: classes.profileMenu }}
disableAutoFocusItem
>
<div className={classes.profileMenuUser}>
<Typography variant="h4" weight="medium">
{username}
</Typography>
</div>
<div className={classes.profileMenuUser}>
<Typography
className={classes.profileMenuLink}
color="primary"
onClick={() => logoutRequest(
() => {
reloadRoute(history);
}
)}
>
Sign Out
</Typography>
</div>
</Menu>
id="profile-menu"
open={Boolean(profileMenu)}
anchorEl={profileMenu}
onClose={() => setProfileMenu(null)}
className={classes.headerMenu}
classes={{ paper: classes.profileMenu }}
disableAutoFocusItem
>
<div className={classes.profileMenuUser}>
<Typography variant="h4" weight="medium">
{username}
</Typography>
</div>
<div className={classes.profileMenuUser}>
<Typography
className={classes.profileMenuLink}
color="primary"
onClick={() => logoutRequest(
() => {
reloadRoute(history);
},
)}
>
Sign Out
</Typography>
</div>
</Menu>
</Toolbar>
</AppBar>

266
frontend/src/components/Header/HeaderView.js
View file

@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
import {
AppBar,
Toolbar,
@ -7,8 +7,8 @@ import {
Menu,
MenuItem,
Fab,
withStyles
} from "@material-ui/core";
withStyles,
} from '@material-ui/core';
import {
Menu as MenuIcon,
MailOutline as MailIcon,
@ -16,69 +16,71 @@ import {
Person as AccountIcon,
Search as SearchIcon,
Send as SendIcon,
ArrowBack as ArrowBackIcon
} from "@material-ui/icons";
import { fade } from "@material-ui/core/styles/colorManipulator";
import classNames from "classnames";
ArrowBack as ArrowBackIcon,
} from '@material-ui/icons';
import { fade } from '@material-ui/core/styles/colorManipulator';
import classNames from 'classnames';
import { Badge, Typography } from "../Wrappers";
import Notification from "../Notification";
import UserAvatar from "../UserAvatar";
import { Badge, Typography } from '../Wrappers';
import Notification from '../Notification';
import UserAvatar from '../UserAvatar';
const messages = [
{
id: 0,
variant: "warning",
name: "Jane Hew",
message: "Hey! How is it going?",
time: "9:32"
variant: 'warning',
name: 'Jane Hew',
message: 'Hey! How is it going?',
time: '9:32',
},
{
id: 1,
variant: "success",
name: "Lloyd Brown",
message: "Check out my new Dashboard",
time: "9:18"
variant: 'success',
name: 'Lloyd Brown',
message: 'Check out my new Dashboard',
time: '9:18',
},
{
id: 2,
variant: "primary",
name: "Mark Winstein",
message: "I want rearrange the appointment",
time: "9:15"
variant: 'primary',
name: 'Mark Winstein',
message: 'I want rearrange the appointment',
time: '9:15',
},
{
id: 3,
variant: "secondary",
name: "Liana Dutti",
message: "Good news from sale department",
time: "9:09"
}
variant: 'secondary',
name: 'Liana Dutti',
message: 'Good news from sale department',
time: '9:09',
},
];
const notifications = [
{ id: 0, color: "warning", message: "Check out this awesome ticket" },
{ id: 0, color: 'warning', message: 'Check out this awesome ticket' },
{
id: 1,
color: "success",
type: "info",
message: "What is the best way to get ..."
color: 'success',
type: 'info',
message: 'What is the best way to get ...',
},
{
id: 2,
color: "secondary",
type: "notification",
message: "This is just a simple notification"
color: 'secondary',
type: 'notification',
message: 'This is just a simple notification',
},
{
id: 3,
color: "primary",
type: "e-commerce",
message: "12 new orders has arrived today"
}
color: 'primary',
type: 'e-commerce',
message: '12 new orders has arrived today',
},
];
const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
const Header = ({
classes, isSidebarOpened, toggleSidebar, ...props
}) => (
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<IconButton
@ -86,19 +88,19 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
onClick={toggleSidebar}
className={classNames(
classes.headerMenuButton,
classes.headerMenuButtonCollapse
classes.headerMenuButtonCollapse,
)}
>
{isSidebarOpened ? (
<ArrowBackIcon
classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse)
root: classNames(classes.headerIcon, classes.headerIconCollapse),
}}
/>
) : (
<MenuIcon
classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse)
root: classNames(classes.headerIcon, classes.headerIconCollapse),
}}
/>
)}
@ -107,12 +109,12 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
<div className={classes.grow} />
<div
className={classNames(classes.search, {
[classes.searchFocused]: props.isSearchOpen
[classes.searchFocused]: props.isSearchOpen,
})}
>
<div
className={classNames(classes.searchIcon, {
[classes.searchIconOpened]: props.isSearchOpen
[classes.searchIconOpened]: props.isSearchOpen,
})}
onClick={props.toggleSearch}
>
@ -122,7 +124,7 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
input: classes.inputInput,
}}
/>
</div>
@ -184,10 +186,12 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
component="a"
color="secondary"
>
{messages.length} New Messages
{messages.length}
{' '}
New Messages
</Typography>
</div>
{messages.map(message => (
{messages.map((message) => (
<MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}>
<UserAvatar color={message.variant} name={message.name} />
@ -198,7 +202,7 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
<div
className={classNames(
classes.messageNotificationSide,
classes.messageNotificationBodySide
classes.messageNotificationBodySide,
)}
>
<Typography weight="medium" gutterBottom>
@ -226,7 +230,7 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
className={classes.headerMenu}
disableAutoFocusItem
>
{notifications.map(notification => (
{notifications.map((notification) => (
<MenuItem
key={notification.id}
onClick={props.closeNotificationsMenu}
@ -261,26 +265,32 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem
classes.headerMenuItem,
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Profile
<AccountIcon className={classes.profileMenuIcon} />
{' '}
Profile
</MenuItem>
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem
classes.headerMenuItem,
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Tasks
<AccountIcon className={classes.profileMenuIcon} />
{' '}
Tasks
</MenuItem>
<MenuItem
className={classNames(
classes.profileMenuItem,
classes.headerMenuItem
classes.headerMenuItem,
)}
>
<AccountIcon className={classes.profileMenuIcon} /> Messages
<AccountIcon className={classes.profileMenuIcon} />
{' '}
Messages
</MenuItem>
<div className={classes.profileMenuUser}>
<Typography
@ -296,161 +306,161 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
</AppBar>
);
const styles = theme => ({
const styles = (theme) => ({
logotype: {
color: "white",
color: 'white',
marginLeft: theme.spacing.unit * 2.5,
marginRight: theme.spacing.unit * 2.5,
fontWeight: 500,
fontSize: 18,
whiteSpace: "nowrap",
[theme.breakpoints.down("xs")]: {
display: "none"
}
whiteSpace: 'nowrap',
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
appBar: {
width: "100vw",
width: '100vw',
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["margin"], {
transition: theme.transitions.create(['margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
duration: theme.transitions.duration.leavingScreen,
}),
},
toolbar: {
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2
paddingRight: theme.spacing.unit * 2,
},
hide: {
display: "none"
display: 'none',
},
grow: {
flexGrow: 1
flexGrow: 1,
},
search: {
position: "relative",
position: 'relative',
borderRadius: 25,
paddingLeft: theme.spacing.unit * 2.5,
width: 36,
backgroundColor: fade(theme.palette.common.black, 0),
transition: theme.transitions.create(["background-color", "width"]),
"&:hover": {
cursor: "pointer",
backgroundColor: fade(theme.palette.common.black, 0.08)
}
transition: theme.transitions.create(['background-color', 'width']),
'&:hover': {
cursor: 'pointer',
backgroundColor: fade(theme.palette.common.black, 0.08),
},
},
searchFocused: {
backgroundColor: fade(theme.palette.common.black, 0.08),
width: "100%",
[theme.breakpoints.up("md")]: {
width: 250
}
width: '100%',
[theme.breakpoints.up('md')]: {
width: 250,
},
},
searchIcon: {
width: 36,
right: 0,
height: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: theme.transitions.create("right"),
"&:hover": {
cursor: "pointer"
}
height: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create('right'),
'&:hover': {
cursor: 'pointer',
},
},
searchIconOpened: {
right: theme.spacing.unit * 1.25
right: theme.spacing.unit * 1.25,
},
inputRoot: {
color: "inherit",
width: "100%"
color: 'inherit',
width: '100%',
},
inputInput: {
height: 36,
padding: 0,
paddingRight: 36 + theme.spacing.unit * 1.25,
width: "100%"
width: '100%',
},
messageContent: {
display: "flex",
flexDirection: "column"
display: 'flex',
flexDirection: 'column',
},
headerMenu: {
marginTop: theme.spacing.unit * 7
marginTop: theme.spacing.unit * 7,
},
headerMenuList: {
display: "flex",
flexDirection: "column"
display: 'flex',
flexDirection: 'column',
},
headerMenuItem: {
"&:hover, &:focus": {
'&:hover, &:focus': {
backgroundColor: theme.palette.primary.main,
color: "white"
}
color: 'white',
},
},
headerMenuButton: {
marginLeft: theme.spacing.unit * 2,
padding: theme.spacing.unit / 2
padding: theme.spacing.unit / 2,
},
headerMenuButtonCollapse: {
marginRight: theme.spacing.unit * 2
marginRight: theme.spacing.unit * 2,
},
headerIcon: {
fontSize: 28,
color: "rgba(255, 255, 255, 0.35)"
color: 'rgba(255, 255, 255, 0.35)',
},
headerIconCollapse: {
color: "white"
color: 'white',
},
profileMenu: {
minWidth: 265
minWidth: 265,
},
profileMenuUser: {
display: "flex",
flexDirection: "column",
padding: theme.spacing.unit * 2
display: 'flex',
flexDirection: 'column',
padding: theme.spacing.unit * 2,
},
profileMenuItem: {
color: theme.palette.text.hint
color: theme.palette.text.hint,
},
profileMenuIcon: {
marginRight: theme.spacing.unit * 2,
color: theme.palette.text.hint
color: theme.palette.text.hint,
},
profileMenuLink: {
fontSize: 16,
textDecoration: "none",
"&:hover": {
cursor: "pointer"
}
textDecoration: 'none',
'&:hover': {
cursor: 'pointer',
},
},
messageNotification: {
height: "auto",
display: "flex",
alignItems: "center",
"&:hover, &:focus": {
backgroundColor: theme.palette.background.light
}
height: 'auto',
display: 'flex',
alignItems: 'center',
'&:hover, &:focus': {
backgroundColor: theme.palette.background.light,
},
},
messageNotificationSide: {
display: "flex",
flexDirection: "column",
alignItems: "center",
marginRight: theme.spacing.unit * 2
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: theme.spacing.unit * 2,
},
messageNotificationBodySide: {
alignItems: "flex-start",
marginRight: 0
alignItems: 'flex-start',
marginRight: 0,
},
sendMessageButton: {
margin: theme.spacing.unit * 4,
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit * 2,
textTransform: "none"
textTransform: 'none',
},
sendButtonIcon: {
marginLeft: theme.spacing.unit * 2
}
marginLeft: theme.spacing.unit * 2,
},
});
export default withStyles(styles)(Header);

98
frontend/src/components/Header/styles.js
View file

@ -1,22 +1,22 @@
import { makeStyles } from "@material-ui/styles";
import { fade } from "@material-ui/core/styles/colorManipulator";
import { makeStyles } from '@material-ui/styles';
import { fade } from '@material-ui/core/styles/colorManipulator';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
logotype: {
color: "white",
color: 'white',
marginLeft: theme.spacing(2.5),
marginRight: theme.spacing(2.5),
fontWeight: 500,
fontSize: 18,
whiteSpace: "nowrap",
[theme.breakpoints.down("xs")]: {
display: "none",
whiteSpace: 'nowrap',
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
appBar: {
width: "100vw",
width: '100vw',
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["margin"], {
transition: theme.transitions.create(['margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
@ -26,71 +26,71 @@ export default makeStyles(theme => ({
paddingRight: theme.spacing(2),
},
hide: {
display: "none",
display: 'none',
},
grow: {
flexGrow: 1,
},
search: {
position: "relative",
position: 'relative',
borderRadius: 25,
paddingLeft: theme.spacing(2.5),
width: 36,
backgroundColor: fade(theme.palette.common.black, 0),
transition: theme.transitions.create(["background-color", "width"]),
"&:hover": {
cursor: "pointer",
transition: theme.transitions.create(['background-color', 'width']),
'&:hover': {
cursor: 'pointer',
backgroundColor: fade(theme.palette.common.black, 0.08),
},
},
searchFocused: {
backgroundColor: fade(theme.palette.common.black, 0.08),
width: "100%",
[theme.breakpoints.up("md")]: {
width: '100%',
[theme.breakpoints.up('md')]: {
width: 250,
},
},
searchIcon: {
width: 36,
right: 0,
height: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: theme.transitions.create("right"),
"&:hover": {
cursor: "pointer",
height: '100%',
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create('right'),
'&:hover': {
cursor: 'pointer',
},
},
searchIconOpened: {
right: theme.spacing(1.25),
},
inputRoot: {
color: "inherit",
width: "100%",
color: 'inherit',
width: '100%',
},
inputInput: {
height: 36,
padding: 0,
paddingRight: 36 + theme.spacing(1.25),
width: "100%",
width: '100%',
},
messageContent: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
},
headerMenu: {
marginTop: theme.spacing(7),
},
headerMenuList: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
},
headerMenuItem: {
"&:hover, &:focus": {
'&:hover, &:focus': {
backgroundColor: theme.palette.primary.main,
color: "white",
color: 'white',
},
},
headerMenuButton: {
@ -102,17 +102,17 @@ export default makeStyles(theme => ({
},
headerIcon: {
fontSize: 28,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
headerIconCollapse: {
color: "white",
color: 'white',
},
profileMenu: {
minWidth: 265,
},
profileMenuUser: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
},
profileMenuItem: {
@ -124,34 +124,34 @@ export default makeStyles(theme => ({
},
profileMenuLink: {
fontSize: 16,
textDecoration: "none",
"&:hover": {
cursor: "pointer",
textDecoration: 'none',
'&:hover': {
cursor: 'pointer',
},
},
messageNotification: {
height: "auto",
display: "flex",
alignItems: "center",
"&:hover, &:focus": {
height: 'auto',
display: 'flex',
alignItems: 'center',
'&:hover, &:focus': {
backgroundColor: theme.palette.background.light,
},
},
messageNotificationSide: {
display: "flex",
flexDirection: "column",
alignItems: "center",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: theme.spacing(2),
},
messageNotificationBodySide: {
alignItems: "flex-start",
alignItems: 'flex-start',
marginRight: 0,
},
sendMessageButton: {
margin: theme.spacing(4),
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
textTransform: "none",
textTransform: 'none',
},
sendButtonIcon: {
marginLeft: theme.spacing(2),

92
frontend/src/components/ImportSigningProfileDialog/ImportSigningProfileDialog.js
View file

@ -1,52 +1,34 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
importSigningProfileRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
goToProfilePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function ImportSigningProfileDialog({
open,
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [profileName, setProfileName] = useState('');
var [privateKey, setPrivateKey] = useState('');
const [profileName, setProfileName] = useState('');
const [privateKey, setPrivateKey] = useState('');
const resetFields = () => {
setProfileName('');
@ -65,13 +47,13 @@ export default function ImportSigningProfileDialog({
};
const handleErr = (err) => {
alert('Error creating contact profile: ' + err);
alert(`Error creating contact profile: ${err}`);
};
function handleSubmit(event) {
event.preventDefault();
console.log( 'profileName:', profileName);
console.log( 'privateKey:', privateKey);
console.log('profileName:', profileName);
console.log('privateKey:', privateKey);
if (!profileName) {
alert('Profile Name cannot be empty.');
return;
@ -96,7 +78,7 @@ export default function ImportSigningProfileDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function ImportSigningProfilePrivateKeyInput() {
@ -111,7 +93,7 @@ export default function ImportSigningProfileDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CancelButton() {
@ -123,37 +105,37 @@ export default function ImportSigningProfileDialog({
>
Cancel
</Button>
)
);
}
function ImportSigningProfilButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Import Signing Profile
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Import Signing Profile
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Import Signing Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{ImportSigningProfileNameInput()}
</DialogContent>
<DialogContent>
{ImportSigningProfilePrivateKeyInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{ImportSigningProfilButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Import Signing Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{ImportSigningProfileNameInput()}
</DialogContent>
<DialogContent>
{ImportSigningProfilePrivateKeyInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{ImportSigningProfilButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/ImportSigningProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

138
frontend/src/components/Layout/Layout.js
View file

@ -1,92 +1,92 @@
import React from "react";
import React from 'react';
import {
Route,
Switch,
Redirect,
withRouter,
} from "react-router-dom";
import classnames from "classnames";
} from 'react-router-dom';
import classnames from 'classnames';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import Header from "../Header";
import Sidebar from "../Sidebar";
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 Squeak from "../../pages/squeak";
import Profile from "../../pages/profile";
import Wallet from "../../pages/wallet";
import LightningNode from "../../pages/lightningnode";
import Channel from "../../pages/channel";
import Notifications from "../../pages/notifications";
import Maps from "../../pages/maps";
import Profiles from "../../pages/profiles";
import Payments from "../../pages/payments";
import SentPayments from "../../pages/sentpayments";
import ReceivedPayments from "../../pages/receivedpayments";
import Liked from "../../pages/liked";
import Icons from "../../pages/icons";
import Charts from "../../pages/charts";
import Peers from "../../pages/peers";
import Peer from "../../pages/peer";
import PeerAddress from "../../pages/peeraddress";
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 Wallet from '../../pages/wallet';
import LightningNode from '../../pages/lightningnode';
import Channel from '../../pages/channel';
import Notifications from '../../pages/notifications';
import Maps from '../../pages/maps';
import Profiles from '../../pages/profiles';
import Payments from '../../pages/payments';
import SentPayments from '../../pages/sentpayments';
import ReceivedPayments from '../../pages/receivedpayments';
import Liked from '../../pages/liked';
import Icons from '../../pages/icons';
import Charts from '../../pages/charts';
import Peers from '../../pages/peers';
import Peer from '../../pages/peer';
import PeerAddress from '../../pages/peeraddress';
// context
import { useLayoutState } from "../../context/LayoutContext";
import { useLayoutState } from '../../context/LayoutContext';
function Layout(props) {
var classes = useStyles();
const classes = useStyles();
// global
var layoutState = useLayoutState();
const layoutState = useLayoutState();
return (
<div className={classes.root}>
<>
<Header history={props.history} />
<Sidebar />
<div
className={classnames(classes.content, {
[classes.contentShift]: layoutState.isSidebarOpened,
})}
>
<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/squeak/:hash" component={Squeak} />
<Route path="/app/profile/:id" component={Profile} />
<Route path="/app/profiles" component={Profiles} />
<Route path="/app/payments" component={Payments} />
<Route path="/app/sentpayments" component={SentPayments} />
<Route path="/app/receivedpayments" component={ReceivedPayments} />
<Route path="/app/liked" component={Liked} />
<Route path="/app/wallet" component={Wallet} />
<Route path="/app/lightningnode/:pubkey/:host/:port" component={LightningNode} />
<Route path="/app/lightningnode/:pubkey/:host" component={LightningNode} />
<Route path="/app/lightningnode/:pubkey" component={LightningNode} />
<Route path="/app/channel/:txId/:outputIndex" component={Channel} />
<Route path="/app/peers" component={Peers} />
<Route path="/app/peer/:id" component={Peer} />
<Route path="/app/peeraddress/:host/:port" component={PeerAddress} />
<Route path="/app/notifications" component={Notifications} />
<Route
exact
path="/app/ui"
render={() => <Redirect to="/app/ui/icons" />}
/>
<Route path="/app/ui/maps" component={Maps} />
<Route path="/app/ui/icons" component={Icons} />
<Route path="/app/ui/charts" component={Charts} />
</Switch>
</div>
</>
<>
<Header history={props.history} />
<Sidebar />
<div
className={classnames(classes.content, {
[classes.contentShift]: layoutState.isSidebarOpened,
})}
>
<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/squeak/:hash" component={Squeak} />
<Route path="/app/profile/:id" component={Profile} />
<Route path="/app/profiles" component={Profiles} />
<Route path="/app/payments" component={Payments} />
<Route path="/app/sentpayments" component={SentPayments} />
<Route path="/app/receivedpayments" component={ReceivedPayments} />
<Route path="/app/liked" component={Liked} />
<Route path="/app/wallet" component={Wallet} />
<Route path="/app/lightningnode/:pubkey/:host/:port" component={LightningNode} />
<Route path="/app/lightningnode/:pubkey/:host" component={LightningNode} />
<Route path="/app/lightningnode/:pubkey" component={LightningNode} />
<Route path="/app/channel/:txId/:outputIndex" component={Channel} />
<Route path="/app/peers" component={Peers} />
<Route path="/app/peer/:id" component={Peer} />
<Route path="/app/peeraddress/:host/:port" component={PeerAddress} />
<Route path="/app/notifications" component={Notifications} />
<Route
exact
path="/app/ui"
render={() => <Redirect to="/app/ui/icons" />}
/>
<Route path="/app/ui/maps" component={Maps} />
<Route path="/app/ui/icons" component={Icons} />
<Route path="/app/ui/charts" component={Charts} />
</Switch>
</div>
</>
</div>
);
}

16
frontend/src/components/Layout/styles.js
View file

@ -1,20 +1,20 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
root: {
display: "flex",
maxWidth: "100vw",
overflowX: "hidden",
display: 'flex',
maxWidth: '100vw',
overflowX: 'hidden',
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
width: `calc(100vw - 240px)`,
minHeight: "100vh",
width: 'calc(100vw - 240px)',
minHeight: '100vh',
},
contentShift: {
width: `calc(100vw - ${240 + theme.spacing(6)}px)`,
transition: theme.transitions.create(["width", "margin"], {
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),

47
frontend/src/components/LightningPeerListItem/LightningPeerListItem.js
View file

@ -1,19 +1,17 @@
import React from "react";
import {useHistory} from "react-router-dom";
import React from 'react';
import { useHistory } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import CardHeader from "@material-ui/core/CardHeader";
import CardHeader from '@material-ui/core/CardHeader';
// icons
import ComputerIcon from '@material-ui/icons/Computer';
import useStyles from "../../pages/wallet/styles";
import useStyles from '../../pages/wallet/styles';
import {
goToLightningNodePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function LightningPeerListItem({
peer,
@ -27,45 +25,44 @@ export default function LightningPeerListItem({
const onPeerClick = (event) => {
event.preventDefault();
console.log("Handling peer click...");
console.log('Handling peer click...');
const pubkey = peer.getPubKey();
const host = getPeerHost();
const port = getPeerPort();
goToLightningNodePage(history, pubkey, host, port);
}
};
const getPeerHost = () => {
const address = peer.getAddress();
if (address == null) {
return null;
}
const pieces = address.split(":");
const pieces = address.split(':');
return pieces[0];
}
};
const getPeerPort = () => {
const address = peer.getAddress();
if (address == null) {
return null;
}
const pieces = address.split(":");
const pieces = address.split(':');
if (pieces.length < 2) {
return null;
}
return pieces[1];
}
};
return (
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon/>}
title={`Pubkey: ${peer.getPubKey()}`}
subheader={`Address: ${peer.getAddress()}`}
// action={<Button size="small">View Peer</Button>}
/>
</Card>
)
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon />}
title={`Pubkey: ${peer.getPubKey()}`}
subheader={`Address: ${peer.getAddress()}`}
/>
</Card>
);
}

33
frontend/src/components/LndUnavailableDialog/LndUnavailableDialog.js
View file

@ -1,40 +1,19 @@
import React, {useState, useEffect} from 'react';
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import useStyles from './styles';
export default function LndUnavailableDialog({
open,
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
return (
@ -43,5 +22,5 @@ export default function LndUnavailableDialog({
Unable to connect to lnd node.
Make sure that lnd node is avaialable, and then reload page.
</Dialog>
)
);
}

24
frontend/src/components/LndUnavailableDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

104
frontend/src/components/MakeSqueakDialog/MakeSqueakDialog.js
View file

@ -1,43 +1,31 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
} from '@material-ui/core';
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import SqueakThreadItem from '../SqueakThreadItem';
import {
makeSqueakRequest,
getSigningProfilesRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
goToSqueakPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function MakeSqueakDialog({
open,
@ -45,12 +33,12 @@ export default function MakeSqueakDialog({
replytoSqueak,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [profileId, setProfileId] = useState(-1);
var [content, setContent] = useState('');
var [signingProfiles, setSigningProfiles] = useState([]);
const [profileId, setProfileId] = useState(-1);
const [content, setContent] = useState('');
const [signingProfiles, setSigningProfiles] = useState([]);
const resetFields = () => {
setProfileId(-1);
@ -70,7 +58,7 @@ export default function MakeSqueakDialog({
};
const handleErr = (err) => {
alert('Error making squeak: ' + err);
alert(`Error making squeak: ${err}`);
};
const createSqueak = (profileId, content, replyto) => {
@ -86,14 +74,14 @@ export default function MakeSqueakDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'profileId:', profileId);
console.log( 'content:', content);
console.log('profileId:', profileId);
console.log('content:', content);
if (replytoSqueak) {
var replyto = replytoSqueak.getSqueakHash();
} else {
var replyto = null;
}
console.log( 'replyto:', replyto);
console.log('replyto:', replyto);
if (profileId == -1) {
alert('Signing profile must be selected.');
return;
@ -124,15 +112,15 @@ export default function MakeSqueakDialog({
<>
<SqueakThreadItem
hash={replytoSqueak.getSqueakHash()}
squeak={replytoSqueak}>
</SqueakThreadItem>
squeak={replytoSqueak}
/>
</>
)
);
}
function MakeSelectSigningProfile() {
return (
<FormControl className={classes.formControl} required style={{minWidth: 120}}>
<FormControl className={classes.formControl} required style={{ minWidth: 120 }}>
<InputLabel id="demo-simple-select-label">Signing Profile</InputLabel>
<Select
labelId="demo-simple-select-label"
@ -140,12 +128,10 @@ export default function MakeSqueakDialog({
value={profileId}
onChange={handleChange}
>
{signingProfiles.map(p =>
<MenuItem key={p.getProfileId()} value={p.getProfileId()}>{p.getProfileName()}</MenuItem>
)}
{signingProfiles.map((p) => <MenuItem key={p.getProfileId()} value={p.getProfileId()}>{p.getProfileName()}</MenuItem>)}
</Select>
</FormControl>
)
);
}
function MakeSqueakContentInput() {
@ -163,7 +149,7 @@ export default function MakeSqueakDialog({
fullWidth
inputProps={{ maxLength: 280 }}
/>
)
);
}
function MakeCancelButton() {
@ -175,37 +161,37 @@ export default function MakeSqueakDialog({
>
Cancel
</Button>
)
);
}
function MakeSqueakButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Make Squeak
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Make Squeak
</Button>
);
}
return (
<Dialog open={open} onRendered={load} onEnter={resetFields} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Make Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{replytoSqueak ?
ReplySqueakContent() : <></>}
{MakeSelectSigningProfile()}
{MakeSqueakContentInput()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{MakeSqueakButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Make Squeak</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{replytoSqueak
? ReplySqueakContent() : <></>}
{MakeSelectSigningProfile()}
{MakeSqueakContentInput()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
{MakeSqueakButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/MakeSqueakDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

52
frontend/src/components/Notification/Notification.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { Button } from "@material-ui/core";
import React from 'react';
import { Button } from '@material-ui/core';
import {
NotificationsNone as NotificationsIcon,
ThumbUp as ThumbUpIcon,
@ -14,19 +14,19 @@ import {
AccountBox as CustomerIcon,
Done as ShippedIcon,
Publish as UploadIcon,
} from "@material-ui/icons";
import { useTheme } from "@material-ui/styles";
import classnames from "classnames";
import tinycolor from "tinycolor2";
} from '@material-ui/icons';
import { useTheme } from '@material-ui/styles';
import classnames from 'classnames';
import tinycolor from 'tinycolor2';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import { Typography } from "../Wrappers";
import { Typography } from '../Wrappers';
const typesIcons = {
"e-commerce": <ShoppingCartIcon />,
'e-commerce': <ShoppingCartIcon />,
notification: <NotificationsIcon />,
offer: <TicketIcon />,
info: <ThumbUpIcon />,
@ -42,8 +42,8 @@ const typesIcons = {
};
export default function Notification({ variant, ...props }) {
var classes = useStyles();
var theme = useTheme();
const classes = useStyles();
const theme = useTheme();
const icon = getIconByType(props.type);
const iconWithStyles = React.cloneElement(icon, {
@ -52,35 +52,35 @@ export default function Notification({ variant, ...props }) {
},
style: {
color:
variant !== "contained" &&
theme.palette[props.color] &&
theme.palette[props.color].main,
variant !== 'contained'
&& theme.palette[props.color]
&& theme.palette[props.color].main,
},
});
return (
<div
className={classnames(classes.notificationContainer, props.className, {
[classes.notificationContained]: variant === "contained",
[classes.notificationContained]: variant === 'contained',
[classes.notificationContainedShadowless]: props.shadowless,
})}
style={{
backgroundColor:
variant === "contained" &&
theme.palette[props.color] &&
theme.palette[props.color].main,
variant === 'contained'
&& theme.palette[props.color]
&& theme.palette[props.color].main,
}}
>
<div
className={classnames(classes.notificationIconContainer, {
[classes.notificationIconContainerContained]: variant === "contained",
[classes.notificationIconContainerRounded]: variant === "rounded",
[classes.notificationIconContainerContained]: variant === 'contained',
[classes.notificationIconContainerRounded]: variant === 'rounded',
})}
style={{
backgroundColor:
variant === "rounded" &&
theme.palette[props.color] &&
tinycolor(theme.palette[props.color].main)
variant === 'rounded'
&& theme.palette[props.color]
&& tinycolor(theme.palette[props.color].main)
.setAlpha(0.15)
.toRgbString(),
}}
@ -90,10 +90,10 @@ export default function Notification({ variant, ...props }) {
<div className={classes.messageContainer}>
<Typography
className={classnames({
[classes.containedTypography]: variant === "contained",
[classes.containedTypography]: variant === 'contained',
})}
variant={props.typographyVariant}
size={variant !== "contained" && !props.typographyVariant && "md"}
size={variant !== 'contained' && !props.typographyVariant && 'md'}
>
{props.message}
</Typography>
@ -112,6 +112,6 @@ export default function Notification({ variant, ...props }) {
}
// ####################################################################
function getIconByType(type = "offer") {
function getIconByType(type = 'offer') {
return typesIcons[type];
}

32
frontend/src/components/Notification/styles.js
View file

@ -1,9 +1,9 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
notificationContainer: {
display: "flex",
alignItems: "center",
display: 'flex',
alignItems: 'center',
},
notificationContained: {
borderRadius: 45,
@ -11,37 +11,37 @@ export default makeStyles(theme => ({
boxShadow: theme.customShadows.widgetDark,
},
notificationContainedShadowless: {
boxShadow: "none",
boxShadow: 'none',
},
notificationIconContainer: {
minWidth: 45,
height: 45,
borderRadius: 45,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 24,
},
notificationIconContainerContained: {
fontSize: 18,
color: "#FFFFFF80",
color: '#FFFFFF80',
},
notificationIconContainerRounded: {
marginRight: theme.spacing(2),
},
containedTypography: {
color: "white",
color: 'white',
},
messageContainer: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexGrow: 1,
},
extraButton: {
color: "white",
"&:hover, &:focus": {
background: "transparent",
color: 'white',
'&:hover, &:focus': {
background: 'transparent',
},
},
}));

106
frontend/src/components/OpenChannelDialog/OpenChannelDialog.js
View file

@ -1,38 +1,20 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
lndOpenChannelSyncRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function OpenChannelDialog({
open,
@ -40,15 +22,15 @@ export default function OpenChannelDialog({
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [amount, setAmount] = useState("");
var [satperbyte, setSatperbyte] = useState("");
const [amount, setAmount] = useState('');
const [satperbyte, setSatperbyte] = useState('');
const resetFields = () => {
setAmount("");
setSatperbyte("");
setAmount('');
setSatperbyte('');
};
const handleChangeAmount = (event) => {
@ -65,7 +47,7 @@ export default function OpenChannelDialog({
};
const handleErr = (err) => {
alert('Error opening channel: ' + err);
alert(`Error opening channel: ${err}`);
};
const openChannel = (pubkey, amount) => {
@ -74,9 +56,9 @@ export default function OpenChannelDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'pubkey:', pubkey);
console.log( 'amount:', amount);
console.log( 'satperbyte:', satperbyte);
console.log('pubkey:', pubkey);
console.log('amount:', amount);
console.log('satperbyte:', satperbyte);
if (!amount) {
alert('Amount cannot be empty.');
return;
@ -95,10 +77,10 @@ export default function OpenChannelDialog({
value={pubkey}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function LocalFundingAmountInput() {
@ -113,7 +95,7 @@ export default function OpenChannelDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function SatPerByteInput() {
@ -128,7 +110,7 @@ export default function OpenChannelDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CancelButton() {
@ -140,40 +122,40 @@ export default function OpenChannelDialog({
>
Cancel
</Button>
)
);
}
function OpenChannelButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Open Channel
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Open Channel
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Open Channel</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{PubKeyInput()}
</DialogContent>
<DialogContent>
{LocalFundingAmountInput()}
</DialogContent>
<DialogContent>
{SatPerByteInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{OpenChannelButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Open Channel</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{PubKeyInput()}
</DialogContent>
<DialogContent>
{LocalFundingAmountInput()}
</DialogContent>
<DialogContent>
{SatPerByteInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{OpenChannelButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/OpenChannelDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

10
frontend/src/components/PageTitle/PageTitle.js
View file

@ -1,14 +1,14 @@
import React from "react";
import { Button } from "@material-ui/core";
import React from 'react';
import { Button } from '@material-ui/core';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import { Typography } from "../Wrappers";
import { Typography } from '../Wrappers';
export default function PageTitle(props) {
var classes = useStyles();
const classes = useStyles();
return (
<div className={classes.pageTitleContainer}>

12
frontend/src/components/PageTitle/styles.js
View file

@ -1,9 +1,9 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
pageTitleContainer: {
display: "flex",
justifyContent: "space-between",
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(4),
marginTop: theme.spacing(5),
},
@ -12,8 +12,8 @@ export default makeStyles(theme => ({
},
button: {
boxShadow: theme.customShadows.widget,
textTransform: "none",
"&:active": {
textTransform: 'none',
'&:active': {
boxShadow: theme.customShadows.widgetWide,
},
},

37
frontend/src/components/PeerListItem/PeerListItem.js
View file

@ -1,19 +1,17 @@
import React from "react";
import {useHistory} from "react-router-dom";
import React from 'react';
import { useHistory } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import CardHeader from "@material-ui/core/CardHeader";
import CardHeader from '@material-ui/core/CardHeader';
// icons
import ComputerIcon from '@material-ui/icons/Computer';
import useStyles from "../../pages/wallet/styles";
import useStyles from '../../pages/wallet/styles';
import {
goToPeerAddressPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function PeerListItem({
peer,
@ -27,11 +25,11 @@ export default function PeerListItem({
const onPeerClick = (event) => {
event.preventDefault();
console.log("Handling peer address click...");
console.log('Handling peer address click...');
const host = peer.getPeerAddress().getHost();
const port = peer.getPeerAddress().getPort();
goToPeerAddressPage(history, host, port);
}
};
// const getPeerHost = () => {
// const address = peer.getAddress();
@ -55,15 +53,14 @@ export default function PeerListItem({
// }
return (
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon/>}
title={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
// action={<Button size="small">View Peer</Button>}
/>
</Card>
)
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon />}
title={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
/>
</Card>
);
}

83
frontend/src/components/PendingOpenChannelItem/PendingOpenChannelItem.js
View file

@ -1,76 +1,76 @@
import React, {useState} from "react";
import {Box, Chip, Typography,} from "@material-ui/core";
import {useHistory} from "react-router-dom";
import React, { useState } from 'react';
import { Box, Chip, Typography } from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "../../pages/wallet/styles";
import moment from 'moment';
import Card from "@material-ui/core/Card";
import ChannelBalanceBar from "../ChannelItem/ChannelBalanceBar";
import Card from '@material-ui/core/Card';
import useStyles from '../../pages/wallet/styles';
import ChannelBalanceBar from '../ChannelItem/ChannelBalanceBar';
import {
goToChannelPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function PendingOpenChannelItem({
pendingOpenChannel,
...props
}) {
const classes = useStyles({
channelStatus: 'pending-open',
clickable: true,
})
channelStatus: 'pending-open',
clickable: true,
});
const history = useHistory();
const [expanded, setExpanded] = useState(false);
const handleExpandClick = (evt) => {
evt.stopPropagation()
setExpanded(!expanded);
};
const handleExpandClick = (evt) => {
evt.stopPropagation();
setExpanded(!expanded);
};
const getTxId = (channel) => {
var channelPoint = channel.getChannelPoint();
const channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
var pieces = channelPoint.split(":");
const pieces = channelPoint.split(':');
return pieces[0];
}
};
const getOutputIndex = (channel) => {
var channelPoint = channel.getChannelPoint();
const channelPoint = channel.getChannelPoint();
if (channelPoint == null) {
return null;
}
var pieces = channelPoint.split(":");
const pieces = channelPoint.split(':');
if (pieces.length < 2) {
return null;
}
return pieces[1];
}
};
const onChannelClick = (event) => {
event.preventDefault();
console.log("Handling channel click...");
var channel = pendingOpenChannel.getChannel();
var txId = getTxId(channel);
var outputIndex = getOutputIndex(channel);
console.log('Handling channel click...');
const channel = pendingOpenChannel.getChannel();
const txId = getTxId(channel);
const outputIndex = getOutputIndex(channel);
goToChannelPage(history, txId, outputIndex);
}
};
function ChannelDetailItem(label, value) {
return <Box className={classes.detailItem}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
return (
<Box className={classes.detailItem}>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
);
}
const channel = pendingOpenChannel.getChannel();
@ -86,14 +86,15 @@ export default function PendingOpenChannelItem({
<Chip
label="Opening"
size="small"
className={classes.channelStatusChip}/>
className={classes.channelStatusChip}
/>
</Box>
</Box>
<Box className={classes.cardContentSection}>
{ChannelDetailItem("Pubkey", `${channel.getRemoteNodePub()}`)}
{ChannelDetailItem("Channel Point", `${channel.getChannelPoint()}`)}
{/*{ChannelDetailItem("Lifetime", `${moment.duration(channel.getLifetime(), 'seconds').humanize()}`)}*/}
{/*{ChannelDetailItem("Uptime", `${moment.duration(channel.getUptime(), 'seconds').humanize()}`)}*/}
{ChannelDetailItem('Pubkey', `${channel.getRemoteNodePub()}`)}
{ChannelDetailItem('Channel Point', `${channel.getChannelPoint()}`)}
{/* {ChannelDetailItem("Lifetime", `${moment.duration(channel.getLifetime(), 'seconds').humanize()}`)} */}
{/* {ChannelDetailItem("Uptime", `${moment.duration(channel.getUptime(), 'seconds').humanize()}`)} */}
</Box>
</Box>
<Box className={classes.cardContentFlexColumn}>
@ -103,5 +104,5 @@ export default function PendingOpenChannelItem({
</Box>
</Box>
</Card>
)
);
}

24
frontend/src/components/PendingOpenChannelItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

61
frontend/src/components/ProfileListItem/ProfileListItem.js
View file

@ -1,24 +1,20 @@
import React from "react";
import {useHistory} from "react-router-dom";
import React from 'react';
import { useHistory } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import CardHeader from "@material-ui/core/CardHeader";
import CardHeader from '@material-ui/core/CardHeader';
// icons
import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import useStyles from "../../pages/wallet/styles";
import SqueakUserAvatar from "../../components/SqueakUserAvatar";
import SqueakProfileFollowingIndicator from "../../components/SqueakProfileFollowingIndicator";
import useStyles from '../../pages/wallet/styles';
import SqueakUserAvatar from '../SqueakUserAvatar';
import SqueakProfileFollowingIndicator from '../SqueakProfileFollowingIndicator';
import {
goToProfilePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function ProfileListItem({
profile,
@ -32,12 +28,12 @@ export default function ProfileListItem({
const onProfileClick = (event) => {
event.preventDefault();
console.log("Handling profile click...");
console.log('Handling profile click...');
const profileId = profile.getProfileId();
//const host = getPeerHost();
//const port = getPeerPort();
// const host = getPeerHost();
// const port = getPeerPort();
goToProfilePage(history, profileId);
}
};
// const getPeerHost = () => {
// const address = peer.getAddress();
@ -73,25 +69,26 @@ export default function ProfileListItem({
{`Address: ${address}`}
</Box>
<SqueakProfileFollowingIndicator
squeakProfile={profile}
></SqueakProfileFollowingIndicator>
squeakProfile={profile}
/>
</>
)
);
}
return (
<Card
className={classes.root}
onClick={onProfileClick}
>
<CardHeader
avatar={<SqueakUserAvatar
squeakProfile={profile}
/>}
title={`Name: ${name}`}
subheader={ProfileCardContent()}
// action={<Button size="small">View Peer</Button>}
/>
</Card>
)
<Card
className={classes.root}
onClick={onProfileClick}
>
<CardHeader
avatar={(
<SqueakUserAvatar
squeakProfile={profile}
/>
)}
title={`Name: ${name}`}
subheader={ProfileCardContent()}
/>
</Card>
);
}

77
frontend/src/components/ReceiveBitcoinDialog/ReceiveBitcoinDialog.js
View file

@ -1,49 +1,30 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
lndNewAddressRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function ReceiveBitcoinDialog({
open,
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [address, setAddress] = useState('');
const [address, setAddress] = useState('');
const resetFields = () => {
setAddress('');
@ -76,10 +57,10 @@ export default function ReceiveBitcoinDialog({
onChange={handleChangeAddress}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function CancelButton() {
@ -91,34 +72,34 @@ export default function ReceiveBitcoinDialog({
>
Cancel
</Button>
)
);
}
function RenewAddressButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Get New Address
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Get New Address
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Receive Bitcoin</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{ReceiveBitcoinAddess()}
</DialogContent>
<DialogActions>
{CancelButton()}
{RenewAddressButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Receive Bitcoin</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{ReceiveBitcoinAddess()}
</DialogContent>
<DialogActions>
{CancelButton()}
{RenewAddressButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/ReceiveBitcoinDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

143
frontend/src/components/ReceivedPayment/ReceivedPayment.js
View file

@ -1,45 +1,35 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import moment from 'moment';
import useStyles from './styles';
import {
goToSqueakPage,
goToPeerAddressPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function ReceivedPayment({
receivedPayment,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const onSqueakClick = (event) => {
event.preventDefault();
var hash = receivedPayment.getSqueakHash();
console.log("Handling squeak click for hash: " + hash);
const hash = receivedPayment.getSqueakHash();
console.log(`Handling squeak click for hash: ${hash}`);
goToSqueakPage(history, hash);
}
};
const onPeerClick = (event) => {
event.preventDefault();
@ -48,79 +38,86 @@ export default function ReceivedPayment({
receivedPayment.getPeerAddress().getHost(),
receivedPayment.getPeerAddress().getPort(),
);
}
};
function PeerDisplay() {
const peerAddress = receivedPayment.getPeerAddress();
const peerAddress = receivedPayment.getPeerAddress();
const host = peerAddress.getHost();
const peerAddressText = peerAddress.getHost() + ":" + peerAddress.getPort();
const peerAddressText = `${peerAddress.getHost()}:${peerAddress.getPort()}`;
return (
<Box>
<Typography
size="md"
>Peer: <Link href="#" onClick={onPeerClick}>
>
Peer:
{' '}
<Link href="#" onClick={onPeerClick}>
{peerAddressText}
</Link>
</Typography>
</Box>
)
);
}
console.log("receivedPayment:");
console.log('receivedPayment:');
console.log(receivedPayment);
return (
<Box
p={1}
m={0}
style={{ backgroundColor: "lightgray" }}
style={{ backgroundColor: 'lightgray' }}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
<Grid item>
<Box fontWeight="fontWeightBold">
{receivedPayment.getPriceMsat()}
{' '}
msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{moment(receivedPayment.getTimeS() * 1000).format('DD MMM YYYY hh:mm a')}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link
href="#"
onClick={onSqueakClick}
>
<Grid item>
<Box fontWeight="fontWeightBold">
{receivedPayment.getPriceMsat()} msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{moment(receivedPayment.getTimeS() * 1000).format("DD MMM YYYY hh:mm a")}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link href="#"
onClick={onSqueakClick}
>
<span> </span>{receivedPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{PeerDisplay()}
</Grid>
</Grid>
<span> </span>
{receivedPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{PeerDisplay()}
</Grid>
</Grid>
</Box>
)
);
}

24
frontend/src/components/ReceivedPayment/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

85
frontend/src/components/RenameProfileDialog/RenameProfileDialog.js
View file

@ -1,41 +1,20 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
renameSqueakProfileRequest,
} from "../../squeakclient/requests"
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function RenameProfileDialog({
open,
@ -44,10 +23,10 @@ export default function RenameProfileDialog({
reloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [profileName, setProfileName] = useState('');
const [profileName, setProfileName] = useState('');
const resetFields = () => {
setProfileName('');
@ -62,7 +41,7 @@ export default function RenameProfileDialog({
};
const handleErr = (err) => {
alert('Error renaming signing profile: ' + err);
alert(`Error renaming signing profile: ${err}`);
};
const renameSqueakProfile = (profileId, profileName) => {
@ -71,9 +50,9 @@ export default function RenameProfileDialog({
function handleSubmit(event) {
event.preventDefault();
var profileId = profile.getProfileId();
console.log( 'profileId:', profileId);
console.log( 'profileName:', profileName);
const profileId = profile.getProfileId();
console.log('profileId:', profileId);
console.log('profileName:', profileName);
if (!profileName) {
alert('Profile Name cannot be empty.');
return;
@ -94,7 +73,7 @@ export default function RenameProfileDialog({
fullWidth
inputProps={{ maxLength: 64 }}
/>
)
);
}
function CancelButton() {
@ -106,34 +85,34 @@ export default function RenameProfileDialog({
>
Cancel
</Button>
)
);
}
function RenameProfilButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Rename Profile
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Rename Profile
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Rename Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{RenameProfileNameInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{RenameProfilButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Rename Profile</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{RenameProfileNameInput()}
</DialogContent>
<DialogActions>
{CancelButton()}
{RenameProfilButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/RenameProfileDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

43
frontend/src/components/SavedPeerListItem/SavedPeerListItem.js
View file

@ -1,19 +1,17 @@
import React from "react";
import {useHistory} from "react-router-dom";
import React from 'react';
import { useHistory } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import CardHeader from "@material-ui/core/CardHeader";
import CardHeader from '@material-ui/core/CardHeader';
// icons
import ComputerIcon from '@material-ui/icons/Computer';
import useStyles from "../../pages/wallet/styles";
import useStyles from '../../pages/wallet/styles';
import {
goToPeerPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SavedPeerListItem({
peer,
@ -27,12 +25,12 @@ export default function SavedPeerListItem({
const onPeerClick = (event) => {
event.preventDefault();
console.log("Handling peer click...");
console.log('Handling peer click...');
const peerId = peer.getPeerId();
//const host = getPeerHost();
//const port = getPeerPort();
// const host = getPeerHost();
// const port = getPeerPort();
goToPeerPage(history, peerId);
}
};
// const getPeerHost = () => {
// const address = peer.getAddress();
@ -56,16 +54,15 @@ export default function SavedPeerListItem({
// }
return (
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon/>}
title={`Name: ${peer.getPeerName()}`}
subheader={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
// action={<Button size="small">View Peer</Button>}
/>
</Card>
)
<Card
className={classes.root}
onClick={onPeerClick}
>
<CardHeader
avatar={<ComputerIcon />}
title={`Name: ${peer.getPeerName()}`}
subheader={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
/>
</Card>
);
}

120
frontend/src/components/SendBitcoinDialog/SendBitcoinDialog.js
View file

@ -1,56 +1,38 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
FormControlLabel,
InputLabel,
Select,
Switch,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
lndSendCoins,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SendBitcoinDialog({
open,
handleClose,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [address, setAddress] = useState('');
var [amount, setAmount] = useState('');
var [satperbyte, setSatperbyte] = useState('');
var [sendall, setSendall] = useState(false);
const [address, setAddress] = useState('');
const [amount, setAmount] = useState('');
const [satperbyte, setSatperbyte] = useState('');
const [sendall, setSendall] = useState(false);
const resetFields = () => {
setAddress('');
@ -85,11 +67,11 @@ export default function SendBitcoinDialog({
function handleSubmit(event) {
event.preventDefault();
console.log( 'address:', address);
console.log( 'amount:', amount);
console.log( 'satperbyte:', satperbyte);
console.log( 'satperbyte number:', parseInt(satperbyte));
console.log( 'sendall:', sendall);
console.log('address:', address);
console.log('amount:', amount);
console.log('satperbyte:', satperbyte);
console.log('satperbyte number:', parseInt(satperbyte));
console.log('sendall:', sendall);
sendBitcoin(address, amount, parseInt(satperbyte), sendall);
handleClose();
}
@ -105,7 +87,7 @@ export default function SendBitcoinDialog({
onChange={handleChangeAddress}
fullWidth
/>
)
);
}
function SendBitcoinAmount() {
@ -120,7 +102,7 @@ export default function SendBitcoinDialog({
disabled={sendall}
fullWidth
/>
)
);
}
function SendBitcoinSatperbyte() {
@ -134,24 +116,24 @@ export default function SendBitcoinDialog({
onChange={handleChangeSatperbyte}
fullWidth
/>
)
);
}
function SendBitcoinSendall() {
return (
<FormControlLabel
className={classes.formControlLabel}
control={
control={(
<Switch
checked={sendall}
onChange={handleChangeSendall}
name="send-all"
size="small"
/>
}
)}
label="Send all"
/>
)
);
}
function CancelButton() {
@ -163,43 +145,43 @@ export default function SendBitcoinDialog({
>
Cancel
</Button>
)
);
}
function SendBitcoinButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Send Bitcoin
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Send Bitcoin
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Send Bitcoin</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{SendBitcoinAddess()}
</DialogContent>
<DialogContent>
{SendBitcoinAmount()}
</DialogContent>
<DialogContent>
{SendBitcoinSatperbyte()}
</DialogContent>
<DialogContent>
{SendBitcoinSendall()}
</DialogContent>
<DialogActions>
{CancelButton()}
{SendBitcoinButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Send Bitcoin</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{SendBitcoinAddess()}
</DialogContent>
<DialogContent>
{SendBitcoinAmount()}
</DialogContent>
<DialogContent>
{SendBitcoinSatperbyte()}
</DialogContent>
<DialogContent>
{SendBitcoinSendall()}
</DialogContent>
<DialogActions>
{CancelButton()}
{SendBitcoinButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/SendBitcoinDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

113
frontend/src/components/SentOffer/SentOffer.js
View file

@ -1,35 +1,24 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import moment from 'moment';
import useStyles from './styles';
import {
goToSqueakPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SentOffer({
receivedPayment,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
@ -37,57 +26,61 @@ export default function SentOffer({
const onSqueakClick = (event) => {
event.preventDefault();
var hash = receivedPayment.getSqueakHash();
console.log("Handling squeak click for hash: " + hash);
const hash = receivedPayment.getSqueakHash();
console.log(`Handling squeak click for hash: ${hash}`);
goToSqueakPage(history, hash);
}
};
console.log("receivedPayment:");
console.log('receivedPayment:');
console.log(receivedPayment);
return (
<Box
p={1}
m={0}
style={{ backgroundColor: "lightgray" }}
style={{ backgroundColor: 'lightgray' }}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
<Grid item>
<Box fontWeight="fontWeightBold">
{receivedPayment.getPriceMsat()}
{' '}
msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{paymentTimeMs
? moment(receivedPayment.setPaymentTimeMs()).format('DD MMM YYYY hh:mm a') : 'Not paid'}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link
href="#"
onClick={onSqueakClick}
>
<Grid item>
<Box fontWeight="fontWeightBold">
{receivedPayment.getPriceMsat()} msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{paymentTimeMs ?
moment(receivedPayment.setPaymentTimeMs()).format("DD MMM YYYY hh:mm a") : "Not paid"}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link href="#"
onClick={onSqueakClick}
>
<span> </span>{receivedPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
<span> </span>
{receivedPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
</Box>
)
);
}

24
frontend/src/components/SentOffer/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

205
frontend/src/components/SentPayment/SentPayment.js
View file

@ -1,49 +1,36 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
import DownloadIcon from '@material-ui/icons/CloudDownload';
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import moment from 'moment';
import useStyles from './styles';
import {
goToSqueakPage,
goToPeerAddressPage,
goToLightningNodePage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SentPayment({
sentPayment,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const onSqueakClick = (event) => {
event.preventDefault();
var hash = sentPayment.getSqueakHash();
console.log("Handling squeak click for hash: " + hash);
const hash = sentPayment.getSqueakHash();
console.log(`Handling squeak click for hash: ${hash}`);
goToSqueakPage(history, hash);
}
};
const onPeerClick = (event) => {
event.preventDefault();
@ -52,29 +39,32 @@ export default function SentPayment({
sentPayment.getPeerAddress().getHost(),
sentPayment.getPeerAddress().getPort(),
);
}
};
const onLightningNodeClick = (event) => {
event.preventDefault();
var nodePubkey = sentPayment.getNodePubkey();
console.log("Handling lightning node click for nodePubkey: " + nodePubkey);
const nodePubkey = sentPayment.getNodePubkey();
console.log(`Handling lightning node click for nodePubkey: ${nodePubkey}`);
goToLightningNodePage(history, nodePubkey);
}
};
function PeerDisplay() {
const peerAddress = sentPayment.getPeerAddress();
const peerAddress = sentPayment.getPeerAddress();
const host = peerAddress.getHost();
const peerAddressText = peerAddress.getHost() + ":" + peerAddress.getPort();
const peerAddressText = `${peerAddress.getHost()}:${peerAddress.getPort()}`;
return (
<Box>
<Typography
size="md"
>Peer: <Link href="#" onClick={onPeerClick}>
>
Peer:
{' '}
<Link href="#" onClick={onPeerClick}>
{peerAddressText}
</Link>
</Typography>
</Box>
)
);
}
console.log(sentPayment);
@ -82,81 +72,90 @@ export default function SentPayment({
<Box
p={1}
m={0}
style={{ backgroundColor: "lightgray" }}
style={{ backgroundColor: 'lightgray' }}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
<Grid item>
<Box fontWeight="fontWeightBold">
{sentPayment.getPriceMsat()}
{' '}
msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{moment(sentPayment.getTimeS() * 1000).format('DD MMM YYYY hh:mm a')}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link
href="#"
onClick={onSqueakClick}
>
<Grid item>
<Box fontWeight="fontWeightBold">
{sentPayment.getPriceMsat()} msats
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
<span> </span>
{sentPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Peer:
{' '}
{PeerDisplay()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Lightning node:
<Link
href="#"
onClick={onLightningNodeClick}
>
<Grid item>
{moment(sentPayment.getTimeS() * 1000).format("DD MMM YYYY hh:mm a")}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Squeak hash:
<Link href="#"
onClick={onSqueakClick}
>
<span> </span>{sentPayment.getSqueakHash()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Peer: {PeerDisplay()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Lightning node:
<Link href="#"
onClick={onLightningNodeClick}
>
<span> </span>{sentPayment.getNodePubkey()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Valid:
<span> </span>{sentPayment.getValid().toString()}
</Grid>
</Grid>
<span> </span>
{sentPayment.getNodePubkey()}
</Link>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
Valid:
<span> </span>
{sentPayment.getValid().toString()}
</Grid>
</Grid>
</Box>
)
);
}

24
frontend/src/components/SentPayment/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

73
frontend/src/components/Sidebar/Sidebar.js
View file

@ -1,67 +1,74 @@
import React, { useState, useEffect } from "react";
import { Drawer, IconButton, List } from "@material-ui/core";
import React, { useState, useEffect } from 'react';
import { Drawer, IconButton, List } from '@material-ui/core';
import {
Home as HomeIcon,
NotificationsNone as NotificationsIcon,
People as ProfilesIcon,
AttachMoney as MoneyIcon,
QuestionAnswer as SupportIcon,
LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon,
CloudDownload as PeerIcon,
History as HistoryIcon,
Favorite as LikedIcon,
} from "@material-ui/icons";
import { useTheme } from "@material-ui/styles";
import { withRouter } from "react-router-dom";
import classNames from "classnames";
} from '@material-ui/icons';
import { useTheme } from '@material-ui/styles';
import { withRouter } from 'react-router-dom';
import classNames from 'classnames';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import SidebarLink from "./components/SidebarLink/SidebarLink";
import Dot from "./components/Dot";
import SidebarLink from './components/SidebarLink/SidebarLink';
// context
import {
useLayoutState,
useLayoutDispatch,
toggleSidebar,
} from "../../context/LayoutContext";
} from '../../context/LayoutContext';
const structure = [
{ id: 0, label: "Timeline", link: "/app/timeline", icon: <HomeIcon /> },
{ id: 1, label: "Profiles", link: "/app/profiles", icon: <ProfilesIcon /> },
{ id: 2, label: "Liked", link: "/app/liked", icon: <LikedIcon /> },
{ id: 3, label: "Wallet", link: "/app/wallet", icon: <MoneyIcon /> },
{ id: 4, label: "Peers", link: "/app/peers", icon: <PeerIcon /> },
{ id: 5, label: "Payments", link: "/app/payments", icon: <HistoryIcon /> },
{
id: 0, label: 'Timeline', link: '/app/timeline', icon: <HomeIcon />,
},
{
id: 1, label: 'Profiles', link: '/app/profiles', icon: <ProfilesIcon />,
},
{
id: 2, label: 'Liked', link: '/app/liked', icon: <LikedIcon />,
},
{
id: 3, label: 'Wallet', link: '/app/wallet', icon: <MoneyIcon />,
},
{
id: 4, label: 'Peers', link: '/app/peers', icon: <PeerIcon />,
},
{
id: 5, label: 'Payments', link: '/app/payments', icon: <HistoryIcon />,
},
];
function Sidebar({ location }) {
var classes = useStyles();
var theme = useTheme();
const classes = useStyles();
const theme = useTheme();
// global
var { isSidebarOpened } = useLayoutState();
var layoutDispatch = useLayoutDispatch();
const { isSidebarOpened } = useLayoutState();
const layoutDispatch = useLayoutDispatch();
// local
var [isPermanent, setPermanent] = useState(true);
const [isPermanent, setPermanent] = useState(true);
useEffect(function() {
window.addEventListener("resize", handleWindowWidthChange);
useEffect(() => {
window.addEventListener('resize', handleWindowWidthChange);
handleWindowWidthChange();
return function cleanup() {
window.removeEventListener("resize", handleWindowWidthChange);
window.removeEventListener('resize', handleWindowWidthChange);
};
});
return (
<Drawer
variant={isPermanent ? "permanent" : "temporary"}
variant={isPermanent ? 'permanent' : 'temporary'}
className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
@ -85,7 +92,7 @@ function Sidebar({ location }) {
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map(link => (
{structure.map((link) => (
<SidebarLink
key={link.id}
location={location}
@ -99,9 +106,9 @@ function Sidebar({ location }) {
// ##################################################################
function handleWindowWidthChange() {
var windowWidth = window.innerWidth;
var breakpointWidth = theme.breakpoints.values.md;
var isSmallScreen = windowWidth < breakpointWidth;
const windowWidth = window.innerWidth;
const breakpointWidth = theme.breakpoints.values.md;
const isSmallScreen = windowWidth < breakpointWidth;
if (isSmallScreen && isPermanent) {
setPermanent(false);

125
frontend/src/components/Sidebar/SidebarView.js
View file

@ -3,7 +3,8 @@ import {
Drawer,
IconButton,
List,
withStyles } from "@material-ui/core";
withStyles,
} from '@material-ui/core';
import {
Home as HomeIcon,
NotificationsNone as NotificationsIcon,
@ -14,17 +15,25 @@ import {
LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon,
} from "@material-ui/icons";
} from '@material-ui/icons';
import classNames from 'classnames';
import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
import Dot from './components/Dot';
const structure = [
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
{ id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
{ id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
{ id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
{
id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon />,
},
{
id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon />,
},
{
id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon />,
},
{
id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />,
},
{
id: 4,
label: 'UI Elements',
@ -38,49 +47,61 @@ const structure = [
},
{ id: 5, type: 'divider' },
{ id: 6, type: 'title', label: 'HELP' },
{ id: 7, label: 'Library', link: '', icon: <LibraryIcon /> },
{ id: 8, label: 'Support', link: '', icon: <SupportIcon /> },
{ id: 9, label: 'FAQ', link: '', icon: <FAQIcon />},
{
id: 7, label: 'Library', link: '', icon: <LibraryIcon />,
},
{
id: 8, label: 'Support', link: '', icon: <SupportIcon />,
},
{
id: 9, label: 'FAQ', link: '', icon: <FAQIcon />,
},
{ id: 10, type: 'divider' },
{ id: 11, type: 'title', label: 'PROJECTS' },
{ id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
{ id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
{ id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
{
id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" />,
},
{
id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" />,
},
{
id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" />,
},
];
const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
return (
<Drawer
variant={isPermanent ? 'permanent' : 'temporary'}
className={classNames(classes.drawer, {
const SidebarView = ({
classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location,
}) => (
<Drawer
variant={isPermanent ? 'permanent' : 'temporary'}
className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
})}
classes={{
paper: classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
})}
classes={{
paper: classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened,
}),
}}
open={isSidebarOpened}
>
<div className={classes.mobileBackButton}>
<IconButton
onClick={toggleSidebar}
>
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
</List>
</Drawer>
);
}
}),
}}
open={isSidebarOpened}
>
<div className={classes.mobileBackButton}>
<IconButton
onClick={toggleSidebar}
>
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
</IconButton>
</div>
<List className={classes.sidebarList}>
{structure.map((link) => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
</List>
</Drawer>
);
const drawerWidth = 240;
const styles = theme => ({
const styles = (theme) => ({
menuButton: {
marginLeft: 12,
marginRight: 36,
@ -93,9 +114,9 @@ const styles = theme => ({
flexShrink: 0,
whiteSpace: 'nowrap',
top: theme.spacing.unit * 8,
[theme.breakpoints.down("sm")]: {
[theme.breakpoints.down('sm')]: {
top: 0,
}
},
},
drawerOpen: {
width: drawerWidth,
@ -111,30 +132,30 @@ const styles = theme => ({
}),
overflowX: 'hidden',
width: theme.spacing.unit * 7 + 40,
[theme.breakpoints.down("sm")]: {
[theme.breakpoints.down('sm')]: {
width: drawerWidth,
}
},
},
toolbar: {
...theme.mixins.toolbar,
[theme.breakpoints.down("sm")]: {
[theme.breakpoints.down('sm')]: {
display: 'none',
}
},
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
},
mobileBackButton: {
marginTop: theme.spacing.unit * .5,
marginTop: theme.spacing.unit * 0.5,
marginLeft: theme.spacing.unit * 3,
[theme.breakpoints.only("sm")]: {
marginTop: theme.spacing.unit * .625,
[theme.breakpoints.only('sm')]: {
marginTop: theme.spacing.unit * 0.625,
},
[theme.breakpoints.up("md")]: {
[theme.breakpoints.up('md')]: {
display: 'none',
}
}
},
},
});
export default withStyles(styles, { withTheme: true })(SidebarView);

22
frontend/src/components/Sidebar/components/Dot.js
View file

@ -1,19 +1,19 @@
import React from "react";
import { makeStyles, useTheme } from "@material-ui/styles";
import classnames from "classnames";
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/styles';
import classnames from 'classnames';
// styles
var useStyles = makeStyles(theme => ({
const useStyles = makeStyles((theme) => ({
dotBase: {
width: 8,
height: 8,
backgroundColor: theme.palette.text.hint,
borderRadius: "50%",
transition: theme.transitions.create("background-color"),
borderRadius: '50%',
transition: theme.transitions.create('background-color'),
},
dotSmall: {
width: 5,
height: 5
height: 5,
},
dotLarge: {
width: 11,
@ -22,14 +22,14 @@ var useStyles = makeStyles(theme => ({
}));
export default function Dot({ size, color }) {
var classes = useStyles();
var theme = useTheme();
const classes = useStyles();
const theme = useTheme();
return (
<div
className={classnames(classes.dotBase, {
[classes.dotLarge]: size === "large",
[classes.dotSmall]: size === "small",
[classes.dotLarge]: size === 'large',
[classes.dotSmall]: size === 'small',
})}
style={{
backgroundColor:

37
frontend/src/components/Sidebar/components/SidebarLink/SidebarLink.js
View file

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
Collapse,
Divider,
@ -7,16 +7,16 @@ import {
ListItemIcon,
ListItemText,
Typography,
} from "@material-ui/core";
import { Inbox as InboxIcon } from "@material-ui/icons";
import { Link } from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { Inbox as InboxIcon } from '@material-ui/icons';
import { Link } from 'react-router-dom';
import classnames from 'classnames';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import Dot from "../Dot";
import Dot from '../Dot';
export default function SidebarLink({
link,
@ -28,15 +28,14 @@ export default function SidebarLink({
nested,
type,
}) {
var classes = useStyles();
const classes = useStyles();
// local
var [isOpen, setIsOpen] = useState(false);
var isLinkActive =
link &&
(location.pathname === link || location.pathname.indexOf(link) !== -1);
const [isOpen, setIsOpen] = useState(false);
const isLinkActive = link
&& (location.pathname === link || location.pathname.indexOf(link) !== -1);
if (type === "title")
if (type === 'title') {
return (
<Typography
className={classnames(classes.linkText, classes.sectionTitle, {
@ -46,10 +45,11 @@ export default function SidebarLink({
{label}
</Typography>
);
}
if (type === "divider") return <Divider className={classes.divider} />;
if (type === 'divider') return <Divider className={classes.divider} />;
if (!children)
if (!children) {
return (
<ListItem
button
@ -69,7 +69,7 @@ export default function SidebarLink({
[classes.linkIconActive]: isLinkActive,
})}
>
{nested ? <Dot color={isLinkActive && "primary"} /> : icon}
{nested ? <Dot color={isLinkActive && 'primary'} /> : icon}
</ListItemIcon>
<ListItemText
classes={{
@ -82,6 +82,7 @@ export default function SidebarLink({
/>
</ListItem>
);
}
return (
<>
@ -98,7 +99,7 @@ export default function SidebarLink({
[classes.linkIconActive]: isLinkActive,
})}
>
{icon ? icon : <InboxIcon />}
{icon || <InboxIcon />}
</ListItemIcon>
<ListItemText
classes={{
@ -118,7 +119,7 @@ export default function SidebarLink({
className={classes.nestedList}
>
<List component="div" disablePadding>
{children.map(childrenLink => (
{children.map((childrenLink) => (
<SidebarLink
key={childrenLink && childrenLink.link}
location={location}

26
frontend/src/components/Sidebar/components/SidebarLink/styles.js
View file

@ -1,9 +1,9 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
link: {
textDecoration: "none",
"&:hover, &:focus": {
textDecoration: 'none',
'&:hover, &:focus': {
backgroundColor: theme.palette.background.light,
},
},
@ -12,25 +12,25 @@ export default makeStyles(theme => ({
},
linkNested: {
paddingLeft: 0,
"&:hover, &:focus": {
backgroundColor: "#FFFFFF",
'&:hover, &:focus': {
backgroundColor: '#FFFFFF',
},
},
linkIcon: {
marginRight: theme.spacing(1),
color: theme.palette.text.secondary + "99",
transition: theme.transitions.create("color"),
color: `${theme.palette.text.secondary}99`,
transition: theme.transitions.create('color'),
width: 24,
display: "flex",
justifyContent: "center",
display: 'flex',
justifyContent: 'center',
},
linkIconActive: {
color: theme.palette.primary.main,
},
linkText: {
padding: 0,
color: theme.palette.text.secondary + "CC",
transition: theme.transitions.create(["opacity", "color"]),
color: `${theme.palette.text.secondary}CC`,
transition: theme.transitions.create(['opacity', 'color']),
fontSize: 16,
},
linkTextActive: {
@ -51,6 +51,6 @@ export default makeStyles(theme => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(4),
height: 1,
backgroundColor: "#D8D8D880",
backgroundColor: '#D8D8D880',
},
}));

26
frontend/src/components/Sidebar/styles.js
View file

@ -1,42 +1,42 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
const drawerWidth = 240;
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
menuButton: {
marginLeft: 12,
marginRight: 36,
},
hide: {
display: "none",
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
whiteSpace: 'nowrap',
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create("width", {
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
overflowX: 'hidden',
width: theme.spacing(7) + 40,
[theme.breakpoints.down("sm")]: {
[theme.breakpoints.down('sm')]: {
width: drawerWidth,
},
},
toolbar: {
...theme.mixins.toolbar,
[theme.breakpoints.down("sm")]: {
display: "none",
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
content: {
@ -49,11 +49,11 @@ export default makeStyles(theme => ({
mobileBackButton: {
marginTop: theme.spacing(0.5),
marginLeft: theme.spacing(3),
[theme.breakpoints.only("sm")]: {
[theme.breakpoints.only('sm')]: {
marginTop: theme.spacing(0.625),
},
[theme.breakpoints.up("md")]: {
display: "none",
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
}));

334
frontend/src/components/SqueakActionBar/SqueakActionBar.js
View file

@ -1,56 +1,28 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Snackbar,
Grid,
Box,
Link,
Divider,
Button,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import ReplyIcon from '@material-ui/icons/Reply';
import RepeatIcon from '@material-ui/icons/Repeat';
import FavoriteIcon from '@material-ui/icons/Favorite';
import DeleteIcon from '@material-ui/icons/Delete';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import ZoomInIcon from '@material-ui/icons/ZoomIn';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import MakeSqueakDialog from "../../components/MakeSqueakDialog";
import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
import BuySqueakDialog from "../../components/BuySqueakDialog";
import SqueakDetailsDialog from "../../components/SqueakDetailsDialog";
import useStyles from './styles';
import MakeSqueakDialog from '../MakeSqueakDialog';
import DeleteSqueakDialog from '../DeleteSqueakDialog';
import SqueakDetailsDialog from '../SqueakDetailsDialog';
import {
syncSqueakRequest,
likeSqueakRequest,
unlikeSqueakRequest,
} from "../../squeakclient/requests"
import {
getBlockDetailUrl,
} from "../../bitcoin/blockexplorer"
import moment from 'moment';
import {
goToSqueakAddressPage,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function SqueakActionBar({
hash,
@ -59,7 +31,7 @@ export default function SqueakActionBar({
reloadSqueak,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
@ -67,22 +39,21 @@ export default function SqueakActionBar({
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [viewDetailsDialogOpen, setViewDetailsDialogOpen] = useState(false);
const handleClickOpenReplyDialog = () => {
setReplyDialogOpen(true);
};
const handleCloseReplyDialog = () => {
setReplyDialogOpen(false);
setReplyDialogOpen(false);
};
const handleClickOpenDeleteDialog = () => {
setDeleteDialogOpen(true);
console.log("deleteDialogOpen: " + deleteDialogOpen);
console.log(`deleteDialogOpen: ${deleteDialogOpen}`);
};
const handleCloseDeleteDialog = () => {
setDeleteDialogOpen(false);
setDeleteDialogOpen(false);
};
const handleClickOpenViewDetailsDialog = () => {
@ -94,14 +65,14 @@ export default function SqueakActionBar({
};
const handleLikeSqueak = () => {
console.log("liked.");
console.log('liked.');
likeSqueakRequest(hash, (response) => {
reloadSqueak();
});
};
const handleUnlikeSqueak = () => {
console.log("unliked.");
console.log('unliked.');
unlikeSqueakRequest(hash, (response) => {
reloadSqueak();
});
@ -110,202 +81,207 @@ export default function SqueakActionBar({
const onReplyClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling reply click...");
console.log('Handling reply click...');
if (!squeak) {
return;
}
handleClickOpenReplyDialog();
}
};
const onResqueakClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling resqueak click...");
console.log('Handling resqueak click...');
if (!squeak) {
return;
}
// TODO: handleClickOpenReplyDialog();
}
};
const onLikeClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling like click...");
console.log('Handling like click...');
if (!squeak) {
return;
}
handleLikeSqueak();
}
};
const onUnlikeClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling like click...");
console.log('Handling like click...');
if (!squeak) {
return;
}
handleUnlikeSqueak();
}
};
const onDeleteClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling delete click...");
console.log('Handling delete click...');
if (!squeak) {
return;
}
handleClickOpenDeleteDialog();
event.stopPropagation();
}
};
const onZoomInClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling zoomin click...");
console.log('Handling zoomin click...');
if (!squeak) {
return;
}
handleClickOpenViewDetailsDialog();
};
function MakeSqueakDialogContent() {
return (
<>
<MakeSqueakDialog
open={replyDialogOpen}
handleClose={handleCloseReplyDialog}
replytoSqueak={squeak}
/>
</>
);
}
function DeleteSqueakDialogContent() {
return (
<>
<DeleteSqueakDialog
open={deleteDialogOpen}
handleClose={handleCloseDeleteDialog}
squeakToDelete={squeak}
/>
</>
);
}
function MakeSqueakDialogContent() {
return (
<>
<MakeSqueakDialog
open={replyDialogOpen}
handleClose={handleCloseReplyDialog}
replytoSqueak={squeak}
></MakeSqueakDialog>
</>
)
}
function DeleteSqueakDialogContent() {
return (
<>
<DeleteSqueakDialog
open={deleteDialogOpen}
handleClose={handleCloseDeleteDialog}
squeakToDelete={squeak}
></DeleteSqueakDialog>
</>
)
}
function ViewDetailsDialogContent() {
return (
<>
{squeak &&
function ViewDetailsDialogContent() {
return (
<>
{squeak
&& (
<SqueakDetailsDialog
open={viewDetailsDialogOpen}
handleClose={handleCloseViewDetailsDialog}
hash={hash}
squeak={squeak}
></SqueakDetailsDialog>
}
</>
)
}
/>
)}
</>
);
}
function ActionBarContent() {
return (
<>
<Divider />
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item xs={3} sm={1}>
{ReplyIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{ResqueakIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{LikeIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{DeleteIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{DetailsIconContent()}
</Grid>
</Grid>
</>
)
}
function ActionBarContent() {
return (
<>
<Divider />
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item xs={3} sm={1}>
{ReplyIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{ResqueakIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{LikeIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{DeleteIconContent()}
</Grid>
<Grid item xs={3} sm={1}>
{DetailsIconContent()}
</Grid>
</Grid>
</>
);
}
function ReplyIconContent() {
return (
<IconButton aria-label="reply"
onClick={onReplyClick}
>
<ReplyIcon />
</IconButton>
)
}
function ReplyIconContent() {
return (
<IconButton
aria-label="reply"
onClick={onReplyClick}
>
<ReplyIcon />
</IconButton>
);
}
function ResqueakIconContent() {
return (
<IconButton aria-label="resqueak"
onClick={onResqueakClick}
>
<RepeatIcon />
</IconButton>
)
}
function ResqueakIconContent() {
return (
<IconButton
aria-label="resqueak"
onClick={onResqueakClick}
>
<RepeatIcon />
</IconButton>
);
}
function LikeIconContent() {
if (squeak && !squeak.getLikedTimeS()) {
return (
<IconButton aria-label="like"
onClick={onLikeClick}
>
<FavoriteIcon />
</IconButton>
)
} else {
return (
<IconButton aria-label="unlike"
onClick={onUnlikeClick}
>
<FavoriteIcon
color="secondary"
/>
</IconButton>
)
}
}
function LikeIconContent() {
if (squeak && !squeak.getLikedTimeS()) {
return (
<IconButton
aria-label="like"
onClick={onLikeClick}
>
<FavoriteIcon />
</IconButton>
);
}
return (
<IconButton
aria-label="unlike"
onClick={onUnlikeClick}
>
<FavoriteIcon
color="secondary"
/>
</IconButton>
);
}
function DeleteIconContent() {
return (
<IconButton aria-label="delete"
onClick={onDeleteClick}
>
<DeleteIcon />
</IconButton>
)
}
function DeleteIconContent() {
return (
<IconButton
aria-label="delete"
onClick={onDeleteClick}
>
<DeleteIcon />
</IconButton>
);
}
function DetailsIconContent() {
return (
<IconButton aria-label="details"
onClick={onZoomInClick}
>
<ZoomInIcon />
</IconButton>
)
}
function DetailsIconContent() {
return (
<IconButton
aria-label="details"
onClick={onZoomInClick}
>
<ZoomInIcon />
</IconButton>
);
}
return (
<>
{ActionBarContent()}
{MakeSqueakDialogContent()}
{DeleteSqueakDialogContent()}
{ViewDetailsDialogContent()}
{ActionBarContent()}
{MakeSqueakDialogContent()}
{DeleteSqueakDialogContent()}
{ViewDetailsDialogContent()}
</>
)
);
}

18
frontend/src/components/SqueakActionBar/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

271
frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
View file

@ -1,58 +1,39 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Snackbar,
Grid,
Box,
Link,
Divider,
Button,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import LockIcon from '@material-ui/icons/Lock';
import ReplyIcon from '@material-ui/icons/Reply';
import RepeatIcon from '@material-ui/icons/Repeat';
import FavoriteIcon from '@material-ui/icons/Favorite';
import DeleteIcon from '@material-ui/icons/Delete';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import ZoomInIcon from '@material-ui/icons/ZoomIn';
import MuiAlert from '@material-ui/lab/Alert';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import MakeSqueakDialog from "../../components/MakeSqueakDialog";
import DeleteSqueakDialog from "../../components/DeleteSqueakDialog";
import BuySqueakDialog from "../../components/BuySqueakDialog";
import SqueakDetailsDialog from "../../components/SqueakDetailsDialog";
import SqueakActionBar from "../../components/SqueakActionBar";
import SqueakUserAvatar from "../../components/SqueakUserAvatar";
import moment from 'moment';
import useStyles from './styles';
import BuySqueakDialog from '../BuySqueakDialog';
import SqueakActionBar from '../SqueakActionBar';
import SqueakUserAvatar from '../SqueakUserAvatar';
import {
downloadSqueakRequest,
likeSqueakRequest,
unlikeSqueakRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
import {
getBlockDetailUrl,
} from "../../bitcoin/blockexplorer"
import moment from 'moment';
} from '../../bitcoin/blockexplorer';
import {
goToSqueakAddressPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
@ -65,17 +46,14 @@ export default function SqueakDetailItem({
reloadSqueak,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const [buyDialogOpen, setBuyDialogOpen] = useState(false);
const [unlockedSnackbarOpen, setUnlockedSnackbarOpen] = useState(false);
const blockDetailUrl = () => {
return getBlockDetailUrl(squeak.getBlockHash(), network);
};
const blockDetailUrl = () => getBlockDetailUrl(squeak.getBlockHash(), network);
const handleClickOpenBuyDialog = () => {
setBuyDialogOpen(true);
@ -88,29 +66,29 @@ export default function SqueakDetailItem({
const onAddressClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling address click...");
console.log('Handling address click...');
if (!squeak) {
return;
}
goToSqueakAddressPage(history, squeak.getAuthorAddress());
}
};
const onUnlockClick = (event) => {
event.preventDefault();
console.log("Handling unlock click...");
console.log('Handling unlock click...');
if (!squeak) {
return;
}
handleClickOpenBuyDialog();
}
};
const onDownloadClick = (event) => {
event.preventDefault();
console.log("Handling download click...");
console.log('Handling download click...');
downloadSqueakRequest(hash, (response) => {
reloadSqueak();
});
}
};
const handleCloseUnlockedSnackbar = (event, reason) => {
if (reason === 'clickaway') {
@ -128,10 +106,11 @@ export default function SqueakDetailItem({
return (
<Typography
variant="h4"
style={{whiteSpace: 'pre-line'}}
>{squeak.getContentStr()}
style={{ whiteSpace: 'pre-line' }}
>
{squeak.getContentStr()}
</Typography>
)
);
}
function SqueakLockedContent() {
@ -141,11 +120,12 @@ export default function SqueakDetailItem({
<Button
variant="contained"
onClick={onUnlockClick}
>Buy to unlock
>
Buy to unlock
</Button>
</>
)
);
}
function SqueakMissingContent() {
@ -155,10 +135,11 @@ export default function SqueakDetailItem({
<Button
variant="contained"
onClick={onDownloadClick}
>Download
>
Download
</Button>
</>
)
);
}
function SqueakContent() {
@ -167,24 +148,23 @@ export default function SqueakDetailItem({
<>
{SqueakMissingContent()}
</>
)
);
}
return (
<>
{squeak.getIsUnlocked()
{squeak.getIsUnlocked()
? SqueakUnlockedContent()
: SqueakLockedContent()
}
: SqueakLockedContent()}
</>
)
);
}
function SqueakLockedBackgroundColor() {
return {backgroundColor: 'lightgray'};
return { backgroundColor: 'lightgray' };
}
function SqueakUnlockedBackgroundColor() {
return {backgroundColor: 'white'};
return { backgroundColor: 'white' };
}
function SqueakBackgroundColor() {
@ -192,17 +172,17 @@ export default function SqueakDetailItem({
return SqueakLockedBackgroundColor();
}
return squeak.getIsUnlocked()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor();
}
function getAddressDisplay() {
if (!squeak) {
return "Author unknown"
return 'Author unknown';
}
return squeak.getIsAuthorKnown()
? squeak.getAuthor().getProfileName()
: squeak.getAuthorAddress()
: squeak.getAuthorAddress();
}
function SqueakTime() {
@ -211,113 +191,122 @@ export default function SqueakDetailItem({
<Box color="secondary.main" fontWeight="fontWeightBold">
Unknown time
</Box>
)
);
}
return (
<Box color="secondary.main" fontWeight="fontWeightBold">
{moment(squeak.getBlockTime()*1000).fromNow()}
<span> </span>(Block
{moment(squeak.getBlockTime() * 1000).fromNow()}
<span> </span>
(Block
<Link
href={blockDetailUrl()}
target="_blank"
rel="noopener"
onClick={(event) => event.stopPropagation()}>
<span> </span>#{squeak.getBlockHeight()}
onClick={(event) => event.stopPropagation()}
>
<span> </span>
#
{squeak.getBlockHeight()}
</Link>
)
</Box>
)
);
}
function BuyDialogContent() {
return (
<>
<BuySqueakDialog
open={buyDialogOpen}
handleClose={handleCloseBuyDialog}
handlePaymentComplete={handlePaymentComplete}
hash={hash}
></BuySqueakDialog>
</>
)
}
function BuyDialogContent() {
return (
<>
<BuySqueakDialog
open={buyDialogOpen}
handleClose={handleCloseBuyDialog}
handlePaymentComplete={handlePaymentComplete}
hash={hash}
/>
</>
);
}
function SqueakUnlockedActionContent() {
return (
<Snackbar open={unlockedSnackbarOpen} autoHideDuration={6000} onClose={handleCloseUnlockedSnackbar}>
<Alert onClose={handleCloseUnlockedSnackbar} severity="success">
Squeak unlocked!
</Alert>
</Snackbar>
)
}
function SqueakUnlockedActionContent() {
return (
<Snackbar open={unlockedSnackbarOpen} autoHideDuration={6000} onClose={handleCloseUnlockedSnackbar}>
<Alert onClose={handleCloseUnlockedSnackbar} severity="success">
Squeak unlocked!
</Alert>
</Snackbar>
);
}
return (
<>
<Paper elevation={3} className={classes.paper}
p={1}
m={0}
style={SqueakBackgroundColor()}
<Paper
elevation={3}
className={classes.paper}
p={1}
m={0}
style={SqueakBackgroundColor()}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box fontWeight="fontWeightBold">
{squeak &&
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box fontWeight="fontWeightBold">
{squeak
&& (
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
/>
}
</Box>
</Grid>
<Grid item>
<Box p={2} fontWeight="fontWeightBold">
<Link href="#"
onClick={onAddressClick}>
<Typography
variant="h3"
style={{whiteSpace: 'pre-line'}}
>
{getAddressDisplay()}
</Typography>
</Link>
</Box>
</Grid>
)}
</Box>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box p={2} fontWeight="fontWeightBold">
<Link
href="#"
onClick={onAddressClick}
>
<Typography
variant="h3"
style={{ whiteSpace: 'pre-line' }}
>
{getAddressDisplay()}
</Typography>
</Link>
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakTime()}
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakTime()}
</Grid>
</Grid>
<SqueakActionBar
hash={hash}
squeak={squeak}
network={network}
reloadSqueak={reloadSqueak}
></SqueakActionBar>
</Paper>
{BuyDialogContent()}
{SqueakUnlockedActionContent()}
</Grid>
<SqueakActionBar
hash={hash}
squeak={squeak}
network={network}
reloadSqueak={reloadSqueak}
/>
</Paper>
{BuyDialogContent()}
{SqueakUnlockedActionContent()}
</>
)
);
}

18
frontend/src/components/SqueakDetailItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

60
frontend/src/components/SqueakDetailsDialog/SqueakDetailsDialog.js
View file

@ -1,38 +1,25 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
} from '@material-ui/core';
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import Widget from "../../components/Widget";
import Widget from '../Widget';
import {
getSqueakDetailsRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function SqueakDetailsDialog({
open,
@ -41,13 +28,13 @@ export default function SqueakDetailsDialog({
squeak,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const [squeakDetails, setSqueakDetails] = useState(null);
const getSqueakDetails = (hash) => {
getSqueakDetailsRequest(hash, setSqueakDetails);
getSqueakDetailsRequest(hash, setSqueakDetails);
};
function load(event) {
@ -76,7 +63,7 @@ export default function SqueakDetailsDialog({
>
Cancel
</Button>
)
);
}
function SqueakDetailsContent() {
@ -92,7 +79,7 @@ export default function SqueakDetailsDialog({
Hash
</Typography>
<Typography color="text">
&nbsp;{squeak.getSqueakHash()}
{squeak.getSqueakHash()}
</Typography>
</div>
@ -102,7 +89,7 @@ export default function SqueakDetailsDialog({
Address
</Typography>
<Typography color="text">
&nbsp;{squeak.getAuthorAddress()}
{squeak.getAuthorAddress()}
</Typography>
</div>
@ -125,22 +112,21 @@ export default function SqueakDetailsDialog({
</Grid>
</Widget>
</>
)
);
}
return (
<Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">View Squeak Details</DialogTitle>
<form className={classes.root} noValidate autoComplete="off">
<DialogContent>
{(squeak && squeakDetails) &&
SqueakDetailsContent()
}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">View Squeak Details</DialogTitle>
<form className={classes.root} noValidate autoComplete="off">
<DialogContent>
{(squeak && squeakDetails)
&& SqueakDetailsContent()}
</DialogContent>
<DialogActions>
{MakeCancelButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/SqueakDetailsDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

101
frontend/src/components/SqueakList/SqueakList.js
View file

@ -1,43 +1,22 @@
import React, { useState } from "react";
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import React from 'react';
import { useHistory } from 'react-router-dom';
import LockIcon from '@material-ui/icons/Lock';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import SqueakThreadItem from "../../components/SqueakThreadItem";
import SqueakUserAvatar from "../../components/SqueakUserAvatar";
import Widget from "../../components/Widget";
import moment from 'moment';
import SqueakThreadItem from '../SqueakThreadItem';
import SqueakUserAvatar from '../SqueakUserAvatar';
import {
getTimelineSqueakDisplaysRequest,
getNetworkRequest,
getSqueakDisplayRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function SqueakList({
squeaks,
@ -45,7 +24,7 @@ export default function SqueakList({
setSqueaksFn,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
@ -60,48 +39,48 @@ export default function SqueakList({
return item;
});
setSqueaksFn(newSqueaks);
})
});
}
const handleReloadSqueakItem = (itemHash) => {
const innerFunc = () => {
reloadSqueakItem(itemHash);
}
};
return innerFunc;
}
};
return (
<div>
{squeaks.map(squeak =>
<Timeline
align="left"
key={squeak.getSqueakHash()}
>
{squeaks.map((squeak) => (
<Timeline
align="left"
key={squeak.getSqueakHash()}
>
<TimelineItem>
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
></TimelineOppositeContent>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
/>
</TimelineSeparator>
<TimelineContent>
<SqueakThreadItem
key={squeak.getSqueakHash()}
hash={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar={true}>
</SqueakThreadItem>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
/>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
/>
</TimelineSeparator>
<TimelineContent>
<SqueakThreadItem
key={squeak.getSqueakHash()}
hash={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar
/>
</TimelineContent>
</TimelineItem>
</Timeline>
)}
</Timeline>
))}
</div>
)
);
}

4
frontend/src/components/SqueakList/styles.js
View file

@ -1,6 +1,6 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
oppositeContent: {
// TODO: adjust this value accordingly
flex: 0.0,

435
frontend/src/components/SqueakProfileDetailItem/SqueakProfileDetailItem.js
View file

@ -1,28 +1,19 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Divider,
Button,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import CardHeader from '@material-ui/core/CardHeader';
import Avatar from '@material-ui/core/Avatar';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
@ -30,41 +21,29 @@ import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import Widget from "../../components/Widget";
import DeleteProfileDialog from "../../components/DeleteProfileDialog";
import RenameProfileDialog from "../../components/RenameProfileDialog";
import ExportPrivateKeyDialog from "../../components/ExportPrivateKeyDialog";
import ConfigureProfileDialog from "../../components/ConfigureProfileDialog";
import UpdateProfileImageDialog from "../../components/UpdateProfileImageDialog";
import ClearProfileImageDialog from "../../components/ClearProfileImageDialog";
import SqueakProfileFollowingIndicator from "../../components/SqueakProfileFollowingIndicator";
import DeleteProfileDialog from '../DeleteProfileDialog';
import RenameProfileDialog from '../RenameProfileDialog';
import ExportPrivateKeyDialog from '../ExportPrivateKeyDialog';
import ConfigureProfileDialog from '../ConfigureProfileDialog';
import UpdateProfileImageDialog from '../UpdateProfileImageDialog';
import ClearProfileImageDialog from '../ClearProfileImageDialog';
import SqueakProfileFollowingIndicator from '../SqueakProfileFollowingIndicator';
import {
syncSqueakRequest,
} from "../../squeakclient/requests"
import {
getBlockDetailUrl,
} from "../../bitcoin/blockexplorer"
import {
getProfileImageSrcString,
} from "../../squeakimages/images"
} from '../../squeakimages/images';
import {
goToSqueakAddressPage,
} from "../../navigation/navigation"
import moment from 'moment';
} from '../../navigation/navigation';
export default function SqueakProfileDetailItem({
squeakProfile,
handleReloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@ -85,268 +64,270 @@ export default function SqueakProfileDetailItem({
const history = useHistory();
const onViewSqueaksClick = () => {
console.log("Handling view squeaks click...");
console.log('Handling view squeaks click...');
handleClose();
if (!squeakProfile) {
return;
}
goToSqueakAddressPage(history, squeakProfile.getAddress());
}
};
const onConfigureClick = () => {
console.log("Handling configure click...");
console.log('Handling configure click...');
handleClose();
if (!squeakProfile) {
return;
}
setConfigureDialogOpen(true);
}
};
const onRenameClick = () => {
console.log("Handling rename click...");
console.log('Handling rename click...');
handleClose();
if (!squeakProfile) {
return;
}
setRenameDialogOpen(true);
}
};
const onChangeImageClick = () => {
console.log("Handling change image click...");
console.log('Handling change image click...');
handleClose();
if (!squeakProfile) {
return;
}
setUpdateImageDialogOpen(true);
}
};
const onClearImageClick = () => {
console.log("Handling clear image click...");
console.log('Handling clear image click...');
handleClose();
if (!squeakProfile) {
return;
}
setClearImageDialogOpen(true);
}
};
const onExportClick = () => {
console.log("Handling export click...");
console.log('Handling export click...');
handleClose();
if (!squeakProfile) {
return;
}
setExportPrivateKeyDialogOpen(true);
}
};
const onDeleteClick = () => {
console.log("Handling delete click...");
console.log('Handling delete click...');
handleClose();
if (!squeakProfile) {
return;
}
setDeleteDialogOpen(true);
}
};
const handleCloseDeleteDialog = () => {
setDeleteDialogOpen(false);
setDeleteDialogOpen(false);
};
const handleCloseRenameDialog = () => {
setRenameDialogOpen(false);
setRenameDialogOpen(false);
};
const handleCloseExportPrivateKeyDialog = () => {
setExportPrivateKeyDialogOpen(false);
setExportPrivateKeyDialogOpen(false);
};
const handleCloseConfigureDialog = () => {
setConfigureDialogOpen(false);
setConfigureDialogOpen(false);
};
const handleCloseUpdateImageDialog = () => {
setUpdateImageDialogOpen(false);
setUpdateImageDialogOpen(false);
};
const handleCloseClearImageDialog = () => {
setClearImageDialogOpen(false);
setClearImageDialogOpen(false);
};
const profileImageBase64String = squeakProfile.getProfileImage();
function DeleteProfileDialogContent() {
return (
<>
<DeleteProfileDialog
open={deleteDialogOpen}
handleClose={handleCloseDeleteDialog}
profile={squeakProfile}
reloadProfile={handleReloadProfile}
></DeleteProfileDialog>
</>
)
}
function RenameProfileDialogContent() {
return (
<>
<RenameProfileDialog
open={renameDialogOpen}
handleClose={handleCloseRenameDialog}
profile={squeakProfile}
reloadProfile={handleReloadProfile}
></RenameProfileDialog>
</>
)
}
function ExportPrivateKeyDialogContent() {
return (
<>
<ExportPrivateKeyDialog
open={exportPrivateKeyDialogOpen}
handleClose={handleCloseExportPrivateKeyDialog}
profile={squeakProfile}
></ExportPrivateKeyDialog>
</>
)
}
function ConfigureProfileDialogContent() {
return (
<>
<ConfigureProfileDialog
open={configureDialogOpen}
handleClose={handleCloseConfigureDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
></ConfigureProfileDialog>
</>
)
}
function UpdateImageDialogContent() {
return (
<>
<UpdateProfileImageDialog
open={updateImageDialogOpen}
handleClose={handleCloseUpdateImageDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
></UpdateProfileImageDialog>
</>
)
}
function ClearImageDialogContent() {
return (
<>
<ClearProfileImageDialog
open={clearImageDialogOpen}
handleClose={handleCloseClearImageDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
></ClearProfileImageDialog>
</>
)
}
function FollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsActiveIcon /> Following
</Typography>
</>
)
}
function NotFollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsNoneIcon /> Not Following
</Typography>
</>
)
}
function IsFollowingContent() {
return (
<>
{(squeakProfile.getFollowing())
? FollowingIndicator()
: NotFollowingIndicator()
}
</>
)
}
const profileImageBase64String = squeakProfile.getProfileImage();
function DeleteProfileDialogContent() {
return (
<>
<Card className={classes.root}>
<DeleteProfileDialog
open={deleteDialogOpen}
handleClose={handleCloseDeleteDialog}
profile={squeakProfile}
reloadProfile={handleReloadProfile}
/>
</>
);
}
function RenameProfileDialogContent() {
return (
<>
<RenameProfileDialog
open={renameDialogOpen}
handleClose={handleCloseRenameDialog}
profile={squeakProfile}
reloadProfile={handleReloadProfile}
/>
</>
);
}
function ExportPrivateKeyDialogContent() {
return (
<>
<ExportPrivateKeyDialog
open={exportPrivateKeyDialogOpen}
handleClose={handleCloseExportPrivateKeyDialog}
profile={squeakProfile}
/>
</>
);
}
function ConfigureProfileDialogContent() {
return (
<>
<ConfigureProfileDialog
open={configureDialogOpen}
handleClose={handleCloseConfigureDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
/>
</>
);
}
function UpdateImageDialogContent() {
return (
<>
<UpdateProfileImageDialog
open={updateImageDialogOpen}
handleClose={handleCloseUpdateImageDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
/>
</>
);
}
function ClearImageDialogContent() {
return (
<>
<ClearProfileImageDialog
open={clearImageDialogOpen}
handleClose={handleCloseClearImageDialog}
squeakProfile={squeakProfile}
reloadProfile={handleReloadProfile}
/>
</>
);
}
function FollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsActiveIcon />
{' '}
Following
</Typography>
</>
);
}
function NotFollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsNoneIcon />
{' '}
Not Following
</Typography>
</>
);
}
function IsFollowingContent() {
return (
<>
{(squeakProfile.getFollowing())
? FollowingIndicator()
: NotFollowingIndicator()}
</>
);
}
return (
<>
<Card className={classes.root}>
<CardHeader
action={
<>
<IconButton aria-label="settings" onClick={handleClick}>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={onConfigureClick}>Configure</MenuItem>
<MenuItem onClick={onRenameClick}>Rename</MenuItem>
<MenuItem onClick={onChangeImageClick}>Change Image</MenuItem>
<MenuItem onClick={onClearImageClick}>Clear Image</MenuItem>
{squeakProfile.getHasPrivateKey() &&
<MenuItem onClick={onExportClick}>Export</MenuItem>
}
<MenuItem onClick={onDeleteClick}>Delete</MenuItem>
</Menu>
</>
}
title={squeakProfile.getProfileName()}
/>
action={(
<>
<IconButton aria-label="settings" onClick={handleClick}>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={onConfigureClick}>Configure</MenuItem>
<MenuItem onClick={onRenameClick}>Rename</MenuItem>
<MenuItem onClick={onChangeImageClick}>Change Image</MenuItem>
<MenuItem onClick={onClearImageClick}>Clear Image</MenuItem>
{squeakProfile.getHasPrivateKey()
&& <MenuItem onClick={onExportClick}>Export</MenuItem>}
<MenuItem onClick={onDeleteClick}>Delete</MenuItem>
</Menu>
</>
)}
title={squeakProfile.getProfileName()}
/>
<CardMedia
component="img"
className={classes.media}
image={`${getProfileImageSrcString(squeakProfile)}`}
title="Profile Image"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{squeakProfile.getHasPrivateKey() && <VpnKeyIcon />}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{squeakProfile.getAddress()}
</Typography>
<SqueakProfileFollowingIndicator
squeakProfile={squeakProfile}
></SqueakProfileFollowingIndicator>
</CardContent>
<CardActions>
<Button
onClick={() => {
onViewSqueaksClick();
}}
size="small" color="primary">
View Squeaks
</Button>
</CardActions>
</Card>
{DeleteProfileDialogContent()}
{RenameProfileDialogContent()}
{ExportPrivateKeyDialogContent()}
{ConfigureProfileDialogContent()}
{UpdateImageDialogContent()}
{ClearImageDialogContent()}
</>
);
<CardMedia
component="img"
className={classes.media}
image={`${getProfileImageSrcString(squeakProfile)}`}
title="Profile Image"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{squeakProfile.getHasPrivateKey() && <VpnKeyIcon />}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{squeakProfile.getAddress()}
</Typography>
<SqueakProfileFollowingIndicator
squeakProfile={squeakProfile}
/>
</CardContent>
<CardActions>
<Button
onClick={() => {
onViewSqueaksClick();
}}
size="small"
color="primary"
>
View Squeaks
</Button>
</CardActions>
</Card>
{DeleteProfileDialogContent()}
{RenameProfileDialogContent()}
{ExportPrivateKeyDialogContent()}
{ConfigureProfileDialogContent()}
{UpdateImageDialogContent()}
{ClearImageDialogContent()}
</>
);
}

18
frontend/src/components/SqueakProfileDetailItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
root: {

91
frontend/src/components/SqueakProfileFollowingIndicator/SqueakProfileFollowingIndicator.js
View file

@ -1,78 +1,49 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Divider,
Button,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import CardHeader from '@material-ui/core/CardHeader';
import Avatar from '@material-ui/core/Avatar';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import DeleteProfileDialog from "../../components/DeleteProfileDialog";
import RenameProfileDialog from "../../components/RenameProfileDialog";
import ExportPrivateKeyDialog from "../../components/ExportPrivateKeyDialog";
import ConfigureProfileDialog from "../../components/ConfigureProfileDialog";
import UpdateProfileImageDialog from "../../components/UpdateProfileImageDialog";
import ClearProfileImageDialog from "../../components/ClearProfileImageDialog";
import useStyles from './styles';
export default function SqueakProfileFollowingIndicator({
squeakProfile,
...props
}) {
var classes = useStyles();
function FollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsActiveIcon /> Following
</Typography>
</>
)
}
function NotFollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsNoneIcon /> Not Following
</Typography>
</>
)
}
const classes = useStyles();
function FollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsActiveIcon />
{' '}
Following
</Typography>
</>
);
}
function NotFollowingIndicator() {
return (
<>
<Typography variant="body2" color="textSecondary" component="p">
<NotificationsNoneIcon />
{' '}
Not Following
</Typography>
</>
);
}
return (
<>
{(squeakProfile.getFollowing())
? FollowingIndicator()
: NotFollowingIndicator()
}
</>
);
: NotFollowingIndicator()}
</>
);
}

18
frontend/src/components/SqueakProfileFollowingIndicator/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
root: {

95
frontend/src/components/SqueakReplies/SqueakReplies.js
View file

@ -1,43 +1,24 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import LockIcon from '@material-ui/icons/Lock';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import SqueakThreadItem from "../../components/SqueakThreadItem";
import SqueakUserAvatar from "../../components/SqueakUserAvatar";
import Widget from "../../components/Widget";
import moment from 'moment';
import SqueakThreadItem from '../SqueakThreadItem';
import SqueakUserAvatar from '../SqueakUserAvatar';
import {
getTimelineSqueakDisplaysRequest,
getNetworkRequest,
getSqueakDisplayRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function SqueakReplies({
squeaks,
@ -45,7 +26,7 @@ export default function SqueakReplies({
setSqueaksFn,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
@ -60,51 +41,51 @@ export default function SqueakReplies({
return item;
});
setSqueaksFn(newSqueaks);
})
});
}
const handleReloadSqueakItem = (itemHash) => {
const innerFunc = () => {
reloadSqueakItem(itemHash);
}
};
return innerFunc;
}
};
return (
<Timeline align="left">
{squeaks
.map(squeak =>
.map((squeak) => (
<TimelineItem
key={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
>
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
></TimelineOppositeContent>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
/>
</TimelineSeparator>
<TimelineContent>
<Box
p={1}
key={squeak.getSqueakHash()}
>
<SqueakThreadItem
hash={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar={true}>
</SqueakThreadItem>
</Box>
</TimelineContent>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
/>
</TimelineSeparator>
<TimelineContent>
<Box
p={1}
key={squeak.getSqueakHash()}
>
<SqueakThreadItem
hash={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar
/>
</Box>
</TimelineContent>
</TimelineItem>
)}
))}
</Timeline>
)
);
}

4
frontend/src/components/SqueakReplies/styles.js
View file

@ -1,6 +1,6 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
oppositeContent: {
// TODO: adjust this value accordingly
flex: 0.0,

155
frontend/src/components/SqueakThread/SqueakThread.js
View file

@ -1,43 +1,24 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import LockIcon from '@material-ui/icons/Lock';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
// styles
import useStyles from "./styles";
import useStyles from './styles';
import SqueakThreadItem from "../../components/SqueakThreadItem";
import SqueakUserAvatar from "../../components/SqueakUserAvatar";
import Widget from "../../components/Widget";
import moment from 'moment';
import SqueakThreadItem from '../SqueakThreadItem';
import SqueakUserAvatar from '../SqueakUserAvatar';
import {
getTimelineSqueakDisplaysRequest,
getNetworkRequest,
getSqueakDisplayRequest,
} from "../../squeakclient/requests"
} from '../../squeakclient/requests';
export default function SqueakThread({
squeaks,
@ -45,7 +26,7 @@ export default function SqueakThread({
setSqueaksFn,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
@ -60,55 +41,55 @@ export default function SqueakThread({
return item;
});
setSqueaksFn(newSqueaks);
})
});
}
const handleReloadSqueakItem = (itemHash) => {
const innerFunc = () => {
reloadSqueakItem(itemHash);
}
};
return innerFunc;
}
};
const unknownAncestorHash = () => {
if (!squeaks) {
return null;
}
var oldestKnownAncestor = squeaks[0];
if (!oldestKnownAncestor) {
return null;
}
return oldestKnownAncestor.getReplyTo();
if (!squeaks) {
return null;
}
const oldestKnownAncestor = squeaks[0];
if (!oldestKnownAncestor) {
return null;
}
return oldestKnownAncestor.getReplyTo();
};
function UnkownReplyToContent() {
var squeakHash = unknownAncestorHash();
const squeakHash = unknownAncestorHash();
if (!squeakHash) {
return (
<></>
)
);
}
return (
<TimelineItem>
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
></TimelineOppositeContent>
<TimelineSeparator>
<SqueakUserAvatar
squeak={null}
/>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<SqueakThreadItem
hash={squeakHash}
key={squeakHash}
squeak={null}>
</SqueakThreadItem>
</TimelineContent>
</TimelineItem>
)
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
/>
<TimelineSeparator>
<SqueakUserAvatar
squeak={null}
/>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<SqueakThreadItem
hash={squeakHash}
key={squeakHash}
squeak={null}
/>
</TimelineContent>
</TimelineItem>
);
}
return (
@ -116,37 +97,37 @@ export default function SqueakThread({
{UnkownReplyToContent()}
{squeaks
.slice(0, -1)
//.reverse()
.map(squeak =>
// .reverse()
.map((squeak) => (
<TimelineItem
key={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
>
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
></TimelineOppositeContent>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
<TimelineOppositeContent
className={classes.oppositeContent}
color="textSecondary"
/>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Box
key={squeak.getSqueakHash()}
>
<SqueakThreadItem
hash={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar={true}>
</SqueakThreadItem>
</Box>
</TimelineContent>
<TimelineSeparator>
<SqueakUserAvatar
squeakProfile={squeak.getAuthor()}
/>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
<Box
key={squeak.getSqueakHash()}
>
<SqueakThreadItem
hash={squeak.getSqueakHash()}
key={squeak.getSqueakHash()}
squeak={squeak}
network={network}
reloadSqueak={handleReloadSqueakItem(squeak.getSqueakHash())}
showActionBar
/>
</Box>
</TimelineContent>
</TimelineItem>
)}
))}
</>
)
);
}

4
frontend/src/components/SqueakThread/styles.js
View file

@ -1,6 +1,6 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
oppositeContent: {
// TODO: adjust this value accordingly
flex: 0.0,

175
frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
View file

@ -1,38 +1,30 @@
import React, { useState } from "react";
import React from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import LockIcon from '@material-ui/icons/Lock';
import DownloadIcon from '@material-ui/icons/CloudDownload';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakActionBar from "../../components/SqueakActionBar";
import moment from 'moment';
import useStyles from './styles';
import SqueakActionBar from '../SqueakActionBar';
import {
getBlockDetailUrl,
} from "../../bitcoin/blockexplorer"
import moment from 'moment';
} from '../../bitcoin/blockexplorer';
import {
goToSqueakPage,
goToSqueakAddressPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SqueakThreadItem({
hash,
@ -42,39 +34,40 @@ export default function SqueakThreadItem({
showActionBar,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
const blockDetailUrl = () => {
const blockDetailUrl = () =>
// return "https://blockstream.info/testnet/block/" + squeak.getBlockHash();
return getBlockDetailUrl(squeak.getBlockHash(), network);
};
getBlockDetailUrl(squeak.getBlockHash(), network);
const onAddressClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling address click...");
console.log('Handling address click...');
if (!squeak) {
return;
}
goToSqueakAddressPage(history, squeak.getAuthorAddress());
}
};
const onSqueakClick = (event) => {
event.preventDefault();
console.log("Handling squeak click for hash: " + hash);
console.log(`Handling squeak click for hash: ${hash}`);
goToSqueakPage(history, hash);
}
};
function SqueakUnlockedContent() {
return (
<Typography
size="md"
style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
>{squeak.getContentStr()}
style={{
whiteSpace: 'pre-line', overflow: 'hidden', textOverflow: 'ellipsis', height: '6rem',
}}
>
{squeak.getContentStr()}
</Typography>
)
);
}
function SqueakLockedContent() {
@ -82,7 +75,7 @@ export default function SqueakThreadItem({
<>
<LockIcon />
</>
)
);
}
function SqueakMissingContent() {
@ -90,7 +83,7 @@ export default function SqueakThreadItem({
<>
<DownloadIcon />
</>
)
);
}
function SqueakContent() {
@ -99,17 +92,16 @@ export default function SqueakThreadItem({
<>
{SqueakMissingContent()}
</>
)
);
}
return (
<>
{squeak.getIsUnlocked()
{squeak.getIsUnlocked()
? SqueakUnlockedContent()
: SqueakLockedContent()
}
: SqueakLockedContent()}
</>
)
);
}
function SqueakTime() {
@ -118,40 +110,44 @@ export default function SqueakThreadItem({
<Box color="secondary.main" fontWeight="fontWeightBold">
Unknown time
</Box>
)
);
}
return (
<Box color="secondary.main" fontWeight="fontWeightBold">
{moment(squeak.getBlockTime()*1000).fromNow()}
<span> </span>(Block
{moment(squeak.getBlockTime() * 1000).fromNow()}
<span> </span>
(Block
<Link
href={blockDetailUrl()}
target="_blank"
rel="noopener"
onClick={(event) => event.stopPropagation()}>
<span> </span>#{squeak.getBlockHeight()}
onClick={(event) => event.stopPropagation()}
>
<span> </span>
#
{squeak.getBlockHeight()}
</Link>
)
</Box>
)
);
}
function SqueakLockedBackgroundColor() {
return {backgroundColor: 'lightgray'};
return { backgroundColor: 'lightgray' };
}
function SqueakUnlockedBackgroundColor() {
return {backgroundColor: 'white'};
return { backgroundColor: 'white' };
}
function getAddressDisplay() {
if (!squeak) {
return "Author unknown"
return 'Author unknown';
}
return squeak.getIsAuthorKnown()
? squeak.getAuthor().getProfileName()
: squeak.getAuthorAddress()
: squeak.getAuthorAddress();
}
function SqueakBackgroundColor() {
@ -159,60 +155,65 @@ export default function SqueakThreadItem({
return SqueakLockedBackgroundColor();
}
return squeak.getIsUnlocked()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor();
}
return (
<Paper elevation={3} className={classes.paper}
<Paper
elevation={3}
className={classes.paper}
p={1}
m={0}
style={SqueakBackgroundColor()}
onClick={onSqueakClick}
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
<Box fontWeight="fontWeightBold">
<Link href="#"
onClick={onAddressClick}>
{getAddressDisplay()}
</Link>
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakTime()}
</Grid>
</Grid>
{showActionBar &&
<Grid item>
<Box fontWeight="fontWeightBold">
<Link
href="#"
onClick={onAddressClick}
>
{getAddressDisplay()}
</Link>
</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakContent()}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid item>
{SqueakTime()}
</Grid>
</Grid>
{showActionBar
&& (
<SqueakActionBar
hash={hash}
squeak={squeak}
network={network}
reloadSqueak={reloadSqueak}
></SqueakActionBar>
}
/>
)}
</Paper>
)
);
}

18
frontend/src/components/SqueakThreadItem/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

29
frontend/src/components/SqueakUserAvatar/SqueakUserAvatar.js
View file

@ -1,20 +1,18 @@
import React, { useState } from "react";
import React from 'react';
import TimelineDot from '@material-ui/lab/TimelineDot';
import FaceIcon from '@material-ui/icons/Face';
import HelpIcon from '@material-ui/icons/Help';
import Avatar from '@material-ui/core/Avatar';
import {useHistory} from "react-router-dom";
import { useHistory } from 'react-router-dom';
import {
getProfileImageSrcString,
} from "../../squeakimages/images"
} from '../../squeakimages/images';
import {
goToSqueakAddressPage,
} from "../../navigation/navigation"
} from '../../navigation/navigation';
export default function SqueakUserAvatar({
squeakProfile,
@ -25,27 +23,26 @@ export default function SqueakUserAvatar({
const onAvatarClick = (event) => {
event.preventDefault();
event.stopPropagation();
console.log("Handling avatar click...");
console.log('Handling avatar click...');
if (squeakProfile) {
goToSqueakAddressPage(history, squeakProfile.getAddress());
}
}
};
function AvatarImage() {
return (
<Avatar src={`${getProfileImageSrcString(squeakProfile)}`} />
)
);
}
return (
<TimelineDot
onClick={onAvatarClick}
style={{cursor: 'pointer'}}
onClick={onAvatarClick}
style={{ cursor: 'pointer' }}
>
{squeakProfile ?
AvatarImage() :
<HelpIcon fontSize="large" />
}
{squeakProfile
? AvatarImage()
: <HelpIcon fontSize="large" />}
</TimelineDot>
)
);
}

18
frontend/src/components/SqueakUserAvatar/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

145
frontend/src/components/TransactionItem/TransactionItem.js
View file

@ -1,23 +1,18 @@
import React, { useState } from "react";
import React, { useState } from 'react';
// icons
import CallMadeIcon from '@material-ui/icons/CallMade';
import CallReceivedIcon from '@material-ui/icons/CallReceived';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
// styles
import useStyles from "../../pages/wallet/styles";
import moment from 'moment';
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import IconButton from "@material-ui/core/IconButton";
import Collapse from "@material-ui/core/Collapse";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";
import SwapHorizontalCircleIcon from "@material-ui/icons/SwapHorizontalCircle";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Collapse from '@material-ui/core/Collapse';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import useStyles from '../../pages/wallet/styles';
export default function TransactionItem({
transaction,
@ -32,83 +27,87 @@ export default function TransactionItem({
const onTransactionClick = (event) => {
event.preventDefault();
console.log("Handling transaction click...");
console.log('Handling transaction click...');
// if (handleTransactionClick) {
// handleTransactionClick();
// }
handleExpandClick();
};
function TransactionDetailItem(label, value) {
return (
<Box display="flex">
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
);
}
function TransactionDetailItem(label, value) {
return <Box display='flex'>
<Typography className={classes.detailItemLabel}>
{label}
</Typography>
<Typography className={classes.detailItemValue}>
{value}
</Typography>
</Box>
}
function TransactionMoreDetails() {
return (
<CardContent className={classes.cardContent}>
{TransactionDetailItem("Tx Hash", transaction.getTxHash())}
{TransactionDetailItem("Timestamp", moment.unix(transaction.getTimeStamp()).format('lll'))}
{TransactionDetailItem("Block Height", transaction.getBlockHeight())}
{TransactionDetailItem("Total Fees", transaction.getTotalFees())}
{/*{TransactionDetailItem("Dest Addresses", transaction.getDestAddressesList().length)}*/}
{TransactionDetailItem("Confirmations", transaction.getNumConfirmations())}
</CardContent>
)
function TransactionMoreDetails() {
return (
<CardContent className={classes.cardContent}>
{TransactionDetailItem('Tx Hash', transaction.getTxHash())}
{TransactionDetailItem('Timestamp', moment.unix(transaction.getTimeStamp()).format('lll'))}
{TransactionDetailItem('Block Height', transaction.getBlockHeight())}
{TransactionDetailItem('Total Fees', transaction.getTotalFees())}
{/* {TransactionDetailItem("Dest Addresses", transaction.getDestAddressesList().length)} */}
{TransactionDetailItem('Confirmations', transaction.getNumConfirmations())}
</CardContent>
);
}
const classes = useStyles({
amount: transaction.getAmount(),
clickable: false,
})
amount: transaction.getAmount(),
clickable: false,
});
const amountGtZero = transaction.getAmount() >= 0
const amountGtZero = transaction.getAmount() >= 0;
function PlusMinusSymbol() {
if (transaction.getAmount() > 0) {
return '+'
} else if (transaction.getAmount() < 0) {
return '-'
}
}
function PlusMinusSymbol() {
if (transaction.getAmount() > 0) {
return '+';
} if (transaction.getAmount() < 0) {
return '-';
}
}
function TransactionIcon() {
if (amountGtZero) {
return <CallReceivedIcon className={classes.transactionIcon}/>
} else {
return <CallMadeIcon className={classes.transactionIcon}/>
}
if (amountGtZero) {
return <CallReceivedIcon className={classes.transactionIcon} />;
}
return <CallMadeIcon className={classes.transactionIcon} />;
}
return (
<Card
className={classes.root}
onClick={onTransactionClick}
>
<Box className={classes.cardContentContainer}>
<Box className={classes.cardHeaderContainer}>
<Box className={classes.cardHeaderRow}>
{TransactionIcon()}
<Typography className={classes.transactionAmt}>
{PlusMinusSymbol()}{Math.abs(transaction.getAmount())} sats
</Typography>
</Box>
<Box className={classes.cardHeaderRow}>
<Typography className={classes.cardSubheaderText}>
{moment.unix(transaction.getTimeStamp()).fromNow()}
</Typography>
</Box>
<Card
className={classes.root}
onClick={onTransactionClick}
>
<Box className={classes.cardContentContainer}>
<Box className={classes.cardHeaderContainer}>
<Box className={classes.cardHeaderRow}>
{TransactionIcon()}
<Typography className={classes.transactionAmt}>
{PlusMinusSymbol()}
{Math.abs(transaction.getAmount())}
{' '}
sats
</Typography>
</Box>
<Box className={classes.cardHeaderRow}>
<Typography className={classes.cardSubheaderText}>
{moment.unix(transaction.getTimeStamp()).fromNow()}
</Typography>
</Box>
<Collapse in={expanded} timeout="auto" unmountOnExit>
{TransactionMoreDetails()}
</Collapse>
</Box>
</Card>
)
<Collapse in={expanded} timeout="auto" unmountOnExit>
{TransactionMoreDetails()}
</Collapse>
</Box>
</Card>
);
}

137
frontend/src/components/UpdateProfileImageDialog/UpdateProfileImageDialog.js
View file

@ -1,41 +1,20 @@
import React, {useState, useEffect} from 'react';
import React, { useState } from 'react';
import {
Paper,
IconButton,
Menu,
MenuItem,
Typography,
Grid,
Box,
Link,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
TextField,
DialogActions,
Button,
FormControl,
InputLabel,
Select,
} from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
// styles
import useStyles from "./styles";
import Widget from "../../components/Widget";
import SqueakThreadItem from "../../components/SqueakThreadItem";
import useStyles from './styles';
import {
setSqueakProfileImageRequest,
} from "../../squeakclient/requests"
import {
reloadRoute,
} from "../../navigation/navigation"
} from '../../squeakclient/requests';
export default function UpdateProfileImageDialog({
open,
@ -44,11 +23,11 @@ export default function UpdateProfileImageDialog({
reloadProfile,
...props
}) {
var classes = useStyles();
const classes = useStyles();
const history = useHistory();
var [selectedFile, setSelectedFile] = useState(null);
var [imageBase64, setImageBase64] = useState(null);
const [selectedFile, setSelectedFile] = useState(null);
const [imageBase64, setImageBase64] = useState(null);
const resetFields = () => {
setImageBase64(null);
@ -59,7 +38,7 @@ export default function UpdateProfileImageDialog({
};
const handleErr = (err) => {
alert('Error creating signing profile: ' + err);
alert(`Error creating signing profile: ${err}`);
};
const updateProfileImage = (imageStr) => {
@ -74,7 +53,7 @@ export default function UpdateProfileImageDialog({
function handleSubmit(event) {
event.preventDefault();
if (imageBase64 == null) {
alert("Invalid image data.")
alert('Invalid image data.');
return;
}
const imageBase64Stripped = imageBase64.split(',')[1];
@ -85,7 +64,7 @@ export default function UpdateProfileImageDialog({
const handleChangeSelectedImage = (event) => {
// alert("selected image changed.");
if (event.target.files.length < 1) {
alert("Invalid file selected");
alert('Invalid file selected');
setSelectedFile(null);
}
const file = event.target.files[0];
@ -98,7 +77,7 @@ export default function UpdateProfileImageDialog({
setImageBase64(null);
}
const reader = new FileReader();
reader.addEventListener("load", function () {
reader.addEventListener('load', () => {
// convert image file to base64 string
// preview.src = reader.result;
setImageBase64(reader.result);
@ -110,24 +89,24 @@ export default function UpdateProfileImageDialog({
function FileInput() {
return (
<>
<Button
variant="contained"
component="label"
>
Select File
<input
type="file"
hidden
onChange={handleChangeSelectedImage}
/>
</Button>
</>
)
<>
<Button
variant="contained"
component="label"
>
Select File
<input
type="file"
hidden
onChange={handleChangeSelectedImage}
/>
</Button>
</>
);
}
function DisplaySelectedImageFileName() {
const fileName = selectedFile ? selectedFile.name : "";
const fileName = selectedFile ? selectedFile.name : '';
return (
<TextField
id="standard-textarea"
@ -137,17 +116,17 @@ export default function UpdateProfileImageDialog({
value={fileName}
fullWidth
inputProps={{
readOnly: true,
readOnly: true,
}}
/>
)
);
}
function DisplaySelectedImageFile() {
const imageStr = imageBase64 ? imageBase64 : "";
const imageStr = imageBase64 || '';
return (
<img src={imageStr} height="200" alt="Image preview..."/>
)
<img src={imageStr} height="200" alt="Image preview..." />
);
}
function CancelButton() {
@ -159,40 +138,40 @@ export default function UpdateProfileImageDialog({
>
Cancel
</Button>
)
);
}
function SetProfileImageButton() {
return (
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Set Profile Image
</Button>
)
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Set Profile Image
</Button>
);
}
return (
<Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Set Profile Image</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{FileInput()}
</DialogContent>
<DialogContent>
{DisplaySelectedImageFile()}
</DialogContent>
<DialogContent>
{DisplaySelectedImageFileName()}
</DialogContent>
<DialogActions>
{CancelButton()}
{SetProfileImageButton()}
</DialogActions>
</form>
<DialogTitle id="form-dialog-title">Set Profile Image</DialogTitle>
<form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
<DialogContent>
{FileInput()}
</DialogContent>
<DialogContent>
{DisplaySelectedImageFile()}
</DialogContent>
<DialogContent>
{DisplaySelectedImageFileName()}
</DialogContent>
<DialogActions>
{CancelButton()}
{SetProfileImageButton()}
</DialogActions>
</form>
</Dialog>
)
);
}

24
frontend/src/components/UpdateProfileImageDialog/styles.js
View file

@ -1,16 +1,16 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(theme => ({
export default makeStyles((theme) => ({
widgetWrapper: {
display: "flex",
minHeight: "100%",
display: 'flex',
minHeight: '100%',
},
widgetHeader: {
padding: theme.spacing(3),
paddingBottom: theme.spacing(1),
display: "flex",
justifyContent: "space-between",
alignItems: "center",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
widgetRoot: {
boxShadow: theme.customShadows.widget,
@ -24,10 +24,10 @@ export default makeStyles(theme => ({
padding: 0,
},
paper: {
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
overflow: "hidden",
overflow: 'hidden',
},
moreButton: {
margin: -theme.spacing(1),
@ -35,9 +35,9 @@ export default makeStyles(theme => ({
width: 40,
height: 40,
color: theme.palette.text.hint,
"&:hover": {
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: "rgba(255, 255, 255, 0.35)",
color: 'rgba(255, 255, 255, 0.35)',
},
},
}));

22
frontend/src/components/UserAvatar/UserAvatar.js
View file

@ -1,20 +1,20 @@
import React from "react";
import { useTheme } from "@material-ui/styles";
import React from 'react';
import { useTheme } from '@material-ui/styles';
// styles
import useStyles from "./styles";
import useStyles from './styles';
// components
import { Typography } from "../Wrappers";
import { Typography } from '../Wrappers';
export default function UserAvatar({ color = "primary", ...props }) {
var classes = useStyles();
var theme = useTheme();
export default function UserAvatar({ color = 'primary', ...props }) {
const classes = useStyles();
const theme = useTheme();
var letters = props.name
.split(" ")
.map(word => word[0])
.join("");
const letters = props.name
.split(' ')
.map((word) => word[0])
.join('');
return (
<div

12
frontend/src/components/UserAvatar/styles.js
View file

@ -1,15 +1,15 @@
import { makeStyles } from "@material-ui/styles";
import { makeStyles } from '@material-ui/styles';
export default makeStyles(() => ({
avatar: {
width: 30,
height: 30,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "50%",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
},
text: {
color: "white",
color: 'white',
},
}));

Some files were not shown because too many files have changed in this diff Show more