From a39497e8d4856fe4e8a07c331df167fe9914da52 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 30 Aug 2019 13:56:07 +0100
Subject: [PATCH] Do the sorting within AcceptedSessionsList

---
 vuejs/src/App.vue                             | 10 +---------
 vuejs/src/components/AcceptedSessionsList.vue | 12 ++++++++++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vuejs/src/App.vue b/vuejs/src/App.vue
index 29445fb..c55e8d9 100644
--- a/vuejs/src/App.vue
+++ b/vuejs/src/App.vue
@@ -1,14 +1,13 @@
 <template>
   <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">
     <div class="w-full max-w-2xl mx-auto">
-      <accepted-sessions-list :sessions="sortedSessions" />
+      <accepted-sessions-list :sessions="sessions" />
       <session-form @submitted="addSession($event)" />
     </div>
   </div>
 </template>
 
 <script>
-import _ from 'lodash'
 import qs from 'qs'
 import AcceptedSessionsList from '@/components/AcceptedSessionsList'
 import SessionForm from '@/components/SessionForm'
@@ -47,13 +46,6 @@ export default {
     addSession: function (session) {
       this.sessions.push(session)
     }
-  },
-
-  computed: {
-    sortedSessions: function () {
-      return _(this.sessions).sortBy(({ attributes }) => attributes.title)
-        .value()
-    }
   }
 }
 </script>
diff --git a/vuejs/src/components/AcceptedSessionsList.vue b/vuejs/src/components/AcceptedSessionsList.vue
index 45f09f0..e5917d4 100644
--- a/vuejs/src/components/AcceptedSessionsList.vue
+++ b/vuejs/src/components/AcceptedSessionsList.vue
@@ -4,7 +4,7 @@
 
     <div v-if="sessions.length" class="bg-white p-6 rounded-lg border">
       <ul class="-mb-3">
-        <li v-for="{ attributes } in sessions" :key="attributes.drupal_internal__nid" class="mb-3">
+        <li v-for="{ attributes } in sortedSessions" :key="attributes.drupal_internal__nid" class="mb-3">
           {{ attributes.title }}
         </li>
       </ul>
@@ -13,12 +13,20 @@
 </template>
 
 <script>
+import sortBy from 'lodash/sortBy'
+
 export default {
   props: {
     sessions: {
-      type: Object,
+      type: Array,
       required: true
     }
+  },
+
+  computed: {
+    sortedSessions: function () {
+      return sortBy(this.sessions, 'attributes.title')
+    }
   }
 }
 </script>