JournalsList: change to a functional component

src/Journals/JournalsList.tsx

@@ -15,75 +15,67 @@ import { routeResolver } from '../App';
 
 import { JournalsData, UserInfoData, CredentialsData } from '../store';
 
-class JournalsList extends React.PureComponent {
-  public props: {
-    etesync: CredentialsData;
-    journals: JournalsData;
-    userInfo: UserInfoData;
-    history: History;
-  };
+interface PropsType {
+  etesync: CredentialsData;
+  journals: JournalsData;
+  userInfo: UserInfoData;
+  history: History;
+}
 
-  constructor(props: any) {
-    super(props);
-    this.journalClicked = this.journalClicked.bind(this);
-  }
+export default function JournalsList(props: PropsType) {
+  const derived = props.etesync.encryptionKey;
 
-  public render() {
-    const derived = this.props.etesync.encryptionKey;
-    const journalMap = this.props.journals.reduce(
-      (ret, journal) => {
-        const userInfo = this.props.userInfo;
-        const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
-        const cryptoManager = journal.getCryptoManager(derived, keyPair);
-        const info = journal.getInfo(cryptoManager);
-        ret[info.type] = ret[info.type] || [];
-        ret[info.type].push(
-          <ListItem key={journal.uid} onClick={() => this.journalClicked(journal.uid)}>
-            {info.displayName} ({journal.uid.slice(0, 5)})
-          </ListItem>
-        );
+  function journalClicked(journalUid: string) {
+    props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
+  }
 
-        return ret;
-      },
-      { CALENDAR: [],
-        ADDRESS_BOOK: [],
-        TASKS: [],
-      });
+  const journalMap = props.journals.reduce(
+    (ret, journal) => {
+      const userInfo = props.userInfo;
+      const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
+      const cryptoManager = journal.getCryptoManager(derived, keyPair);
+      const info = journal.getInfo(cryptoManager);
+      ret[info.type] = ret[info.type] || [];
+      ret[info.type].push(
+        <ListItem key={journal.uid} onClick={() => journalClicked(journal.uid)}>
+          {info.displayName} ({journal.uid.slice(0, 5)})
+        </ListItem>
+      );
 
-    return (
-      <Container>
-        <AppBarOverride title="Journals">
-          <IconButton
-            component={Link}
-            title="New"
-            {...{ to: routeResolver.getRoute('journals.new') }}
-          >
-            <IconAdd />
-          </IconButton>
-        </AppBarOverride>
-        <List>
-          <ListItem
-            primaryText="Address Books"
-            nestedItems={journalMap.ADDRESS_BOOK}
-          />
+      return ret;
+    },
+    { CALENDAR: [],
+      ADDRESS_BOOK: [],
+      TASKS: [],
+    });
 
-          <ListItem
-            primaryText="Calendars"
-            nestedItems={journalMap.CALENDAR}
-          />
+  return (
+    <Container>
+      <AppBarOverride title="Journals">
+        <IconButton
+          component={Link}
+          title="New"
+          {...{ to: routeResolver.getRoute('journals.new') }}
+        >
+          <IconAdd />
+        </IconButton>
+      </AppBarOverride>
+      <List>
+        <ListItem
+          primaryText="Address Books"
+          nestedItems={journalMap.ADDRESS_BOOK}
+        />
 
-          <ListItem
-            primaryText="Tasks"
-            nestedItems={journalMap.TASKS}
-          />
-        </List>
-      </Container>
-    );
-  }
-
-  private journalClicked(journalUid: string) {
-    this.props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
-  }
-}
+        <ListItem
+          primaryText="Calendars"
+          nestedItems={journalMap.CALENDAR}
+        />
 
-export default JournalsList;
+        <ListItem
+          primaryText="Tasks"
+          nestedItems={journalMap.TASKS}
+        />
+      </List>
+    </Container>
+  );
+}