2 files changed, 117 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js b/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js
new file mode 100644
index 0000000..1160ab5
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js
@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useLocation } from "react-router-dom";
+import { updateTodo } from "../../store/todos/todos.slice";
+import useToggle from "../../utilities/hooks";
+import "./Todo.scss";
+
+function Todo() {
+  const [isTitleEditable, setIsTitleEditable] = useToggle();
+  const [isBodyEditable, setIsBodyEditable] = useToggle();
+  const titleRef = useRef(null);
+  const bodyRef = useRef(null);
+  const location = useLocation();
+  const todoId = location.state.todoId;
+  const currentTodo = useSelector((state) => state.todos).find(
+    (todo) => todo.id === todoId
+  );
+  const { title, body } = currentTodo;
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    titleRef.current && titleRef.current.focus();
+    bodyRef.current && bodyRef.current.focus();
+  });
+
+  const handleSubmit = (e) => {
+    console.log(e);
+  };
+
+  return (
+    <>
+      <Link to="/">Back to your todo list</Link>
+      <div className="todo">
+        {isTitleEditable ? (
+          <form
+            action="#"
+            method="post"
+            className="todo-form todo__title"
+            onSubmit={handleSubmit}
+          >
+            <input
+              ref={titleRef}
+              className="todo-form__field"
+              type="text"
+              name="title"
+              value={title}
+              onChange={(e) =>
+                dispatch(updateTodo({ ...currentTodo, title: e.target.value }))
+              }
+              onBlur={setIsTitleEditable}
+            />
+          </form>
+        ) : (
+          <div className="todo__title" onClick={setIsTitleEditable}>
+            {title}
+          </div>
+        )}
+        {isBodyEditable ? (
+          <form
+            action="#"
+            method="post"
+            className="todo-form todo__body"
+            onSubmit={handleSubmit}
+          >
+            <textarea
+              ref={bodyRef}
+              className="todo-form__field todo-form__field--textarea"
+              name="body"
+              value={body}
+              onChange={(e) =>
+                dispatch(updateTodo({ ...currentTodo, body: e.target.value }))
+              }
+              onBlur={setIsBodyEditable}
+            />
+          </form>
+        ) : (
+          <div className="todo__body" onClick={setIsBodyEditable}>
+            {body}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Todo;
diff --git a/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.scss b/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.scss
new file mode 100644
index 0000000..67baa2d
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.scss
@@ -0,0 +1,31 @@
+.todo {
+  border: 1px solid #000;
+  margin-top: 2rem;
+  padding: 1rem;
+
+  & &__title {
+    font-size: 1.2rem;
+  }
+
+  & &__body {
+    margin-top: 1rem;
+    min-height: 10rem;
+  }
+}
+
+.todo-form {
+  &__field {
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    &--textarea {
+      resize: none;
+      line-height: inherit;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}