Refractor Main and Modal.js

jayakaral · Oct 3, 2022 · c17289a · c17289a
1 parent 627729f
commit c17289a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 12 deletions.
diff --git a/react-beautiful-dnd-todo-list/server/.DS_Store b/react-beautiful-dnd-todo-list/server/.DS_Store
diff --git a/todolist-with-react-and-socketIO/client/src/components/Main.js b/todolist-with-react-and-socketIO/client/src/components/Main.js
@@ -7,7 +7,6 @@ function Main({ socket }) {
 	const [todoList, setTodoList] = useState([]);
 
 	const [showModal, setShowModal] = useState(false);
-	const [comments, setComments] = useState([]);
 	const [selectedItemID, setSelectedItemID] = useState("");
 
 	const toggleModal = (itemId) => {
@@ -37,7 +36,6 @@ function Main({ socket }) {
 		}
 		fetchTodos();
 		socket.on("todos", (data) => setTodoList(data));
-		socket.on("commentsReceived", (todo) => setComments(todo.comments));
 	}, [socket]);
 
 	const deleteTodo = (id) => socket.emit("deleteTodo", id);
@@ -79,8 +77,6 @@ function Main({ socket }) {
 				<Modal
 					showModal={showModal}
 					setShowModal={setShowModal}
-					comments={comments}
-					setComments={setComments}
 					selectedItemID={selectedItemID}
 					socket={socket}
 				/>

diff --git a/todolist-with-react-and-socketIO/client/src/components/Modal.js b/todolist-with-react-and-socketIO/client/src/components/Modal.js
@@ -1,14 +1,9 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-const Modal = ({
-	showModal,
-	setShowModal,
-	comments,
-	selectedItemID,
-	socket,
-}) => {
+const Modal = ({ showModal, setShowModal, selectedItemID, socket }) => {
 	const modalRef = useRef();
 	const [comment, setComment] = useState("");
+	const [comments, setComments] = useState([]);
 
 	const closeModal = (e) => {
 		if (modalRef.current === e.target) {
@@ -24,6 +19,9 @@ const Modal = ({
 		});
 		setComment("");
 	};
+	useEffect(() => {
+		socket.on("commentsReceived", (todo) => setComments(todo.comments));
+	}, [socket]);
 
 	return (
 		<div className='modal' onClick={closeModal} ref={modalRef}>