Update : listitem remove #105

Signed-off-by: bentshrimp <bent_shrimp@kookmin.ac.kr>
AgainIoT · Oct 11, 2023 · c535642 · c535642
1 parent 145407f
commit c535642
Showing 1 changed file with 25 additions and 27 deletions.
diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
@@ -41,11 +41,16 @@ export function TemplateList(props) {
       content: value.content,
     });
     let tmp = selectedData;
-    tmp.push(value.title);
+    tmp.push(value);
     setSelectedData(tmp);
     console.log(selectedData);
   };
 
+  const handleRemove = (id) => {
+    const filteredData = selectedData.filter((item) => item._id !== id);
+    setSelectedData(filteredData);
+  };
+
   const handleDrop = (droppedItem) => {
     // Ignore drop outside droppable container
     if (!droppedItem.destination) return;
@@ -58,6 +63,10 @@ export function TemplateList(props) {
     setSelectedData(updatedList);
   };
 
+  useEffect(() => {
+    console.log(selectedData);
+  }, [selectedData]);
+
   useEffect(() => {
     let completed = false;
 
@@ -83,10 +92,6 @@ export function TemplateList(props) {
     };
   }, []);
 
-  useEffect(() => {
-    console.log(selectedData);
-  }, [selectedData]);
-
   return (
     <Item>
       <Typography
@@ -129,37 +134,30 @@ export function TemplateList(props) {
         >
           {reorderable ? (
             <DragDropContext onDragEnd={handleDrop}>
-              <Droppable droppableId="list-container">
+              <Droppable droppableId="droppable">
                 {(provided) => (
-                  <div
-                    className="list-container"
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                  >
+                  <ul {...provided.droppableProps} ref={provided.innerRef}>
                     {selectedData.map((item, index) => (
-                      <Draggable key={item} draggableId={item} index={index}>
+                      <Draggable
+                        key={item._id}
+                        draggableId={item._id}
+                        index={index}
+                      >
                         {(provided) => (
-                          <div
-                            className="item-container"
-                            ref={provided.innerRef}
-                            {...provided.dragHandleProps}
+                          <ListItem
                             {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            ref={provided.innerRef}
                           >
-                            <div className="left-item">{item}</div>
-                            <button
-                              className="right-item"
-                              onClick={() => {
-                                console.log(item);
-                              }}
-                            >
-                              remove
+                            {item.title}
+                            <button onClick={() => handleRemove(item._id)}>
+                              Remove
                             </button>
-                          </div>
+                          </ListItem>
                         )}
                       </Draggable>
                     ))}
-                    {provided.placeholder}
-                  </div>
+                  </ul>
                 )}
               </Droppable>
             </DragDropContext>