Localization.js

import React, { useEffect, useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Input, Button, Form, Modal, Popconfirm, Select } from 'antd';
import { setLocalizationState, getLocalizationState } from '../../actions';
import { getLanguageName } from '../../../../utils/languageHelpers';
import styles from '../../styles.scss';

const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  state = {
    editing: false
  };

  toggleEdit = () => {
    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  };

  save = (e) => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }
      this.toggleEdit();
      handleSave({ ...record, ...values });
    });
  };

  renderCell = (form) => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            {
              required: true,
              message: `A value for ${title} is required.`
            }
          ],
          initialValue: record[dataIndex]
        })(
          <Input
            ref={(node) => (this.input = node)}
            onPressEnter={this.save}
            onBlur={this.save}
            placeholder="Enter your value here..."
          />
        )}
      </Form.Item>
    ) : (
      <div
        className={styles.editablecellvaluewrap}
        style={{ paddingRight: 24, minWidth: '70px', minHeight: '20px' }}
        onClick={this.toggleEdit}
      >
        {children}
      </div>
    );
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
          children
        )}
      </td>
    );
  }
}

const Localization = (props) => {
  const [state, setState] = useState({ modalVisible: false });
  const dispatch = useDispatch();
  const tableState = useSelector(
    (state) => state.projects.localizationStateData
  );

  const fetchTableState = useCallback(() => {
    dispatch(getLocalizationState());

 
  }, [dispatch]);

 

  const showNewLangSetModal = (e) => {
    setState({
      ...tableState,
      modalVisible: true
    });
  };

  const handleCloseModal = (e) => {
    setState({
      ...tableState,
      modalVisible: false
    });
  };

  const handleDelete = (key) => {
    const dataSource = [...tableState.dataSource];

    dispatch(
      setLocalizationState({
        ...tableState,
        dataSource: dataSource.filter((item) => item.key !== key)
      })
    );
  };

  const handleAdd = () => {
    const { count, dataSource, columns } = tableState;
    const newData = {
      key: count + 1,
      keyName: 'KEY'
    };

    dispatch(
      setLocalizationState({
        ...tableState,
        dataSource: [...dataSource, newData],
        count: count + 1
      })
    );
  };

  const newLanguageData = (e) => {
    setState({
      ...tableState,
      modalVisible: true,
      newLang: e.toLowerCase()
    });
  };

  const handleAddNewLanguageSet = () => {
    const { newLang } = state;
    const data = {
      title: getLanguageName(newLang),
      dataIndex: newLang,
      editable: true,
      ellipsis: true
    };

    setState({
      ...tableState,
      modalVisible: false
    });

    const columns = tableState.columns.map((item) => {
      return { ...item };
    });

    columns.splice(1, 0, data);
    const langs = tableState.availableLangs ? [...tableState.availableLangs] : ['en', 'tr']

    langs.push(newLang);

    dispatch(
      setLocalizationState({
        ...tableState,
        availableLangs: langs,
        columns: [...columns]
      })
    );
  };

  const handleSave = (row) => {
    const newData = [...tableState.dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row
    });

    dispatch(setLocalizationState({ ...tableState, dataSource: newData }));
  };

  const components = {
    body: {
      row: EditableFormRow,
      cell: EditableCell
    }
  };

  useEffect(() => {
    fetchTableState();
    if (tableState) {
      setState({
        ...state,
        tableState: {
          columns: [{
            title: 'ID',
            dataIndex: 'key',
            editable: false,
            width: '5%',
            ellipsis: true,
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.key - b.key,
            sortDirections: ['descend', 'ascend'],
          }, ...tableState.columns, {
            title: 'Action',
            dataIndex: 'operation',
            render: (text, record) =>
            tableState.columns.length >= 1 ? (
                <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
                  <a>Delete</a>
                </Popconfirm>
              ) : null,
          },    ]
        }
      });
    }
  }, [fetchTableState, tableState]);

  if (!tableState) return <div>Loading</div>;

  return (
    <div>
      <h1>Localization</h1>
      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
        Add new key
      </Button>{' '}
      <Button
        onClick={showNewLangSetModal}
        type="secondary"
        style={{ marginBottom: 16 }}
      >
        Add new language set
      </Button>
      {state.tableState && (
        <Table
          components={components}
          rowClassName={() => 'editableRow'}
          bordered
          dataSource={tableState.dataSource}
          rowKey={(record) => record.key}
          columns={state.tableState.columns.map((col) => {
            if (!col.editable) {
              return col;
            }
            return {
              ...col,

              onCell: (record) => ({
                record,
                editable: col.editable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave: handleSave
              })
            };
          })}
        />
      )}
      <Modal
        title="Add new language set"
        visible={state.modalVisible}
        onOk={() => handleAddNewLanguageSet()}
        onCancel={() => handleCloseModal()}
      >
        <Select
          placeholder="Choose a language"
          style={{ width: '100%' }}
          onChange={(data) => newLanguageData(data)}
        >
          <Select.Option value="AF">Afrikaans</Select.Option>
          <Select.Option value="SQ">Albanian</Select.Option>
          <Select.Option value="AR">Arabic</Select.Option>
          <Select.Option value="HY">Armenian</Select.Option>
          <Select.Option value="EU">Basque</Select.Option>
          <Select.Option value="BN">Bengali</Select.Option>
          <Select.Option value="BG">Bulgarian</Select.Option>
          <Select.Option value="CA">Catalan</Select.Option>
          <Select.Option value="KM">Cambodian</Select.Option>
          <Select.Option value="ZH">Chinese (Mandarin)</Select.Option>
          <Select.Option value="HR">Croatian</Select.Option>
          <Select.Option value="CS">Czech</Select.Option>
          <Select.Option value="DA">Danish</Select.Option>
          <Select.Option value="NL">Dutch</Select.Option>
          <Select.Option value="EN">English</Select.Option>
          <Select.Option value="ET">Estonian</Select.Option>
          <Select.Option value="FJ">Fiji</Select.Option>
          <Select.Option value="FI">Finnish</Select.Option>
          <Select.Option value="FR">French</Select.Option>
          <Select.Option value="KA">Georgian</Select.Option>
          <Select.Option value="DE">German</Select.Option>
          <Select.Option value="EL">Greek</Select.Option>
          <Select.Option value="GU">Gujarati</Select.Option>
          <Select.Option value="HE">Hebrew</Select.Option>
          <Select.Option value="HI">Hindi</Select.Option>
          <Select.Option value="HU">Hungarian</Select.Option>
          <Select.Option value="IS">Icelandic</Select.Option>
          <Select.Option value="ID">Indonesian</Select.Option>
          <Select.Option value="GA">Irish</Select.Option>
          <Select.Option value="IT">Italian</Select.Option>
          <Select.Option value="JA">Japanese</Select.Option>
          <Select.Option value="JW">Javanese</Select.Option>
          <Select.Option value="KO">Korean</Select.Option>
          <Select.Option value="LA">Latin</Select.Option>
          <Select.Option value="LV">Latvian</Select.Option>
          <Select.Option value="LT">Lithuanian</Select.Option>
          <Select.Option value="MK">Macedonian</Select.Option>
          <Select.Option value="MS">Malay</Select.Option>
          <Select.Option value="ML">Malayalam</Select.Option>
          <Select.Option value="MT">Maltese</Select.Option>
          <Select.Option value="MI">Maori</Select.Option>
          <Select.Option value="MR">Marathi</Select.Option>
          <Select.Option value="MN">Mongolian</Select.Option>
          <Select.Option value="NE">Nepali</Select.Option>
          <Select.Option value="NO">Norwegian</Select.Option>
          <Select.Option value="FA">Persian</Select.Option>
          <Select.Option value="PL">Polish</Select.Option>
          <Select.Option value="PT">Portuguese</Select.Option>
          <Select.Option value="PA">Punjabi</Select.Option>
          <Select.Option value="QU">Quechua</Select.Option>
          <Select.Option value="RO">Romanian</Select.Option>
          <Select.Option value="RU">Russian</Select.Option>
          <Select.Option value="SM">Samoan</Select.Option>
          <Select.Option value="SR">Serbian</Select.Option>
          <Select.Option value="SK">Slovak</Select.Option>
          <Select.Option value="SL">Slovenian</Select.Option>
          <Select.Option value="ES">Spanish</Select.Option>
          <Select.Option value="SW">Swahili</Select.Option>
          <Select.Option value="SV">Swedish </Select.Option>
          <Select.Option value="TA">Tamil</Select.Option>
          <Select.Option value="TT">Tatar</Select.Option>
          <Select.Option value="TE">Telugu</Select.Option>
          <Select.Option value="TH">Thai</Select.Option>
          <Select.Option value="BO">Tibetan</Select.Option>
          <Select.Option value="TO">Tonga</Select.Option>
          <Select.Option value="TR">Turkish</Select.Option>
          <Select.Option value="UK">Ukrainian</Select.Option>
          <Select.Option value="UR">Urdu</Select.Option>
          <Select.Option value="UZ">Uzbek</Select.Option>
          <Select.Option value="VI">Vietnamese</Select.Option>
          <Select.Option value="CY">Welsh</Select.Option>
          <Select.Option value="XH">Xhosa</Select.Option>
        </Select>
      </Modal>
    </div>
  );
};

export default Localization;