1 files changed, 42 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/views/TodoForm/TodoForm.js b/public/projects/react-small-apps/apps/todos/src/views/TodoForm/TodoForm.js
new file mode 100644
index 0000000..bc6ed97
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/TodoForm/TodoForm.js
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { Button, Fieldset, Input, TextArea } from "../../components/forms";
+import { addTodo } from "../../store/todos/todos.slice";
+
+function TodoForm({ userId, closeForm }) {
+  const [titleValue, setTitleValue] = useState("");
+  const [bodyValue, setBodyValue] = useState("");
+  const dispatch = useDispatch();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    closeForm((prev) => !prev);
+  };
+
+  const handleSave = () => {
+    const newTodo = { userId, title: titleValue, body: bodyValue };
+    dispatch(addTodo(newTodo));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="form form--todo">
+      <Fieldset legend="Add a new todo">
+        <Input label="Title" value={titleValue} updateValue={setTitleValue} />
+        <TextArea
+          label="Details"
+          value={bodyValue}
+          updateValue={setBodyValue}
+        />
+        <Button
+          type="submit"
+          modifiers={["submit"]}
+          onClickHandler={handleSave}
+        >
+          Save
+        </Button>
+      </Fieldset>
+    </form>
+  );
+}
+
+export default TodoForm;