memos order by upated & fix created

app/Http/Resources/Memo.php

@@ -23,6 +23,7 @@ class Memo extends JsonResource
                 'name' => $this->name,
                 'memo' => $this->memo,
                 'last_updated' => $this->updated_at->diffForHumans(),
+                'last_updated_timestamp' => $this->updated_at->timestamp,
                 'attributes' => [
                     'posted_by' => new UserResource($this->user),
                     'cover_image' => new ImageResource($this->coverImage),

resources/js/views/Memo/MemoCreate.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="p-4">
-        <div class="flex justify-between flex-center mb-4">
-            <router-link to="/memos/" class="btn">Back</router-link>
-            <button class="btn-primary">Add New Memo</button>
-        </div>
         <form @submit.prevent="submitForm">
+            <div class="flex justify-between flex-center mb-4">
+                <router-link to="/memos/" class="btn">Back</router-link>
+                <button class="btn-primary">Add New Memo</button>
+            </div>
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
         </form>

resources/js/views/Memo/MemoIndex.vue

@@ -43,12 +43,20 @@ export default {
         axios.get('/api/memos')
             .then(response => {
                 this.memos = response.data.data
+                this.reorderList()
                 this.loading = false
             })
             .catch(() => {
                 this.loading = false
                 console.log('Unable to fetch memos.')
             })
+    },
+    methods: {
+        reorderList() {
+            this.memos.sort(function(a, b) {
+                return a.data.last_updated_timestamp + b.data.last_updated_timestamp
+            })
+        }
     }
 }
 </script>