updated: general settings code cuality

packages/comty/package-lock.json

@@ -11,7 +11,6 @@
         "@icons-pack/react-simple-icons": "^3.8.0",
         "@lingui/react": "^3.3.0",
         "@ragestudio/nodecore-api-lib": "^0.2.6",
-        "@types/jest": "^26.0.15",
         "@types/lodash": "^4.14.165",
         "antd": "^4.8.2",
         "axios": "^0.21.1",
@@ -33,6 +32,7 @@
         "moment": "^2.28.0",
         "path-to-regexp": "^6.1.0",
         "platform": "^1.3.6",
+        "react": "^16.14.0",
         "react-animations": "^1.0.0",
         "react-color": "^2.19.3",
         "react-dazzle": "^1.4.0",
@@ -4797,16 +4797,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@types/jest": {
-      "version": "26.0.19",
-      "resolved": "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.19.tgz",
-      "integrity": "sha512-jqHoirTG61fee6v6rwbnEuKhpSKih0tuhqeFbCmMmErhtu3BYlOZaXWjffgOstMM4S/3iQD31lI5bGLTrs97yQ==",
-      "license": "MIT",
-      "dependencies": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz",
@@ -38902,15 +38892,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "@types/jest": {
-      "version": "26.0.19",
-      "resolved": "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.19.tgz",
-      "integrity": "sha512-jqHoirTG61fee6v6rwbnEuKhpSKih0tuhqeFbCmMmErhtu3BYlOZaXWjffgOstMM4S/3iQD31lI5bGLTrs97yQ==",
-      "requires": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      }
-    },
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz",

packages/comty/package.json

@@ -35,6 +35,7 @@
     "moment": "^2.28.0",
     "path-to-regexp": "^6.1.0",
     "platform": "^1.3.6",
+    "react": "^16.14.0",
     "react-animations": "^1.0.0",
     "react-color": "^2.19.3",
     "react-dazzle": "^1.4.0",

packages/comty/schemas/settings.json

@@ -1,37 +0,0 @@
-[
-  {
-    "id": "session_noexpire",
-    "icon": "Watch",
-    "type": "switch",
-    "title": "No expire session",
-    "description": "Force the app to not expire any session... [Developer]"
-  },
-  {
-    "id": "search_ontype",
-    "icon": "CornerDownRight",
-    "type": "switch",
-    "title": "Detect input on search bar",
-    "description": "Force the app to automaticly search when a type input is detected... [Developer]"
-  },
-  {
-    "id": "post_hidebar",
-    "icon": "Menu",
-    "type": "switch",
-    "title": "Auto hide postbar",
-    "description": "Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]"
-  },
-  {
-    "id": "post_autoposition",
-    "icon": "AlignCenter",
-    "type": "switch",
-    "title": "Auto center on click",
-    "description": ""
-  },
-  {
-    "id": "verbosity",
-    "icon": "Terminal",
-    "type": "switch",
-    "title": "Enable core verbosity",
-    "description": "Show all console logs... [Developer]"
-  }
-]

packages/comty/schemas/settings_general.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "session_noexpire",
+    "icon": "Watch",
+    "type": "Switch",
+    "title": "No expire session",
+    "description": "Force the app to not expire any session"
+  },
+  {
+    "id": "search_ontype",
+    "icon": "CornerDownRight",
+    "type": "Switch",
+    "title": "Auto search on input",
+    "description": "Search automaticly when type something"
+  },
+  {
+    "id": "post_hidebar",
+    "icon": "Menu",
+    "type": "Switch",
+    "title": "Auto hide postbar",
+    "description": "Hide post actions bar when loose focus"
+  },
+  {
+    "id": "post_autoposition",
+    "icon": "AlignCenter",
+    "type": "Switch",
+    "title": "Center on click",
+    "description": "Center posts element when then is clicked"
+  },
+  {
+    "id": "verbosity",
+    "icon": "Terminal",
+    "type": "Switch",
+    "title": "Verbosity",
+    "description": "Show all development logs of the application"
+  }
+]

packages/comty/src/pages/settings/components/general/index.js

@@ -1,127 +1,83 @@
-import React, { Component, Fragment } from 'react'
+import React from 'react'
-import { List, Switch, Button, notification, InputNumber } from 'antd'
+import { List, Button, Switch, Checkbox, InputNumber, Input } from 'antd'
+import * as Icons from 'components/Icons'
 
 import { verbosity } from '@nodecorejs/utils'
-import * as Icons from 'components/Icons'
 import { settings, newSetting } from 'core/libs/settings'
-import SettingList from 'schemas/settings.json'
+import listSettings from 'schemas/settings_general.json'
 
