update sync-to-storage.ts

packages/app/src/stores/middlewares/sync-to-storage.ts

@@ -1,4 +1,4 @@
-import { useSWRConfig, Middleware } from 'swr';
+import { Middleware } from 'swr';
 
 const generateKeyInStorage = (key: string): string => {
   return `swr-cache-${key}`;
@@ -9,8 +9,7 @@ export type IStorageSerializer<Data> = {
   deserialize: (value: string | null) => Data,
 }
 
-
-const createSyncToStorageMiddlware = <Data>(
+export const createSyncToStorageMiddlware = <Data>(
   storage: Storage,
   storageSerializer: IStorageSerializer<Data> = {
     serialize: JSON.stringify,
@@ -19,6 +18,10 @@ const createSyncToStorageMiddlware = <Data>(
 ): Middleware => {
   return (useSWRNext) => {
     return (key, fetcher, config) => {
+      if (key == null) {
+        return useSWRNext(key, fetcher, config);
+      }
+
       const keyInStorage = generateKeyInStorage(key.toString());
       let initData;
 
@@ -35,6 +38,7 @@ const createSyncToStorageMiddlware = <Data>(
 
       return {
         ...swrNext,
+        // override mutate
         mutate: (data, shouldRevalidate) => {
           return swrNext.mutate(data, shouldRevalidate)
             .then((value) => {
@@ -47,46 +51,6 @@ const createSyncToStorageMiddlware = <Data>(
   };
 };
 
-// const createStorageProvider = <Data>(
-//   storage: Storage,
-//   storageSerializer: IStorageSerializer<Data> = {
-//     serialize: JSON.stringify,
-//     deserialize: JSON.parse,
-//   },
-// ): Cache<Data> => {
-//   const map: Map<string, Data> = new Map();
-
-//   return {
-//     get(key: string): Data | undefined {
-//       if (!map.has(key)) {
-//         let newCachedData = null;
-
-//         // retrieve from storage
-//         const itemInStorage = storage.getItem(generateKeyInStorage(key));
-//         if (itemInStorage != null) {
-//           newCachedData = storageSerializer.deserialize(itemInStorage);
-//         }
-
-//         // set
-//         map.set(key, newCachedData);
-//       }
-//       return map.get(key);
-//     },
-//     set(key: string, value: Data): void {
-//       map.set(key, value);
-//       storage.setItem(generateKeyInStorage(key), storageSerializer.serialize(value));
-//     },
-//     delete(key: string): void {
-//       map.delete(key);
-//       storage.removeItem(generateKeyInStorage(key));
-//     },
-//   };
-// };
-
-// export const localStorageProvider = <Data>(option?: { storageSerializer?: IStorageSerializer<Data> }): Cache<Data> => {
-//   return createStorageProvider(localStorage, option?.storageSerializer);
-// };
+export const localStorageMiddleware = createSyncToStorageMiddlware(localStorage);
 
-// export const sessionStorageProvider = <Data>(storageSerializer?: IStorageSerializer<Data>): Cache<Data> => {
-//   return createStorageProvider(sessionStorage, storageSerializer);
-// };
+export const sessionStorageMiddleware = createSyncToStorageMiddlware(sessionStorage);