updated redux debugger, added ParamsList to component

.umirc.js

@@ -10,7 +10,7 @@ export default defineConfig({
   // history: { type: "hash" },
 
   targets: { ie: 11 },
-  dva: { immer: true },
+  dva: { immer: true, hmr: true },
   ignoreMomentLocale: true,
   mountElementId: "root",
   nodeModulesTransform: {

src/components/ParamsList/index.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import * as antd from 'antd'
+import * as Icons from 'components/Icons'
+import { __legacy__objectToArray } from 'core'
+
+export default function DebugPanel(data) {
+    const getCircularReplacer = () => {
+        const seen = new WeakSet();
+        return (key, value) => {
+            if (typeof value === "object" && value !== null) {
+                if (seen.has(value)) {
+                    return
+                }
+                seen.add(value)
+            }
+            return value
+        }
+    }
+
+    const getErrorRender = (e, error) => {
+        return (
+            <div>
+                <div style={{ display: "flex", alignItems: "center", padding: "12px 16px", height: "47px", backgroundColor: "#d9d9d9" }} key={e.key} >
+                    This could not be rendered > ({e.key}) [{typeof (e.value)}]
+            </div>
+                <div>
+                    <antd.Collapse>
+                        <antd.Collapse.Panel header="See error" >
+                            <div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
+                                <span>{error.toString()}</span>
+                            </div>
+                        </antd.Collapse.Panel>
+                    </antd.Collapse>
+                </div>
+            </div>
+        )
+    }
+
+    const getDecoratorStr = (e, json) => {
+        try {
+            switch (typeof (e.value)) {
+                case "string": {
+                    return `(${json.length}) characters`
+                }
+                case "object": {
+                    if (e.value == null) {
+                        return `Empty (null/undefined)`
+                    }
+                    if (typeof (e.value.length) !== "undefined") {
+                        return `Lenght (${e.value.length})`
+                    }
+                    if (typeof (Object.keys(e.value).length) !== "undefined") {
+                        return `Lenght (${Object.keys(e.value).length})`
+                    }
+                    return `Immeasurable (by error) (not valid object)`
+                }
+                case "array": {
+                    return `Lenght (${e.value.length})`
+                }
+                case "boolean": {
+                    return <antd.Tag color={e.value ? "blue" : "volcano"} > {e.value ? "true" : "false"} </antd.Tag>
+                }
+                case "number": {
+                    return <antd.Tag > {e.value} </antd.Tag>
+                }
+                default:
+                    return `Immeasurable / Invalid`
+            }
+        } catch (error) {
+            return <strong>Immeasurable (by error)</strong>
+        }
+    }
+
+    const getStr = (e) => {
+        try {
+            switch (typeof (e.value)) {
+                case "string": {
+                    return e.value
+                }
+                case "object": {
+                    if (e.value == null) {
+                        return `${e.value}`
+                    }
+                    if (Object.keys(e.value).length > 1) { // trying create nested
+                        return <div>
+                            {DebugPanel(e.value)}
+                        </div>
+                    }
+                    return JSON.stringify(e.value, getCircularReplacer())
+                }
+                case "array": {
+                    return JSON.stringify(e.value, getCircularReplacer())
+                }
+                case "boolean": {
+                    return `${e.value}`
+                }
+                default:
+                    return `${e.value}`
+            }
+        } catch (error) {
+            return getErrorRender(e, error)
+        }
+    }
+
+    const modelToMap = (data) => {
+        if (!data) return false
+        return __legacy__objectToArray(data).map(e => {
+            try {
+                const str = getStr(e)
+                return (
+                    <antd.Collapse style={{ border: '0px' }} key={e.key}>
+                        <antd.Collapse.Panel key={e.key} header={<div>[{typeof (e.value)}] <strong>{e.key}</strong> | {getDecoratorStr(e, str)} </div>} >
+                            <div style={{ margin: '0 5px 15px 5px', wordBreak: "break-all" }} >
+                                <span>{str}</span>
+                            </div>
+                        </antd.Collapse.Panel>
+                    </antd.Collapse>
+                )
+            } catch (error) {
+                return getErrorRender(e, error)
+            }
+        })
+    }
+
+    return modelToMap(data)
+}

src/components/index.js

@@ -11,6 +11,8 @@ import Invalid from './Invalid'
 import * as AppLayout from './Layout/index.js'
 import ListedMenu from './ListedMenu/index.tsx'
 import FloatComponent from './FloatComponent'
+import ParamsList from './ParamsList'
+
 // User Components
 
 // Post Components
@@ -20,6 +22,7 @@ import PostCard from './PostCard'
 
 // Mix & Export all
 export {
+  ParamsList,
   FloatComponent,
   ListedMenu,
   AppLayout,

src/debuggers/redux.js

@@ -2,49 +2,70 @@ import React from 'react';
 import { connect } from 'umi';
 import * as antd from 'antd'
 import * as Icons from 'components/Icons'
+import { ParamsList } from 'components'
 import { __legacy__objectToArray } from 'core'
 
 class ReduxDebugger extends React.Component {
     state = {
-        app_state: null
+        selectedKeys: []
+    }
+    renderAllStore() {
+        return __legacy__objectToArray(this.props).map(element => {
+            return (
+                <antd.Collapse.Panel key={element.key} style={{ wordBreak: 'break-all' }} header={`${element.key}`}>
+                    {ParamsList(element.value)}
+                </antd.Collapse.Panel>
+            )
+        })
+    }
+    renderCheckboxes() {
+        const keys = Object.keys(this.props)
+        const onChange = (event, key) => {
+            let resultKeys = this.state.selectedKeys
+            resultKeys[key] = event.target.checked
+
+            this.setState({ selectedKeys: resultKeys })
+            console.log(this.state.selectedKeys)
+        }
+
+        return keys.map((e) => {
+            return (
+                <antd.Checkbox key={e} onChange={(event) => onChange(event, e)}>{e}</antd.Checkbox>
+            )
+        })
     }
 
     render() {
-        const modelToMap = (data) => {
-            if (!data) return false
-            return __legacy__objectToArray(data).map(e => {
-                try {
-                    const v = JSON.stringify(e.value)
-                    if (!v) return false
-                    return (
-                        <div style={{ margin: '0 5px 15px 5px' }} key={e.key} >
-                            <h4>{e.key}</h4>
-                            {v.length < 500 ? <span>{v}</span> : <antd.Collapse ><antd.Collapse.Panel header={`Hidden text ( ${v.length} Characters )`}><span>{v}</span></antd.Collapse.Panel></antd.Collapse>}
-                        </div>
-                    )
-                } catch (error) {
+        const returnSelectedKeys = () => {
+            // const getStores = () => {
+            //     let stores = []
+            //     __legacy__objectToArray(this.state.selectedKeys).forEach((e) => {
+            //         if (this.props[e.key] && e.value) {
+            //             stores[e.key] = this.props[e.key]
+            //         }
+            //     })
+            // }
+            return __legacy__objectToArray(this.props).map(e => {
+                if (!this.state.selectedKeys[e.key]) {
                     return null
                 }
+                return (
+                    <antd.Collapse.Panel key={e.key} style={{ wordBreak: 'break-all' }} header={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> {e.key}</>}>
+                        {ParamsList(e.value)}
+                    </antd.Collapse.Panel>
+                )
             })
-
         }
-
         return (
-            <div>
+            <div style={{ background: "#fff", borderRadius: "8px", padding: "25px 15px" }}>
+                <div style={{ marginBottom: "35px" }}>
+                    <h1 style={{ fontSize: '24px' }}><Icons.Redux /> Redux Store</h1>
+                    <span><Icons.AlertTriangle />Warning, the use of this debugger is not recommended due to its high resource usage</span>
+                    <antd.Card>{this.renderCheckboxes()}</antd.Card>
+                </div>
+                <hr />
                 <antd.Collapse style={{ border: 0 }}>
-
-                    <antd.Collapse.Panel style={{ wordBreak: 'break-all' }} header={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> socket</>}>
-                        {modelToMap(this.props.app)}
-                    </antd.Collapse.Panel>
-
-                    <antd.Collapse.Panel style={{ wordBreak: 'break-all' }} header={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> contextmenu</>}>
-                        {modelToMap(this.props.contextMenu)}
-                    </antd.Collapse.Panel>
-
-                    <antd.Collapse.Panel style={{ wordBreak: 'break-all' }} header={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> socket</>}>
-                        {modelToMap(this.props.socket)}
-                    </antd.Collapse.Panel>
-
+                    {returnSelectedKeys()}
                 </antd.Collapse>
             </div>
         )