add server action

Author: labintsev

packages/nextjs/app/lib/actions.ts

@@ -0,0 +1,9 @@
+"use server";
+
+export default async function createAnswer(formData: FormData) {
+  const rawFormData = {
+    radio: formData.get("radio-0"),
+  };
+  // Test it out:
+  console.log(rawFormData);
+}

packages/nextjs/app/voting/_components/VotingForm.tsx

@@ -1,18 +1,21 @@
+import createAnswer from "~~/app/lib/actions";
 import { Question } from "~~/app/lib/definitions";
 
 export default function VotingForm({ question }: { question: Question }) {
   return (
-    <div className="items-left mb-4">
-      <div>{question.question}</div>
-      {question.choices_array.map(choice => (
-        <div className="flex items-center mb-4" key={choice}>
-          <label className="label cursor-pointer ms-2">
-            <input type="radio" name="radio-10" className="radio checked:bg-red-500" />
-            <span className="ms-2">{choice}</span>
-          </label>
-        </div>
-      ))}
-      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-4 rounded">Submit</button>
-    </div>
+    <form action={createAnswer}>
+      <div className="items-left m-8">
+        <div>{question.question}</div>
+        {question.choices_array.map(choice => (
+          <div className="flex items-center mb-4" key={choice}>
+            <label className="label cursor-pointer ms-2">
+              <input type="radio" name="radio-0" value={choice} className="radio checked:bg-red-500" />
+              <span className="ms-2">{choice}</span>
+            </label>
+          </div>
+        ))}
+        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-4 rounded">Submit</button>
+      </div>
+    </form>
   );
 }

packages/nextjs/app/voting/page.tsx

@@ -5,7 +5,7 @@ export default async function Page() {
   const questions = await fetchQuestions();
   return (
     <>
-      <VotingForm question={questions[0]} />
+      <VotingForm question={questions[2]} />
     </>
   );
 }