events/:eventIdの実装

src/App.vue

@@ -9,6 +9,5 @@
   color: $text-primary;
   background-color: $background-primary;
   min-height: 100vh;
-  padding-bottom: 2rem;
 }
 </style>

src/components/CommentPanel/CommentControls.vue

@@ -5,6 +5,13 @@ import BaseButton from '@/components/UI/BaseButton.vue'
 import ColorPicker from '@/components/CommentPanel/ColorPicker.vue'
 import AIcon from '@/components/UI/AIcon.vue'
 import type { TextColor } from '@/consts/colors'
+import { useGeneralConnectClient } from '@/lib/connectClient'
+
+const props = defineProps<{
+  eventId: string
+}>()
+
+const client = useGeneralConnectClient()
 
 const commentValue = ref('')
 const pickedColor = ref<TextColor>('#000000')
@@ -13,8 +20,15 @@ const isAnonymous = ref(false)
 const toggleIsAnonymous = () => {
   isAnonymous.value = !isAnonymous.value
 }
-const sendComment = () => {
-  //todo:コメントを送信する
+const sendComment = async () => {
+  if (!commentValue.value) return
+  await client.sendComment({
+    meetingId: props.eventId,
+    text: commentValue.value,
+    color: pickedColor.value,
+    isAnonymous: isAnonymous.value
+  })
+  commentValue.value = ''
 }
 </script>
 

src/components/CommentPanel/CommentPanel.vue

@@ -5,6 +5,7 @@ import CommentControls from '@/components/CommentPanel/CommentControls.vue'
 import CommentPanelHeader from '@/components/CommentPanel/CommentPanelHeader.vue'
 
 defineProps<{
+  eventId: string
   comments: Comment[]
   showOverlay: boolean
 }>()
@@ -22,7 +23,7 @@ const emit = defineEmits<{
       @close-comment-panel="emit('popupCommentPanel')"
     />
     <comment-list :comments="comments" :class="$style.commentList" />
-    <comment-controls />
+    <comment-controls :event-id="eventId" />
   </div>
 </template>
 
@@ -31,8 +32,8 @@ const emit = defineEmits<{
   height: calc(100% - 160px);
 }
 .commentPanel {
-  width: 340px;
-  height: 100vh;
+  width: 30rem;
+  height: 100%;
   border-left: 1px solid $color-secondary;
 }
 </style>

src/components/StampList/StampList.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useGeneralConnectClient } from '@/lib/connectClient'
+
+export interface Stamp {
+  stampId: string
+  stampName: string
+  image: string
+}
+
+const props = defineProps<{
+  eventId: string
+  stamps: Stamp[]
+}>()
+
+const client = useGeneralConnectClient()
+
+const handlePutStamp = async (stampId: string) => {
+  await client.sendReaction({ meetingId: props.eventId, stampId })
+}
+</script>
+
+<template>
+  <ul :class="$style.stampList">
+    <li v-for="stamp in stamps" :key="stamp.stampId">
+      <button
+        :class="$style.stampButton"
+        @click="handlePutStamp(stamp.stampId)"
+      >
+        <img
+          :src="stamp.image"
+          :alt="stamp.stampName"
+          :width="100"
+          :height="100"
+        />
+      </button>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" module>
+.stampList {
+  display: flex;
+  list-style: none;
+}
+.stampButton {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  &:hover {
+    background-color: gray;
+  }
+}
+</style>

src/pages/EventPage.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { getEventId } from '@/lib/parsePathParams'
+import CommentPanel from '@/components/CommentPanel/CommentPanel.vue'
+import StampList from '@/components/StampList/StampList.vue'
+import { Stamp } from '@/components/StampList/StampList.vue'
+import { useGeneralConnectClient } from '@/lib/connectClient'
+import {
+  Meeting,
+  Comment
+} from '@/lib/apis/generated/proto/emoine_r/v1/schema_pb'
+
+const route = useRoute()
+const client = useGeneralConnectClient()
+
+const eventId = getEventId(route.params.id)
+const event = ref<Meeting>()
+const comments = ref<Comment[]>()
+
+const stamps: Stamp[] = Array(10).fill({
+  stampId: 'aaa',
+  stampName: 'bbb',
+  image: 'https://q.trap.jp/api/v3/public/icon/mehm8128'
+})
+
+const fetchMeeting = async () => {
+  //todo: エラーハンドリング
+  const res = await client.getMeeting({ id: eventId })
+  if (!res.meeting) {
+    throw new Error('res.meeting is undefined')
+  }
+  event.value = res.meeting
+}
+const fetchComments = async () => {
+  //todo: エラーハンドリング
+  const res = await client.getMeetingComments({ meetingId: eventId })
+  if (!res.comments) {
+    throw new Error('res.comment is undefined')
+  }
+  comments.value = res.comments
+}
+
+onMounted(() => {
+  fetchMeeting()
+  fetchComments()
+})
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.leftContainer">
+      <iframe
+        src="https://www.youtube.com/embed/8Yxrw4GDqg4"
+        :class="$style.video"
+      />
+      <div :class="$style.stampListContainer">
+        <stamp-list
+          :stamps="stamps"
+          :class="$style.stampList"
+          :event-id="eventId"
+        />
+      </div>
+    </div>
+    <comment-panel
+      :comments="comments ?? []"
+      :show-overlay="false"
+      :event-id="eventId"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: space-between;
+  height: 100vh;
+}
+.leftContainer {
+  width: 100%;
+  padding: 1rem 4rem;
+}
+.video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+.stampList {
+  width: fit-content;
+  margin: auto auto;
+}
+</style>

src/router/index.ts

@@ -7,10 +7,9 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/Index.vue')
   },
   {
-    path: '/event/:id',
+    path: '/events/:id',
     name: 'Event',
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    component: () => {} // TODO: ページ作成したらここに書く
+    component: () => import('@/pages/EventPage.vue')
   },
   {
     path: '/admin/events',