From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
---
 .../apps/todos/src/views/Todo/Todo.js              | 86 ++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js

(limited to 'public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js')

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;
-- 
cgit v1.2.3