add todo list sample

next-env.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 declare module "@mdx-js/react" {
-  let MDXProvider: React.FC<{
+  const MDXContext: React.Context<any>;
+  const MDXProvider: React.FC<{
     components: any;
     childlen?: ReactNode;
   }>;

pages/index.md

@@ -1,3 +1,6 @@
+import Todo from "./todo"
+
 # Hello Next.js
 
 - [About](/about)
+- [ToDo List](/todo)

pages/todo.tsx

@@ -0,0 +1,78 @@
+import React, { FormEvent } from "react";
+import { MDXContext } from "@mdx-js/react";
+
+type State = {
+  id: number;
+  todo: Map<number, string>;
+};
+type Action =
+  | {
+      type: "add";
+      body: string;
+    }
+  | {
+      type: "delete";
+      key: number;
+    };
+
+const initialState: State = {
+  id: 0,
+  todo: new Map()
+};
+
+function reducer(state: State, action: Action) {
+  switch (action.type) {
+    case "add":
+      state.todo.set(state.id, action.body);
+      return { ...state, id: state.id + 1 };
+    case "delete":
+      state.todo.delete(action.key);
+      return { ...state };
+  }
+}
+
+export default () => {
+  const components = React.useContext(MDXContext);
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  const onSubmit = React.useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
+      const body =
+        new FormData(event.currentTarget as HTMLFormElement)
+          .get("body")
+          ?.toString() || "";
+      if (body.length === 0) return;
+      dispatch({
+        type: "add",
+        body
+      });
+    },
+    [dispatch]
+  );
+
+  const H1 = components.h1 || "h1";
+  const Ul = components.ul || "ul";
+  const Li = components.li || "li";
+
+  return (
+    <>
+      <H1>ToDo List</H1>
+      <form onSubmit={onSubmit}>
+        <input type="text" key={state.id} name="body" autoFocus />
+        <input type="submit" name="submit" value="+" />
+      </form>
+      <Ul>
+        {[...state.todo].map(([key, body]) => (
+          <Li key={key}>
+            <input
+              type="checkbox"
+              name={`${key}-checkbox`}
+              onChange={() => dispatch({ type: "delete", key })}
+            />
+            {body}
+          </Li>
+        ))}
+      </Ul>
+    </>
+  );
+};

tsconfig.json

@@ -17,7 +17,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "downlevelIteration": true
   },
   "exclude": ["node_modules"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]