マイページ繋ぎ込み

app/front/apiClient/index.ts

@@ -107,7 +107,7 @@ export default class Repository {
       : Path | PathObject<"put", Path>,
     data: RestApi<"put", Path>["request"],
   ) {
-    return await this.nuxtAxios.$post<RestApi<"put", Path>["response"]>(
+    return await this.nuxtAxios.$put<RestApi<"put", Path>["response"]>(
       typeof path === "string" ? path : pathBuilder(path),
       data,
     )

app/front/assets/scss/home/home.scss

@@ -38,6 +38,13 @@
       margin: 0 0 0.7rem 0;
       @include text-size("mdi");
     }
+    &--item {
+      text-decoration: none;
+      color: inherit;
+      :active {
+        color: inherit;
+      }
+    }
     &__list {
       @include home-event-list-element;
     }

app/front/assets/scss/home/variables.scss

@@ -121,6 +121,10 @@
   display: flex;
   width: 100%;
   margin: 0 0 0.5rem 0;
+  text-align: left;
+  button {
+    background-color: inherit;
+  }
   @include white-text-box($expand:"true");
   &--name{
     width: 30%;
@@ -130,6 +134,7 @@
   }
   &--date{
     margin: 0 0.5rem;
+    width: 5rem;
     @media screen and (min-width: $small+px) {
       margin: 0 2rem;
     }

app/front/pages/home.vue

@@ -8,49 +8,57 @@
         </NuxtLink>
       </button>
     </section>
-    <section class="home-top__event">
+    <section v-if="ongoingRooms.length > 0" class="home-top__event">
       <div class="home-top__event--title">開催中のイベント</div>
-      <div class="home-top__event__list">
-        <div class="home-top__event__list--name">技育ハッカソン vol7</div>
-        <div class="home-top__event__list--date">2021/8/13</div>
-        <div class="home-top__event__list--role">共同管理者</div>
+      <div v-for="(room, id) in ongoingRooms" :key="id">
+        <NuxtLink
+          :to="{ path: '/', query: { roomId: room.id, user: 'admin' } }"
+          class="home-top__event--item"
+        >
+          <div class="home-top__event__list">
+            <div class="home-top__event__list--name">{{ room.title }}</div>
+            <div class="home-top__event__list--date">{{ room.startDate }}</div>
+            <div class="home-top__event__list--role">管理者</div>
+          </div>
+        </NuxtLink>
       </div>
     </section>
-    <section class="home-top__event">
+    <section v-if="notStartedRooms.length > 0" class="home-top__event">
       <div class="home-top__event--title">未開始のイベント</div>
-      <div class="home-top__event__list">
-        <div class="home-top__event__list--name">技育ハッカソン vol8</div>
-        <div class="home-top__event__list--date">2021/8/13</div>
-        <div class="home-top__event__list--role">共同管理者</div>
+      <div v-for="(room, id) in notStartedRooms" :key="id">
+        <NuxtLink
+          :to="{ path: '/', query: { roomId: room.id, user: 'admin' } }"
+          class="home-top__event--item"
+        >
+          <div class="home-top__event__list">
+            <div class="home-top__event__list--name">{{ room.title }}</div>
+            <div class="home-top__event__list--date">{{ room.startDate }}</div>
+            <div class="home-top__event__list--role">管理者</div>
+          </div>
+        </NuxtLink>
       </div>
     </section>
-    <section class="home-top__event">
+    <section v-if="finishedRooms.length > 0" class="home-top__event">
       <div class="home-top__event--title">終了済みのイベント</div>
-      <div class="home-top__event__list">
-        <div class="home-top__event__list--name">技育ハッカソン vol1</div>
-        <div class="home-top__event__list--date">2021/8/13</div>
-        <div class="home-top__event__list--role">管理者</div>
-        <div class="home-top__event__list--status">
-          <div class="home-top__event__list--status--label">公開停止</div>
-        </div>
-      </div>
-      <div class="home-top__event__list">
-        <div class="home-top__event__list--name">
-          技育ハッカソンああああああ vol2
-        </div>
-        <div class="home-top__event__list--date">2021/8/13</div>
-        <div class="home-top__event__list--role">共同管理者</div>
-        <div class="home-top__event__list--status">
-          <div class="home-top__event__list--status--label">公開停止</div>
-        </div>
-      </div>
-      <div class="home-top__event__list">
-        <div class="home-top__event__list--name">技育ハッカソン vol3</div>
-        <div class="home-top__event__list--date">2021/8/13</div>
-        <div class="home-top__event__list--role">管理者</div>
-        <div class="home-top__event__list--status">
-          <div class="home-top__event__list--status--label">公開停止</div>
-        </div>
+      <div v-for="(room, id) in finishedRooms" :key="id">
+        <NuxtLink
+          :to="{ path: '/', query: { roomId: room.id, user: 'admin' } }"
+          class="home-top__event--item"
+        >
+          <div class="home-top__event__list">
+            <div class="home-top__event__list--name">{{ room.title }}</div>
+            <div class="home-top__event__list--date">{{ room.startDate }}</div>
+            <div class="home-top__event__list--role">管理者</div>
+            <div class="home-top__event__list--status">
+              <button
+                class="home-top__event__list--status--label"
+                @click.prevent="onClickArchive(room.id)"
+              >
+                公開停止
+              </button>
+            </div>
+          </div>
+        </NuxtLink>
       </div>
     </section>
     <section class="home-top__inquiry">
@@ -97,13 +105,70 @@
 
 <script lang="ts">
 import Vue from "vue"
+import { RoomModel } from "sushi-chat-shared"
 import { DeviceStore } from "~/store"
 
+type AsyncDataType = {
+  ongoingRooms: RoomModel[]
+  notStartedRooms: RoomModel[]
+  finishedRooms: RoomModel[]
+}
+
 export default Vue.extend({
   name: "Home",
   layout: "home",
+  async asyncData({ app }): Promise<AsyncDataType> {
+    const response = await app.$apiClient.get("/room", {})
+    if (response.result === "success") {
+      const rooms = response.data
+      const ongoingRooms = rooms.filter((room) => room.state === "ongoing")
+      const notStartedRooms = rooms.filter(
+        (room) => room.state === "not-started",
+      )
+      const finishedRooms = rooms.filter((room) => room.state === "finished")
+
+      return { ongoingRooms, notStartedRooms, finishedRooms }
+    } else {
+      // NOTE: エラーハンドリングを適切に
+      throw new Error("データの取得に失敗しました")
+    }
+  },
+  data(): AsyncDataType {
+    return {} as AsyncDataType
+  },
   mounted(): void {
     DeviceStore.determineOs()
   },
+  methods: {
+    async onClickArchive(id: string): Promise<void> {
+      const continueArchive = window.confirm(
+        "ルームをの公開を停止しますか？これ以降参加者・管理者ともにこのルームにアクセスすることはできません（チャット履歴の確認もできなくなります）。",
+      )
+
+      if (!continueArchive) {
+        return
+      }
+      try {
+        console.log(id)
+        const response = await this.$apiClient.put(
+          {
+            pathname: "/room/:id/archive",
+            params: { id },
+          },
+          {},
+        )
+
+        if (response.result === "success") {
+          this.finishedRooms = this.finishedRooms.filter(
+            (room) => room.id !== id,
+          )
+        } else {
+          window.alert("ルームの公開停止に失敗しました")
+        }
+      } catch (e) {
+        window.alert("ルームの公開停止に失敗しました")
+      }
+    },
+  },
 })
 </script>

app/server/src/service/room/RestRoomService.ts

@@ -19,7 +19,6 @@ class RestRoomService {
   // Roomを作成する。
   public async build(command: BuildRoomCommand): Promise<RoomClass> {
     const room = this.roomFactory.create(
-      command.adminId,
       command.title,
       command.topics,
       command.description,