diff --git a/frontend/src/components/ConfigurePeerDialog/ConfigurePeerDialog.js b/frontend/src/components/ConfigurePeerDialog/ConfigurePeerDialog.js
new file mode 100644
index 00000000..dbf05c27
--- /dev/null
+++ b/frontend/src/components/ConfigurePeerDialog/ConfigurePeerDialog.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ FormControl,
+ FormLabel,
+ FormGroup,
+ FormControlLabel,
+ Switch,
+} from '@material-ui/core';
+
+// styles
+import useStyles from './styles';
+
+import {
+ setPeerAutoconnectRequest,
+ setPeerShareForFreeRequest,
+} from '../../squeakclient/requests';
+
+export default function ConfigurePeerDialog({
+ open,
+ handleClose,
+ savedPeer,
+ reloadPeer,
+ ...props
+}) {
+ const classes = useStyles();
+
+ const setAutoconnect = (id, autoconnect) => {
+ setPeerAutoconnectRequest(id, autoconnect, () => {
+ reloadPeer();
+ });
+ };
+
+ const setShareForFree = (id, shareForFree) => {
+ setPeerShareForFreeRequest(id, shareForFree, () => {
+ reloadPeer();
+ });
+ };
+
+ const handleSettingsAutoconnectChange = (event) => {
+ console.log(`Autoconnect changed for peer id: ${savedPeer.getPeerId()}`);
+ console.log(`Autoconnect changed to: ${event.target.checked}`);
+ setAutoconnect(savedPeer.getPeerId(), event.target.checked);
+ };
+
+ const handleSettingsShareForFreeChange = (event) => {
+ console.log(`ShareForFree changed for peer id: ${savedPeer.getPeerId()}`);
+ console.log(`ShareForFree changed to: ${event.target.checked}`);
+ setShareForFree(savedPeer.getPeerId(), event.target.checked);
+ };
+
+ function MakeCancelButton() {
+ return (
+
+ );
+ }
+
+ function PeerSettingsForm() {
+ return (
+
+ Peer settings
+
+ }
+ label="Autoconnect"
+ />
+
+
+ }
+ label="Share for free"
+ />
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/ConfigurePeerDialog/package.json b/frontend/src/components/ConfigurePeerDialog/package.json
new file mode 100644
index 00000000..70309cb1
--- /dev/null
+++ b/frontend/src/components/ConfigurePeerDialog/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "ConfigurePeerDialog",
+ "version": "0.0.0",
+ "private": true,
+ "main": "ConfigurePeerDialog.js"
+}
diff --git a/frontend/src/components/ConfigurePeerDialog/styles.js b/frontend/src/components/ConfigurePeerDialog/styles.js
new file mode 100644
index 00000000..a025742c
--- /dev/null
+++ b/frontend/src/components/ConfigurePeerDialog/styles.js
@@ -0,0 +1,43 @@
+import { makeStyles } from '@material-ui/styles';
+
+export default makeStyles((theme) => ({
+ widgetWrapper: {
+ display: 'flex',
+ minHeight: '100%',
+ },
+ widgetHeader: {
+ padding: theme.spacing(3),
+ paddingBottom: theme.spacing(1),
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+ widgetRoot: {
+ boxShadow: theme.customShadows.widget,
+ },
+ widgetBody: {
+ paddingBottom: theme.spacing(3),
+ paddingRight: theme.spacing(3),
+ paddingLeft: theme.spacing(3),
+ },
+ noPadding: {
+ padding: 0,
+ },
+ paper: {
+ display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 1,
+ overflow: 'hidden',
+ },
+ moreButton: {
+ margin: -theme.spacing(1),
+ padding: 0,
+ width: 40,
+ height: 40,
+ color: theme.palette.text.hint,
+ '&:hover': {
+ backgroundColor: theme.palette.primary.main,
+ color: 'rgba(255, 255, 255, 0.35)',
+ },
+ },
+}));
diff --git a/frontend/src/components/DeletePeerDialog/DeletePeerDialog.js b/frontend/src/components/DeletePeerDialog/DeletePeerDialog.js
index 17690361..0d50ba85 100644
--- a/frontend/src/components/DeletePeerDialog/DeletePeerDialog.js
+++ b/frontend/src/components/DeletePeerDialog/DeletePeerDialog.js
@@ -6,7 +6,6 @@ import {
DialogActions,
Button,
} from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
// styles
import useStyles from './styles';
@@ -14,22 +13,20 @@ import useStyles from './styles';
import {
deletePeerRequest,
} from '../../squeakclient/requests';
-import {
- reloadRoute,
-} from '../../navigation/navigation';
+
export default function DeletePeerDialog({
open,
handleClose,
peer,
+ reloadPeer,
...props
}) {
const classes = useStyles();
- const history = useHistory();
const deletePeer = (peerId) => {
deletePeerRequest(peerId, (response) => {
- reloadRoute(history);
+ reloadPeer();
});
};
diff --git a/frontend/src/components/SavedPeerDetailItem/SavedPeerDetailItem.js b/frontend/src/components/SavedPeerDetailItem/SavedPeerDetailItem.js
new file mode 100644
index 00000000..e96fc163
--- /dev/null
+++ b/frontend/src/components/SavedPeerDetailItem/SavedPeerDetailItem.js
@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import {
+ IconButton,
+ Menu,
+ MenuItem,
+ Typography,
+ Button,
+} from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+
+import CardHeader from '@material-ui/core/CardHeader';
+
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+// styles
+import useStyles from './styles';
+
+import DeletePeerDialog from '../DeletePeerDialog';
+import ConfigurePeerDialog from '../ConfigurePeerDialog';
+
+import {
+ goToPeerAddressPage,
+} from '../../navigation/navigation';
+
+export default function SavedPeerDetailItem({
+ savedPeer,
+ handleReloadPeer,
+ ...props
+}) {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [configureDialogOpen, setConfigureDialogOpen] = useState(false);
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const history = useHistory();
+
+ const onViewPeerConnectionClick = () => {
+ console.log('Handling view peer connection click...');
+ handleClose();
+ if (!savedPeer) {
+ return;
+ }
+ goToPeerAddressPage(
+ history,
+ savedPeer.getPeerAddress().getNetwork(),
+ savedPeer.getPeerAddress().getHost(),
+ savedPeer.getPeerAddress().getPort(),
+ );
+ };
+
+ const onConfigureClick = () => {
+ console.log('Handling configure click...');
+ handleClose();
+ if (!savedPeer) {
+ return;
+ }
+ setConfigureDialogOpen(true);
+ };
+
+ const onDeleteClick = () => {
+ console.log('Handling delete click...');
+ handleClose();
+ if (!savedPeer) {
+ return;
+ }
+ setDeleteDialogOpen(true);
+ };
+
+ const handleCloseDeleteDialog = () => {
+ setDeleteDialogOpen(false);
+ };
+
+ const handleCloseConfigureDialog = () => {
+ setConfigureDialogOpen(false);
+ };
+
+ function DeletePeerDialogContent() {
+ return (
+ <>
+
+ >
+ );
+ }
+
+ function ConfigurePeerDialogContent() {
+ return (
+ <>
+
+ >
+ );
+ }
+
+
+ return (
+ <>
+
+
+
+
+
+
+
+ >
+ )}
+ title={savedPeer.getPeerName()}
+ />
+
+
+
+ Network: {savedPeer.getPeerAddress().getNetwork()}
+
+
+ Host: {savedPeer.getPeerAddress().getHost()}
+
+
+ Port: {savedPeer.getPeerAddress().getPort()}
+
+
+ Autoconnect: {savedPeer.getAutoconnect().toString()}
+
+
+ Share for free: {savedPeer.getShareForFree().toString()}
+
+
+
+
+
+
+ {DeletePeerDialogContent()}
+ {ConfigurePeerDialogContent()}
+ >
+ );
+}
diff --git a/frontend/src/components/SavedPeerDetailItem/package.json b/frontend/src/components/SavedPeerDetailItem/package.json
new file mode 100644
index 00000000..aaa42248
--- /dev/null
+++ b/frontend/src/components/SavedPeerDetailItem/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "SavedPeerDetailItem",
+ "version": "0.0.0",
+ "private": true,
+ "main": "SavedPeerDetailItem.js"
+}
diff --git a/frontend/src/components/SavedPeerDetailItem/styles.js b/frontend/src/components/SavedPeerDetailItem/styles.js
new file mode 100644
index 00000000..e7addda6
--- /dev/null
+++ b/frontend/src/components/SavedPeerDetailItem/styles.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/styles';
+
+export default makeStyles((theme) => ({
+ root: {
+ maxWidth: 400,
+ },
+}));
diff --git a/frontend/src/components/SqueakProfileDetailItem/styles.js b/frontend/src/components/SqueakProfileDetailItem/styles.js
index e4aad990..bdd62ced 100644
--- a/frontend/src/components/SqueakProfileDetailItem/styles.js
+++ b/frontend/src/components/SqueakProfileDetailItem/styles.js
@@ -1,49 +1,10 @@
import { makeStyles } from '@material-ui/styles';
export default makeStyles((theme) => ({
- widgetWrapper: {
- display: 'flex',
- minHeight: '100%',
- },
- widgetHeader: {
- padding: theme.spacing(3),
- paddingBottom: theme.spacing(1),
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- },
- widgetRoot: {
- boxShadow: theme.customShadows.widget,
- },
- widgetBody: {
- paddingBottom: theme.spacing(3),
- paddingRight: theme.spacing(3),
- paddingLeft: theme.spacing(3),
- },
- noPadding: {
- padding: 0,
- },
- paper: {
- padding: '6px 12px',
- },
- secondaryTail: {
- backgroundColor: theme.palette.secondary.main,
- },
- moreButton: {
- margin: -theme.spacing(1),
- padding: 0,
- width: 40,
- height: 40,
- color: theme.palette.text.hint,
- '&:hover': {
- backgroundColor: theme.palette.primary.main,
- color: 'rgba(255, 255, 255, 0.35)',
- },
- },
root: {
- maxWidth: 345,
+ maxWidth: 400,
},
media: {
- height: 180,
+ height: 280,
},
}));
diff --git a/frontend/src/pages/peer/Peer.js b/frontend/src/pages/peer/Peer.js
index ec4982a8..d8a07493 100644
--- a/frontend/src/pages/peer/Peer.js
+++ b/frontend/src/pages/peer/Peer.js
@@ -1,188 +1,73 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
import {
- Grid,
- FormLabel,
- FormControl,
- FormGroup,
- FormControlLabel,
- Switch,
- Button,
CircularProgress,
+ CardHeader,
+ Card,
} from '@material-ui/core';
// styles
import useStyles from './styles';
// components
-import DeletePeerDialog from '../../components/DeletePeerDialog';
+import SavedPeerDetailItem from '../../components/SavedPeerDetailItem';
import {
getPeerRequest,
- setPeerAutoconnectRequest,
- setPeerShareForFreeRequest,
} from '../../squeakclient/requests';
-import {
- goToPeerAddressPage,
-} from '../../navigation/navigation';
export default function PeerPage() {
const classes = useStyles();
- const history = useHistory();
const { id } = useParams();
const [peerResp, setPeerResp] = useState(null);
- const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
- const getSqueakPeer = (id) => {
+ const handleGetSqueakPeerErr = (err) => {
+ setPeerResp(null);
+ };
+
+ const getSqueakPeer = useCallback(() => {
getPeerRequest(id, (resp => {
setPeerResp(resp);
- }));
- };
- const setAutoconnect = (id, autoconnect) => {
- setPeerAutoconnectRequest(id, autoconnect, () => {
- getSqueakPeer(id);
- });
- };
- const setShareForFree = (id, shareForFree) => {
- setPeerShareForFreeRequest(id, shareForFree, () => {
- getSqueakPeer(id);
- });
- };
+ }), handleGetSqueakPeerErr);
+ },
+ [id]);
useEffect(() => {
getSqueakPeer(id);
- }, [id]);
+ }, [getSqueakPeer, id]);
- const handleClickOpenDeleteDialog = () => {
- setDeleteDialogOpen(true);
- console.log(`deleteDialogOpen: ${deleteDialogOpen}`);
+ const handleReloadPeer = () => {
+ getSqueakPeer(id);
};
- const handleCloseDeleteDialog = () => {
- setDeleteDialogOpen(false);
- };
-
- const handleSettingsAutoconnectChange = (event) => {
- console.log(`Autoconnect changed for peer id: ${id}`);
- console.log(`Autoconnect changed to: ${event.target.checked}`);
- setAutoconnect(id, event.target.checked);
- };
-
- const handleSettingsShareForFreeChange = (event) => {
- console.log(`share_for_free changed for peer id: ${id}`);
- console.log(`share_for_free changed to: ${event.target.checked}`);
- setShareForFree(id, event.target.checked);
- };
-
- const peerAddressToStr = (peerAddress) => `${peerAddress.getHost()}:${peerAddress.getPort()}`;
-
function PeerContent() {
return (
<>
{peerResp.getSqueakPeer()
- ? PeerDisplay()
- : NoPeerDisplay()}
+ ? SqueakPeerDisplay()
+ : NoSqueakPeerDisplay()}
>
);
}
- function NoPeerDisplay() {
+ function SqueakPeerDisplay() {
return (
-
- Peer name:
- {' '}
- {peerResp.getSqueakPeer().getPeerName()}
-
-
-
-
-
-
- >
- );
- }
-
- function DeletePeerDialogContent() {
- return (
- <>
-