-import {connect} from 'umi'
+const AntdComponents = { Button, Switch, Checkbox, InputNumber, Input }
-
+export default class GeneralSettings extends React.Component {
-@connect(({ app }) => ({ app }))
+  state = {
-export default class GeneralSettings extends Component {
+    list: listSettings,
-  constructor(props) {
-    super(props);
-    this.state = {
-      list: SettingList,
-    };
   }
 
-  renderSetting = item => {
+  renderSetting = (item) => {
+    if (!item.type || !item.id) {
+      verbosity.log("Invalid component >", item)
+      return null
+    }
+    if (typeof(AntdComponents[item.type]) == "undefined") {
+      verbosity.log(`Invalid component, '${item.type}' not exists >`, item)
+      return null
+    }
+
+    let itemProps = {
+      onChange: (e) => this.onChange(item, e),
+      checked: settings.get(item.id)
+    }
+
     switch (item.type) {
-      case 'switch':
+      case 'Switch': {
-        return (
+        itemProps = { ...itemProps } // checkedChildren: "Enabled", unCheckedChildren: "Disabled"
-          <Switch
+        break
-            checkedChildren={'Enabled'}
+      }
-            unCheckedChildren={'Disabled'}
-            checked={settings.get(item.id)}
-            onChange={() => this.onChange(item)}
-          />
-        )
-      case 'numeric':
-        return (
-          <InputNumber
-            min={1}
-            max={50}
-            defaultValue={item.value}
-            onChange={() => this.onChangeNumeric(item, value)}
-          />
-        )
       default:
         break
     }
+
+    return React.createElement(AntdComponents[item.type], itemProps)
   }
 
-  handleControlBar() {
+  onChange(item, event) {
-    const ListControls = [
-      <div key={Math.random()}>
-        <Button
-          type="done"
-          icon={<Icons.SaveOutlined />}
-          onClick={() => this.saveChanges()}
-        >
-          Save
-        </Button>
-      </div>,
-    ]
-    ControlController.set(ListControls)
-  }
-
-  saveChanges() {
-    localStorage.setItem('app_settings', JSON.stringify(this.state.SettingRepo))
-    this.setState({ forSave: false })
-    notification.success({
-      message: 'Settings saved',
-      description:
-        'The configuration has been saved, it may for some configuration to make changes you need to reload the application',
-    })
-    ControlController.close()
-  }
-
-  onChange(item) {
     try {
-      switch (item.type) {
+      let to = event
-        case 'switch': {
-          item.to = !settings.get(item.id)
-          verbosity.log(`Changing setting (${item.id}: ${settings.get(item.id)}) => ${item.to}`)
-          settings.set(item.id, item.to)
-          this.handleChange(item)
 
-        }
+      verbosity.colors({ log: { textColor: "blue" } }).log(`Updating setting (${item.id}) > ${to}`)
-        case 'numeric': {
+      settings.set(item.id, to)
 
-        }
+      const updatedValues = this.state.list.map(element =>
-        default: {
+        element.id === item.id ? Object.assign(element, { value: to }) : element
-          return null
-        }
-      }
-    } catch (err) {
-      console.log(err)
-    }
-  }
-
-
-  handleChange(item) {
-    try {
-      const updatedValue = this.state.list.map(element =>
-        element.id === item.id ? Object.assign(element, { value: item.to }) : element
       )
-      this.setState({ list: updatedValue})
+      this.setState({ list: updatedValues })
     } catch (err) {
       console.log(err)
     }
   }
-  
+
+  renderIcon(icon, props) {
+    if (!Icons[icon]) {
+      verbosity.log(`${icon} not exist!`)
+      return null
+    }
+    return React.createElement(Icons[icon], props ?? null) 
+  }
 
   render() {
     return (
-      <Fragment>
+      <List
-        <div>
+        itemLayout="horizontal"
-          <List
+        dataSource={this.state.list}
-            itemLayout="horizontal"
+        renderItem={(item) => (
-            dataSource={this.state.list}
+          <List.Item actions={item.actions} key={item.id}>
-            renderItem={item => (
+            <List.Item.Meta
-              <List.Item actions={item.actions} key={item.id}>
+              title={<>{this.renderIcon(item.icon)}{item.title}</>}
-                <List.Item.Meta
+              description={item.description}
-                  title={<>{item.icon}{item.title}</>}
+            />
-                  description={item.description}
+            {this.renderSetting(item)}
-                />
+          </List.Item>
-                {this.renderSetting(item)}
+        )}
-              </List.Item>
+      />
-            )}
-          />
-        </div>
-      </Fragment>
     )
   }
 }

packages/comty/src/pages/settings/components/theme/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import * as Icons from 'components/Icons'
 import * as antd from 'antd'
 import { connect } from 'umi'
-import { arrayToObject, objectToArrayMap } from 'core'
+import { arrayToObject } from 'core'
 import ThemeSettingsList from 'schemas/theme_settings.json'
 
 import BackgroundSetting from './components/background'
@@ -62,7 +62,7 @@ export default class ThemeSettings extends React.Component {
                     renderItem={item => (
                         <div style={{ margin: '10px 0 10px 0' }} >
                             <antd.Card size="small" bodyStyle={{ width: '100%' }} style={{ display: "flex", flexDirection: "row", margin: 'auto', borderRadius: '12px' }} hoverable onClick={() => handleClick(item.id)}>
-                                <h3>{item.icon}{item.title} <div style={{ float: "right" }}><antd.Tag color={isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "green" : "default"} > {isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "Enabled" : "Disabled"} </antd.Tag></div></h3>
+                                <h3>{React.createElement(Icons[item.icon])}{item.title} <div style={{ float: "right" }}><antd.Tag color={isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "green" : "default"} > {isActive(arrayToObject(this.props.app.app_theme)[item.id]) ? "Enabled" : "Disabled"} </antd.Tag></div></h3>
                                 <p>{item.description}</p>
                             </antd.Card>
                         </div>