Implement journal creation and deletion.

src/Journals/JournalEdit.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+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';
@@ -53,7 +57,7 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
       this.state.info = {...collection};
     } else {
       this.state.info.uid = EteSync.genUid();
-     // FIXME: set the type
+      this.state.info.type = 'ADDRESS_BOOK';
     }
   }
 
@@ -73,13 +77,35 @@ class JournalEdit extends React.PureComponent<PropsTypeInner> {
       },
     };
 
+    const journalTypes = {
+      ADDRESS_BOOK: 'Address Book',
+      CALENDAR: 'Calendar',
+      TASKS: 'Task List',
+    };
+
     return (
       <>
         <AppBarOverride title={pageTitle} />
         <Container style={{maxWidth: 400}}>
           <form onSubmit={this.onSubmit}>
+            <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth} >
+              <InputLabel>
+                Collection type
+              </InputLabel>
+              <Select
+                name="type"
+                required={true}
+                value={this.state.info.type}
+                onChange={this.handleInputChange}
+              >
+                {Object.keys(journalTypes).map((x) => (
+                  <MenuItem key={x} value={x}>{journalTypes[x]}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
             <TextField
               name="displayName"
+              required={true}
               label="Display name of this collection"
               value={this.state.info.displayName}
               onChange={this.handleInputChange}

src/Journals/index.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { Location, History } from 'history';
 import { Route, Switch } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import IconButton from '@material-ui/core/IconButton';
+import IconAdd from '@material-ui/icons/Add';
 
 import Journal from './Journal';
 import JournalEdit from './JournalEdit';
@@ -10,7 +14,7 @@ import AppBarOverride from '../widgets/AppBarOverride';
 import { routeResolver } from '../App';
 
 import { store, JournalsData, UserInfoData, CredentialsData } from '../store';
-import { addJournal, updateJournal } from '../store/actions';
+import { addJournal, deleteJournal, updateJournal } from '../store/actions';
 import { SyncInfo } from '../SyncGate';
 
 import * as EteSync from '../api/EteSync';
@@ -40,7 +44,15 @@ class Journals extends React.PureComponent {
           exact={true}
           render={({ history }) => (
             <>
-              <AppBarOverride title="Journals" />
+              <AppBarOverride title="Journals">
+                <IconButton
+                  component={Link}
+                  title="New"
+                  {...{to: routeResolver.getRoute('journals.new')}}
+                >
+                  <IconAdd />
+                </IconButton>
+              </AppBarOverride>
               <JournalsList
                 userInfo={this.props.userInfo}
                 etesync={this.props.etesync}
@@ -50,6 +62,17 @@ class Journals extends React.PureComponent {
             </>
           )}
         />
+        <Route
+          path={routeResolver.getRoute('journals.new')}
+          render={() => (
+            <JournalEdit
+              syncInfo={this.props.syncInfo}
+              onSave={this.onItemSave}
+              onDelete={this.onItemDelete}
+              onCancel={this.onCancel}
+            />
+          )}
+        />
         <Route
           path={routeResolver.getRoute('journals._id')}
           render={({match}) => {
@@ -112,7 +135,13 @@ class Journals extends React.PureComponent {
   }
 
   onItemDelete(info: EteSync.CollectionInfo) {
-    return;
+    const journal = new EteSync.Journal();
+    const cryptoManager = new EteSync.CryptoManager(this.props.etesync.encryptionKey, info.uid);
+    journal.setInfo(cryptoManager, info);
+
+    store.dispatch<any>(deleteJournal(this.props.etesync, journal)).then(() =>
+      this.props.history.push(routeResolver.getRoute('journals'))
+    );
   }
 
   onCancel() {