lab8 finally

PahaN47 · Apr 17, 2022 · df7bff4 · df7bff4
1 parent ccd4c51
commit df7bff4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 22 deletions.
diff --git a/lab8/src/App.css b/lab8/src/App.css
@@ -66,12 +66,17 @@
   margin-top: 16px;
 }
 
+.item > input {
+  position: relative;
+  left: 0;
+}
+
 .item-edit > * {
   color: black;
   text-shadow: none;
 }
 
-.checked, .unchecked {
+.checked, .unchecked{
   position: relative;
   left: 16px;  
 }
@@ -86,6 +91,22 @@
   margin: 0;
 }
 
+.editted {
+  width: 80%;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.editted > * {
+  color: black;
+  text-shadow: none;
+}
+
+.editted > input {
+  width: 70%;
+}
+
 .item-edit {
   margin-top: 8px;
 }
diff --git a/lab8/src/ToDoList.jsx b/lab8/src/ToDoList.jsx
@@ -2,51 +2,78 @@ import React, { useReducer, useState } from "react";
 
 export function ToDoList() {
     const [items, editItems] = useReducer((curItems, action) => {
-        console.log(action);
         if (action.type === 'remove')
             return curItems.filter((item) => !action.payload.includes(item));
         if (action.type === 'add')
-            return curItems.concat(action.payload);
+            return curItems.concat(action.payload.reduce((result, item) => {
+                let lastId = result.length === 0 ?
+                    curItems[curItems.length - 1].id : result[result.length - 1].id;
+                lastId++;
+                result.push({ text: item, id: lastId });
+                return result;
+            }, []));
+        if (action.type === 'edit') {
+            let index =
+                curItems.findIndex((item) => action.payload[0].id === item.id);
+            curItems[index].text = action.payload[0].text;
+            return curItems;
+        }
         return curItems;
-    }, ['make a list']);
+    }, [{ text: 'make a list', id: 0 }]);
 
     return (
         <div>
             <h2>Yesterday you said tomorrow. So just DO it!!!! MAKE. YOUR DREAMS. COME TRUE!!!</h2>
             <div className='to-do-list'>
-                <ItemList itemList={items}></ItemList>
+                <ItemList itemList={items} parentListEditor={editItems}></ItemList>
                 <ItemEdit parentListEditor={editItems}></ItemEdit>
             </div>
         </div>
     );
 }
 
-export function ItemList({ itemList, editMode }) {
+export function ItemList({ itemList, parentListEditor }) {
     return (
         <form className='item-list'>
-            {itemList.map((item) => <Item textContent={item} mode={editMode}></Item>)}
+            {itemList.map((item) =>
+                <Item itemId={item.id} textContent={item.text} parentListEditor={parentListEditor}>
+                </Item>)}
         </form>
     );
 }
 
-export function Item({ textContent, mode }) {
+export function Item({ itemId, textContent, parentListEditor }) {
+    const [id, setId] = useState(itemId);
+    const [edit, setEdit] = useState(false);
     const [text, setText] = useState(textContent);
     const [state, setState] = useState(false);
-    console.log(`${textContent} created`);
+    const editParent = parentListEditor;
     return (
-        <div>
-            <input type='checkbox' checked={state}
-                onChange={() => setState((prevState) => !prevState)
-                }>
-            </input>
-            {state ? (
-                <del className='checked'>
-                    {text}
-                </del>) : (
-                <span className='unchecked'>
-                    {text}
-                </span>
-            )}
+        <div className='item'>
+            {!edit ? (
+                <input type='checkbox' checked={state}
+                    onChange={() => setState((prevState) => !prevState)}></input>
+            ) : (<></>)}
+            {!edit ?
+                state ? (
+                    <del className='checked'>
+                        {text}
+                    </del>) : (
+                    <span className='unchecked' onClick={() => setEdit(true)}>
+                        {text}
+                    </span>
+                ) : (
+                    <span className='editted'>
+                        <input type='text' value={text} onChange={(e) => setText(e.target.value)}>
+                        </input>
+                        <button onClick={() => {
+                            setEdit(false);
+                            editParent({ type: 'edit', payload: [{ text: text, id: id }] })
+                        }}>
+                            ok
+                        </button>
+                    </span>
+                )}
         </div>
     );
 }