リーチカウントのAPIを作成【view-user】

api/metadata/databases/default/tables/public_reach_logs.yaml

@@ -0,0 +1,3 @@
+table:
+  name: reach_logs
+  schema: public

api/metadata/databases/default/tables/tables.yaml

@@ -1,3 +1,4 @@
 - "!include public_images.yaml"
 - "!include public_numbers.yaml"
 - "!include public_prizes.yaml"
+- "!include public_reach_logs.yaml"

api/migrations/default/1720521696814_auto/up.sql

@@ -65,14 +65,32 @@ CREATE SEQUENCE public.prizes_id_seq
     NO MAXVALUE
     CACHE 1;
 ALTER SEQUENCE public.prizes_id_seq OWNED BY public.prizes.id;
+CREATE TABLE public.reach_logs (
+    id integer NOT NULL,
+    status boolean DEFAULT false NOT NULL,
+    created_at timestamp with time zone DEFAULT now() NOT NULL,
+    reach_num integer DEFAULT 0 NOT NULL
+);
+COMMENT ON TABLE public.reach_logs IS 'リーチ数を記録するテーブル';
+CREATE SEQUENCE public.reach_log_id_seq
+    AS integer
+    START WITH 1
+    INCREMENT BY 1
+    NO MINVALUE
+    NO MAXVALUE
+    CACHE 1;
+ALTER SEQUENCE public.reach_log_id_seq OWNED BY public.reach_logs.id;
 ALTER TABLE ONLY public.images ALTER COLUMN id SET DEFAULT nextval('public.images_id_seq'::regclass);
 ALTER TABLE ONLY public.numbers ALTER COLUMN id SET DEFAULT nextval('public.numbers_id_seq'::regclass);
 ALTER TABLE ONLY public.prizes ALTER COLUMN id SET DEFAULT nextval('public.prizes_id_seq'::regclass);
+ALTER TABLE ONLY public.reach_logs ALTER COLUMN id SET DEFAULT nextval('public.reach_log_id_seq'::regclass);
 ALTER TABLE ONLY public.images
     ADD CONSTRAINT images_pkey PRIMARY KEY (id);
 ALTER TABLE ONLY public.numbers
     ADD CONSTRAINT numbers_pkey PRIMARY KEY (id);
 ALTER TABLE ONLY public.prizes
     ADD CONSTRAINT prizes_pkey PRIMARY KEY (id);
+ALTER TABLE ONLY public.reach_logs
+    ADD CONSTRAINT reach_log_pkey PRIMARY KEY (id);
 ALTER TABLE ONLY public.prizes
     ADD CONSTRAINT prizes_image_id_fkey FOREIGN KEY (image_id) REFERENCES public.images(id) ON UPDATE RESTRICT ON DELETE RESTRICT;

view-user/src/components/Layout/Layout.tsx

@@ -1,3 +1,13 @@
+import { useLazyQuery, useMutation } from "@apollo/client";
+import {
+  CreateOneReachRecordDocument,
+  GetOneLatestReachLogDocument,
+} from "@/type/graphql";
+import type {
+  CreateOneReachRecordMutationVariables,
+  CreateOneReachRecordMutation,
+  GetOneLatestReachLogQuery,
+} from "@/type/graphql";
 import { useState, useEffect, useRef, useLayoutEffect } from "react";
 import { useRouter } from "next/router";
 import styles from "./Layout.module.css";
@@ -50,6 +60,14 @@ const Layout = (props: LayoutProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const position: string = isReachIconVisible ? "29%" : "50%";
 
+  const [getLatestReachLog, { data: latestReachLogData }] =
+    useLazyQuery<GetOneLatestReachLogQuery>(GetOneLatestReachLogDocument);
+
+  const [createOneReachRecord] = useMutation<
+    CreateOneReachRecordMutation,
+    CreateOneReachRecordMutationVariables
+  >(CreateOneReachRecordDocument);
+
   // navBarの高さをstring型で渡す
   useLayoutEffect(() => {
     if (navRef.current) {
@@ -66,12 +84,23 @@ const Layout = (props: LayoutProps) => {
     }
   }, []);
 
-  const handleReachIconClick = () => {
-    // todo リーチカウントAPIと繋ぎ込み
+  const handleReachIconClick = async () => {
+    try {
+      const { data } = await getLatestReachLog();
+      const latestReachLogNumber = data?.reachLogs[0]?.reachNum || 0;
+      await createOneReachRecord({
+        variables: {
+          status: true,
+          reachNum: latestReachLogNumber + 1,
+        },
+      });
 
-    setReachIconVisible(false);
-    localStorage.setItem("isReachIconVisible", "false");
-    setIsReachModalOpen(!isReachModalOpen);
+      setReachIconVisible(false);
+      localStorage.setItem("isReachIconVisible", "false");
+      setIsReachModalOpen(!isReachModalOpen);
+    } catch (error) {
+      console.error("Failed to record reach:", error);
+    }
   };
 
   const toggleSortOrder = () => {

view-user/src/gql/reach_logs.gql

@@ -0,0 +1,31 @@
+# リーチログの最新のreachNumを取得(Get)
+query GetOneLatestReachLog {
+  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
+  }
+}