From 43e05e8438c37501d27a4ec51d883835c296bed4 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 4 Jun 2019 21:42:31 +0100
Subject: [PATCH] Extract a SessionFormMessage component

---
 src/components/SessionForm.vue        | 20 +++++++++-----------
 src/components/SessionFormMessage.vue | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/components/SessionFormMessage.vue

diff --git a/src/components/SessionForm.vue b/src/components/SessionForm.vue
index 25309f5..f71ecec 100644
--- a/src/components/SessionForm.vue
+++ b/src/components/SessionForm.vue
@@ -2,17 +2,9 @@
   <section class="mt-8">
     <h3 class="text-2xl font-semibold mb-4">Submit a Session</h3>
 
-    <div v-if="messages.length" class="bg-green-100 border border-green-300 p-4 mb-6">
-      <ul class="list-disc list-inside ml-3">
-        <li v-for="message in messages" :key="message">{{ message }}</li>
-      </ul>
-    </div>
+    <session-form-message :messages="messages" class="bg-green-100 border-green-300"></session-form-message>
 
-    <div v-if="errors.length" class="bg-red-100 border border-red-300 p-4 mb-6">
-      <ul class="list-disc list-inside ml-3">
-        <li v-for="error in errors" :key="error.detail">{{ error.detail }}</li>
-      </ul>
-    </div>
+    <session-form-message :messages="errors" class="bg-red-100 border-red-300"></session-form-message>
 
     <form action="" @submit.prevent="submit">
       <label class="block mb-4">
@@ -32,8 +24,14 @@
 
 <script>
 import axios from 'axios'
+import _ from 'lodash'
+import SessionFormMessage from '@/components/SessionFormMessage'
 
 export default {
+  components: {
+    SessionFormMessage
+  },
+
   data () {
     return {
       errors: [],
@@ -83,7 +81,7 @@ export default {
           this.form.title = ''
         })
         .catch(error => {
-          this.errors = error.response.data.errors || []
+          this.errors = _(error.response.data.errors).map('detail').value()
         })
     }
   }
diff --git a/src/components/SessionFormMessage.vue b/src/components/SessionFormMessage.vue
new file mode 100644
index 0000000..efd816a
--- /dev/null
+++ b/src/components/SessionFormMessage.vue
@@ -0,0 +1,19 @@
+<template>
+  <div v-if="messages.length" class="border p-4 mb-6">
+    <ul class="list-disc list-inside ml-3">
+      <li v-for="message in messages" :key="message">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    messages: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
+</script>