refactoring

anggoran · Apr 27, 2024 · a9cf169 · a9cf169
1 parent 0160a41
commit a9cf169
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 75 deletions.
diff --git a/controllers/blueprint.ts b/controllers/blueprint.ts
@@ -0,0 +1,80 @@
+import { FreshContext } from "$fresh/server.ts";
+import { PinyinPartModel } from "../models/pinyin.ts";
+import { PinyinModel } from "../models/pinyin.ts";
+import { randomize } from "../utils/randomize.ts";
+import { readJSON } from "../utils/read-json.ts";
+
+export const getBlueprint = async (
+  req: Request,
+  ctx: FreshContext,
+) => {
+  const url = new URL(req.url);
+  const questionParams = url.searchParams.get("question");
+  const answerParams = url.searchParams.get("answer");
+  const truthParams = url.searchParams.get("truth");
+  const pinyins: PinyinModel[] = await readJSON("pinyins");
+  const initials: PinyinPartModel[] = await readJSON("initials");
+  const finals: PinyinPartModel[] = await readJSON("finals");
+  const tones: PinyinPartModel[] = await readJSON("tones");
+  const question = pinyins.find((e) => e.name === questionParams) ??
+    randomize(pinyins);
+  const { initial_id, final_id, tone_id } =
+    pinyins.find((e) => e.name === answerParams) ??
+      { initial_id: 0, final_id: 0, tone_id: 0 };
+  const answer = { initial_id, final_id, tone_id };
+  const truth = truthParams === "true"
+    ? true
+    : truthParams === "false"
+    ? false
+    : null;
+
+  return ctx.render({
+    pinyins,
+    initials,
+    finals,
+    tones,
+    question,
+    answer,
+    truth,
+  });
+};
+
+export const postBlueprint = async (
+  req: Request,
+  _ctx: FreshContext,
+) => {
+  const url = new URL(req.url);
+  const form = await req.formData();
+  const pinyins: PinyinModel[] = await readJSON("pinyins");
+  const initials: PinyinPartModel[] = await readJSON("initials");
+  const finals: PinyinPartModel[] = await readJSON("finals");
+  const tones: PinyinPartModel[] = await readJSON("tones");
+  const question_id = form.get("question_id");
+  const initial = form.get("initial");
+  const final = form.get("final");
+  const tone = form.get("tone");
+  const question = pinyins.find((e) => e.id.toString() === (question_id!));
+  const { initial_id, final_id, tone_id } = question!;
+  const solution = { initial_id, final_id, tone_id };
+  const answer = {
+    initial_id: initials.find((e) => e.name == initial)!.id,
+    final_id: finals.find((e) => e.name == final)!.id,
+    tone_id: tones.find((e) => e.name == tone)!.id,
+  };
+  const proposed = pinyins.find((e) =>
+    e.initial_id === answer.initial_id &&
+    e.final_id === answer.final_id &&
+    e.tone_id === answer.tone_id
+  );
+
+  const myQuestion = encodeURIComponent(question!.name);
+  let myAnswer = "N.A.";
+
+  if (proposed !== undefined) {
+    myAnswer = encodeURIComponent(proposed.name);
+  }
+
+  const params = `question=${myQuestion}&answer=${myAnswer}&` +
+    `truth=${JSON.stringify(solution) === JSON.stringify(answer)}`;
+  return Response.redirect(`${url}?${params}`, 303);
+};
diff --git a/islands/Dropdown.tsx b/islands/Dropdown.tsx
@@ -14,17 +14,14 @@ export function Dropdown({ props }: { props: DropdownProps }) {
     const selected = (e.target as HTMLInputElement).value;
     props.data.value = {
       ...props.data.value,
-      [`${props.section}_id`]: selected,
+      [`${props.section}_id`]: props.model?.find((e) => e.name == selected)?.id,
     };
-    console.log(props.data.value);
   };
 
   return (
     <select name={props.section} onChange={handleChange}>
       <option value="" hidden disabled selected>{props.section}</option>
-      {props?.model?.map((e) => (
-        <option type="number" value={e.id}>{e.name}</option>
-      ))}
+      {props?.model?.map((e) => <option value={e.name}>{e.name}</option>)}
     </select>
   );
 }
