form redux logic moved to form not in modal, drawer

Author: vigneshwaran-chandrasekaran

src/forms/todo/drawer.form.js

@@ -34,7 +34,7 @@ export default function DrawerForm() {
 				Add new todo
 			</Button>
 			<Drawer
-				title="Add new todo"
+				title="Todo"
 				width={500}
 				placement="right"
 				closable={false}

src/forms/todo/modal.form.js

@@ -7,24 +7,22 @@ import { editTodo } from '../../store/actions/api.actions';
 
 export default function ModalForm() {
 	const [visible, setVisible] = useState(false);
-	const [formData, setFormData] = useState({});
 	const dispatch = useDispatch();
 	const { editTodoData } = useSelector((state) => state.api);
 
 	useEffect(() => {
 		if (!isEmpty(editTodoData)) {
 			setVisible(true);
-			setFormData(editTodoData);
 		}
 	}, [editTodoData]);
 
 	const showForm = () => {
 		dispatch(editTodo());
 		setVisible(true);
-		setFormData({});
 	};
 
 	const onClose = () => {
+		dispatch(editTodo());
 		setVisible(false);
 	};
 
@@ -34,16 +32,12 @@ export default function ModalForm() {
 				Add new todo
 			</Button>
 			<Modal
-				title="Add new todo"
+				title="Todo"
 				visible={visible}
 				onCancel={onClose}
 				footer={null}
 			>
-				<TodoForm
-					onClose={onClose}
-					editMode={!isEmpty(formData)}
-					editableTodoData={formData}
-				/>
+				<TodoForm onClose={onClose} />
 			</Modal>
 		</div>
 	);

src/forms/todo/todo.form.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { message, Col, Row } from 'antd';
 import { Form, Input, DatePicker, Select } from 'formik-antd';
 import { Formik } from 'formik';
@@ -23,29 +23,38 @@ const TodoSchema = Yup.object({
 
 const TOMORROW = moment().add(1, 'days');
 
-function TodoForm({ onClose, editMode = false, editableTodoData = {} }) {
+function TodoForm({ onClose }) {
 	const dispatch = useDispatch();
+	const { editTodoData } = useSelector((state) => state.api);
 	const [dueDate, setDueDate] = useState();
 	const [todoLabel, setTodoLabel] = useState();
-
-	const formInitialValues = {
-		title: editMode ? editableTodoData.title : undefined,
-		description: editMode ? editableTodoData.description : undefined,
-		dueDate: editMode ? moment(editableTodoData.dueDate) : TOMORROW,
-		label: editMode ? editableTodoData.label : 1,
-	};
+	const [editMode, setEditMode] = useState(false);
+	const [formInitialValues, setFormInitialValues] = useState({});
 
 	useEffect(() => {
-		if (!isEmpty(editableTodoData)) {
-			setDueDate(moment(editableTodoData.dueDate));
+		if (!isEmpty(editTodoData)) {
+			setEditMode(true);
+			setDueDate(moment(editTodoData.dueDate));
+		} else {
+			setEditMode(false);
 		}
-	}, [editableTodoData]);
+	}, [editTodoData]);
+
+	useEffect(() => {
+		const formInitialValues = {
+			title: editMode ? editTodoData.title : undefined,
+			description: editMode ? editTodoData.description : undefined,
+			dueDate: editMode ? moment(editTodoData.dueDate) : TOMORROW,
+			label: editMode ? editTodoData.label : 1,
+		};
+		setFormInitialValues(formInitialValues);
+	}, [editMode]);
 
 	function handleSubmit(values, { setErrors, resetForm, setSubmitting }) {
 		let url = `todos`;
 
 		if (editMode) {
-			url = `${url}/${editableTodoData._id}`;
+			url = `${url}/${editTodoData._id}`;
 		}
 
 		const CREDENTIALS = {
@@ -183,8 +192,6 @@ function TodoForm({ onClose, editMode = false, editableTodoData = {} }) {
 
 TodoForm.propTypes = {
 	onClose: PropTypes.func.isRequired,
-	// editMode: PropTypes.bool.isRequired,
-	// editableTodoData: PropTypes.object.isRequired,
 };
 
 export { TodoForm };