Skip to content

Commit

Permalink
Merge pull request #578 from freifunkMUC/prettier
Browse files Browse the repository at this point in the history 
feat: run prettier & protoc on project
  • Loading branch information
@GoliathLabs
GoliathLabs authored Feb 3, 2024
2 parents f3273df + e1d8505 commit bec40d0
Show file tree
Hide file tree
Showing 11 changed files with 2,150 additions and 2,215 deletions.
375 changes: 190 additions & 185 deletions website/src/components/AddDevice.tsx
View file

Large diffs are not rendered by default.

150 changes: 76 additions & 74 deletions website/src/components/DeviceListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,82 +20,84 @@ interface Props {
onRemove: () => void;
}

export const DeviceListItem = observer(class DeviceListItem extends React.Component<Props> {
removeDevice = async () => {
try {
await grpc.devices.deleteDevice({
name: this.props.device.name,
});
this.props.onRemove();
} catch {
window.alert('api request failed');
}
};
export const DeviceListItem = observer(
class DeviceListItem extends React.Component<Props> {
removeDevice = async () => {
try {
await grpc.devices.deleteDevice({
name: this.props.device.name,
});
this.props.onRemove();
} catch {
window.alert('api request failed');
}
};

render() {
const device = this.props.device;
return (
<Card>
<CardHeader
title={device.name}
avatar={
<Avatar style={{ backgroundColor: device.connected ? '#76de8a' : '#bdbdbd' }}>
{/* <DonutSmallIcon /> */}
{device.connected ? <WifiIcon /> : <WifiOffIcon />}
</Avatar>
}
action={
<IconMenu>
<MenuItem style={{ color: 'red' }} onClick={this.removeDevice}>
Delete
</MenuItem>
</IconMenu>
}
/>
<CardContent>
<table cellPadding="5">
<tbody>
{AppState.info?.metadataEnabled && device.connected && (
<>
<tr>
<td>Endpoint</td>
<td>{device.endpoint}</td>
</tr>
<tr>
<td>Download</td>
<td>{numeral(device.transmitBytes).format('0b')}</td>
</tr>
render() {
const device = this.props.device;
return (
<Card>
<CardHeader
title={device.name}
avatar={
<Avatar style={{ backgroundColor: device.connected ? '#76de8a' : '#bdbdbd' }}>
{/* <DonutSmallIcon /> */}
{device.connected ? <WifiIcon /> : <WifiOffIcon />}
</Avatar>
}
action={
<IconMenu>
<MenuItem style={{ color: 'red' }} onClick={this.removeDevice}>
Delete
</MenuItem>
</IconMenu>
}
/>
<CardContent>
<table cellPadding="5">
<tbody>
{AppState.info?.metadataEnabled && device.connected && (
<>
<tr>
<td>Endpoint</td>
<td>{device.endpoint}</td>
</tr>
<tr>
<td>Download</td>
<td>{numeral(device.transmitBytes).format('0b')}</td>
</tr>
<tr>
<td>Upload</td>
<td>{numeral(device.receiveBytes).format('0b')}</td>
</tr>
</>
)}
{AppState.info?.metadataEnabled && !device.connected && (
<tr>
<td>Upload</td>
<td>{numeral(device.receiveBytes).format('0b')}</td>
<td>Disconnected</td>
</tr>
</>
)}
{AppState.info?.metadataEnabled && !device.connected && (
)}
<tr>
<td>Disconnected</td>
<td>Last Seen</td>
<td>{lastSeen(device.lastHandshakeTime)}</td>
</tr>
)}
<tr>
<td>Last Seen</td>
<td>{lastSeen(device.lastHandshakeTime)}</td>
</tr>
<tr>
<td>Public key</td>
<td>
<PopoverDisplay label="show">{device.publicKey}</PopoverDisplay>
</td>
</tr>
<tr>
<td>Pre-shared key</td>
<td>
{ device.presharedKey ? (<PopoverDisplay label="show">{ device.presharedKey }</PopoverDisplay> ) : ('None') }
</td>
</tr>
</tbody>
</table>
</CardContent>
</Card>
);
}
});
<tr>
<td>Public key</td>
<td>
<PopoverDisplay label="show">{device.publicKey}</PopoverDisplay>
</td>
</tr>
<tr>
<td>Pre-shared key</td>
<td>
{device.presharedKey ? <PopoverDisplay label="show">{device.presharedKey}</PopoverDisplay> : 'None'}
</td>
</tr>
</tbody>
</table>
</CardContent>
</Card>
);
}
},
);
68 changes: 35 additions & 33 deletions website/src/components/Devices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,44 @@ import { autorefresh } from '../Util';
import { DeviceListItem } from './DeviceListItem';
import { AddDevice } from './AddDevice';

