JournalsList: change to a functional component

src/Journals/JournalsList.tsx

@@ -15,30 +15,29 @@ import { routeResolver } from '../App';
 
 import { JournalsData, UserInfoData, CredentialsData } from '../store';
 
-class JournalsList extends React.PureComponent {
+interface PropsType {
-  public props: {
   etesync: CredentialsData;
   journals: JournalsData;
   userInfo: UserInfoData;
   history: History;
-  };
+}
+
+export default function JournalsList(props: PropsType) {
+  const derived = props.etesync.encryptionKey;
 
-  constructor(props: any) {
+  function journalClicked(journalUid: string) {
-    super(props);
+    props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
-    this.journalClicked = this.journalClicked.bind(this);
   }
 
-  public render() {
+  const journalMap = props.journals.reduce(
-    const derived = this.props.etesync.encryptionKey;
-    const journalMap = this.props.journals.reduce(
     (ret, journal) => {
-        const userInfo = this.props.userInfo;
+      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={() => this.journalClicked(journal.uid)}>
+        <ListItem key={journal.uid} onClick={() => journalClicked(journal.uid)}>
           {info.displayName} ({journal.uid.slice(0, 5)})
         </ListItem>
       );
@@ -79,11 +78,4 @@ class JournalsList extends React.PureComponent {
       </List>
     </Container>
   );
-  }
-
-  private journalClicked(journalUid: string) {
-    this.props.history.push(routeResolver.getRoute('journals._id', { journalUid }));
-  }
 }
-
-export default JournalsList;