Implement todos list

Author: John Doe

package.json

@@ -1,10 +1,11 @@
 {
   "name": "todo-app",
   "scripts": {
-    "start": "esbuild src/app.jsx --bundle --outdir=www/js --servedir=www",
-    "build": "esbuild src/app.jsx --bundle --outdir=www/js --minify"
+    "start": "esbuild src/index.jsx --bundle --outdir=www/js --servedir=www",
+    "build": "esbuild src/index.jsx --bundle --outdir=www/js --minify"
   },
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import CreateTodo from './components/CreateTodo';
+import TodoFilter from './components/TodoFilter';
+import TodoList from './components/TodoList';
+import { useTodos } from './hooks/useTodos';
+
+const App = () => {
+  const { loading, todos, onCreate, onEdit, setQuery, setHideComplete } =
+    useTodos();
+
+  return (
+    <div>
+      <h1>TODOs</h1>
+      <TodoFilter setQuery={setQuery} setHideComplete={setHideComplete} />
+      <TodoList todos={todos} onEdit={onEdit} />
+      <CreateTodo onCreate={onCreate} />
+    </div>
+  );
+};
+
+export default App;

src/app.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+const CreateTodo = props => {
+  const [title, setTitle] = useState('');
+
+  return (
+    <form
+      style={{
+        position: 'fixed',
+        bottom: 0,
+        right: 0,
+      }}
+      onSubmit={event => {
+        event.preventDefault();
+        props.onCreate(title);
+        setTitle('');
+      }}
+    >
+      <input
+        value={title}
+        onInput={event => {
+          setTitle(event.target.value);
+        }}
+      />
+      <button>Add</button>
+    </form>
+  );
+};
+
+export default CreateTodo;

src/components/CreateTodo.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const TodoFilter = props => {
+  return (
+    <div>
+      <input
+        type="search"
+        placeholder="Search"
+        onInput={event => {
+          props.setQuery(event.target.value);
+        }}
+      />
+
+      <label>
+        <input
+          type="checkbox"
+          onChange={event => {
+            props.setHideComplete(event.target.checked);
+          }}
+        />
+        Hide complete
+      </label>
+    </div>
+  );
+};
+
+export default TodoFilter;

src/components/TodoFilter.jsx

@@ -0,0 +1,33 @@
+import moment from 'moment';
+import React from 'react';
+
+const TodoList = props => (
+  <ul>
+    {props.todos.map(todo => (
+      <li>
+        <label>
+          <input
+            type="checkbox"
+            checked={todo.complete}
+            onChange={event => {
+              props.onEdit({
+                ...todo,
+                complete: event.target.checked,
+              });
+            }}
+          />
+          <span
+            style={{
+              textDecoration: todo.complete ? 'line-through' : 'none',
+            }}
+          >
+            {todo.title}
+          </span>
+          {todo.dueDate && <b> - due {moment(todo.dueDate).fromNow()}</b>}
+        </label>
+      </li>
+    ))}
+  </ul>
+);
+
+export default TodoList;

src/components/TodoList.jsx

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export const useTodos = () => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch('https://jsonplaceholder.typicode.com/todos')
+      .then(resp => resp.json())
+      .then(data => {
+        setData(data);
+        setLoading(false);
+      });
+  }, []);
+
+  const onCreate = useCallback(title => {
+    const body = JSON.stringify({
+      title: title,
+      complete: false,
+    });
+
+    fetch('https://jsonplaceholder.typicode.com/todos', {
+      method: 'POST',
+      body,
+    })
+      .then(resp => resp.json())
+      .then(({ id }) => {
+        setData(data => [
+          ...data,
+          {
+            id: id,
+            title: title,
+            complete: false,
+          },
+        ]);
+      });
+  });
+
+  const onEdit = useCallback(todo => {
+    setData(data => data.map(t => (t.id == todo.id ? todo : t)));
+    fetch(`https://jsonplaceholder.typicode.com/todos/${todo.id}`, {
+      method: 'PUT',
+      body: JSON.stringify(todo),
+    });
+  });
+
+  const [query, setQuery] = useState('');
+  const [hideComplete, setHideComplete] = useState(false);
+
+  const todos = useMemo(
+    () =>
+      data.filter(todo => {
+        if (query && !todo.title.toLowerCase().includes(query.toLowerCase())) {
+          return false;
+        }
+        if (hideComplete && todo.complete) {
+          return false;
+        }
+        return true;
+      }),
+    [data, query, hideComplete]
+  );
+
+  return {
+    loading,
+    todos,
+    onCreate,
+    onEdit,
+    setQuery,
+    setHideComplete,
+  };
+};

src/hooks/useTodos.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+let root = createRoot(document.querySelector('#root'));
+root.render(<App />);

src/index.jsx

@@ -2,6 +2,6 @@
 <html>
   <body>
     <div id="root" />
-    <script src="js/app.js"></script>
+    <script src="js/index.js"></script>
   </body>
 </html>