Journal Import: add an import link to the sidebar

Fixes #55

src/App.tsx

@@ -92,6 +92,7 @@ export const routeResolver = new RouteResolver({
       },
     },
     new: 'new',
+    import: 'import',
   },
   settings: {
   },

src/Journals/JournalsListImport.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import IconButton from '@material-ui/core/IconButton';
+import IconAdd from '@material-ui/icons/Add';
+
+import { List, ListItem } from '../widgets/List';
+
+import AppBarOverride from '../widgets/AppBarOverride';
+import Container from '../widgets/Container';
+
+import { routeResolver } from '../App';
+
+import { JournalsData, UserInfoData, CredentialsData } from '../store';
+import ImportDialog from './ImportDialog';
+import { SyncInfo, SyncInfoJournal } from '../SyncGate';
+
+interface PropsType {
+  etesync: CredentialsData;
+  journals: JournalsData;
+  userInfo: UserInfoData;
+  syncInfo: SyncInfo;
+}
+
+export default function JournalsList(props: PropsType) {
+  const [selectedJournal, setSelectedJournal] = React.useState<SyncInfoJournal>();
+  const derived = props.etesync.encryptionKey;
+
+  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={() => setSelectedJournal(props.syncInfo.get(journal.uid))}>
+          {info.displayName} ({journal.uid.slice(0, 5)})
+        </ListItem>
+      );
+
+      return ret;
+    },
+    { CALENDAR: [],
+      ADDRESS_BOOK: [],
+      TASKS: [],
+    });
+
+  return (
+
+    <Container>
+      <AppBarOverride title="Journals Import">
+        <IconButton
+          component={Link}
+          title="New"
+          {...{ to: routeResolver.getRoute('journals.new') }}
+        >
+          <IconAdd />
+        </IconButton>
+      </AppBarOverride>
+      <List>
+        <ListItem
+          primaryText="Address Books"
+          nestedItems={journalMap.ADDRESS_BOOK}
+        />
+
+        <ListItem
+          primaryText="Calendars"
+          nestedItems={journalMap.CALENDAR}
+        />
+
+        <ListItem
+          primaryText="Tasks"
+          nestedItems={journalMap.TASKS}
+        />
+      </List>
+      {selectedJournal && (
+        <ImportDialog
+          etesync={props.etesync}
+          userInfo={props.userInfo}
+          syncJournal={selectedJournal}
+          open={!!selectedJournal}
+          onClose={() => setSelectedJournal(undefined)}
+        />
+      )}
+    </Container>
+  );
+}

src/Journals/index.tsx

@@ -6,6 +6,7 @@ import Journal from './Journal';
 import JournalEdit from './JournalEdit';
 import JournalMembers from './JournalMembers';
 import JournalsList from './JournalsList';
+import JournalsListImport from './JournalsListImport';
 
 import { routeResolver } from '../App';
 
@@ -49,6 +50,21 @@ class Journals extends React.PureComponent {
             </>
           )}
         />
+        <Route
+          path={routeResolver.getRoute('journals.import')}
+          exact
+          render={({ history }) => (
+            <>
+              <JournalsListImport
+                userInfo={this.props.userInfo}
+                etesync={this.props.etesync}
+                journals={this.props.journals}
+                history={history}
+                syncInfo={this.props.syncInfo}
+              />
+            </>
+          )}
+        />
         <Route
           path={routeResolver.getRoute('journals.new')}
           render={() => (

src/SideMenu/index.tsx

@@ -10,6 +10,7 @@ import ActionJournals from '@material-ui/icons/LibraryBooks';
 import ActionBugReport from '@material-ui/icons/BugReport';
 import ActionQuestionAnswer from '@material-ui/icons/QuestionAnswer';
 import LogoutIcon from '@material-ui/icons/PowerSettingsNew';
+import IconImport from '@material-ui/icons/ImportExport';
 
 import logo from '../images/logo.svg';
 
@@ -60,6 +61,14 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
               this.props.history.push(routeResolver.getRoute('journals'));
             }}
           />
+          <ListItem
+            primaryText="Import"
+            leftIcon={<IconImport />}
+            onClick={() => {
+              this.props.onCloseDrawerRequest();
+              this.props.history.push(routeResolver.getRoute('journals.import'));
+            }}
+          />
           <ListItem
             primaryText="Settings"
             leftIcon={<ActionSettings />}