feat: 返答のロジック部分実装

codegen.yml

@@ -55,6 +55,23 @@ generates:
       scalars:
         DateTime: string
 
+  ./src/templates/:
+    preset: near-operation-file
+    documents:
+      - src/templates/**/*.graphql
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-urql
+    config:
+      scalars:
+        DateTime: string
+      nonOptionalTypename: true
+      onlyOperationTypes: true
+    presetConfig:
+      baseTypesPath: ./codegen.ts
+      extension: .codegen.ts
+
   ./src/pages/codegen.ts:
     plugins:
       - typescript
@@ -78,3 +95,18 @@ generates:
     presetConfig:
       baseTypesPath: ./codegen.ts
       extension: .codegen.ts
+
+  ./src/mocks/codegen.ts:
+    documents:
+      - "src/**/*.{ts,tsx,graphql}"
+      - "!src/**/codegen.ts"
+      - "!src/**/*.codegen.ts"
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node
+    config:
+      nonOptionalTypename: true
+      onlyOperationTypes: true
+      scalars:
+        DateTime: string

src/msw/handlers/HenkenPage.ts

@@ -1,7 +1,7 @@
 import { graphql } from "msw";
 
 import { mockAvatars } from "~/mocks/assets";
-import { AllHenkenPagesDocument, AnswerType, HenkenPageDocument } from "~/msw/codegen";
+import { AllHenkenPagesDocument, AnswerType, HenkenPageAnswerHenkenDocument, HenkenPageDocument } from "~/msw/codegen";
 
 const mocks: Record<
   string,
@@ -76,3 +76,21 @@ export const queryHenkenPage = graphql.query(HenkenPageDocument, (req, res, ctx)
     }),
   );
 });
+
+export const mutationAnswerHenken = graphql.mutation(
+  HenkenPageAnswerHenkenDocument,
+  (req, res, ctx) => {
+    return res(
+      ctx.data({
+        __typename: "Mutation",
+        answerHenken: {
+          __typename: "AnswerHenkenPayload",
+          answer: {
+            __typename: "Answer",
+            id: "created",
+          },
+        },
+      }),
+    );
+  },
+);

src/msw/handlers/Viewer.ts

@@ -0,0 +1,29 @@
+import { graphql } from "msw";
+
+import { mockAvatars } from "~/mocks/assets";
+import { FetchViewerDocument } from "~/mocks/codegen";
+
+export const queryFetchViewer = graphql.query(
+  FetchViewerDocument,
+  (req, res, ctx) => {
+    if (!req.headers.get("Authorization")) {
+      return res(ctx.data({ __typename: "Query", viewer: null }));
+    }
+
+    // eslint-disable-next-line no-process-env
+    if (process.env.NEXT_PUBLIC_MSW_FIRST_NEED_REGISTER === "true") {
+      return res(ctx.data({ __typename: "Query", viewer: null }));
+    }
+
+    return res(ctx.data({
+      __typename: "Query",
+      viewer: {
+        __typename: "User",
+        id: "viewer",
+        alias: "viewer",
+        displayName: "Viewer",
+        avatar: mockAvatars.viewer,
+      },
+    }));
+  },
+);

src/msw/handlers/index.ts

@@ -4,14 +4,19 @@ import {
   queryCreateHenkenFormSearchUser,
 } from "./CreateHenkenForm";
 import { queryGlobalNavNotifications } from "./GlobalNav";
-import { queryAllHenkenPages, queryHenkenPage } from "./HenkenPage";
+import { mutationAnswerHenken, queryAllHenkenPages, queryHenkenPage } from "./HenkenPage";
 import { mutationRegisterUser, queryIsAliasUnique } from "./RegisterUserForm";
 import { queryAllUserPages, querySendHenkensUserPage, queryUserPage } from "./UserPage";
