refactorize ListedMenu to .tsx and update methods on dependents components

src/components/ListedMenu/index.less

@@ -11,8 +11,24 @@
   background-color: #ffffff;
   padding: 15px;
   border-radius: 10px;
+  
+  :global {
+    .ant-list-item {
+      padding-top: 7px;
+      padding-bottom: 7px;
+    }
+  
+    .ant-list-split .ant-list-item {
+      border-bottom: 0;
+    }
+  
+    .ant-list-item-meta-title {
+      color: rgba(0, 0, 0, 0.733);
+      font-size: 14px;
+    }
+  }
 
-  .leftMenu {
+  .menuList {
     user-select: none;
     width: 224px;
     :global {
@@ -21,14 +37,13 @@
         background-color: transparent;
         border: none;
       }
-
       .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
         font-weight: bold;
       }
     }
   }
 
-  .right {
+  .menuContainer {
     flex: 1;
     padding-top: 8px;
     padding-right: 40px;
@@ -44,23 +59,25 @@
     }
   }
 
-  :global {
-    .ant-list-item {
-      padding-top: 7px;
-      padding-bottom: 7px;
-    }
+  &.inline{
 
-    .ant-list-split .ant-list-item {
-      border-bottom: 0;
-    }
-
-    .ant-list-item-meta-title {
-      color: rgba(0, 0, 0, 0.733);
-      font-size: 14px;
+  }
+  
+  &.horizontal{
+    flex-direction: column;
+    .menuList{
+      padding: 15px;
+      width: 100%;
     }
   }
+  
+  &.vertical{
+    
+  }
+
 }
 
+
 @media screen and (max-width: @screen-md) {
   .main {
     flex-direction: column;

src/components/ListedMenu/index.tsx

@@ -15,10 +15,10 @@ export default class ListedMenu extends React.Component{
         mode: this.props.mode ?? "inline"
     }
 
-    filterArray(data) {
-        let tmp = []
+    filterArray(data: any[]) {
+        let tmp: any = []
         return new Promise(resolve => {
-          data.forEach(async (element) => {
+          data.forEach(async (element: { require: string; }) => {
             if (typeof(element.require) !== 'undefined') {
               const validRequire = await window.requireQuery(element.require)
               validRequire? tmp.push(element) : null
@@ -43,14 +43,14 @@ export default class ListedMenu extends React.Component{
       ))
     }
     
-    selectKey = key => {
+    selectKey = (key: any) => {
       this.setState({
         selectKey: key,
       })
     }
 
     renderChildren = () => {
-        let titlesArray = []
+        let titlesArray: never[] = []
         this.state.menus.forEach(e => { titlesArray[e.key] = e })
 
         const OptionTitle = () => {
@@ -95,7 +95,7 @@ export default class ListedMenu extends React.Component{
 
     render() {
         const { selectKey, loading } = this.state
-        const isMode = (e) => {
+        const isMode = (e: string) => {
             return this.state.mode === `${e}`
         }
 
@@ -103,7 +103,7 @@ export default class ListedMenu extends React.Component{
           return <></>
         }
         return (
-          <div className={classnames(styles.main, {[styles.horizontal]: isMode("horizontal") })}>
+          <div style={this.props.wrapperStyle ?? null} className={classnames(styles.main, {[styles.horizontal]: isMode("horizontal") })}>
             <div className={styles.menuList}>
               <h2>
                 {this.props.icon ?? null} {this.props.title ?? "Menu"}

src/components/index.js

@@ -10,6 +10,7 @@ import Invalid from './Invalid'
 // App Layout Components
 import * as AppLayout from './Layout/index.js'
 import PageTransition from './PageTransition'
+import ListedMenu from './ListedMenu/index.tsx'
 
 // User Components
 
@@ -20,6 +21,7 @@ import PostCard from './PostCard'
 
 // Mix & Export all
 export {
+  ListedMenu,
   AppLayout,
   PostCard,
   Invalid,

src/pages/debug/index.js

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Menu } from 'antd'
 import * as Icons from 'components/Icons'
+import { ListedMenu } from 'components'
 
-import styles from './index.less'
 import ApiDebug from './debuggers/api'
 import AntdDebug from './debuggers/antd'
 import CoreDebug from './debuggers/core'
@@ -54,60 +53,7 @@ const menuList = [
 ]
 
 export default class Debug extends React.Component {
-  state = {
-    loading: true,
-    selectKey: 'verbosity',
-    menus: []
-  }
-
-  getMenu() {
-    return this.state.menus.map(item => (
-      <Menu.Item key={item.key}>
-        <span>{item.icon} {item.title}</span>
-      </Menu.Item>
-    ))
-  }
-  
-  selectKey = key => {
-    this.setState({
-      selectKey: key,
-    })
-  }
-
-  renderChildren = () => {
-    let titlesArray = []
-    this.state.menus.forEach(e => {
-      titlesArray[e.key] = e
-    })
-    if(this.state.selectKey){
-      return Debuggers[this.state.selectKey]
-    }else{
-      <div> Select an Option </div>
-    }
-  }
-
-  componentDidMount(){
-    this.setState({ menus: menuList, loading: false })
-  }
-
   render() {
-  
-    const { selectKey } = this.state
-    return (
-      <div className={styles.main}>
-          <h2>
-            <Icons.SettingOutlined /> Debuggers
-          </h2>
-          <Menu
-            mode="horizontal"
-            selectedKeys={[selectKey]}
-            onClick={({ key }) => this.selectKey(key)}
-          >
-            {this.getMenu()}
-          </Menu>
-     
-        <div className={styles.debuggerComponent}>{this.renderChildren()}</div>
-      </div>
-    )
+    return <ListedMenu wrapperStyle={{ padding: "4px" }} mode="horizontal" renderOptionTitle={false} icon={<Icons.Activity />} title="Debug" childrens={Debuggers} menuArray={menuList} />
   }
 }

src/pages/settings/index.js

@@ -1,13 +1,10 @@
 import React from 'react'
-import { Menu, Result } from 'antd'
 import * as Icons from 'components/Icons'
 
-import styles from './style.less'
-import { connect } from 'umi';
+import { ListedMenu } from 'components'
 
 import NotificationView from './components/notification/index.js'
 import SecurityView from './components/security/index.js'
-
 import Base from './components/base.js'
 import AppAbout from './components/about.js'
 import Theme from './components/theme'
@@ -75,109 +72,9 @@ const menuList = [
   }
 ]
 
-@connect(({ app }) => ({ app }))
 class GeneralSettings extends React.Component {
-  state = {
-    loading: true,
-    selectKey: 'base',
-    menus: []
-  }
-
-  requireQuery(require){
-    return new Promise(resolve => {
-      this.props.dispatch({
-        type: 'app/isUser',
-        payload: require,
-        callback: (e) => {
-          resolve(e)
-        }
-      })
-    })
-  }
-
-  async queryMenu() {
-    this.setState({ loading: true })
-
-    const filterArray = (data) =>{
-      let tmp = []
-      return new Promise(resolve => {
-        data.forEach(async (element) => {
-          if (typeof(element.require) !== 'undefined') {
-            const validRequire = await window.requireQuery(element.require)
-            validRequire? tmp.push(element) : null
-          }else{
-            tmp.push(element)
-          }
-        })
-        resolve(tmp)
-      })
-    }
-
-    this.setState({ menus: await filterArray(menuList), loading: false })
-  }
-
-  getMenu() {
-    return this.state.menus.map(item => (
-      <Menu.Item key={item.key}>
-        <span>{item.icon} {item.title}</span>
-      </Menu.Item>
-    ))
-  }
-  
-  selectKey = key => {
-    this.setState({
-      selectKey: key,
-    })
-  }
-
-  renderChildren = () => {
-    let titlesArray = []
-    this.state.menus.forEach(e => { titlesArray[e.key] = e })
-
-    if(this.state.selectKey && titlesArray[this.state.selectKey]){
-      return <>
-        <div>
-          <h2>{titlesArray[this.state.selectKey].icon || null}{titlesArray[this.state.selectKey].title || null}</h2>
-        </div>
-        {Settings[this.state.selectKey]}
-      </>
-    }else {
-      return(
-        <Result title="Select an Option" state="info" />
-      )
-    }
-  }
-
-  componentDidMount(){
-    const keyIndex = new URLSearchParams(location.search).get('key')
-    if(keyIndex && typeof(Settings[keyIndex]) !== "undefined"){
-      this.setState({selectKey: keyIndex})
-    }
-    this.queryMenu()
-  }
-
   render() {
-    const { selectKey, loading } = this.state
-    if(loading){
-      return <></>
-    }
-    return (
-      <div className={styles.main}>
-        <div className={styles.leftMenu}>
-          <h2>
-            <Icons.SettingOutlined /> Settings
-          </h2>
-          <Menu
-            mode="inline"
-            selectedKeys={[selectKey]}
-            onClick={({key}) => this.selectKey(key)}
-          >
-            {this.getMenu()}
-          </Menu>
-        </div>
-        <div className={styles.right}>{this.renderChildren()}</div>
-      </div>
-    )
+    return <ListedMenu defaultKey="base" icon={<Icons.SettingOutlined />} title="Settings" childrens={Settings} menuArray={menuList} />
   }
 }