simple_react_entry_list.jsx

import React, { useReducer } from 'react';

import { Form } from 'components/form';
import { Button } from 'components/button/newButton';
import { dataMapToObj } from 'components/formHelpers';
import { addImport } from './importMergeHelpers';
import { update, isNil, remove } from 'ramda';

import './importMerge.css';

const FORM_ID = `${Math.random()}_import_merge_form`;

const EntryEditor = ({
  entry: { importKeyField, lookupTable, lookupTableKeyField } = {},
  onSave
}) => {
  return (
    <>
      <Form
        id={FORM_ID}
        onSubmit={({ dataMap }) => {
          return onSave(dataMapToObj(dataMap));
        }}
      >
        {() => {
          return (
            <>
              <label htmlFor="importKeyField">importKeyField</label>
              <input
                defaultValue={importKeyField}
                id="importKeyField"
                name="importKeyField"
                type="text"
                required={true}
              />

              <label htmlFor="lookupTable">lookupTable</label>
              <input
                defaultValue={lookupTable}
                id="lookupTable"
                name="lookupTable"
                type="text"
                required={true}
              />

              <label htmlFor="lookupTableKeyField">lookupTableKeyField</label>
              <input
                defaultValue={lookupTableKeyField}
                id="lookupTableKeyField"
                name="lookupTableKeyField"
                type="text"
                required={true}
              />
            </>
          );
        }}
      </Form>
    </>
  );
};

const EntryViewer = ({ importKeyField, lookupTable, lookupTableKeyField }) => {
  return (
    <ul>
      <li>{importKeyField}</li>
      <li>{lookupTable}</li>
      <li>{lookupTableKeyField}</li>
    </ul>
  );
};

const EditableContent = ({ children, onClick }) => {
  return (
    <div className="import-merge-editable-content" onClick={onClick}>
      {children}
    </div>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'removeEntry': {
      const newEntries = remove(action.payload, 1, state.entries);
      return { ...state, entries: newEntries, editIndex: null };
    }

    case 'saveEntry': {
      return {
        ...state,
        entries: update(action.payload.index, action.payload.entry, state.entries),
        editIndex: null
      };
    }

    case 'editEntry': {
      return {
        ...state,
        editIndex: action.payload
      };
    }

    case 'addEntry': {
      const newEntries = addImport()(state.entries);
      return {
        ...state,
        entries: newEntries,
        editIndex: newEntries.length - 1
      };
    }

    default:
      throw new Error();
  }
};

export const ImportMerge = ({ entries }) => {
  const [state, dispatch] = useReducer(reducer, { entries, editIndex: null });

  return (
    <>
      {state.entries.map((entry, index) => {
        const key = `${JSON.stringify(entry)}`;

        if (state.editIndex === index) {
          return (
            <>
              <EntryEditor
                key={key}
                onSave={newEntry => {
                  dispatch({ type: 'saveEntry', payload: { entry: newEntry, index } });
                }}
                entry={entry}
              />
              <Button form={FORM_ID} type="submit">
                Save
              </Button>
              <Button
                onClick={() => {
                  dispatch({ type: 'removeEntry', payload: index });
                }}
              >
                Remove
              </Button>
            </>
          );
        }
        return (
          <EditableContent
            key={key}
            onClick={() => {
              dispatch({ type: 'editEntry', payload: index });
            }}
          >
            <EntryViewer {...entry} />
          </EditableContent>
        );
      })}
      {isNil(state.editIndex) && (
        <Button
          onClick={() => {
            dispatch({ type: 'addEntry' });
          }}
        >
          Add new
        </Button>
      )}
    </>
  );
};