diff --git a/api/migrations/default/1720521696814_auto/up.sql b/api/migrations/default/1720521696814_auto/up.sql index f2d3200..4648409 100644 --- a/api/migrations/default/1720521696814_auto/up.sql +++ b/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 diff --git a/view-user/src/components/Layout/Layout.tsx b/view-user/src/components/Layout/Layout.tsx index c64c621..70c1714 100644 --- a/view-user/src/components/Layout/Layout.tsx +++ b/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,15 +59,13 @@ const Layout = (props: LayoutProps) => { const [isSortOrderActive, setIsSortOrderActive] = useState(false); const [isReachModalOpen, setIsReachModalOpen] = useState(false); const [isReachIconVisible, setReachIconVisible] = useState(true); - const [isFlag, setIsFlag] = useState(false); const [navBarHeight, setNavBarHeight] = useState(); const navRef = useRef(null); const position: string = isReachIconVisible ? "29%" : "50%"; - const [updateFlag] = useMutation< - UpdateOneTriggerFlagMutation, - UpdateOneTriggerFlagMutationVariables - >(UpdateOneTriggerFlagDocument); - + const [createStampRecord] = useMutation< + CreateOneStampTriggerMutation, + CreateOneStampTriggerMutationVariables + >(CreateOneStampTriggerDocument); const [getLatestReachLog, { data: latestReachLogData }] = useLazyQuery(GetOneLatestReachLogDocument); @@ -75,7 +73,7 @@ const Layout = (props: LayoutProps) => { 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 () => { diff --git a/view-user/src/components/common/ReactionStampModal/ReactionStampModal.tsx b/view-user/src/components/common/ReactionStampModal/ReactionStampModal.tsx index 6272db1..6a326b5 100644 --- a/view-user/src/components/common/ReactionStampModal/ReactionStampModal.tsx +++ b/view-user/src/components/common/ReactionStampModal/ReactionStampModal.tsx @@ -3,7 +3,7 @@ import Image from "next/image"; import styles from "./ReactionStampModal.module.css"; interface ImageProps { - id: number; + name: string; src: string; alt: string; } @@ -11,7 +11,7 @@ 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) => {
{props.images.map((image) => ( diff --git a/view-user/src/gql/stamp_triggers.gql b/view-user/src/gql/stamp_triggers.gql index db1a13d..df4ef73 100644 --- a/view-user/src/gql/stamp_triggers.gql +++ b/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 } } diff --git a/view-user/src/pages/screen/index.tsx b/view-user/src/pages/screen/index.tsx index 5f120a1..ef0dd30 100644 --- a/view-user/src/pages/screen/index.tsx +++ b/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(null); const render = useRef(null); const engine = useRef(null); - const [lastUpdatedAt, setLastUpdatedAt] = useState( + const [latestCreatedAt, setLatestCreatedAt] = useState( "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( - SubscribeUpdatedStampTriggerDocument, + useSubscription( + SubscribeCreatedStampTriggerDocument, { - variables: { updatedAt: lastUpdatedAt }, + variables: { createdAt: latestCreatedAt }, }, ); + // リーチログのサブスクリプション const { data: reachLog } = useSubscription( 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 = () => {
- {/* // TODO オプショナルでエラーを逃れているのを対処する */}
diff --git a/view-user/src/type/graphql.ts b/view-user/src/type/graphql.ts index 4150cde..6ae75e2 100644 --- a/view-user/src/type/graphql.ts +++ b/view-user/src/type/graphql.ts @@ -1104,10 +1104,9 @@ export type ReachLogsVarianceFields = { /** スタンプを降らせるためのAPI */ export type StampTriggers = { __typename?: "StampTriggers"; + createdAt?: Maybe; id: Scalars["Int"]["output"]; name: Scalars["String"]["output"]; - trigger: Scalars["Boolean"]["output"]; - updatedAt?: Maybe; }; /** aggregated selection of "stamp_triggers" */ @@ -1150,10 +1149,9 @@ export type StampTriggersBoolExp = { _and?: InputMaybe>; _not?: InputMaybe; _or?: InputMaybe>; + createdAt?: InputMaybe; id?: InputMaybe; name?: InputMaybe; - trigger?: InputMaybe; - updatedAt?: InputMaybe; }; /** unique or primary key constraints on table "stamp_triggers" */ @@ -1171,26 +1169,25 @@ export type StampTriggersIncInput = { /** input type for inserting data into table "stamp_triggers" */ export type StampTriggersInsertInput = { + createdAt?: InputMaybe; id?: InputMaybe; name?: InputMaybe; - trigger?: InputMaybe; - updatedAt?: InputMaybe; }; /** aggregate max on columns */ export type StampTriggersMaxFields = { __typename?: "StampTriggersMaxFields"; + createdAt?: Maybe; id?: Maybe; name?: Maybe; - updatedAt?: Maybe; }; /** aggregate min on columns */ export type StampTriggersMinFields = { __typename?: "StampTriggersMinFields"; + createdAt?: Maybe; id?: Maybe; name?: Maybe; - updatedAt?: Maybe; }; /** response of any mutation on the table "stamp_triggers" */ @@ -1211,10 +1208,9 @@ export type StampTriggersOnConflict = { /** Ordering options when selecting data from "stamp_triggers". */ export type StampTriggersOrderBy = { + createdAt?: InputMaybe; id?: InputMaybe; name?: InputMaybe; - trigger?: InputMaybe; - updatedAt?: InputMaybe; }; /** primary key columns input for table: stamp_triggers */ @@ -1224,22 +1220,19 @@ export type StampTriggersPkColumnsInput = { /** select columns of table "stamp_triggers" */ export enum StampTriggersSelectColumn { + /** column name */ + createdAt = "createdAt", /** column name */ id = "id", /** column name */ name = "name", - /** column name */ - trigger = "trigger", - /** column name */ - updatedAt = "updatedAt", } /** input type for updating data in table "stamp_triggers" */ export type StampTriggersSetInput = { + createdAt?: InputMaybe; id?: InputMaybe; name?: InputMaybe; - trigger?: InputMaybe; - updatedAt?: InputMaybe; }; /** aggregate stddev on columns */ @@ -1270,10 +1263,9 @@ export type StampTriggersStreamCursorInput = { /** Initial value of the column from where the streaming should start */ export type StampTriggersStreamCursorValueInput = { + createdAt?: InputMaybe; id?: InputMaybe; name?: InputMaybe; - trigger?: InputMaybe; - updatedAt?: InputMaybe; }; /** aggregate sum on columns */ @@ -1284,14 +1276,12 @@ export type StampTriggersSumFields = { /** update columns of table "stamp_triggers" */ export enum StampTriggersUpdateColumn { + /** column name */ + createdAt = "createdAt", /** column name */ id = "id", /** column name */ name = "name", - /** column name */ - trigger = "trigger", - /** column name */ - updatedAt = "updatedAt", } export type StampTriggersUpdates = { @@ -2198,7 +2188,6 @@ export type GetStampTrrigersQuery = { __typename?: "StampTriggers"; id: number; name: string; - trigger: boolean; }>; }; @@ -2212,20 +2201,6 @@ export type CreateOneStampTriggerMutation = { __typename?: "StampTriggers"; id: number; name: string; - trigger: boolean; - } | null; -}; - -export type UpdateOneTriggerFlagMutationVariables = Exact<{ - id: Scalars["Int"]["input"]; - trigger: Scalars["Boolean"]["input"]; -}>; - -export type UpdateOneTriggerFlagMutation = { - __typename?: "mutation_root"; - updateStampTriggers?: { - __typename?: "StampTriggersMutationResponse"; - affectedRows: number; } | null; }; @@ -2251,22 +2226,21 @@ export type SubscribeStampTriggersSubscription = { __typename?: "StampTriggers"; id: number; name: string; - trigger: boolean; + createdAt?: any | null; }>; }; -export type SubscribeUpdatedStampTriggerSubscriptionVariables = Exact<{ - updatedAt: Scalars["timestamptz"]["input"]; +export type SubscribeCreatedStampTriggerSubscriptionVariables = Exact<{ + createdAt: Scalars["timestamptz"]["input"]; }>; -export type SubscribeUpdatedStampTriggerSubscription = { +export type SubscribeCreatedStampTriggerSubscription = { __typename?: "subscription_root"; stampTriggers: Array<{ __typename?: "StampTriggers"; id: number; name: string; - trigger: boolean; - updatedAt?: any | null; + createdAt?: any | null; }>; }; @@ -2595,7 +2569,6 @@ export const GetStampTrrigersDocument = gql` stampTriggers { id name - trigger } } `; @@ -2608,7 +2581,6 @@ export const CreateOneStampTriggerDocument = gql` insertStampTriggersOne(object: { name: $name }) { id name - trigger } } `; @@ -2622,26 +2594,6 @@ export type CreateOneStampTriggerMutationOptions = Apollo.BaseMutationOptions< CreateOneStampTriggerMutation, CreateOneStampTriggerMutationVariables >; -export const UpdateOneTriggerFlagDocument = gql` - mutation UpdateOneTriggerFlag($id: Int!, $trigger: Boolean!) { - updateStampTriggers( - where: { id: { _eq: $id } } - _set: { trigger: $trigger } - ) { - affectedRows - } - } -`; -export type UpdateOneTriggerFlagMutationFn = Apollo.MutationFunction< - UpdateOneTriggerFlagMutation, - UpdateOneTriggerFlagMutationVariables ->; -export type UpdateOneTriggerFlagMutationResult = - Apollo.MutationResult; -export type UpdateOneTriggerFlagMutationOptions = Apollo.BaseMutationOptions< - UpdateOneTriggerFlagMutation, - UpdateOneTriggerFlagMutationVariables ->; export const DeleteOneStampTriggerDocument = gql` mutation DeleteOneStampTrigger($id: Int!) { deleteStampTriggers(where: { id: { _eq: $id } }) { @@ -2664,21 +2616,20 @@ export const SubscribeStampTriggersDocument = gql` stampTriggers { id name - trigger + createdAt } } `; export type SubscribeStampTriggersSubscriptionResult = Apollo.SubscriptionResult; -export const SubscribeUpdatedStampTriggerDocument = gql` - subscription SubscribeUpdatedStampTrigger($updatedAt: timestamptz!) { - stampTriggers(where: { updatedAt: { _gt: $updatedAt } }) { +export const SubscribeCreatedStampTriggerDocument = gql` + subscription SubscribeCreatedStampTrigger($createdAt: timestamptz!) { + stampTriggers(where: { createdAt: { _gt: $createdAt } }) { id name - trigger - updatedAt + createdAt } } `; -export type SubscribeUpdatedStampTriggerSubscriptionResult = - Apollo.SubscriptionResult; +export type SubscribeCreatedStampTriggerSubscriptionResult = + Apollo.SubscriptionResult;