リーチ数をスクリーンに表示する

view-admin/src/gql/reach_log.gql

@@ -0,0 +1,38 @@
+# リーチログの最新のreachNumを取得(Get)
+query GetOneLatestReachLog {
+  reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+    reachNum
+  }
+}
+
+# リーチログの最新のreachNumを継続取得(Subscription)
+subscription SubscribeOneLatestReachlog {
+  reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+    reachNum
+  }
+}
+
+# 指定したタイプスタンプ以降のリーチログを全て取得(Get)
+query GetListReachLogsAfterTimestamp($timestamp: timestamptz!) {
+  reachLogs(
+    where: { createdAt: { _gt: $timestamp } }
+    orderBy: { createdAt: ASC }
+  ) {
+    id
+    status
+    createdAt
+    reachNum
+  }
+}
+
+# リーチログの追加(Create)
+mutation CreateOneReachRecord($status: Boolean!, $reachNum: Int!) {
+  insertReachLogsOne(
+    object: { status: $status, reachNum: $reachNum, createdAt: "now()" }
+  ) {
+    id
+    status
+    createdAt
+    reachNum
+  }
+}

view-admin/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useSubscription } from "@apollo/client";
+import { useLazyQuery, useMutation, useSubscription } from "@apollo/client";
 import { useSession, signIn, signOut } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useForm, SubmitHandler } from "react-hook-form";
@@ -16,8 +16,15 @@ import {
   CreateOneNumberDocument,
   DeleteOneNumberDocument,
   SubscribeListNumbersDocument,
+  GetOneLatestReachLogDocument,
+  CreateOneReachRecordDocument,
+} from "@/type/graphql";
+import type {
+  SubscribeListNumbersSubscription,
+  GetOneLatestReachLogQuery,
+  CreateOneReachRecordMutation,
+  CreateOneReachRecordMutationVariables,
 } from "@/type/graphql";