diff --git a/islands/Menu.tsx b/islands/Menu.tsx
@@ -16,7 +16,6 @@ export function Menu({ props }: { props: MenuProps }) {
       ...props.data.value,
       [`${props.section}_id`]: props.model?.find((e) => e.name == selected)?.id,
     };
-    console.log(props.data.value);
   };
 
   return (

diff --git a/routes/blueprint.tsx b/routes/blueprint.tsx
@@ -3,10 +3,9 @@ import { Dropdown } from "../islands/Dropdown.tsx";
 import { Menu } from "../islands/Menu.tsx";
 import { SoundButton } from "../islands/SoundButton.tsx";
 import { Label } from "../islands/Label.tsx";
-import { randomize } from "../utils/randomize.ts";
-import { readJSON } from "../utils/read-json.ts";
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { AnswerModel, PinyinModel, PinyinPartModel } from "../models/pinyin.ts";
+import { getBlueprint, postBlueprint } from "../controllers/blueprint.ts";
 
 interface Data {
   pinyins: PinyinModel[];
@@ -20,73 +19,10 @@ interface Data {
 
 export const handler: Handlers<Data> = {
   async GET(req, ctx) {
-    const url = new URL(req.url);
-    const questionParams = url.searchParams.get("question");
-    const answerParams = url.searchParams.get("answer");
-    const truthParams = url.searchParams.get("truth");
-    const pinyins: PinyinModel[] = await readJSON("pinyins");
-    const initials: PinyinPartModel[] = await readJSON("initials");
-    const finals: PinyinPartModel[] = await readJSON("finals");
-    const tones: PinyinPartModel[] = await readJSON("tones");
-    const question = pinyins.find((e) => e.name === questionParams) ??
-      randomize(pinyins);
-    const { initial_id, final_id, tone_id } =
-      pinyins.find((e) => e.name === answerParams) ??
-        { initial_id: 0, final_id: 0, tone_id: 0 };
-    const answer = { initial_id, final_id, tone_id };
-    const truth = truthParams === "true"
-      ? true
-      : truthParams === "false"
-      ? false
-      : null;
-
-    return ctx.render({
-      pinyins,
-      initials,
-      finals,
-      tones,
-      question,
-      answer,
-      truth,
-    });
+    return await getBlueprint(req, ctx);
   },
   async POST(req, ctx) {
-    const form = await req.formData();
-    const pinyins: PinyinModel[] = await readJSON("pinyins");
-    const initials: PinyinPartModel[] = await readJSON("initials");
-    const finals: PinyinPartModel[] = await readJSON("finals");
-    const question_id = form.get("question_id");
-    const initial = form.get("initial");
-    const final = form.get("final");
-    const question = pinyins.find((e) => e.id.toString() === (question_id!));
-    const { initial_id, final_id, tone_id } = question!;
-    const solution = { initial_id, final_id, tone_id };
-    const answer = {
-      initial_id: initials.find((e) => e.name == initial)!.id,
-      final_id: finals.find((e) => e.name == final)!.id,
-      tone_id: Number(form.get("tone")!.toString()),
-    };
-    const proposed = pinyins.find((e) =>
-      e.initial_id === answer.initial_id &&
-      e.final_id === answer.final_id &&
-      e.tone_id === answer.tone_id
-    );
-
-    const myQuestion = encodeURIComponent(question!.name);
-    let myAnswer = "N.A.";
-
-    if (proposed !== undefined) {
-      myAnswer = encodeURIComponent(proposed.name);
-    }
-
-    const headers = new Headers();
-    const params = `question=${myQuestion}&answer=${myAnswer}&` +
-      `truth=${JSON.stringify(solution) === JSON.stringify(answer)}`;
-    headers.set("location", `/blueprint?${params}`);
-    return new Response(null, {
-      status: 303,
-      headers: headers,
-    });
+    return await postBlueprint(req, ctx);
   },
 };
 
@@ -97,8 +33,6 @@ export default function Page(props: PageProps<Data>) {
   const { initial_id, final_id, tone_id } = answer;
   const myAnswer = signal({ initial_id, final_id, tone_id });
 
-  console.log(question);
-
   return (
     <div
       className={`h-screen content-center ${