update

05-hooks/src/App.css

@@ -17,7 +17,7 @@
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);

05-hooks/src/App.js

@@ -2,31 +2,98 @@ import React, { useReducer, useRef } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
+import { useImmer } from "use-immer";
+
+const CharList = () => {
+  const [state, updateState] = useImmer({
+    char: [
+      {
+        id: 1,
+        name: "Yutsuo",
+        class: { id: "1", label: "monk" },
+        level: { clvl: "120", jlvl: "70" }
+      },
+      {
+        id: 2,
+        name: "Hee-Tae",
+        class: { id: "2", label: "monk" },
+        level: { clvl: "80", jlvl: "55" }
+      }
+    ]
+  });
+
+  const jobLevelUp = event => {
+    // updateState(draft => {
+    //   draft.char[0].level.jlvl++;
+    // });
+    console.log("event.target.id :", event.target);
+    console.log('state.char :', state.char);
+    console.log('state.char[0] :', state.char[0]);
+  };
+
+  return state.char.map(eachItem => {
+    return (
+      <div key={eachItem.id}>
+        <label>Name</label>
+        <input readOnly={true} value={eachItem.name} />
+        <br />
+        <label>Class</label>
+        <input readOnly={true} value={eachItem.class.label} />
+        <br />
+        <label>char Level</label>
+        <input readOnly={true} value={eachItem.level.clvl} />
+        <br />
+        <label>job Level</label>
+        <input readOnly={true} value={eachItem.level.jlvl} />
+        <br />
+        <button
+          id={eachItem.id}
+          name={eachItem.name}
+          jlvl={eachItem.level.jlvl}
+          onClick={event => jobLevelUp(event)}
+        >
+          jobLevelUp
+        </button>
+      </div>
+    );
+  });
+};
+
 const Counter = () => {
   const [sum, dispatch] = useReducer((state, action) => {
     return state + action;
   }, 0);
 
   return (
-    <>
-      {sum}
-      <button onClick={() => dispatch(1)}>+1</button>
-    </>
+    <div>
+      <div>{sum}</div>
+      <button onClick={() => dispatch(1)}>Add 1</button>
+    </div>
   );
 };
 
 const ShoppingList = () => {
   const inputRef = useRef();
   const [items, dispatch] = useReducer((state, action) => {
-    switch (
-      action.type
-      /** CODE HERE */
-    ) {
+    switch (action.type) {
+      case "add":
+        return [...state, { id: state.length, name: action.name }];
+      case "remove":
+        return state.filter((_, index) => index != action.index);
+      case "clear":
+        return [];
+      default:
+        return state;
     }
   }, []);
 
-  const handleSubmit = () => {
-    /** CODE HERE */
+  const handleSubmit = e => {
+    e.preventDefault();
+    dispatch({
+      type: "add",
+      name: inputRef.current.value
+    });
+    inputRef.current.value = "";
   };
 
   return (
@@ -34,9 +101,15 @@ const ShoppingList = () => {
       <form onSubmit={handleSubmit}>
         <input ref={inputRef} />
       </form>
+      <button onClick={() => dispatch({ type: "clear" })}>CLEAR</button>
       <ul>
         {items.map((item, index) => (
-          <li key={item.id}>{item.name}</li>
+          <li key={item.id}>
+            {item.name}
+            <button onClick={() => dispatch({ type: "remove", index })}>
+              X
+            </button>
+          </li>
         ))}
       </ul>
     </>
@@ -47,23 +120,28 @@ const App = () => {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        <div>
-          <Counter />
+        <div style={{ display: "inlineBlock", width: "50%" }}>
+          <img src={logo} className="App-logo" alt="logo" />
+          <p>
+            Edit <code>src/App.js</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
         </div>
-        <div>
-          <List />
+        <div style={{ display: "inlineBlock", width: "50%" }}>
+          <CharList />
+          {/* <div>
+            <Counter />
+          </div>
+          <div>
+            <ShoppingList />
+          </div> */}
         </div>
       </header>
     </div>

package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "udemy-react",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "immer": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-6.0.1.tgz",
+      "integrity": "sha512-oXwigCKgznQywsXi1VgrqgWbQEU3wievNCVc4Fcwky6mwXU6YHj6JuYp0WEM/B1EphkqsLr0x18lm5OiuemPcA=="
+    },
+    "use-immer": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.3.5.tgz",
+      "integrity": "sha512-0CNaJ/CtnF8/OmM4NBG7R0rhWMMQtgXPmWbakv8CK5z8dXeMaBYValFDXpkjBnToknjKJZuEPcoUZYd0rnQL2Q=="
+    }
+  }
+}

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "immer": "^6.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.2.0",
+    "use-immer": "^0.3.5"
   },
   "scripts": {
     "start": "react-scripts start",