comty/src/pages/settings/components/base.js

import React, { Component, Fragment } from 'react';
import { List, Switch, Button, notification, InputNumber } from 'antd';
import { ListSettings } from '../../../../globals/settings.js'
import { ControlBar } from 'ycore'
import * as ycore from "ycore"
import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
import { CustomIcons } from 'components'

class Base extends Component { 
  constructor(props){
    super(props),
    this.state = {
      SettingRepo:  ListSettings,
      forSave: false
    }
  }
  
  componentDidMount(){
    if (!localStorage.getItem('app_settings')) {
      ycore.yconsole.warn('The settings for this app in your Account isnt set yet, Using stock settings...')
    }
  }

  rendersets = (item) => {
  let e = item.type
   switch (e) {
     case 'switch':
      return <Switch checkedChildren={'Enabled'} unCheckedChildren={'Disabled'} checked={item.value? true : false} onChange={() => this.onChangeSwitch(item)} />
      case 'numeric':
        return <InputNumber min={1} max={50} defaultValue={item.value} onChange={() => this.onChangeNumeric(item, value)} />
     default:
       break;
   }
  }

  SettingRender = data =>{
    try{
    return(
      <div>
      <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
                 <List.Item actions={item.actions} key={item.SettingID}  >
                   <List.Item.Meta title={item.title} description={item.description} />
                    { this.rendersets(item) }
                 </List.Item>
               )}
        />
      </div>
      )
    }
    catch (err){
      return ycore.yconsole.log(err)
    }
  }
  handleControlBar(){
    const ListControls = [
      (<div key={Math.random()}>
          <Button type="done" icon={<Icons.SaveOutlined />} onClick={() => this.saveChanges()} >Save</Button>
      </div>
     )
    ]
    ControlBar.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',
    })
    setTimeout((ycore.RefreshONCE()), 1000)
    ControlBar.close()
  }

  onChangeSwitch(item) {
    try {
      this.handleControlBar()
      const to = !item.value
      const updatedValue = [...this.state.SettingRepo]
      .map(ita => ita === item? Object.assign(ita, { "value": to }) : ita);
      this.setState({SettingRepo: updatedValue, forSave: true})
      ycore.yconsole.log(`Changing ${item.SettingID} to value ${to}`)
    } catch (err) {
      console.log(err)
    }
  }
  onChangeNumeric(value, item) {
    this.HandleChangeNumeric(value)
  }
  HandleChangeNumeric(item, value) {
    try {
      this.handleControlBar()
      console.log(item.SettingID, value)
      const updatedValue = [...this.state.SettingRepo]
      .map(ita => ita === item? Object.assign(ita, { "value": value }) : ita);
      this.setState({SettingRepo: updatedValue, forSave: true})
      ycore.yconsole.log(`Changing ${item.SettingID} to value ${to}`)
    } catch (err) {
      console.log(err)
    }
  }
  render() {
    return (
      <Fragment>
         <div>
            <h1><Icons.PullRequestOutlined /> Behaviors</h1>
             {this.SettingRender(this.state.SettingRepo)}
         </div>
      </Fragment>
    );
  }
}

export default Base;