From 9ff090acb73f56eaffd9ca73fb76c0eb564a9b80 Mon Sep 17 00:00:00 2001
From: geekact <fanwenhua1990@gmail.com>
Date: Wed, 13 Apr 2022 14:38:41 +0800
Subject: [PATCH] feat: add interceptor hoc

---
 README.md      | 41 +++++++++++++++++++++++++++++++++++
 src/hoc.tsx    | 17 +++++++++++++++
 src/index.ts   | 59 ++------------------------------------------------
 src/storage.ts | 37 +++++++++++++++++++++++++++++++
 4 files changed, 97 insertions(+), 57 deletions(-)
 create mode 100644 src/hoc.tsx
 create mode 100644 src/storage.ts

diff --git a/README.md b/README.md
index ab85533..0fe3a2e 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,47 @@ yarn add foca-taro-storage
 
 # 使用
 
+### 入口
+
 ```typescript
+import { FocaProvider } from 'foca';
 import { taroStorage } from 'foca-taro-storage';
+
+class App extends Component {
+  render() {
+    return (
+      // 注意：是个匿名函数
+      <FocaProvider>{() => this.props.children}</FocaProvider>
+    );
+  }
+}
+```
+
+### 路由
+
+关注 taro 官方 issue https://github.com/NervJS/taro/issues/6548#issuecomment-717896033 ，需要在`首页`加入拦截器以保证数据的稳定性
+
+```typescript
+import { persistInterceptor } from 'foca-taro-storage';
+
+// 写法1
+@persistInterceptor
+export class HomePage extends Component {}
+
+// 写法2
+class HomePage extends Component {}
+export default persistInterceptor(HomePage);
+
+// 写法3
+const HomePage: FC<Props> = (props) => {};
+export default persistInterceptor(HomePage);
+```
+
+如果你的某些页面需要分享给用户，则`分享入口`文件也需要搭配拦截器。
+
+```typescript
+import { persistInterceptor } from 'foca-taro-storage';
+
+@persistInterceptor
+export class MySharePage extends Component {}
 ```
diff --git a/src/hoc.tsx b/src/hoc.tsx
new file mode 100644
index 0000000..92f9c89
--- /dev/null
+++ b/src/hoc.tsx
@@ -0,0 +1,17 @@
+import { store } from 'foca';
+import React, { ComponentType, useEffect, useState, forwardRef } from 'react';
+
+// TODO: 支持ref的类型
+export function persistInterceptor<T>(EntryComponent: ComponentType<T>) {
+  const [ready, setReady] = useState(false);
+
+  return forwardRef<unknown, T>((props, ref) => {
+    useEffect(() => {
+      store.onInitialized().then(() => {
+        setReady(true);
+      });
+    });
+
+    return ready ? <EntryComponent {...props} ref={ref} /> : null;
+  });
+}
diff --git a/src/index.ts b/src/index.ts
index 2829e92..562a814 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,57 +1,2 @@
-import type { StorageEngine } from 'foca';
-import {
-  getStorage,
-  getStorageSync,
-  setStorage,
-  removeStorage,
-  clearStorage,
-} from '@tarojs/taro';
-
-/**
- * 持久化必须在小程序onLoad之前完成，否则页面报错
- * @link https://github.com/NervJS/taro/issues/6548#issuecomment-717896033
- */
-const isMiniProgram =
-  process.env.TARO_ENV !== 'rn' &&
-  process.env.TARO_ENV !== 'h5' &&
-  process.env.TARO_ENV !== 'quickapp';
-
-export const taroStorage: StorageEngine = {
-  getItem(key) {
-    let promise: Promise<string | null>;
-
-    if (isMiniProgram) {
-      try {
-        promise = Promise.resolve(getStorageSync<string>(key));
-      } catch {
-        promise = Promise.resolve(null);
-      }
-    } else {
-      promise = getStorage<string>({ key }).then(({ data }) => data);
-    }
-
-    return promise.then(
-      (data) => {
-        return typeof data === 'string' ? data : null;
-      },
-      () => {
-        // 使用getStorage()找不到key时，Taro会抛出异常: getStorage:fail data not found
-        return null;
-      },
-    );
-  },
-  setItem(key, value) {
-    return setStorage({
-      key,
-      data: value,
-    });
-  },
-  removeItem(key) {
-    return removeStorage({
-      key,
-    });
-  },
-  clear() {
-    return clearStorage();
-  },
-};
+export { taroStorage } from './storage';
+export { persistInterceptor } from './hoc';
diff --git a/src/storage.ts b/src/storage.ts
new file mode 100644
index 0000000..e946596
--- /dev/null
+++ b/src/storage.ts
@@ -0,0 +1,37 @@
+import type { StorageEngine } from 'foca';
+import {
+  getStorage,
+  setStorage,
+  removeStorage,
+  clearStorage,
+} from '@tarojs/taro';
+
+export const taroStorage: StorageEngine = {
+  getItem(key) {
+    return getStorage<string>({ key })
+      .then(({ data }) => data)
+      .then(
+        (data) => {
+          return typeof data === 'string' ? data : null;
+        },
+        () => {
+          // 使用getStorage()找不到key时，Taro会抛出异常: getStorage:fail data not found
+          return null;
+        },
+      );
+  },
+  setItem(key, value) {
+    return setStorage({
+      key,
+      data: value,
+    });
+  },
+  removeItem(key) {
+    return removeStorage({
+      key,
+    });
+  },
+  clear() {
+    return clearStorage();
+  },
+};