import ReactDOM from "react-dom"; import React, { useEffect, useCallback } from "react"; import { useEffectReducer } from "./useEffectReducer"; import "./styles.css"; let itemData = [ { id: 1, name: "Milk Chocolate" }, { id: 2, name: "Dark Chocolate" }, { id: 3, name: "White Chocolate" }, { id: 4, name: "Raw Chocolate" }, { id: 5, name: "Chocolate Milk" } ]; let globalId = 1000; // for faking the server id function noop() {} let lastColor; function generateNewColor() { lastColor = "rgba(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ",1)"; } function mainReducer([state, effects], action) { switch (action.type) { case "show-new": return [{ ...state, showNew: true, editingId: undefined }]; case "hide-new": return [{ ...state, showNew: false }]; case "new-item": { let { fields } = action; if (action.shouldAdd) { let newItem = { ...state.newItem, ...fields }; return [ { ...state, newItem: {}, showNew: false }, [{ type: "ADD_ITEM", action, newItem }] ]; } else { let newItem = { ...state.newItem, ...fields }; return [{ ...state, newItem: newItem }]; } } case "save-item": { const { item } = action; return [ { ...state, items: state.items.map(it => (it.id === item.id ? item : it)), editingId: undefined }, [{ type: "SAVE_ITEM", item: item }] ]; } case "add-item": { const { item } = action; return [ { ...state, items: [...state.items, item] }, [{ type: "ITEM_ADDED", item: item }] ]; } case "edit-item": return [{ ...state, editingId: action.id, showNew: false }]; case "delete-item": { const { item } = action; return [ { ...state, items: state.items.filter(it => it.id !== item.id), editingId: undefined }, [{ type: "DELETE_ITEM", item: item }] ]; } default: return [state]; } } let NewRow = React.memo(({ item, onSave, onAdd }) => { function onKeyUp(e) { switch (e.keyCode) { case 13: // Enter onAdd({ ...item, name: e.target.value }); break; default: break; } } return (

{ if (onSave) { onSave({ ...item, name: e.target.value }); } }} />

); }); let Row = React.memo(({ item, selectedItem, onSelect, onBlur, onDelete }) => { function onKeyUp(e) { switch (e.keyCode) { case 13: // Enter onBlur({ ...item, name: e.target.value }); break; default: break; } } return (

onSelect(item)} >

{ if (onBlur) { onBlur({ ...item, name: e.target.value }); } }} /> {selectedItem ? null : item.name}

); }); const initialListState = [ { editingId: undefined, items: itemData, newItem: {}, showNew: false } ]; function App() { generateNewColor(); const [[state, effects], dispatch] = useEffectReducer( mainReducer, initialListState ); let onSelect = useCallback( item => { dispatch({ type: "edit-item", id: item.id }); }, [dispatch] ); let onSave = useCallback( item => { dispatch({ type: "save-item", item }); }, [dispatch] ); let onDelete = useCallback( item => { dispatch({ type: "delete-item", item }); }, [dispatch] ); let onAddNew = useCallback( fields => { dispatch({ type: "new-item", fields, shouldAdd: true }); }, [dispatch] ); let onSaveNew = useCallback( fields => { dispatch({ type: "new-item", fields, shouldAdd: false }); }, [dispatch] ); let onShowNew = useCallback( item => { dispatch({ type: "show-new" }); }, [dispatch] ); useEffect(() => { if (effects) { effects.forEach(effect => { switch (effect.type) { case "ADD_ITEM": console.log("ADDING ITEM TO SERVER", effect); dispatch({ type: "add-item", item: { id: ++globalId, ...effect.newItem } }); break; case "SAVE_ITEM": console.log("SAVING ITEM TO SERVER", effect); break; case "DELETE_ITEM": console.log("DELETING ITEM FROM SERVER", effect); break; case "ITEM_ADDED": console.log("ITEM SUCCESSFULLY ADDED TO SERVER", effect); break; default: console.warn("Unhandled effect", effect); } }); } }, [effects, dispatch]); return (

{state.items.map(item => ( ))} {state.showNew ? ( ) : ( )}

); } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

ry40mp49rq