move about settings to new sdk

src/app/features/settings/about/About.tsx

@@ -5,14 +5,19 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import CinnySVG from '../../../../../public/res/svg/cinny.svg';
-import { clearCacheAndReload } from '../../../../client/initMatrix';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { clearNavToActivePathStore } from '../../../state/navToActivePath';
+import { useClient } from '../../../hooks/useClient';
 
 type AboutProps = {
   requestClose: () => void;
 };
 export function About({ requestClose }: AboutProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+
+  const handleClearCache = () => {
+    clearNavToActivePathStore(ct.session.userId);
+    ct.clearCacheAndReload();
+  };
 
   return (
     <Page>
@@ -94,7 +99,7 @@ export function About({ requestClose }: AboutProps) {
                     description="Clear all your locally stored data and reload from server."
                     after={
                       <Button
-                        onClick={() => clearCacheAndReload(mx)}
+                        onClick={handleClearCache}
                         variant="Secondary"
                         fill="Soft"
                         size="300"

src/app/state/navToActivePath.ts

@@ -24,7 +24,7 @@ type NavToActivePathAction =
       navId: string;
     };
 
-export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], undefined>;
+export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], void>;
 
 export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom => {
   const storeKey = getStoreKey(userId);
@@ -41,7 +41,7 @@ export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom =>
     }
   );
 
-  const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], undefined>(
+  const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], void>(
     (get) => get(baseNavToActivePathAtom),
     (get, set, action) => {
       if (action.type === 'DELETE') {

src/client/context.ts

@@ -106,6 +106,7 @@ export type ClientContext = {
   requestAuthJSON: MatrixRequest;
   getTxnId: GetTxnId;
   logout: () => Promise<void>;
+  clearCacheAndReload: () => Promise<void>;
 };
 
 type RoomStateObject =

src/client/initialize.ts

@@ -121,6 +121,12 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     await deleteStorage();
   });
 
+  const clearCacheAndReload = async () => {
+    disposer.run();
+    await deleteStorage();
+    window.location.reload();
+  };
+
   const ct: ClientContext = {
     session,
     storage,
@@ -157,6 +163,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     requestAuthJSON,
     getTxnId,
     logout: () => logoutManager.logout(),
+    clearCacheAndReload,
   };
 
   const machineManager = new MachineManager(ct);

src/client/storage/index.ts

@@ -78,6 +78,8 @@ export interface Storage {
   presence: PresenceCollection;
 }
 
+const createDBName = (storageName: string, userId: string): string => `${storageName}${userId}`;
+
 export const createStorage = async (
   storageName: string,
   userId: string
@@ -85,7 +87,7 @@ export const createStorage = async (
   storage: Storage;
   deleteStorage: () => Promise<void>;
 }> => {
-  const dbName = `${storageName}${userId}`;
+  const dbName = createDBName(storageName, userId);
 
   // TODO: handle all openDB callbacks.
   const idb = await openDB(dbName, DATABASE_VERSION, {
@@ -151,3 +153,8 @@ export const createStorage = async (
 
   return { storage, deleteStorage };
 };
+
+export const deleteClientStorage = async (storageName: string, userId: string) => {
+  const dbName = createDBName(storageName, userId);
+  await deleteDB(dbName);
+};