created context and moved component

src/Form.tsx

@@ -9,6 +9,8 @@ import { useOptimisticReducer } from "./hooks/useOptimisticReducer";
 import "./Form.css";
 
 import type { AppState } from "./types";
+import TodoItem from "./components/TodoItem";
+import FormProvider from "./components/FormProvider";
 
 type Props = {
   initialTodos: AppState;
@@ -76,71 +78,36 @@ export const Form = ({ initialTodos = {} }: Props) => {
   );
 
   return (
-    <div className="container">
-      <div className="row">
-        <form onSubmit={handleSubmit} method="POST" ref={formRef}>
-          <input name="todo" placeholder="Enter your todo..." ref={inputRef} />
-          <button type="submit">Add</button>
-        </form>
+    <FormProvider
+      dispatch={dispatch}
+      handleCheck={handleCheck}
+      handleRemove={handleRemove}
+      state={state}
+    >
+      <div className="container">
+        <div className="row">
+          <form onSubmit={handleSubmit} method="POST" ref={formRef}>
+            <input
+              name="todo"
+              placeholder="Enter your todo..."
+              ref={inputRef}
+            />
+            <button type="submit">Add</button>
+          </form>
+        </div>
+
+        <div className="todos-container">
+          {Object.keys(state).map((todoId, idx) => {
+            return <TodoItem key={todoId} todoId={todoId} idx={idx} />
+          })}
+        </div>
+
+        <div className="sync-container">
+          <Syncer appState={state} />
+        </div>
+
+        <UndoHandler dispatch={dispatch} />
       </div>
-
-      <div className="todos-container">
-        {Object.keys(state).map((todoId, idx) => {
-          const { content, isComplete, isRemoved = false } = state[todoId];
-
-          if (isRemoved) {
-            return null;
-          }
-
-          return (
-            <label
-              className="todo"
-              draggable
-              onDragOver={(ev) => ev.preventDefault()}
-              onDragStart={(ev) => {
-                ev.dataTransfer.setData("id", todoId);
-                ev.dataTransfer.effectAllowed = "move";
-              }}
-              onDrop={(ev) => {
-                ev.preventDefault();
-                const dropId = ev.dataTransfer.getData("id");
-
-                if (!dropId) {
-                  return;
-                }
-
-                dispatch({
-                  destinationIndex: idx,
-                  id: dropId,
-                  type: "MOVE",
-                });
-              }}
-              key={todoId}
-            >
-              <input
-                checked={isComplete}
-                id={todoId}
-                data-n={idx}
-                onChange={() => handleCheck(todoId, isComplete)}
-                type="checkbox"
-              />
-              <span className="todo__content">{content}</span>
-              <button
-                className="button__del"
-                onClick={() => handleRemove(todoId)}
-              >
-                x
-              </button>
-            </label>
-          );
-        })}
-      </div>
-
-      <div className="sync-container">
-        <Syncer appState={state} />
-      </div>
-
-      <UndoHandler dispatch={dispatch} />
-    </div>
+    </FormProvider>
   );
 };

src/components/FormProvider.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, createContext } from "react";
+import type { Action, AppState, OptimisticDispatch } from "../types";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export const FormContext = createContext<Omit<Props, "children">>({
+  dispatch: noop,
+  handleCheck: noop,
+  handleRemove: noop,
+  state: {}
+});
+
+type Props = {
+  children: ReactNode;
+  dispatch: OptimisticDispatch<Action>;
+  handleCheck: (id: string, isComplete: boolean) => void;
+  handleRemove: (id: string) => void;
+  state: AppState;
+};
+
+const FormProvider = ({
+  children,
+  dispatch,
+  handleCheck,
+  handleRemove,
+  state,
+}: Props) => {
+  const value = {
+    dispatch,
+    handleCheck,
+    handleRemove,
+    state,
+  };
+  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
+};
+
+export default FormProvider;

src/components/TodoItem.tsx

@@ -0,0 +1,58 @@
+import { useContext } from "react";
+import { FormContext } from "./FormProvider";
+
+export type Props = {
+  todoId: string;
+  idx: number
+};
+
+const TodoItem = ({ todoId, idx }: Props) => {
+  const { dispatch, handleCheck, handleRemove, state } =
+    useContext(FormContext);
+  const { content, isComplete, isRemoved = false } = state[todoId];
+
+  if (isRemoved) {
+    return null;
+  }
+
+  return (
+    <label
+      className="todo"
+      draggable
+      onDragOver={(ev) => ev.preventDefault()}
+      onDragStart={(ev) => {
+        ev.dataTransfer.setData("id", todoId);
+        ev.dataTransfer.effectAllowed = "move";
+      }}
+      onDrop={(ev) => {
+        ev.preventDefault();
+        const dropId = ev.dataTransfer.getData("id");
+
+        if (!dropId) {
+          return;
+        }
+
+        dispatch({
+          destinationIndex: idx,
+          id: dropId,
+          type: "MOVE",
+        });
+      }}
+      key={todoId}
+    >
+      <input
+        checked={isComplete}
+        id={todoId}
+        data-n={idx}
+        onChange={() => handleCheck(todoId, isComplete)}
+        type="checkbox"
+      />
+      <span className="todo__content">{content}</span>
+      <button className="button__del" onClick={() => handleRemove(todoId)}>
+        x
+      </button>
+    </label>
+  );
+};
+
+export default TodoItem;