From d342f8e4eb2a081ce8f5ab2e55c45973e2391217 Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Thu, 17 Dec 2020 22:19:48 +0900
Subject: [PATCH 1/7] =?UTF-8?q?Events=E3=81=A7=E3=81=AEstore=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/actions.ts   | 13 ++++++++++++-
 src/store/mutations.ts |  5 ++++-
 src/store/state.ts     |  6 ++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/store/actions.ts b/src/store/actions.ts
index 8daf120..28edc87 100644
--- a/src/store/actions.ts
+++ b/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
   }
 })
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 91eef68..3aa705d 100644
--- a/src/store/mutations.ts
+++ b/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
   }
 })
diff --git a/src/store/state.ts b/src/store/state.ts
index eb7b80a..b03bbe5 100644
--- a/src/store/state.ts
+++ b/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
 }

From 8cb87527f033f9e5fc09e4a54db05c2f72948321 Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Thu, 17 Dec 2020 22:20:24 +0900
Subject: [PATCH 2/7] =?UTF-8?q?events=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Events/EventList.vue     | 32 ++++++++++++++++++++++
 src/components/Events/EventListItem.vue | 32 ++++++++++++++++++++++
 src/pages/Events.vue                    | 36 ++++++++++++++++++++++---
 3 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Events/EventList.vue
 create mode 100644 src/components/Events/EventListItem.vue

diff --git a/src/components/Events/EventList.vue b/src/components/Events/EventList.vue
new file mode 100644
index 0000000..389f3f7
--- /dev/null
+++ b/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>
diff --git a/src/components/Events/EventListItem.vue b/src/components/Events/EventListItem.vue
new file mode 100644
index 0000000..062230a
--- /dev/null
+++ b/src/components/Events/EventListItem.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <router-link :class="$style.link" :to="`/events/${event.id}`">
+      <span :class="$style.name">{{ event.name }}</span>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Event } from '/@/lib/apis'
+
+export default defineComponent({
+  name: 'EventListItem',
+  props: {
+    event: {
+      type: Object as PropType<Event>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss" module>
+.link {
+  text-decoration: none;
+}
+.name {
+  color: $color-text;
+  font-size: 3rem;
+}
+</style>
diff --git a/src/pages/Events.vue b/src/pages/Events.vue
index db7a7c0..e49cd05 100644
--- a/src/pages/Events.vue
+++ b/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>

From d0f551f7f8f3665170446ed0ea8b866e783dd4c5 Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Thu, 17 Dec 2020 23:18:11 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=E6=97=A5=E4=BB=98=E3=82=92=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E5=87=BA=E3=81=99=E9=96=A2=E6=95=B0getSinceDate?=
 =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/date.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/lib/date.ts

diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..793bdd1
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,20 @@
+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)
+
+export const getSinceDate = (since: string): string => {
+  const sinceDate = new Date(since)
+  return getFullDayString(sinceDate)
+}

From e8ed6acb27dbbba0ca628f930c2a150f05b0b05a Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Thu, 17 Dec 2020 23:18:28 +0900
Subject: [PATCH 4/7] =?UTF-8?q?events=E3=81=AB=E6=97=A5=E4=BB=98=E3=81=AE?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Events/EventListItem.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Events/EventListItem.vue b/src/components/Events/EventListItem.vue
index 062230a..5363eb2 100644
--- a/src/components/Events/EventListItem.vue
+++ b/src/components/Events/EventListItem.vue
@@ -2,13 +2,15 @@
   <div>
     <router-link :class="$style.link" :to="`/events/${event.id}`">
       <span :class="$style.name">{{ event.name }}</span>
+      <span :class="$style.date">({{ state.date }})</span>
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, reactive } from 'vue'
 import { Event } from '/@/lib/apis'
+import { getSinceDate } from '/@/lib/date'
 
 export default defineComponent({
   name: 'EventListItem',
@@ -17,6 +19,12 @@ export default defineComponent({
       type: Object as PropType<Event>,
       required: true
     }
+  },
+  setup(props) {
+    const state = reactive({
+      date: computed(() => getSinceDate(props.event.duration.since))
+    })
+    return { state }
   }
 })
 </script>
@@ -29,4 +37,8 @@ export default defineComponent({
   color: $color-text;
   font-size: 3rem;
 }
+.date {
+  color: $color-text;
+  font-size: 1.5rem;
+}
 </style>

From 67a5e1f04249c6ca9d05c9313386da680d5e8a02 Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Tue, 22 Dec 2020 22:00:01 +0900
Subject: [PATCH 5/7] =?UTF-8?q?events=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

日付と名前の間に隙間を入れる・コードの修正
---
 src/components/Events/EventListItem.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Events/EventListItem.vue b/src/components/Events/EventListItem.vue
index 5363eb2..565e8f5 100644
--- a/src/components/Events/EventListItem.vue
+++ b/src/components/Events/EventListItem.vue
@@ -2,7 +2,7 @@
   <div>
     <router-link :class="$style.link" :to="`/events/${event.id}`">
       <span :class="$style.name">{{ event.name }}</span>
-      <span :class="$style.date">({{ state.date }})</span>
+      <span :class="$style.date">({{ date }})</span>
     </router-link>
   </div>
 </template>
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, reactive } from 'vue'
 import { Event } from '/@/lib/apis'
-import { getSinceDate } from '/@/lib/date'
+import { getFullDayString } from '/@/lib/date'
 
 export default defineComponent({
   name: 'EventListItem',
@@ -21,10 +21,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const state = reactive({
-      date: computed(() => getSinceDate(props.event.duration.since))
-    })
-    return { state }
+    const date = computed(() => getFullDayString(new Date(props.event.duration.since)))
+    return { date }
   }
 })
 </script>
@@ -40,5 +38,6 @@ export default defineComponent({
 .date {
   color: $color-text;
   font-size: 1.5rem;
+  margin: 0 0.5em;
 }
 </style>

From 25b187baee98528fd1c0ee0badeb941905a26ffb Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Tue, 22 Dec 2020 22:00:13 +0900
Subject: [PATCH 6/7] =?UTF-8?q?getSinceDate=E3=81=AE=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/date.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/lib/date.ts b/src/lib/date.ts
index 793bdd1..bd4015f 100644
--- a/src/lib/date.ts
+++ b/src/lib/date.ts
@@ -13,8 +13,3 @@ export const getFullDayString = (date: Date): string =>
 
 export const getFullDayWithTimeString = (date: Date): string =>
   getFullDayString(date) + ' ' + getTimeString(date)
-
-export const getSinceDate = (since: string): string => {
-  const sinceDate = new Date(since)
-  return getFullDayString(sinceDate)
-}

From e9395b14f02851b2442127ed065dc829b0a59984 Mon Sep 17 00:00:00 2001
From: toshi/pono000 <toshi.pono.h@gmail.com>
Date: Tue, 22 Dec 2020 22:05:13 +0900
Subject: [PATCH 7/7] lint

---
 src/components/Events/EventListItem.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Events/EventListItem.vue b/src/components/Events/EventListItem.vue
index 565e8f5..ea3cc06 100644
--- a/src/components/Events/EventListItem.vue
+++ b/src/components/Events/EventListItem.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { Event } from '/@/lib/apis'
 import { getFullDayString } from '/@/lib/date'
 
@@ -21,7 +21,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const date = computed(() => getFullDayString(new Date(props.event.duration.since)))
+    const date = computed(() =>
+      getFullDayString(new Date(props.event.duration.since))
+    )
     return { date }
   }
 })