Delete local data when logging out.

components/Panels/All.tsx

@@ -160,7 +160,7 @@ const All = () => {
         syncToken={syncToken}
         db={db.current}
       />
-      <LogoutLink />
+      <LogoutLink db={db.current} />
     </Wrapper>
   );
 };

lib/data-utils.ts

@@ -536,6 +536,15 @@ export const deleteAllData = async (db: RxDatabase, syncToken: string) => {
   await remoteDb.erase();
 };
 
+export const deleteLocalData = async (db: RxDatabase) => {
+  await db.events.remove();
+
+  // NOTE: The erase below doesn't work locally, so we need the line above
+  const localDb = new PouchDB(localDbName);
+  // @ts-ignore erase comes from pouchdb-erase
+  await localDb.erase();
+};
+
 type ExportAllData = (
   db: RxDatabase,
 ) => Promise<{

modules/auth/LogoutLink.tsx

@@ -1,22 +1,30 @@
 import { useCallback, useState } from 'react';
 import Swal from 'sweetalert2';
 import styled from 'styled-components';
+import { RxDatabase } from 'rxdb';
 
 import Loading from 'components/Loading';
 import Button from 'components/Button';
 import { doLogout } from 'lib/utils';
+import { deleteLocalData } from 'lib/data-utils';
+
+interface LogoutLinkProps {
+  db: RxDatabase;
+}
 
 const Container = styled.div`
   top: 8px;
   right: 8px;
   position: absolute;
 `;
 
-const LoginButton = () => {
+const LogoutLink = ({ db }: LogoutLinkProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const handleLogout = useCallback(() => {
+  const handleLogout = useCallback(async () => {
     setIsSubmitting(true);
 
+    await deleteLocalData(db);
+
     doLogout();
 
     Swal.fire('Alright!', 'No idea who you are right now.', 'success');
@@ -34,4 +42,4 @@ const LoginButton = () => {
   );
 };
 
-export default LoginButton;
+export default LogoutLink;