refactor cookies (#294)

* feat: refactor cookies

* test: add cookies test case

* feat: optimize cookies doc

* fix: optimize cookies code logic

* feat: refactor cookies to hook

* feat: improve cookies test case and update params name

* feat: optimize cookies field change judge logic

---------

Co-authored-by: jialan <[email protected]>

Author: JackWang032

src/cookies/__tests__/cookies.test.tsx

@@ -0,0 +1,158 @@
+import { cleanup, renderHook } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import useCookieListener from '../index';
+
+jest.useFakeTimers({ advanceTimers: true });
+jest.spyOn(global, 'setInterval');
+jest.spyOn(global, 'setTimeout');
+
+let cookies: { key: string; value: string }[] = [];
+
+Object.defineProperty(window.document, 'cookie', {
+    get() {
+        return cookies.map((item) => `${item.key}=${item.value}`).join('; ');
+    },
+    set(value) {
+        const arr = value.split('=');
+        if (arr.length !== 2) return;
+        const [key, val] = arr;
+        const cookie = cookies.find((item) => item.key === key);
+        cookie ? (cookie.value = val) : cookies.push({ key, value: val });
+    },
+});
+
+describe('test cookies', () => {
+    beforeEach(() => {
+        cleanup();
+        cookies = [];
+    });
+
+    // 新增的cookie项不会触发
+    test('should not trigger when change cookie from an empty value', () => {
+        const mockFieldsChanged = jest.fn();
+        const timeout = 200;
+
+        renderHook(() =>
+            useCookieListener(
+                ({ changedFields }) => mockFieldsChanged(changedFields),
+                ['dt_token'],
+                { timeout }
+            )
+        );
+
+        document.cookie = 'dt_token=token1';
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                expect(mockFieldsChanged).not.toBeCalled();
+                resolve(true);
+            }, timeout);
+            jest.runAllTimers();
+        });
+    });
+
+    test('should trigger when change cookie from an empty value with immediately option', () => {
+        const mockFieldsChanged = jest.fn();
+        const timeout = 200;
+
+        renderHook(() =>
+            useCookieListener(
+                ({ changedFields }) => mockFieldsChanged(changedFields),
+                ['dt_token'],
+                { timeout, immediately: true }
+            )
+        );
+
+        document.cookie = 'dt_token=token1';
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                expect(mockFieldsChanged).toBeCalled();
+                expect(mockFieldsChanged.mock.calls[0][0]).toEqual([
+                    { key: 'dt_token', value: 'token1' },
+                ]);
+                resolve(true);
+            }, timeout);
+            jest.runAllTimers();
+        });
+    });
+
+    test('should trigger when change cookie from an exist value', () => {
+        const mockFieldsChanged = jest.fn();
+        const timeout = 200;
+
+        document.cookie = 'dt_token=token1';
+        renderHook(() =>
+            useCookieListener(
+                ({ changedFields }) => mockFieldsChanged(changedFields),
+                ['dt_token'],
+                { timeout }
+            )
+        );
+        document.cookie = 'dt_token=token2';
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                expect(mockFieldsChanged.mock.calls).toHaveLength(1);
+                expect(mockFieldsChanged.mock.calls[0][0]).toEqual([
+                    { key: 'dt_token', value: 'token2' },
+                ]);
+                resolve(true);
+            }, timeout);
+            jest.runAllTimers();
+        });
+    });
+
+    test('should trigger with prevCookies and nextCookies when change cookie with empty watchfields', () => {
+        const mockCookiesChanged = jest.fn();
+        const timeout = 200;
+
+        renderHook(() => useCookieListener(mockCookiesChanged, [], { timeout }));
+
+        document.cookie = 'dt_token=token1';
+        document.cookie = 'dt_userId=123';
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                expect(mockCookiesChanged.mock.calls).toHaveLength(1);
+                expect(mockCookiesChanged).toBeCalledWith({
+                    prevCookies: '',
+                    nextCookies: 'dt_token=token1; dt_userId=123',
+                });
+                resolve(true);
+            }, timeout);
+            jest.runAllTimers();
+        });
+    });
+
+    test('should compare cookie every timeout', () => {
+        const mockCookiesChanged = jest.fn();
+        const timeout = 100;
+
+        renderHook(() => useCookieListener(mockCookiesChanged, [], { timeout }));
+
+        document.cookie = 'dt_token=token1';
+        document.cookie = 'dt_userId=123';
+
+        setTimeout(() => {
+            document.cookie = 'dt_token=token2';
+            document.cookie = 'dt_userId=1234';
+        }, 1.5 * timeout);
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                expect(mockCookiesChanged.mock.calls).toHaveLength(2);
+                expect(mockCookiesChanged.mock.calls[0][0]).toEqual({
+                    prevCookies: '',
+                    nextCookies: 'dt_token=token1; dt_userId=123',
+                });
+                expect(mockCookiesChanged.mock.calls[1][0]).toEqual({
+                    prevCookies: 'dt_token=token1; dt_userId=123',
+                    nextCookies: 'dt_token=token2; dt_userId=1234',
+                });
+                resolve(true);
+            }, 2 * timeout);
+            jest.runAllTimers();
+        });
+    });
+});

