Debug: added a debug route to let people easily inspect their journals.

Useful when people are helping with debugging.

src/App.tsx

@@ -96,6 +96,8 @@ export const routeResolver = new RouteResolver({
   },
   settings: {
   },
+  debug: {
+  },
 });
 
 const AppBarWitHistory = withRouter(

src/Debug.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import * as EteSync from 'etesync';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+
+import Container from './widgets/Container';
+import { useSelector } from 'react-redux';
+import { StoreState, CredentialsData, UserInfoData } from './store';
+
+interface PropsType {
+  etesync: CredentialsData;
+  userInfo: UserInfoData;
+}
+
+export default function Debug(props: PropsType) {
+  const [stateJournalUid, setJournalUid] = React.useState('');
+  const [entriesUids, setEntriesUids] = React.useState('');
+  const [result, setResult] = React.useState('');
+  const journals = useSelector((state: StoreState) => state.cache.journals.value)!;
+  const journalEntries = useSelector((state: StoreState) => state.cache.entries);
+
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
+  return (
+    <Container>
+      <div>
+        <TextField
+          style={{ width: '100%' }}
+          type="text"
+          label="Journal UID"
+          value={stateJournalUid}
+          onChange={handleInputChange(setJournalUid)}
+        />
+      </div>
+      <div>
+        <TextField
+          style={{ width: '100%' }}
+          type="text"
+          multiline
+          label="Entry UIDs"
+          value={entriesUids}
+          onChange={handleInputChange(setEntriesUids)}
+        />
+      </div>
+      <Button
+        variant="contained"
+        color="secondary"
+        onClick={() => {
+          const { etesync, userInfo } = props;
+          const derived = etesync.encryptionKey;
+          const userInfoCryptoManager = userInfo.getCryptoManager(etesync.encryptionKey);
+          const keyPair = userInfo.getKeyPair(userInfoCryptoManager);
+          const journalUid = stateJournalUid.trim();
+          const journal = journals.get(journalUid);
+          if (!journal) {
+            setResult('Error: journal uid not found.');
+            return;
+          }
+
+          const wantedEntries = {};
+          entriesUids.split('\n').forEach((ent) => wantedEntries[ent.trim()] = true);
+
+          const cryptoManager = journal.getCryptoManager(derived, keyPair);
+          let prevUid: string | null = null;
+
+          const entries = journalEntries.get(journalUid)!;
+          const syncEntries = entries.value!.map((entry: EteSync.Entry) => {
+            const syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
+            prevUid = entry.uid;
+
+            return (wantedEntries[entry.uid]) ? syncEntry : undefined;
+          }).filter((x) => x !== undefined);
+
+          setResult(syncEntries.map((ent) => ent?.content).join('\n\n'));
+        }}
+      >
+        Decrypt
+      </Button>
+      <div>
+        <p>Result:</p>
+        <pre>{result}</pre>
+      </div>
+    </Container>
+  );
+}

src/SyncGate.tsx

@@ -17,6 +17,7 @@ import PrettyError from './widgets/PrettyError';
 
 import Journals from './Journals';
 import Settings from './Settings';
+import Debug from './Debug';
 import Pim from './Pim';
 
 import * as EteSync from 'etesync';
@@ -233,6 +234,16 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
             />
           )}
         />
+        <Route
+          path={routeResolver.getRoute('debug')}
+          exact
+          render={() => (
+            <Debug
+              etesync={this.props.etesync}
+              userInfo={this.props.userInfo.value!}
+            />
+          )}
+        />
       </Switch>
     );
   }