イベント一覧の実装 #13

src/components/Events/EventList.vue

@@ -0,0 +1,32 @@
+<template>
+ <section :class="$style.container">
+ <event-list-item v-for="event in events" :key="event.id" :event="event" />
+ </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Event } from '/@/lib/apis'
+import EventListItem from './EventListItem.vue'
+
+export default defineComponent({
+ name: 'EventList',
+ components: {
+ EventListItem
+ },
+ props: {
+ events: {
+ type: Array as PropType<Event[]>,
+ default: []
+ }
+ }
+})
+</script>
+
+<style lang="scss" module>
+.container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+ gap: 2rem;
+}
+</style>

src/components/Events/EventListItem.vue

@@ -0,0 +1,45 @@
+<template>
+ <div>
+ <router-link :class="$style.link" :to="`/events/${event.id}`">
+ <span :class="$style.name">{{ event.name }}</span>
+ <span :class="$style.date">({{ date }})</span>
+ </router-link>
+ </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { Event } from '/@/lib/apis'
+import { getFullDayString } from '/@/lib/date'
+
+export default defineComponent({
+ name: 'EventListItem',
+ props: {
+ event: {
+ type: Object as PropType<Event>,
+ required: true
+ }
+ },
+ setup(props) {
+ const date = computed(() =>
+ getFullDayString(new Date(props.event.duration.since))
+ )
+ return { date }
+ }
+})
+</script>
+
+<style lang="scss" module>
+.link {
+ text-decoration: none;
+}
+.name {
+ color: $color-text;
+ font-size: 3rem;
+}
+.date {
+ color: $color-text;
+ font-size: 1.5rem;
+ margin: 0 0.5em;
+}
+</style>

src/lib/date.ts

@@ -0,0 +1,15 @@
+export const getTimeString = (date: Date): string =>
+ date.getHours().toString().padStart(2, '0') +
+ ':' +
+ date.getMinutes().toString().padStart(2, '0')
+
+export const getDayString = (date: Date): string =>
+ (date.getMonth() + 1).toString().padStart(2, '0') +
+ '/' +
+ date.getDate().toString().padStart(2, '0')
+
+export const getFullDayString = (date: Date): string =>
+ date.getFullYear() + '/' + getDayString(date)
+
+export const getFullDayWithTimeString = (date: Date): string =>
+ getFullDayString(date) + ' ' + getTimeString(date)

src/pages/Events.vue

@@ -1,11 +1,41 @@
 <template>
- <div>Events</div>
+ <page-container>
+ <page-title :class="$style.title">イベント一覧</page-title>
+ <event-list v-if="fetcherState === 'loaded'" :events="events" />
+ <p v-else>{{ fetcherState }}</p>
+ </page-container>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { useStore } from '/@/store'
+import useFetcher from '/@/use/fetcher'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import PageTitle from '/@/components/Layout/PageTitle.vue'
+import EventList from '/@/components/Events/EventList.vue'
 
 export default defineComponent({
- name: 'Events'
+ name: 'Events',
+ components: {
+ PageContainer,
+ PageTitle,
+ EventList
+ },
+ setup() {
+ const store = useStore()
+
+ const events = computed(() => store.state.events)
+ const { fetcherState } = useFetcher(events, () =>
+ store.dispatch.fetchEvents()
+ )
+
+ return { events, fetcherState }
+ }
 })
 </script>
+
+<style lang="scss" module>
+.title {
+ margin: 4rem 0;
+}
+</style>

src/store/actions.ts

@@ -1,6 +1,6 @@
 import { defineActions } from 'direct-vuex'
 import { rootActionContext } from '.'
-import apis, { Group } from '/@/lib/apis'
+import apis, { Group, Event } from '/@/lib/apis'
 
 export const actions = defineActions({
  async fetchGroups(context): Promise<Group[]> {
@@ -13,5 +13,16 @@ export const actions = defineActions({
  const res = await apis.getGroups()
  commit.setGroups(res.data)
  return res.data
+ },
+ async fetchEvents(context): Promise<Event[]> {
+ const { state, commit } = rootActionContext(context)
+
+ if (state.events !== null) {
+ return state.events
+ }
+
+ const res = await apis.getEvents()
+ commit.setEvents(res.data)
+ return res.data
  }
 })

src/store/mutations.ts

@@ -1,9 +1,12 @@
 import { defineMutations } from 'direct-vuex'
 import { S } from './state'
-import { Group } from '/@/lib/apis'
+import { Group, Event } from '/@/lib/apis'
 
 export const mutations = defineMutations<S>()({
  setGroups(state: S, groups: Group[]) {
  state.groups = groups
+ },
+ setEvents(state: S, events: Event[]) {
+ state.events = events
  }
 })

src/store/state.ts

@@ -1,9 +1,11 @@
-import { Group } from '/@/lib/apis'
+import { Group, Event } from '/@/lib/apis'
 
 export interface S {
  groups: Group[] | null
+ events: Event[] | null
 }
 
 export const state: S = {
- groups: null
+ groups: null,
+ events: null
 }