export const Devices = observer(class Devices extends React.Component {
devices = autorefresh(30, async () => {
return (await grpc.devices.listDevices({})).items;
});

constructor(props: {}) {
super(props);

makeObservable(this, {
devices: observable
export const Devices = observer(
class Devices extends React.Component {
devices = autorefresh(30, async () => {
return (await grpc.devices.listDevices({})).items;
});
}

componentWillUnmount() {
this.devices.dispose();
}
constructor(props: {}) {
super(props);

makeObservable(this, {
devices: observable,
});
}

render() {
if (!this.devices.current) {
return <p>loading...</p>;
componentWillUnmount() {
this.devices.dispose();
}
return (
<Grid container spacing={3} justifyContent="center">
<Grid item xs={12}>
<Grid container spacing={3}>
{this.devices.current.map((device, i) => (
<Grid key={i} item xs={12} sm={6} md={4} lg={3}>
<DeviceListItem device={device} onRemove={() => this.devices.refresh()} />
</Grid>
))}

render() {
if (!this.devices.current) {
return <p>loading...</p>;
}
return (
<Grid container spacing={3} justifyContent="center">
<Grid item xs={12}>
<Grid container spacing={3}>
{this.devices.current.map((device, i) => (
<Grid key={i} item xs={12} sm={6} md={4} lg={3}>
<DeviceListItem device={device} onRemove={() => this.devices.refresh()} />
</Grid>
))}
</Grid>
</Grid>
<Grid item xs={12} sm={10} md={10} lg={6}>
<AddDevice onAdd={() => this.devices.refresh()} />
</Grid>
</Grid>
<Grid item xs={12} sm={10} md={10} lg={6}>
<AddDevice onAdd={() => this.devices.refresh()} />
</Grid>
</Grid>
);
}
});
);
}
},
);
50 changes: 23 additions & 27 deletions website/src/components/GetConnected.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,7 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
variant="fullWidth"
>
<Tab icon={<Laptop />} value="desktop" />
{this.props.showMobile &&
<Tab icon={<PhoneIphone />} value="mobile" />
}
{this.props.showMobile && <Tab icon={<PhoneIphone />} value="mobile" />}
</Tabs>
</Paper>

Expand All @@ -71,9 +69,7 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
<Button onClick={() => this.go('https://www.WireGuard.com/install/')}>
<LinuxIcon />
</Button>
<Button
onClick={() => this.go('https://www.wireguard.com/install/')}
>
<Button onClick={() => this.go('https://www.wireguard.com/install/')}>
<WindowsIcon />
</Button>
<Button onClick={() => this.go('https://www.wireguard.com/install/#macos-app-store')}>
Expand All @@ -94,28 +90,28 @@ export class GetConnected extends Component<PropsWithChildren<Props>, any> {
</Grid>
</TabPanel>

{this.props.showMobile &&
<TabPanel for="mobile" value={this.state.currentTab}>
<Grid container direction="row" justifyContent="space-around" alignItems="center">
<Grid item>
<List>
<ListItem>
<ListItemText primary="1. Install the WireGuard app" />
</ListItem>
<ListItem>
<ListItemText primary="2. Add a tunnel" />
</ListItem>
<ListItem>
<ListItemText primary="3. Create from QR code" />
</ListItem>
</List>
</Grid>
<Grid item>
<QRCode content={this.props.configFile} />
{this.props.showMobile && (
<TabPanel for="mobile" value={this.state.currentTab}>
<Grid container direction="row" justifyContent="space-around" alignItems="center">
<Grid item>
<List>
<ListItem>
<ListItemText primary="1. Install the WireGuard app" />
</ListItem>
<ListItem>
<ListItemText primary="2. Add a tunnel" />
</ListItem>
<ListItem>
<ListItemText primary="3. Create from QR code" />
</ListItem>
</List>
</Grid>
<Grid item>
<QRCode content={this.props.configFile} />
</Grid>
</Grid>
</Grid>
</TabPanel>
}
</TabPanel>
)}
</React.Fragment>
);
}
Expand Down
6 changes: 1 addition & 5 deletions website/src/components/IconMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,7 @@ export function IconMenu(props: Props) {

return (
<div>
<IconButton
aria-controls="icon-menu"
aria-haspopup="true"
onClick={handleClick}
size="large">
<IconButton aria-controls="icon-menu" aria-haspopup="true" onClick={handleClick} size="large">
<MoreVertIcon />
</IconButton>
<Menu id="icon-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
Expand Down
66 changes: 35 additions & 31 deletions website/src/components/Info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,41 @@ interface Props {
children: React.ReactNode;
}

export const Info = observer(class Info extends React.Component<Props> {
anchor?: HTMLElement;
export const Info = observer(
class Info extends React.Component<Props> {
anchor?: HTMLElement;

constructor(props: Props) {
super(props);
constructor(props: Props) {
super(props);

makeObservable(this, {
anchor: observable
});
}
makeObservable(this, {
anchor: observable,
});
}

render() {
return <>
<IconButton onClick={(event) => (this.anchor = event.currentTarget)} size="large">
<InfoIcon />
</IconButton>
<Popover
open={!!this.anchor}
anchorEl={this.anchor}
onClose={() => (this.anchor = undefined)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<div style={{ padding: 16 }}>{this.props.children}</div>
</Popover>
</>;
}
});
render() {
return (
<>
<IconButton onClick={(event) => (this.anchor = event.currentTarget)} size="large">
<InfoIcon />
</IconButton>
<Popover
open={!!this.anchor}
anchorEl={this.anchor}
onClose={() => (this.anchor = undefined)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<div style={{ padding: 16 }}>{this.props.children}</div>
</Popover>
</>
);
}
},
);
Loading

0 comments on commit bec40d0

Please sign in to comment.