JournalEntries: change to be a function component.

src/components/JournalEntries.tsx

@@ -121,35 +121,24 @@ function RollbackToHereDialog(props: RollbackToHereDialogPropsType) {
   );
 }
 
-class JournalEntries extends React.PureComponent {
+interface PropsType {
-  public static defaultProps = {
-    prevUid: null,
-  };
-
-  public state: {
-    dialog?: EteSync.SyncEntry;
-    rollbackDialogId?: string;
-  };
-
-  public props: {
   journal: EteSync.Journal;
   entries: Immutable.List<EteSync.SyncEntry>;
   uid?: string;
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.state = {};
 }
 
-  public render() {
+export default function JournalEntries(props: PropsType) {
-    if (this.props.journal === undefined) {
+  const [dialog, setDialog] = React.useState<EteSync.SyncEntry>();
+  const [rollbackDialogId, setRollbackDialogId] = React.useState<string>();
+
+  if (props.journal === undefined) {
     return (<div>Loading</div>);
   }
 
   const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => {
     const { key, index, style } = params;
-      const syncEntry = this.props.entries.get(this.props.entries.size - index - 1)!;
+    // eslint-disable-next-line react/prop-types
+    const syncEntry = props.entries.get(props.entries.size - index - 1)!;
     let comp;
     try {
       comp = parseString(syncEntry.content);
@@ -162,11 +151,7 @@ class JournalEntries extends React.PureComponent {
           leftIcon={icon}
           primaryText="Failed parsing item"
           secondaryText="Unknown"
-            onClick={() => {
+          onClick={() => setDialog(syncEntry)}
-              this.setState({
-                dialog: syncEntry,
-              });
-            }}
         />
       );
     }
@@ -201,7 +186,8 @@ class JournalEntries extends React.PureComponent {
       uid = "";
     }
 
-      if (this.props.uid && (this.props.uid !== uid)) {
+    // eslint-disable-next-line react/prop-types
+    if (props.uid && (props.uid !== uid)) {
       return undefined;
     }
 
@@ -212,11 +198,7 @@ class JournalEntries extends React.PureComponent {
         leftIcon={icon}
         primaryText={name}
         secondaryText={uid}
-          onClick={() => {
+        onClick={() => setDialog(syncEntry)}
-            this.setState({
-              dialog: syncEntry,
-            });
-          }}
       />
     );
   };
@@ -224,42 +206,38 @@ class JournalEntries extends React.PureComponent {
   return (
     <div>
       <RollbackToHereDialog
-          journal={this.props.journal}
+        journal={props.journal}
-          entries={this.props.entries}
+        entries={props.entries}
-          entryUid={this.state.rollbackDialogId!}
+        entryUid={rollbackDialogId!}
-          open={!!this.state.rollbackDialogId}
+        open={!!rollbackDialogId}
-          onClose={() => this.setState({ rollbackDialogId: undefined })}
+        onClose={() => setRollbackDialogId(undefined)}
       />
       <Dialog
-          open={this.state.dialog !== undefined}
+        open={dialog !== undefined}
-          onClose={() => {
+        onClose={() => setDialog(undefined)}
-            this.setState({ dialog: undefined });
-          }}
       >
         <DialogTitle>
           Raw Content
         </DialogTitle>
         <DialogContent>
-            <div>Entry UID: <pre className="d-inline-block">{this.state.dialog?.uid}</pre></div>
+          <div>Entry UID: <pre className="d-inline-block">{dialog?.uid}</pre></div>
           <div>Content:
-              <pre>{this.state.dialog?.content}</pre>
+            <pre>{dialog?.content}</pre>
           </div>
         </DialogContent>
         <DialogActions>
           <Button
             color="primary"
-              onClick={() => this.setState({
+            onClick={() => {
-                dialog: undefined,
+              setDialog(undefined);
-                rollbackDialogId: this.state.dialog?.uid,
+              setRollbackDialogId(dialog?.uid);
-              })}
+            }}
           >
             Recover items until here
           </Button>
           <Button
             color="primary"
-              onClick={() => {
+            onClick={() => setDialog(undefined)}
-                this.setState({ dialog: undefined });
-              }}
           >
             Close
           </Button>
@@ -271,7 +249,7 @@ class JournalEntries extends React.PureComponent {
             <VirtualizedList
               width={width}
               height={height}
-                rowCount={this.props.entries.size}
+              rowCount={props.entries.size}
               rowHeight={56}
               rowRenderer={rowRenderer}
             />
@@ -281,6 +259,3 @@ class JournalEntries extends React.PureComponent {
     </div>
   );
 }
-}
-
-export default JournalEntries;