+import { queryFetchViewer } from "./Viewer";
 
 export const handlers = [
+  // Viewer
+  queryFetchViewer,
+
   // Henken Page
   queryAllHenkenPages,
   queryHenkenPage,
+  mutationAnswerHenken,
 
   // User Page
   queryAllUserPages,

src/templates/HenkenPage/Timeline/AnswerForm/AnswerHenken.graphql

@@ -0,0 +1,11 @@
+mutation HenkenPageAnswerHenken(
+  $comment: String!
+  $henkenId: ID!
+  $type: AnswerType!
+) {
+  answerHenken(comment: $comment, henkenId: $henkenId, type: $type) {
+    answer {
+      id
+    }
+  }
+}

src/templates/HenkenPage/Timeline/AnswerForm/Comment.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { FormValue } from "./form";
+
+import { useTranslation } from "~/i18n/useTranslation";
+
+export const Comment: React.VFC<{ className?: string; }> = ({ className }) => {
+  const { LL } = useTranslation();
+  const { register } = useFormContext<FormValue>();
+
+  return (
+    <label className={clsx(className, ["flex", ["flex-col"]])}>
+      <span className={clsx(["text-sm"])}>
+        {LL.HenkenPage.Timeline.AnswerForm.Comment.Label()}
+      </span>
+      <textarea
+        {...register("comment")}
+        className={clsx(
+          ["mt-2"],
+          ["w-full"],
+          ["px-2"],
+          ["py-1"],
+          ["border", ["border-gray-300"]],
+          ["text-sm"],
+          ["resize-none"],
+          ["overflow-y-scroll"],
+        )}
+        autoComplete="off"
+        rows={4}
+        aria-label={LL.HenkenPage.Timeline.AnswerForm.Comment.Label()}
+        placeholder={LL.HenkenPage.Timeline.AnswerForm.Comment.PlaceHolder()}
+      />
+    </label>
+  );
+};

src/templates/HenkenPage/Timeline/AnswerForm/SubmitButton.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import React from "react";
+
+import { useTranslation } from "~/i18n/useTranslation";
+
+export const SubmitButton: React.VFC<{ className?: string; disabled: boolean; }> = ({ className, disabled }) => {
+  const { LL } = useTranslation();
+  return (
+    <button
+      type="submit"
+      disabled={disabled}
+      className={clsx(
+        className,
+        [["px-3"], ["py-1.5"]],
+        ["inline-flex", ["items-center"]],
+        ["bg-blue-500", ["disabled:bg-gray-400"]],
+        ["text-white", ["disabled:text-gray-300"]],
+        ["rounded-md"],
+      )}
+    >
+      <span className={clsx([["text-base"]])}>
+        {LL.HenkenPage.Timeline.AnswerForm.Submit()}
+      </span>
+    </button>
+  );
+};

src/templates/HenkenPage/Timeline/AnswerForm/Switcher.tsx

@@ -0,0 +1,72 @@
+import clsx from "clsx";
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { FormValue } from "./form";
+
+import { useTranslation } from "~/i18n/useTranslation";
+
+export const Switcher: React.VFC<{ className?: string; }> = ({ className }) => {
+  const { LL } = useTranslation();
+
+  const { register, watch } = useFormContext<FormValue>();
+  const { answerType } = watch();
+
+  return (
+    <div
+      className={clsx(
+        className,
+        ["flex"],
+        ["rounded"],
+        ["overflow-hidden"],
+        ["border", ["border-gray-300"]],
+        ["divide-x", ["divide-gray-300"]],
+      )}
+    >
+      <label
+        className={clsx(
+          { "bg-gray-200": answerType !== "right", "bg-answer-right-normal": answerType === "right" },
+          { "text-gray-700": answerType !== "right", "text-white": answerType === "right" },
+          ["px-2"],
+          ["py-1"],
+          ["flex", ["items-center"]],
+        )}
+      >
+        <input
+          {...register("answerType")}
+          type="radio"
+          value="right"
+        />
+        <span
+          className={clsx(["ml-2"], ["text-sm"])}
+        >
+          {LL.AnswerType.Right()}
+        </span>
+      </label>
+      <label
+        className={clsx(
+          "appearance-none",
+          { "bg-gray-200": answerType !== "wrong", "bg-answer-wrong-normal": answerType === "wrong" },
+          { "text-gray-700": answerType !== "wrong", "text-white": answerType === "wrong" },
+          ["px-2"],
+          ["py-1"],
+          ["flex", ["items-center"]],
+        )}
+      >
+        <input
+          {...register("answerType")}
+          type="radio"
+          value="wrong"
+        />
+        <span
+          className={clsx(
+            ["ml-2"],
+            ["text-sm"],
+          )}
+        >
+          {LL.AnswerType.Wrong()}
+        </span>
+      </label>
+    </div>
+  );
+};

src/templates/HenkenPage/Timeline/AnswerForm/form.ts

@@ -0,0 +1,12 @@
+import { AnswerType } from "./AnswerHenken.codegen";
+
+export type FormValue = { comment: string; answerType: "right" | "wrong"; };
+
+export const convertType = (type: FormValue["answerType"]) => {
+  switch (type) {
+    case "right":
+      return AnswerType.Right;
+    case "wrong":
+      return AnswerType.Wrong;
+  }
+};