JournalEdit: change to react-hooks.

src/Journals/JournalEdit.tsx

@@ -5,7 +5,6 @@ import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
-import { Theme, withTheme } from '@material-ui/core/styles';
 import IconDelete from '@material-ui/icons/Delete';
 import IconCancel from '@material-ui/icons/Clear';
 import IconSave from '@material-ui/icons/Save';
@@ -17,7 +16,6 @@ import ConfirmationDialog from '../widgets/ConfirmationDialog';
 
 import * as EteSync from 'etesync';
 import { SyncInfo } from '../SyncGate';
-import { handleInputChange } from '../helpers';
 
 interface PropsType {
   syncInfo: SyncInfo;
@@ -27,42 +25,41 @@ interface PropsType {
   onCancel: () => void;
 }
 
-interface PropsTypeInner extends PropsType {
+export default function JournalEdit(props: PropsType) {
-  theme: Theme;
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
-}
+  const [info, setInfo] = React.useState<EteSync.CollectionInfo>();
 
-class JournalEdit extends React.PureComponent<PropsTypeInner> {
+  React.useEffect(() => {
-  public state = {
+    if (props.item !== undefined) {
-    info: {
+      setInfo(props.item);
-      uid: '',
+    } else {
-      type: '',
+      setInfo({
+        uid: EteSync.genUid(),
+        type: 'ADDRESS_BOOK',
         displayName: '',
         description: '',
-    } as EteSync.CollectionInfo,
+      } as EteSync.CollectionInfo);
-
+    }
-    showDeleteDialog: false,
+  }, [props.item]);
-  };
 
-  private handleInputChange: any;
+  if (info === undefined) {
+    return <React.Fragment />;
+  }
 
-  constructor(props: PropsTypeInner) {
+  function onSubmit(e: React.FormEvent<any>) {
-    super(props);
+    e.preventDefault();
-    this.handleInputChange = handleInputChange(this, 'info');
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onDeleteRequest = this.onDeleteRequest.bind(this);
 
-    if (this.props.item !== undefined) {
+    const { onSave } = props;
-      const collection = this.props.item;
+    const item = new EteSync.CollectionInfo(info);
 
-      this.state.info = { ...collection };
+    onSave(item, props.item);
-    } else {
-      this.state.info.uid = EteSync.genUid();
-      this.state.info.type = 'ADDRESS_BOOK';
   }
+
+  function onDeleteRequest() {
+    setShowDeleteDialog(true);
   }
 
-  public render() {
+  const { item, onDelete, onCancel } = props;
-    const { item, onDelete, onCancel } = this.props;
 
   const pageTitle = (item !== undefined) ? item.displayName : 'New Journal';
 
@@ -87,16 +84,16 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
     <>
       <AppBarOverride title={pageTitle} />
       <Container style={{ maxWidth: '30rem' }}>
-          <form onSubmit={this.onSubmit}>
+        <form onSubmit={onSubmit}>
-            <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
+          <FormControl disabled={props.item !== undefined} style={styles.fullWidth}>
             <InputLabel>
               Collection type
             </InputLabel>
             <Select
               name="type"
               required
-                value={this.state.info.type}
+              value={info.type}
-                onChange={this.handleInputChange}
+              onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, type: event.target.value })}
             >
               {Object.keys(journalTypes).map((x) => (
                 <MenuItem key={x} value={x}>{journalTypes[x]}</MenuItem>
@@ -107,16 +104,16 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
             name="displayName"
             required
             label="Display name of this collection"
-              value={this.state.info.displayName}
+            value={info.displayName}
-              onChange={this.handleInputChange}
+            onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, displayName: event.target.value })}
             style={styles.fullWidth}
             margin="normal"
           />
           <TextField
             name="description"
             label="Description (optional)"
-              value={this.state.info.description}
+            value={info.description}
-              onChange={this.handleInputChange}
+            onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, description: event.target.value })}
             style={styles.fullWidth}
             margin="normal"
           />
@@ -130,11 +127,11 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
               Cancel
             </Button>
 
-              {this.props.item &&
+            {props.item &&
               <Button
                 variant="contained"
                 style={{ marginLeft: 15, backgroundColor: colors.red[500], color: 'white' }}
-                  onClick={this.onDeleteRequest}
+                onClick={onDeleteRequest}
               >
                 <IconDelete style={{ marginRight: 8 }} />
                 Delete
@@ -156,31 +153,12 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
       <ConfirmationDialog
         title="Delete Confirmation"
         labelOk="Delete"
-          open={this.state.showDeleteDialog}
+        open={showDeleteDialog}
-          onOk={() => onDelete(this.props.item!)}
+        onOk={() => onDelete(props.item!)}
-          onCancel={() => this.setState({ showDeleteDialog: false })}
+        onCancel={() => setShowDeleteDialog(false)}
       >
         Are you sure you would like to delete this journal?
       </ConfirmationDialog>
     </>
   );
-  }
-
-  private onSubmit(e: React.FormEvent<any>) {
-    e.preventDefault();
-
-    const { onSave } = this.props;
-    const item = new EteSync.CollectionInfo(this.state.info);
-
-    onSave(item, this.props.item);
-  }
-
-  private onDeleteRequest() {
-    this.setState({
-      showDeleteDialog: true,
-    });
-  }
-
 }
-
-export default withTheme(JournalEdit);