From 73ba29efe58f410220b034e2ab91f54009c79a3a Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Thu, 19 Apr 2018 21:12:00 +0200
Subject: [PATCH] Typescriptify Clients-Component

---
 ui/src/pages/Clients.js                 | 146 ------------------------
 ui/src/pages/Clients.tsx                |  96 ++++++++++++++++
 ui/src/pages/dialog/AddClientDialog.tsx |  49 ++++++++
 3 files changed, 145 insertions(+), 146 deletions(-)
 delete mode 100644 ui/src/pages/Clients.js
 create mode 100644 ui/src/pages/Clients.tsx
 create mode 100644 ui/src/pages/dialog/AddClientDialog.tsx

diff --git a/ui/src/pages/Clients.js b/ui/src/pages/Clients.js
deleted file mode 100644
index 0082d81..0000000
--- a/ui/src/pages/Clients.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, {Component} from 'react';
-import Grid from 'material-ui/Grid';
-import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
-import Paper from 'material-ui/Paper';
-import Button from 'material-ui/Button';
-import IconButton from 'material-ui/IconButton';
-import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
-import TextField from 'material-ui/TextField';
-import Tooltip from 'material-ui/Tooltip';
-import ClientStore from '../stores/ClientStore';
-import ToggleVisibility from '../component/ToggleVisibility';
-import * as ClientAction from '../actions/ClientAction';
-import DefaultPage from '../component/DefaultPage';
-import ConfirmDialog from '../component/ConfirmDialog';
-import PropTypes from 'prop-types';
-import Delete from 'material-ui-icons/Delete';
-
-class Clients extends Component {
-    constructor() {
-        super();
-        this.state = {clients: [], showDialog: false, deleteId: -1};
-    }
-
-    componentWillMount() {
-        ClientStore.on('change', this.updateClients);
-        this.updateClients();
-    }
-
-    componentWillUnmount() {
-        ClientStore.removeListener('change', this.updateClients);
-    }
-
-    updateClients = () => this.setState({...this.state, clients: ClientStore.get()});
-
-    showCreateDialog = () => this.setState({...this.state, showDialog: true});
-    hideCreateDialog = () => this.setState({...this.state, showDialog: false});
-
-    showDeleteDialog = (deleteId) => this.setState({...this.state, deleteId});
-    hideDeleteDelete = () => this.setState({...this.state, deleteId: -1});
-
-    render() {
-        const {clients, deleteId, showDialog} = this.state;
-        return (
-            <DefaultPage title="Clients" buttonTitle="Create Client" fButton={this.showCreateDialog}>
-                <Grid item xs={12}>
-                    <Paper elevation={6}>
-                        <Table>
-                            <TableHead>
-                                <TableRow style={{textAlign: 'center'}}>
-                                    <TableCell>Name</TableCell>
-                                    <TableCell style={{width: 200}}>token</TableCell>
-                                    <TableCell/>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {clients.map((client) => {
-                                    return (
-                                        <Row key={client.id} name={client.name}
-                                             value={client.token} fDelete={() => this.showDeleteDialog(client.id)}/>
-                                    );
-                                })}
-                            </TableBody>
-                        </Table>
-                    </Paper>
-                </Grid>
-                {showDialog && <AddDialog fClose={this.hideCreateDialog} fOnSubmit={ClientAction.createClient}/>}
-                {deleteId !== -1 && <ConfirmDialog title="Confirm Delete"
-                                                   text={'Delete ' + ClientStore.getById(this.state.deleteId).name + '?'}
-                                                   fClose={this.hideDeleteDelete}
-                                                   fOnSubmit={() => ClientAction.deleteClient(deleteId)}/>}
-            </DefaultPage>
-        );
-    }
-}
-
-class Row extends Component {
-    static propTypes = {
-        name: PropTypes.string.isRequired,
-        value: PropTypes.string.isRequired,
-        fDelete: PropTypes.func.isRequired,
-    };
-
-    render() {
-        const {name, value, fDelete} = this.props;
-        return (
-            <TableRow>
-                <TableCell>{name}</TableCell>
-                <TableCell>
-                    <ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center', width: 200}}/>
-                </TableCell>
-                <TableCell numeric padding="none">
-                    <IconButton onClick={fDelete}><Delete/></IconButton>
-                </TableCell>
-            </TableRow>
-        );
-    }
-}
-
-class AddDialog extends Component {
-    static propTypes = {
-        fClose: PropTypes.func.isRequired,
-        fOnSubmit: PropTypes.func.isRequired,
-    };
-
-    constructor() {
-        super();
-        this.state = {name: ''};
-    }
-
-    handleChange(propertyName, event) {
-        const state = this.state;
-        state[propertyName] = event.target.value;
-        this.setState(state);
-    }
-
-    render() {
-        const {fClose, fOnSubmit} = this.props;
-        const {name} = this.state;
-        const submitEnabled = this.state.name.length !== 0;
-        const submitAndClose = () => {
-            fOnSubmit(name);
-            fClose();
-        };
-        return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
-                <DialogTitle id="form-dialog-title">Create a client</DialogTitle>
-                <DialogContent>
-                    <TextField autoFocus margin="dense" id="name" label="Name *" type="email" value={name}
-                               onChange={this.handleChange.bind(this, 'name')} fullWidth/>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={fClose}>Cancel</Button>
-                    <Tooltip placement={'bottom-start'} title={submitEnabled ? '' : 'name is required'}>
-                        <div>
-                            <Button disabled={!submitEnabled} onClick={submitAndClose} color="primary" variant="raised">
-                                Create
-                            </Button>
-                        </div>
-                    </Tooltip>
-                </DialogActions>
-            </Dialog>
-        );
-    }
-}
-
-export default Clients;
diff --git a/ui/src/pages/Clients.tsx b/ui/src/pages/Clients.tsx
new file mode 100644
index 0000000..d8a0ed4
--- /dev/null
+++ b/ui/src/pages/Clients.tsx
@@ -0,0 +1,96 @@
+import Delete from 'material-ui-icons/Delete';
+import Grid from 'material-ui/Grid';
+import IconButton from 'material-ui/IconButton';
+import Paper from 'material-ui/Paper';
+import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
+import React, {Component, SFC} from 'react';
+import * as ClientAction from '../actions/ClientAction';
+import ConfirmDialog from '../component/ConfirmDialog';
+import DefaultPage from '../component/DefaultPage';
+import ToggleVisibility from '../component/ToggleVisibility';
+import ClientStore from '../stores/ClientStore';
+import AddClientDialog from './dialog/AddClientDialog';
+
+interface IState {
+    clients: IClient[]
+    showDialog: boolean
+    deleteId: number
+}
+
+class Clients extends Component<{}, IState> {
+    public state = {clients: [], showDialog: false, deleteId: -1};
+
+    public componentWillMount() {
+        ClientStore.on('change', this.updateClients);
+        this.updateClients();
+    }
+
+    public componentWillUnmount() {
+        ClientStore.removeListener('change', this.updateClients);
+    }
+
+    public render() {
+        const {clients, deleteId, showDialog} = this.state;
+        return (
+            <DefaultPage title="Clients" buttonTitle="Create Client" fButton={this.showCreateDialog}>
+                <Grid item xs={12}>
+                    <Paper elevation={6}>
+                        <Table>
+                            <TableHead>
+                                <TableRow style={{textAlign: 'center'}}>
+                                    <TableCell>Name</TableCell>
+                                    <TableCell style={{width: 200}}>token</TableCell>
+                                    <TableCell/>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {clients.map((client: IClient) => {
+                                    return (
+                                        <Row key={client.id} name={client.name}
+                                             value={client.token} fDelete={() => this.showDeleteDialog(client.id)}/>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </Paper>
+                </Grid>
+                {showDialog && <AddClientDialog fClose={this.hideCreateDialog} fOnSubmit={ClientAction.createClient}/>}
+                {deleteId !== -1 && <ConfirmDialog title="Confirm Delete"
+                                                   text={'Delete ' + ClientStore.getById(this.state.deleteId).name + '?'}
+                                                   fClose={this.hideDeleteDelete}
+                                                   fOnSubmit={this.deleteClient}/>}
+            </DefaultPage>
+        );
+    }
+
+    private deleteClient = () => ClientAction.deleteClient(this.state.deleteId);
+
+    private updateClients = () => this.setState({...this.state, clients: ClientStore.get()});
+    private showCreateDialog = () => this.setState({...this.state, showDialog: true});
+
+    private hideCreateDialog = () => this.setState({...this.state, showDialog: false});
+    private showDeleteDialog = (deleteId: number) => this.setState({...this.state, deleteId});
+
+    private hideDeleteDelete = () => this.setState({...this.state, deleteId: -1});
+}
+
+interface IRowProps {
+    name: string
+    value: string
+    fDelete: VoidFunction
+}
+
+const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
+    <TableRow>
+        <TableCell>{name}</TableCell>
+        <TableCell>
+            <ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center', width: 200}}/>
+        </TableCell>
+        <TableCell numeric padding="none">
+            <IconButton onClick={fDelete}><Delete/></IconButton>
+        </TableCell>
+    </TableRow>
+);
+
+
+export default Clients;
diff --git a/ui/src/pages/dialog/AddClientDialog.tsx b/ui/src/pages/dialog/AddClientDialog.tsx
new file mode 100644
index 0000000..3703fef
--- /dev/null
+++ b/ui/src/pages/dialog/AddClientDialog.tsx
@@ -0,0 +1,49 @@
+import Button from 'material-ui/Button';
+import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
+import TextField from 'material-ui/TextField';
+import Tooltip from 'material-ui/Tooltip';
+import React, {Component} from 'react';
+
+interface IProps {
+    fClose: VoidFunction
+    fOnSubmit: (name: string) => void
+}
+
+export default class AddDialog extends Component<IProps, { name: string }> {
+    public state = {name: ''};
+
+    public render() {
+        const {fClose, fOnSubmit} = this.props;
+        const {name} = this.state;
+        const submitEnabled = this.state.name.length !== 0;
+        const submitAndClose = () => {
+            fOnSubmit(name);
+            fClose();
+        };
+        return (
+            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+                <DialogTitle id="form-dialog-title">Create a client</DialogTitle>
+                <DialogContent>
+                    <TextField autoFocus margin="dense" id="name" label="Name *" type="email" value={name}
+                               onChange={this.handleChange.bind(this, 'name')} fullWidth/>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={fClose}>Cancel</Button>
+                    <Tooltip placement={'bottom-start'} title={submitEnabled ? '' : 'name is required'}>
+                        <div>
+                            <Button disabled={!submitEnabled} onClick={submitAndClose} color="primary" variant="raised">
+                                Create
+                            </Button>
+                        </div>
+                    </Tooltip>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+
+    private handleChange(propertyName: string, event: React.ChangeEvent<HTMLInputElement>) {
+        const state = this.state;
+        state[propertyName] = event.target.value;
+        this.setState(state);
+    }
+}
\ No newline at end of file