-import type { SubscribeListNumbersSubscription } from "@/type/graphql";
 
 interface formDataCreate {
   submitNumber: number | null;
@@ -38,6 +45,14 @@ const Page: NextPage = () => {
   const [isOpened, setIsOpened] = useState<boolean>(false);
   const isopenBool = () => setIsOpened(!isOpened);
 
+  const [getLatestReachLog, { data: latestReachLogData }] =
+    useLazyQuery<GetOneLatestReachLogQuery>(GetOneLatestReachLogDocument);
+
+  const [createOneReachRecord] = useMutation<
+    CreateOneReachRecordMutation,
+    CreateOneReachRecordMutationVariables
+  >(CreateOneReachRecordDocument);
+
   const {
     register: registerCreate,
     handleSubmit: handleSubmitCreate,
@@ -84,6 +99,39 @@ const Page: NextPage = () => {
     }
   };
 
+  // TODO try-catchでエラーハンドリングが必要かどうかを検討する
+  const handleReachCountUp = async () => {
+    try {
+      const { data, refetch } = await getLatestReachLog();
+      const latestReachLogNumber = data?.reachLogs[0]?.reachNum || 0;
+      await createOneReachRecord({
+        variables: {
+          status: true,
+          reachNum: latestReachLogNumber + 1,
+        },
+      });
+      refetch(); // クエリをリフレッシュ
+    } catch (error) {
+      console.error("Failed to record reach:", error);
+    }
+  };
+
+  // TODO try-catchでエラーハンドリングが必要かどうかを検討する
+  const handleReachCountDown = async () => {
+    try {
+      const { data, refetch } = await getLatestReachLog();
+      const latestReachLogNumber = data?.reachLogs[0]?.reachNum || 0;
+      await createOneReachRecord({
+        variables: {
+          status: false,
+          reachNum: latestReachLogNumber - 1,
+        },
+      });
+      refetch();
+    } catch (error) {
+      console.error("Failed to record reach:", error);
+    }
+  };
   //subscriptionを行うためのuseEffect
   useEffect(() => {
     if (data) {
@@ -210,6 +258,24 @@ const Page: NextPage = () => {
             </button>
           </div>
         </div>
+        <div className={styles.frame}>
+          <div className={styles.item}>
+            <button
+              type="button"
+              className={styles.Button}
+              onClick={handleReachCountUp}
+            >
+              リーチ数を 1 増加する
+            </button>
+            <button
+              type="button"
+              className={styles.Button}
+              onClick={handleReachCountDown}
+            >
+              リーチ数を 1 減少する
+            </button>
+          </div>
+        </div>
       </div>
       <BingoResult bingoResultNumber={bingoNumbers} />
     </div>

view-admin/src/type/graphql.ts

@@ -2141,6 +2141,55 @@ export type UpdateOnePrizeIsWonMutation = {
   } | null;
 };
 
+export type GetOneLatestReachLogQueryVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type GetOneLatestReachLogQuery = {
+  __typename?: "query_root";
+  reachLogs: Array<{ __typename?: "ReachLogs"; reachNum: number }>;
+};
+
+export type SubscribeOneLatestReachlogSubscriptionVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type SubscribeOneLatestReachlogSubscription = {
+  __typename?: "subscription_root";
+  reachLogs: Array<{ __typename?: "ReachLogs"; reachNum: number }>;
+};
+
+export type GetListReachLogsAfterTimestampQueryVariables = Exact<{
+  timestamp: Scalars["timestamptz"]["input"];
+}>;
+
+export type GetListReachLogsAfterTimestampQuery = {
+  __typename?: "query_root";
+  reachLogs: Array<{
+    __typename?: "ReachLogs";
+    id: number;
+    status: boolean;
+    createdAt: any;
+    reachNum: number;
+  }>;
+};
+
+export type CreateOneReachRecordMutationVariables = Exact<{
+  status: Scalars["Boolean"]["input"];
+  reachNum: Scalars["Int"]["input"];
+}>;
+
+export type CreateOneReachRecordMutation = {
+  __typename?: "mutation_root";
+  insertReachLogsOne?: {
+    __typename?: "ReachLogs";
+    id: number;
+    status: boolean;
+    createdAt: any;
+    reachNum: number;
+  } | null;
+};
+
 export const CreateOneImageDocument = gql`
   mutation CreateOneImage(
     $bucketName: String!
@@ -2402,3 +2451,62 @@ export type UpdateOnePrizeIsWonMutationOptions = Apollo.BaseMutationOptions<
   UpdateOnePrizeIsWonMutation,
   UpdateOnePrizeIsWonMutationVariables
 >;
+export const GetOneLatestReachLogDocument = gql`
+  query GetOneLatestReachLog {
+    reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+      reachNum
+    }
+  }
+`;
+export type GetOneLatestReachLogQueryResult = Apollo.QueryResult<
+  GetOneLatestReachLogQuery,
+  GetOneLatestReachLogQueryVariables
+>;
+export const SubscribeOneLatestReachlogDocument = gql`
+  subscription SubscribeOneLatestReachlog {
+    reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+      reachNum
+    }
+  }
+`;
+export type SubscribeOneLatestReachlogSubscriptionResult =
+  Apollo.SubscriptionResult<SubscribeOneLatestReachlogSubscription>;
+export const GetListReachLogsAfterTimestampDocument = gql`
+  query GetListReachLogsAfterTimestamp($timestamp: timestamptz!) {
+    reachLogs(
+      where: { createdAt: { _gt: $timestamp } }
+      orderBy: { createdAt: ASC }
+    ) {
+      id
+      status
+      createdAt
+      reachNum
+    }
+  }
+`;
+export type GetListReachLogsAfterTimestampQueryResult = Apollo.QueryResult<
+  GetListReachLogsAfterTimestampQuery,
+  GetListReachLogsAfterTimestampQueryVariables
+>;
+export const CreateOneReachRecordDocument = gql`
+  mutation CreateOneReachRecord($status: Boolean!, $reachNum: Int!) {
+    insertReachLogsOne(
+      object: { status: $status, reachNum: $reachNum, createdAt: "now()" }
+    ) {
+      id
+      status
+      createdAt
+      reachNum
+    }
+  }
+`;
+export type CreateOneReachRecordMutationFn = Apollo.MutationFunction<
+  CreateOneReachRecordMutation,
+  CreateOneReachRecordMutationVariables
+>;
+export type CreateOneReachRecordMutationResult =
+  Apollo.MutationResult<CreateOneReachRecordMutation>;
+export type CreateOneReachRecordMutationOptions = Apollo.BaseMutationOptions<
+  CreateOneReachRecordMutation,
+  CreateOneReachRecordMutationVariables
+>;

view-user/src/gql/reach_logs.gql

@@ -5,6 +5,13 @@ query GetOneLatestReachLog {
   }
 }
 
+# リーチログの最新のreachNumを継続取得(Subscription)
+subscription SubscribeOneLatestReachlog {
+  reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+    reachNum
+  }
+}
+
 # 指定したタイプスタンプ以降のリーチログを全て取得(Get)
 query GetListReachLogsAfterTimestamp($timestamp: timestamptz!) {
   reachLogs(

view-user/src/pages/screen/index.tsx

@@ -6,10 +6,12 @@ import { useSubscription } from "@apollo/client";
 import {
   SubscribeListNumbersDocument,
   SubscribeUpdatedStampTriggerDocument,
+  SubscribeOneLatestReachlogDocument,
 } from "@/type/graphql";
 import type {
   SubscribeListNumbersSubscription,
   SubscribeUpdatedStampTriggerSubscription,
+  SubscribeOneLatestReachlogSubscription,
 } from "@/type/graphql";
 import {
   NumberCardLarge,
@@ -71,6 +73,10 @@ const Page: NextPage = () => {
         variables: { updatedAt: lastUpdatedAt },
       },
     );
+  const { data: reachLog } =
+    useSubscription<SubscribeOneLatestReachlogSubscription>(
+      SubscribeOneLatestReachlogDocument,
+    );
 
   // スタンプの変更を検知し、スタンプを降下させる。
   useEffect(() => {
@@ -203,8 +209,8 @@ const Page: NextPage = () => {
           <NumberCardLarge bingoNumber={displayBingoNumbers.large} />
           <div className={styles.column}>
             <NumberCardList screen bingoNumber={displayBingoNumbers.list} />
-            {/* todo countはAPIとつなぎ込み */}
-            <ReachCount count={0} />
+            {/* // TODO オプショナルでエラーを逃れているのを対処する */}
+            <ReachCount count={reachLog?.reachLogs[0]?.reachNum || 0} />
           </div>
         </div>
       </div>

view-user/src/type/graphql.ts

@@ -2150,6 +2150,15 @@ export type GetOneLatestReachLogQuery = {
   reachLogs: Array<{ __typename?: "ReachLogs"; reachNum: number }>;
 };
 
+export type SubscribeOneLatestReachlogSubscriptionVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type SubscribeOneLatestReachlogSubscription = {
+  __typename?: "subscription_root";
+  reachLogs: Array<{ __typename?: "ReachLogs"; reachNum: number }>;
+};
+
 export type GetListReachLogsAfterTimestampQueryVariables = Exact<{
   timestamp: Scalars["timestamptz"]["input"];
 }>;
@@ -2533,6 +2542,15 @@ export type GetOneLatestReachLogQueryResult = Apollo.QueryResult<
   GetOneLatestReachLogQuery,
   GetOneLatestReachLogQueryVariables
 >;
+export const SubscribeOneLatestReachlogDocument = gql`
+  subscription SubscribeOneLatestReachlog {
+    reachLogs(orderBy: { createdAt: DESC }, limit: 1) {
+      reachNum
+    }
+  }
+`;
+export type SubscribeOneLatestReachlogSubscriptionResult =
+  Apollo.SubscriptionResult<SubscribeOneLatestReachlogSubscription>;
 export const GetListReachLogsAfterTimestampDocument = gql`
   query GetListReachLogsAfterTimestamp($timestamp: timestamptz!) {
     reachLogs(