src/cookies/demos/advanced.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { useCookieListener } from 'dt-react-component';
+import utils from 'dt-react-component/utils';
+import { Button, message } from 'antd';
+
+export default () => {
+    useEffect(() => {
+        utils.deleteCookie('dt_token');
+        return () => utils.deleteAllCookies();
+    }, []);
+
+    useCookieListener(
+        ({ changedFields }) => {
+            console.log('cookie fields hasChanged', changedFields);
+            if (changedFields?.length) {
+                message.info(
+                    '以下Cookie字段发生变更：' +
+                        changedFields.map((field) => `${field.key} : ${field.value}`).join(',')
+                );
+            }
+        },
+        ['dt_token'],
+        { immediately: true, timeout: 1000 }
+    );
+
+    return (
+        <div style={{ textAlign: 'center', paddingTop: 60 }}>
+            <p>
+                <Button
+                    onClick={() => {
+                        utils.setCookie('dt_token', `im_new_token_${Date.now()}`);
+                    }}
+                >
+                    修改Cookie值
+                </Button>
+            </p>
+            <p>监听页面 Cookie 信息变更</p>
+        </div>
+    );
+};

src/cookies/demos/basic.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useCookieListener } from 'dt-react-component';
+import utils from 'dt-react-component/utils';
+import { Button, message } from 'antd';
+
+export default () => {
+    useEffect(() => {
+        utils.deleteCookie('dt_token');
+        utils.deleteCookie('dt_userid');
+        return () => utils.deleteAllCookies();
+    }, []);
+
+    useCookieListener(
+        ({ changedFields }) => {
+            console.log('cookie fields hasChanged', changedFields);
+            if (changedFields?.length) {
+                message.info(
+                    '以下Cookie字段发生变更：' +
+                        changedFields.map((field) => `${field.key} : ${field.value}`).join(',')
+                );
+            }
+        },
+        ['dt_token']
+    );
+
+    useCookieListener(({ prevCookies, nextCookies }) => {
+        message.info(`监听到Cookie从 ${prevCookies} 变更为了 ${nextCookies} `);
+    }, []);
+
+    return (
+        <div style={{ textAlign: 'center', paddingTop: 60 }}>
+            <p>
+                <Button
+                    onClick={() => {
+                        utils.setCookie('dt_token', `im_new_token_${Date.now()}`);
+                        utils.setCookie('dt_userid', `im_new_userid_${Date.now()}`);
+                    }}
+                >
+                    修改Cookie值
+                </Button>
+            </p>
+            <p>监听页面 Cookie 信息变更</p>
+        </div>
+    );
+};

src/cookies/index.md

@@ -1,51 +1,53 @@
 ---
-title: Cookies 监听 Cookie 变更
+title: useCookieListener 监听 Cookie 变更
 group: 组件
 toc: content
 demo:
-    cols: 2
+    cols: 1
 ---
 
-# Cookies 监听 Cookie 变更
+# useCookieListener 监听 Cookie 变更
 
 ## 何时使用
 
-监听页面 Cookie 信息变更
+-   监听某个 Cookie 值变更，变更后进行操作，如 token 变更进行登出
+-   在多个 tab 页下 Cookie 值变更，各 tab 页都需要及时同步时使用
+-   需要将该 hook 用于顶层组件中，如 Routes
 
 ## 示例
 
-```jsx
-import React from 'react';
-import { Cookies } from 'dt-react-component';
-
-export default () => {
-    return (
-        <>
-            <p>监听页面 Cookie 信息变更</p>
-            <Cookies
-                // 当页面cookie如下字段的值发生变更时会触发页面刷新
-                watchFields={['dt_token', 'dt_tenant_id', 'dt_user_id', 'project_id']}
-                onFieldsChanged={() => {
-                    console.log('hasChanged');
-                }}
-            />
-        </>
-    );
-};
-```
+<code src='./demos/basic.tsx' title='基本使用' iframe="true" description="当监听的Cookie字段为[]时，则Cookie有变化时就会触发，即监听整个Cookie的变化"></code>
+<code src='./demos/advanced.tsx' title='高级配置' iframe="true" description="通过immediately来配置是否Cookie字段新增时会触发变化，如有特殊要求，还可通过intervalTime来配置轮训比较的时间间隔"></code>
 
 ## API
 
-### CookiesProps
+```tsx | pure
+useCookieListener(
+    handler: (params: {prevCookies: string, nextCookies: string, changedFields?: Fields[]}) => void,
+    watchFields: string[],
+    options?: ICookieOptions
+)
+
+```
+
+### Params
+
+| 参数        | 说明                    | 类型                                                                                     | 默认值 |
+| ----------- | ----------------------- | ---------------------------------------------------------------------------------------- | ------ |
+| handler     | Cookie 变化时的处理函数 | `(params: {prevCookies: string, nextCookies: string, changedFields?: Fields[]}) => void` | -      |
+| watchFields | 监听的具体 Cookie 字段  | `stirng[]`                                                                               | -      |
+| options     | 配置项                  | `CookieOptions`                                                                          | -      |
+
+### CookieOptions
 
-| 参数            | 说明                                               | 类型                          | 默认值 |
-| --------------- | -------------------------------------------------- | ----------------------------- | ------ |
-| watchFields     | 监听的一组 cookie                                  | `string[]`                    | -      |
-| onFieldsChanged | cookies 变更触发函数，fields 为当前 cookies 变更值 | `(fields: Fields[]) => void;` | -      |
+| 参数        | 说明                                                | 类型      | 默认值  |
+| ----------- | --------------------------------------------------- | --------- | ------- |
+| immediately | Cookie 字段为新增字段时否会触发 handler，默认不触发 | `boolean` | `false` |
+| timeout     | 监听轮训间隔时间，单位：毫秒                        | `number`  | `200`   |
 
 ### Fields
 
-| 参数  | 说明 | 类型     | 默认值 |
-| ----- | ---- | -------- | ------ |
-| key   | -    | `string` | -      |
-| value | -    | `string` | -      |
+| 参数  | 说明      | 类型     | 默认值 |
+| ----- | --------- | -------- | ------ |
+| key   | Cookie 键 | `string` | -      |
+| value | Cookie 值 | `string` | -      |