feat: support refresh the storage data (#49)

HuolalaTech · Oct 16, 2023 · 581b534 · 581b534
1 parent 72e8374
commit 581b534
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/src/pages/Devtools/StoragePanel/index.less b/src/pages/Devtools/StoragePanel/index.less
@@ -1,7 +1,11 @@
 .storage-panel {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 8px;
   &__layout {
-    height: 100%;
+    flex: 1;
   }
   &__sider {
     position: absolute;

diff --git a/src/pages/Devtools/StoragePanel/index.tsx b/src/pages/Devtools/StoragePanel/index.tsx
@@ -1,11 +1,11 @@
 import type { SpyStorage } from '@huolala-tech/page-spy';
-import { Layout, Menu, Table, Tooltip } from 'antd';
-import { useMemo, useRef, useState } from 'react';
+import { Button, Col, Layout, Menu, Row, Table, Tooltip } from 'antd';
+import { useMemo, useState } from 'react';
 import ReactJsonView from '@huolala-tech/react-json-view';
 import './index.less';
 import { useSocketMessageStore } from '@/store/socket-message';
 import { Resizable } from 'react-resizable';
-import { HolderOutlined } from '@ant-design/icons';
+import { HolderOutlined, ReloadOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { capitalize } from 'lodash-es';
 
@@ -14,8 +14,12 @@ const { Column } = Table;
 
 export const StoragePanel = () => {
   const { t } = useTranslation();
-  const storageMsg = useSocketMessageStore((state) => state.storageMsg);
-  const [activeTab, setActiveTab] = useState<SpyStorage.DataType>('local');
+  const [storageMsg, refresh] = useSocketMessageStore((state) => [
+    state.storageMsg,
+    state.refresh,
+  ]);
+  const [activeTab, setActiveTab] =
+    useState<SpyStorage.DataType>('localStorage');
   const data = useMemo(() => {
     return Object.values(storageMsg[activeTab]);
   }, [activeTab, storageMsg]);
@@ -28,6 +32,19 @@ export const StoragePanel = () => {
   const [detailInfo, setDetailInfo] = useState('');
   return (
     <div className="storage-panel">
+      <Row justify="end">
+        <Col>
+          <Tooltip title={t('common.refresh')}>
+            <Button
+              onClick={() => {
+                refresh(activeTab);
+              }}
+            >
+              <ReloadOutlined />
+            </Button>
+          </Tooltip>
+        </Col>
+      </Row>
       <Layout className="storage-panel__layout">
         <Sider className="storage-panel__sider">
           <Menu
@@ -36,15 +53,16 @@ export const StoragePanel = () => {
             selectedKeys={[activeTab]}
             onSelect={({ key }) => setActiveTab(key as SpyStorage.DataType)}
             items={[
-              { key: 'local', label: 'Local Storage' },
-              { key: 'session', label: 'Session Storage' },
+              { key: 'localStorage', label: 'Local Storage' },
+              { key: 'sessionStorage', label: 'Session Storage' },
               { key: 'cookie', label: 'Cookie' },
             ]}
           />
         </Sider>
         <Layout>
           <Content className="storage-panel__content">
             <Table
+              rowKey="name"
               bordered={false}
               dataSource={data}
               pagination={false}

diff --git a/src/store/socket-message/index.ts b/src/store/socket-message/index.ts
@@ -33,8 +33,8 @@ interface SocketMessage {
     Record<string, Omit<SpyStorage.DataItem, 'type' | 'action'>>
   >;
   initSocket: (url: string) => void;
-  clearRecord: (key: SpyMessage.MessageType) => void;
-  refresh: (key: SpyMessage.MessageType) => void;
+  clearRecord: (key: string) => void;
+  refresh: (key: string) => void;
 }
 
 export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
@@ -49,8 +49,8 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
     location: null,
   },
   storageMsg: {
-    local: {},
-    session: {},
+    localStorage: {},
+    sessionStorage: {},
     cookie: {},
   },
   initSocket: (room: string) => {
@@ -161,7 +161,7 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
       }
     });
   },
-  clearRecord: (key: SpyMessage.MessageType) => {
+  clearRecord: (key: string) => {
     switch (key) {
       case 'console':
         set({ consoleMsg: [] });
@@ -173,7 +173,7 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
         break;
     }
   },
-  refresh: (key: SpyMessage.MessageType) => {
+  refresh: (key: string) => {
     const socket = get().socket;
     if (!socket) return;
     socket.unicastMessage({