Skip to content

Conversation

@hikahana
Copy link
Collaborator

対応Issue

  • 管理者が手動でアンケートを流す機能の実装要求に対応

概要

管理者(view-admin)が任意のタイミングで「アンケート配信」を押すと、ユーザー(view-user)側にモーダルでGoogle Formsへの協力を促す機能を実装しました。ユーザー画面の番号サブスクとは分離した"軽量サブスク"で実現し、localStorageを使わずにセッション中1回だけ表示に抑制する仕様になっています。

実装詳細

DB/Hasura

  • 既存 events テーブルに survey_urlis_survey_active の2列を追加(migration済み)
  • Hasura metadata に public_events.yaml を追加してGraphQL APIを有効化

view-admin

  • アンケート配信/停止ボタンの実装
  • GraphQL Mutation (CreateEventSurvey) でアンケート状態を更新
  • React Hook Form を使用したアンケートURL入力フォーム
  • react-toastify を使用した送信完了メッセージ
  • UI配置の調整(リーチ数制御の下に移動)

view-user

  • 新規 GraphQL Subscription (SubscribeLatestEventSurvey) でリアルタイム更新
  • Recoil atom (hasShownSurveyState) でセッション中の表示制御
  • 専用コンポーネント SurveyPromptModal の作成
  • レスポンシブデザイン対応(vw単位とメディアクエリ使用)
  • 既存の番号購読とApollo Clientを共有

主要ファイル

  • api/metadata/databases/default/tables/public_events.yaml (新規)
  • view-admin/src/gql/events.gql (新規)
  • view-user/src/gql/events.gql (新規)
  • view-user/src/state/survey.ts (新規)
  • view-user/src/components/common/SurveyPromptModal/ (新規)
  • view-admin/src/pages/index.tsx (修正)
  • view-user/src/components/Layout/Layout.tsx (修正)

画面スクリーンショット等

管理者画面にアンケートURL入力欄と「配信する」「配信を停止する」ボタンを追加。ユーザー画面では配信時にモーダルが表示され、「回答する」でGoogle Formsが新しいタブで開き、「閉じる」または背景クリックでモーダルが閉じます。

テスト項目

  • 管理者画面でアンケートURLを入力し「配信する」ボタンを押すと、ユーザー画面にモーダルが即座に表示される
  • ユーザー画面のモーダルで「回答する」を押すとGoogle Formsが新しいタブで開く
  • ユーザー画面のモーダルで「閉じる」または背景クリックでモーダルが閉じる
  • 同セッション中はモーダルが再表示されない(hasShownSurvey制御)
  • 管理者が「配信を停止する」を押すとhasShownSurveyがリセットされ、再配信時にモーダルが表示される
  • 既存の番号サブスクリプションに影響がない
  • レスポンシブデザインが適切に動作する
  • トーストメッセージが適切に表示される(「アンケートを送信しました。」「アンケート配信を停止しました。」)

備考

  • GraphQL codegenでNode.jsバージョンの問題があったが、Hasura metadataの設定で解決
  • 無限ループ問題を解決するため、モーダル閉じ時ではなくアンケート配信停止時にRecoil状態をリセットする設計に変更
  • 背景クリックでモーダルが閉じる仕様を維持しつつ、状態管理を適切に実装

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements a manual survey distribution feature for administrators to send survey prompts to users. The feature allows admins to configure and send Google Forms survey URLs to users via real-time modal prompts.

  • Adds database schema for survey events with URL and activation status tracking
  • Implements admin interface for survey URL configuration and distribution control
  • Creates user-side modal system with session-based display restrictions

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
view-user/src/types/graphql.ts Generated GraphQL types for events table and survey subscription
view-user/src/state/survey.ts Recoil atom for tracking survey display state in user sessions
view-user/src/gql/events.gql GraphQL subscription for real-time survey event updates
view-user/src/components/common/SurveyPromptModal/ New modal component for displaying survey prompts to users
view-user/src/components/Layout/Layout.tsx Integration of survey subscription and modal display logic
view-admin/src/type/graphql.ts Generated GraphQL types for admin-side survey mutations
view-admin/src/pages/index.tsx Admin interface for survey URL input and distribution controls
view-admin/src/gql/events.gql GraphQL query and mutation for survey management
api/migrations/default/1720521696814_auto/up.sql Database migration creating events table with survey fields
api/metadata/databases/default/tables/ Hasura metadata configuration for events table GraphQL API

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@hikahana
Copy link
Collaborator Author

大体copilotのは対応したはず

Copy link
Collaborator

@YosukeIida YosukeIida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

const Layout = (props: LayoutProps) => {
const router = useRouter();
const t = props.language === "ja" ? ja : en;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫 [eslint] <prettier/prettier> reported by reviewdog 🐶
Delete ··

Suggested change


const [mainColor, setMainColor] = useState(COLOR_PRESETS.DEFAULT_MAIN_COLOR);
const [subColor, setSubColor] = useState(COLOR_PRESETS.DEFAULT_SUB_COLOR);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫 [eslint] <prettier/prettier> reported by reviewdog 🐶
Delete ··

Suggested change

@hikahana hikahana merged commit 4849ee4 into develop Aug 22, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants