add new OptimisticMessages component

Chap5/components/package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
-    "react": "19.0.0-rc-5dcb0097-20240918",
-    "react-dom": "19.0.0-rc-5dcb0097-20240918"
+    "react": "19.0.0-rc-e4953922-20240919",
+    "react-dom": "19.0.0-rc-e4953922-20240919"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

Chap5/components/src/App.tsx

@@ -4,6 +4,7 @@ import Home, { UserType } from "./Home";
 import DeferredValue from "./DeferredValue";
 import Transitioner from "./Transitioner";
 import UserForm from "./UserForm";
+import { OptimisticMessages } from "./OptimisticMessages";
 
 async function fetchData(url: string) {
   const response = await fetch(url);
@@ -26,7 +27,7 @@ function App() {
 
   return (
     <>
-      <UserForm />
+      <OptimisticMessages />
     </>
   );
 }

Chap5/components/src/MessagesData.ts

@@ -0,0 +1,6 @@
+export type Message = { id: number; message: string };
+
+export const messagesOnApi: Message[] = [
+  { id: 1, message: "first" },
+  { id: 2, message: "second" },
+];

Chap5/components/src/OptimisticMessages.tsx

@@ -0,0 +1,83 @@
+import {
+  useOptimistic,
+  useState,
+  MouseEvent,
+  ChangeEvent,
+  useTransition,
+  useEffect,
+} from "react";
+import { Message, messagesOnApi } from "./MessagesData";
+
+export function OptimisticMessages() {
+  const [messagesRetrievedFromApi, setMessagesRetrievedFromApi] = useState<
+    Message[]
+  >([]);
+  const [message, setMessage] = useState("");
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic<
+    Message[],
+    string
+  >(messagesRetrievedFromApi, (currentMessages, message) => {
+    const finalMessages = [
+      ...currentMessages,
+      { id: getNextId(currentMessages), message },
+    ];
+    return finalMessages;
+  });
+  const [_isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    const data = JSON.parse(JSON.stringify(messagesOnApi));
+    setMessagesRetrievedFromApi(data);
+  }, []);
+
+  const addMessage = async (message: string) => {
+    addOptimisticMessage(message);
+    await new Promise((res) =>
+      setTimeout(() => {
+        messagesOnApi.push({
+          id: getNextId(messagesOnApi),
+          message,
+        });
+        res(null);
+      }, 2000)
+    );
+
+    const data = JSON.parse(JSON.stringify(messagesOnApi));
+    setMessagesRetrievedFromApi(data);
+    setMessage("");
+  };
+
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    setMessage(e.target.value);
+  };
+
+  const onClick = async (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    startTransition(() => {
+      addMessage(message);
+    });
+  };
+
+  return (
+    <div>
+      <input value={message} onChange={onChange} />
+      <button onClick={onClick}>add</button>
+      <ul style={{ listStyleType: "none" }}>
+        {optimisticMessages.map((m, i) => (
+          <li key={i}>{m.message}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function getNextId(currentMessages: Message[]) {
+  let id = 0;
+  for (let i = 0; i < currentMessages.length; i++) {
+    if (currentMessages[i].id > id) id = currentMessages[i].id;
+  }
+  id += 1;
+  return id;
+}

Chap5/components/src/SubmitButton.tsx

@@ -0,0 +1,11 @@
+import { useFormStatus } from "react-dom";
+
+export default function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <button type="submit" disabled={pending}>
+      submit
+    </button>
+  );
+}

Chap5/components/src/UserForm.tsx

@@ -1,6 +1,7 @@
 import { useActionState } from "react";
 import { UserType } from "./Home";
 import { users } from "./UserData";
+import SubmitButton from "./SubmitButton";
 
 export default function UserForm() {
   const [_formState, action, isPending] = useActionState(
@@ -83,9 +84,7 @@ export default function UserForm() {
         </label>
         <input id="body" name="body" />
       </div>
-      <button type="submit" disabled={isPending}>
-        submit
-      </button>
+      <SubmitButton />
       {JSON.stringify(users)}
     </form>
   );