ran prettier

halkeye · Dec 10, 2019 · b13b7db · b13b7db
1 parent 684c9ca
commit b13b7db
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 80 deletions.
diff --git a/website/package.json b/website/package.json
@@ -24,7 +24,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier": "prettier ./src/**/*.{ts,tsx} --write"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/website/src/components/AddDevice.tsx b/website/src/components/AddDevice.tsx
@@ -19,7 +19,6 @@ import { GetConnected } from './GetConnected';
 import { IDevice, AppState } from '../Store';
 
 class AddDevice extends React.Component {
-
   state = {
     name: '',
     open: false,
@@ -31,8 +30,8 @@ class AddDevice extends React.Component {
   onAdd = async (event: React.FormEvent) => {
     event.preventDefault();
     const keypair = box_keyPair();
-    const b64PublicKey = window.btoa(String.fromCharCode(...new Uint8Array(keypair.publicKey) as any));
-    const b64PrivateKey = window.btoa(String.fromCharCode(...new Uint8Array(keypair.secretKey) as any));
+    const b64PublicKey = window.btoa(String.fromCharCode(...(new Uint8Array(keypair.publicKey) as any)));
+    const b64PrivateKey = window.btoa(String.fromCharCode(...(new Uint8Array(keypair.secretKey) as any)));
 
     const res = await fetch('/api/devices', {
       method: 'POST',
@@ -45,7 +44,7 @@ class AddDevice extends React.Component {
       this.setState({ error: await res.text() });
       return;
     }
-    const { device } = await res.json() as { device: IDevice };
+    const { device } = (await res.json()) as { device: IDevice };
 
     AppState.devices.push(device);
 
@@ -66,47 +65,32 @@ class AddDevice extends React.Component {
       qrCodeUri: await qrcode.toDataURL(configFile),
       configFileUri: URL.createObjectURL(new Blob([configFile])),
     });
-  }
+  };
 
   render() {
     return (
       <form onSubmit={this.onAdd}>
         <Card>
-          <CardHeader
-            title="Add a device"
-          />
+          <CardHeader title="Add a device" />
           <CardContent>
             <TextField
               label="Device Name"
               error={this.state.error !== ''}
               value={this.state.name}
-              onChange={(event) => this.setState({ name: event.currentTarget.value })}
+              onChange={event => this.setState({ name: event.currentTarget.value })}
               style={{ marginTop: -20, marginBottom: 8 }}
               fullWidth
             />
             {this.state.error !== '' && <FormHelperText>{this.state.error}</FormHelperText>}
           </CardContent>
           <CardActions>
-            <Button
-              color="primary"
-              variant="contained"
-              endIcon={<AddIcon />}
-              type="submit"
-            >
+            <Button color="primary" variant="contained" endIcon={<AddIcon />} type="submit">
               Add
             </Button>
-            <Dialog
-              disableBackdropClick
-              disableEscapeKeyDown
-              maxWidth="xl"
-              open={this.state.open}
-            >
+            <Dialog disableBackdropClick disableEscapeKeyDown maxWidth="xl" open={this.state.open}>
               <DialogTitle>Get Connected</DialogTitle>
               <DialogContent>
-                <GetConnected
-                  qrCodeUri={this.state.qrCodeUri}
-                  configFileUri={this.state.configFileUri}
-                />
+                <GetConnected qrCodeUri={this.state.qrCodeUri} configFileUri={this.state.configFileUri} />
               </DialogContent>
               <DialogActions>
                 <Button color="secondary" variant="outlined" onClick={() => this.setState({ open: false })}>

diff --git a/website/src/components/Device.tsx b/website/src/components/Device.tsx
@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
 import DonutSmallIcon from '@material-ui/icons/DonutSmall';
 import MenuItem from '@material-ui/core/MenuItem';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import { view } from 'react-easy-state';
 import { IDevice, AppState } from '../Store';
 import { IconMenu } from './IconMenu';
@@ -17,7 +17,6 @@ interface Props {
 }
 
 class Device extends React.Component<Props> {
-
   dateString(date: Date) {
     if (date.getUTCMilliseconds() === 0) {
       return 'never';
@@ -34,28 +33,32 @@ class Device extends React.Component<Props> {
     } else {
       window.alert(await res.text());
     }
-  }
+  };
 
   render() {
     const device = this.props.device;
     return (
       <Card>
         <CardHeader
           title={device.name}
-          avatar={<Avatar><DonutSmallIcon /></Avatar>}
+          avatar={
+            <Avatar>
+              <DonutSmallIcon />
+            </Avatar>
+          }
           action={
             <IconMenu>
-              <MenuItem style={{ color: 'red' }} onClick={this.removeDevice}>Delete</MenuItem>
+              <MenuItem style={{ color: 'red' }} onClick={this.removeDevice}>
+                Delete
+              </MenuItem>
             </IconMenu>
           }
         />
         <CardContent>
           <Typography component="p">
             Public Key: <PopoverDisplay label="show">{device.publicKey}</PopoverDisplay>
           </Typography>
-          <Typography component="p">
-            Endpoint: {device.endpoint}
-          </Typography>
+          <Typography component="p">Endpoint: {device.endpoint}</Typography>
         </CardContent>
       </Card>
     );

diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
@@ -6,7 +6,6 @@ import Device from './Device';
 import AddDevice from './AddDevice';
 
 class Devices extends React.Component {
-
   componentDidMount() {
     this.load();
   }
@@ -26,11 +25,11 @@ class Devices extends React.Component {
         <Grid item xs={12} sm={6}>
           <AddDevice />
         </Grid>
-        {AppState.devices.map((device, i) =>
+        {AppState.devices.map((device, i) => (
           <Grid key={i} item xs={12} sm={6}>
             <Device device={device} />
           </Grid>
-        )}
+        ))}
       </Grid>
     );
   }

diff --git a/website/src/components/DownloadConfig.tsx b/website/src/components/DownloadConfig.tsx
@@ -7,7 +7,6 @@ interface Props {
 }
 
 export class DownloadConfig extends React.Component<Props> {
-
   downloadConfig = () => {
     console.log('downloading config file', this.props.configFileUri);
     const anchor = document.createElement('a');
@@ -17,7 +16,7 @@ export class DownloadConfig extends React.Component<Props> {
     document.body.appendChild(anchor);
     anchor.click();
     document.body.removeChild(anchor);
-  }
+  };
 
   render() {
     return (

diff --git a/website/src/components/DownloadLink.tsx b/website/src/components/DownloadLink.tsx
@@ -10,17 +10,8 @@ interface Props {
 export class DownloadLink extends React.Component<Props> {
   render() {
     return (
-      <a
-        href={this.props.href}
-        target="__blank"
-        rel="noopener noreferrer"
-      >
-        <Fab
-          variant="extended"
-          size="small"
-          color="primary"
-          style={{ padding: 30, borderRadius: 60 }}
-        >
+      <a href={this.props.href} target="__blank" rel="noopener noreferrer">
+        <Fab variant="extended" size="small" color="primary" style={{ padding: 30, borderRadius: 60 }}>
           <span>{this.props.label}</span>
           <span style={{ marginLeft: 15 }}>{this.props.icon}</span>
         </Fab>

diff --git a/website/src/components/GetConnected.tsx b/website/src/components/GetConnected.tsx
@@ -19,10 +19,9 @@ interface Props {
 }
 
 export class GetConnected extends React.Component<Props> {
-
   state = {
     platform: getPlatform(),
-  }
+  };
 
   render() {
     return (
@@ -152,7 +151,8 @@ export class GetConnected extends React.Component<Props> {
           <Typography style={{ fontStyle: 'italic', maxWidth: 600 }}>
             The VPN configuration file or QR code will not be available again.
             <br />
-            If you lose your connection settings or reset your device, you can remove and re-add it to generate a new connection file or QR code.
+            If you lose your connection settings or reset your device, you can remove and re-add it to generate a new
+            connection file or QR code.
             <br />
             They contain your WireGuard Private Key and should never be shared.
           </Typography>

diff --git a/website/src/components/IconMenu.tsx b/website/src/components/IconMenu.tsx
@@ -23,13 +23,7 @@ export function IconMenu(props: Props) {
       <IconButton aria-controls="icon-menu" aria-haspopup="true" onClick={handleClick}>
         <MoreVertIcon />
       </IconButton>
-      <Menu
-        id="icon-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-      >
+      <Menu id="icon-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
         <div onClick={handleClose}>{props.children}</div>
       </Menu>
     </div>