stampAPIの改修

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

@@ -161,8 +161,6 @@ ALTER TABLE ONLY public.reach_logs
     ADD CONSTRAINT reach_log_pkey PRIMARY KEY (id);
 ALTER TABLE ONLY public.stamp_triggers
     ADD CONSTRAINT stamp_triggers_name_key UNIQUE (name);
-ALTER TABLE ONLY public.stamp_triggers
-    ADD CONSTRAINT stamp_triggers_pkey PRIMARY KEY (id);
 CREATE TRIGGER set_public_stamp_triggers_updated_at BEFORE UPDATE ON public.stamp_triggers FOR EACH ROW EXECUTE FUNCTION public.set_current_timestamp_updated_at();
 COMMENT ON TRIGGER set_public_stamp_triggers_updated_at ON public.stamp_triggers IS 'trigger to set value of column "updated_at" to current timestamp on row update';
 ALTER TABLE ONLY public.prizes

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

@@ -16,28 +16,28 @@ import {
   ToggleButton,
 } from "@/components/common";
 import {
-  UpdateOneTriggerFlagDocument,
+  CreateOneStampTriggerDocument,
   CreateOneReachRecordDocument,
   GetOneLatestReachLogDocument,
 } from "@/type/graphql";
 import type {
-  UpdateOneTriggerFlagMutation,
-  UpdateOneTriggerFlagMutationVariables,
-  CreateOneReachRecordMutationVariables,
+  CreateOneStampTriggerMutation,
+  CreateOneStampTriggerMutationVariables,
   CreateOneReachRecordMutation,
+  CreateOneReachRecordMutationVariables,
   GetOneLatestReachLogQuery,
 } from "@/type/graphql";
 import { ja, en } from "@/locales";
 
 const images = [
-  { id: 1, src: "/ReactionIcon/crap.png", alt: "crap icon" },
-  { id: 2, src: "/ReactionIcon/good.png", alt: " good icon" },
-  { id: 3, src: "/ReactionIcon/cracker.png", alt: "cracker icon" },
-  { id: 4, src: "/ReactionIcon/heart.png", alt: "heart icon" },
-  { id: 5, src: "/ReactionIcon/smile.png", alt: "smile icon" },
-  { id: 6, src: "/ReactionIcon/angry.png", alt: "angry icon" },
-  { id: 7, src: "/ReactionIcon/skull.png", alt: "skull icon" },
-  { id: 8, src: "/ReactionIcon/sad.png", alt: "sad icon" },
+  { name: "crap", src: "/ReactionIcon/crap.png", alt: "crap icon" },
+  { name: "good", src: "/ReactionIcon/good.png", alt: " good icon" },
+  { name: "crakcer", src: "/ReactionIcon/cracker.png", alt: "cracker icon" },
+  { name: "heart", src: "/ReactionIcon/heart.png", alt: "heart icon" },
+  { name: "smile", src: "/ReactionIcon/smile.png", alt: "smile icon" },
+  { name: "angry", src: "/ReactionIcon/angry.png", alt: "angry icon" },
+  { name: "skull", src: "/ReactionIcon/skull.png", alt: "skull icon" },
+  { name: "sad", src: "/ReactionIcon/sad.png", alt: "sad icon" },
 ];
 
 interface LayoutProps {
@@ -59,23 +59,21 @@ const Layout = (props: LayoutProps) => {
   const [isSortOrderActive, setIsSortOrderActive] = useState<boolean>(false);
   const [isReachModalOpen, setIsReachModalOpen] = useState<boolean>(false);
   const [isReachIconVisible, setReachIconVisible] = useState<boolean>(true);
-  const [isFlag, setIsFlag] = useState<boolean>(false);
   const [navBarHeight, setNavBarHeight] = useState<string>();
   const navRef = useRef<HTMLDivElement>(null);
   const position: string = isReachIconVisible ? "29%" : "50%";
-  const [updateFlag] = useMutation<
-    UpdateOneTriggerFlagMutation,
-    UpdateOneTriggerFlagMutationVariables
-  >(UpdateOneTriggerFlagDocument);
-
+  const [createStampRecord] = useMutation<
+    CreateOneStampTriggerMutation,
+    CreateOneStampTriggerMutationVariables
+  >(CreateOneStampTriggerDocument);
   const [getLatestReachLog, { data: latestReachLogData }] =
     useLazyQuery<GetOneLatestReachLogQuery>(GetOneLatestReachLogDocument);
 
   const [createOneReachRecord] = useMutation<
     CreateOneReachRecordMutation,
     CreateOneReachRecordMutationVariables
   >(CreateOneReachRecordDocument);
-
+  5;
   // navBarの高さをstring型で渡す
   useLayoutEffect(() => {
     if (navRef.current) {
@@ -101,9 +99,8 @@ const Layout = (props: LayoutProps) => {
     }
   }, []);
 
-  const handleReactionsiconClick = (id: number) => {
-    setIsFlag(!isFlag);
-    updateFlag({ variables: { id, trigger: isFlag } });
+  const handleReactionsiconClick = (name: string) => {
+    createStampRecord({ variables: { name } });
   };
 
   const handleReachIconClick = async () => {

view-user/src/components/common/ReactionStampModal/ReactionStampModal.tsx

@@ -3,15 +3,15 @@ import Image from "next/image";
 import styles from "./ReactionStampModal.module.css";
 
 interface ImageProps {
-  id: number;
+  name: string;
   src: string;
   alt: string;
 }
 interface ReactionStampModalProps {
   position?: string;
   height?: string;
   images: ImageProps[];
-  onClick: (id: number) => void;
+  onClick: (name: string) => void;
 }
 
 const ReactionStampModal = (props: ReactionStampModalProps) => {
@@ -25,8 +25,8 @@ const ReactionStampModal = (props: ReactionStampModalProps) => {
       : "0px",
   };
 
-  const handleClick = (id: number) => {
-    props.onClick(id);
+  const handleClick = (name: string) => {
+    props.onClick(name);
   };
 
   return (
@@ -38,9 +38,9 @@ const ReactionStampModal = (props: ReactionStampModalProps) => {
         <div className={styles.grid}>
           {props.images.map((image) => (
             <button
-              key={image.id}
+              key={image.name}
               className={styles.iconButton}
-              onClick={() => handleClick(image.id)}
+              onClick={() => handleClick(image.name)}
             >
               <Image src={image.src} alt={image.alt} fill />
             </button>

view-user/src/gql/stamp_triggers.gql

@@ -3,7 +3,6 @@ query GetStampTrrigers {
   stampTriggers {
     id
     name
-    trigger
   }
 }
 
@@ -12,17 +11,6 @@ mutation CreateOneStampTrigger($name: String!) {
   insertStampTriggersOne(object: { name: $name }) {
     id
     name
-    trigger
-  }
-}
-
-# triggerの更新(Update)
-mutation UpdateOneTriggerFlag($id: Int!, $trigger: Boolean!) {
-  updateStampTriggers(
-    where: { id: { _eq: $id } }
-    _set: { trigger: $trigger }
-  ) {
-    affectedRows
   }
 }
 
@@ -38,16 +26,15 @@ subscription SubscribeStampTriggers {
   stampTriggers {
     id
     name
-    trigger
+    createdAt
   }
 }
 
 # 変更されたtriggerの取得(Subscription)
-subscription SubscribeUpdatedStampTrigger($updatedAt: timestamptz!) {
-  stampTriggers(where: { updatedAt: { _gt: $updatedAt } }) {
+subscription SubscribeCreatedStampTrigger($createdAt: timestamptz!) {
+  stampTriggers(where: { createdAt: { _gt: $createdAt } }) {
     id
     name
-    trigger
-    updatedAt
+    createdAt
   }
 }

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

@@ -5,12 +5,12 @@ import Matter from "matter-js";
 import { useSubscription } from "@apollo/client";
 import {
   SubscribeListNumbersDocument,
-  SubscribeUpdatedStampTriggerDocument,
+  SubscribeCreatedStampTriggerDocument,
   SubscribeOneLatestReachlogDocument,
 } from "@/type/graphql";
 import type {
   SubscribeListNumbersSubscription,
-  SubscribeUpdatedStampTriggerSubscription,
+  SubscribeCreatedStampTriggerSubscription,
   SubscribeOneLatestReachlogSubscription,
 } from "@/type/graphql";
 import {
@@ -20,6 +20,7 @@ import {
 } from "@/components/common";
 import styles from "./screen.module.css";
 
+// 画像のパスを管理
 const images: { [key: string]: string } = {
   angry: "/ReactionIcon/angry.png",
   cracker: "/ReactionIcon/cracker.png",
@@ -33,8 +34,10 @@ const images: { [key: string]: string } = {
   surprise: "/ReactionIcon/surprise.png",
 };
 
-type StampState = {
-  [id: number]: string;
+type Stamp = {
+  id: number;
+  name: string;
+  createdAt: string;
 };
 
 type BingoNumbers = SubscribeListNumbersSubscription["numbers"];
@@ -51,7 +54,7 @@ const Page: NextPage = () => {
   const scene = useRef<HTMLDivElement>(null);
   const render = useRef<Matter.Render | null>(null);
   const engine = useRef<Matter.Engine | null>(null);
-  const [lastUpdatedAt, setLastUpdatedAt] = useState<string>(
+  const [latestCreatedAt, setLatestCreatedAt] = useState<string>(
     "2024-08-29T08:12:00",
   );
   const [bingoNumbers, setBingoNumbers] = useState<
@@ -65,44 +68,47 @@ const Page: NextPage = () => {
     },
   ]);
   const displayBingoNumbers = getDisplayBingoNumbers(bingoNumbers);
+
+  // Bingo番号リストのサブスクリプション
   const { data: numbers } = useSubscription(SubscribeListNumbersDocument);
+  // スタンプトリガーのサブスクリプション
   const { data: triggers } =
-    useSubscription<SubscribeUpdatedStampTriggerSubscription>(
-      SubscribeUpdatedStampTriggerDocument,
+    useSubscription<SubscribeCreatedStampTriggerSubscription>(
+      SubscribeCreatedStampTriggerDocument,
       {
-        variables: { updatedAt: lastUpdatedAt },
+        variables: { createdAt: latestCreatedAt },
       },
     );
+  // リーチログのサブスクリプション
   const { data: reachLog } =
     useSubscription<SubscribeOneLatestReachlogSubscription>(
       SubscribeOneLatestReachlogDocument,
     );
 
-  // スタンプの変更を検知し、スタンプを降下させる。
   useEffect(() => {
     if (triggers?.stampTriggers && triggers?.stampTriggers.length > 0) {
-      triggers.stampTriggers.forEach((stamp) => {
+      let latestCreatedAt = new Date(0).toISOString();
+
+      triggers.stampTriggers.forEach((stamp: Stamp) => {
         addCircleById(stamp.name);
+
+        if (new Date(stamp.createdAt) > new Date(latestCreatedAt)) {
+          latestCreatedAt = stamp.createdAt;
+        }
       });
-      const latestUpdatedAt = triggers.stampTriggers.reduce(
-        (latest, current) => {
-          return new Date(current.updatedAt) > new Date(latest)
-            ? current.updatedAt
-            : latest;
-        },
-        new Date(0).toISOString(),
-      );
-      setLastUpdatedAt(latestUpdatedAt);
+
+      setLatestCreatedAt(latestCreatedAt);
     }
   }, [triggers]);
 
-  //subscriptionを行うためのuseEffect
+  // ビンゴ番号のuseEffect
   useEffect(() => {
     if (numbers) {
       setBingoNumbers(numbers.numbers);
     }
   }, [numbers]);
 
+  // スタンプをMatter.jsで降らせる処理
   const addCircleById = (key: string) => {
     if (!images[key]) {
       console.warn(`Image with ID ${key} not found`);
@@ -133,6 +139,7 @@ const Page: NextPage = () => {
     }
   };
 
+  // Matter.jsのエンジン設定とシーンの初期化
   useEffect(() => {
     if (!scene.current) {
       return;
@@ -209,7 +216,6 @@ const Page: NextPage = () => {
           <NumberCardLarge bingoNumber={displayBingoNumbers.large} />
           <div className={styles.column}>
             <NumberCardList screen bingoNumber={displayBingoNumbers.list} />
-            {/* // TODO オプショナルでエラーを逃れているのを対処する */}
             <ReachCount count={reachLog?.reachLogs[0]?.reachNum || 0} />
           </div>
         </div>