Moved recently modified to a component

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 971555687cbbad1a349f060af6520d9f7a6e8418..64f2220f114de89cf6c942fd1cbd06a8c98e38bd 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -1,6 +1,8 @@
 import { Editor } from "@toast-ui/vue-editor";
 import { Viewer } from "@toast-ui/vue-editor";
 
+import RecentlyModified from "./RecentlyModified";
+
 import api from "../api";
 import * as constants from "../constants";
 import { Note, SearchResult } from "./classes";
@@ -11,6 +13,7 @@ export default {
   components: {
     Viewer,
     Editor,
+    RecentlyModified,
   },
 
   data: function() {
@@ -24,7 +27,6 @@ export default {
 
       // Home Page
       if (basePath == "") {
-        this.getNotes(5, "lastModified", "desc");
         this.currentView = this.views.home;
       }
 
@@ -116,20 +118,6 @@ export default {
       this.navigate(`/${constants.basePaths.login}`);
     },
 
-    getNotes: function(limit = null, sort = "filename", order = "asc") {
-      let parent = this;
-      api
-        .get("/api/notes", {
-          params: { limit: limit, sort: sort, order: order },
-        })
-        .then(function(response) {
-          parent.notes = [];
-          response.data.forEach(function(note) {
-            parent.notes.push(new Note(note.filename, note.lastModified));
-          });
-        });
-    },
-
     search: function() {
       this.navigate(
         `/${constants.basePaths.search}?${

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 2cf3146aac059b87914f08caa59494508ceffe8e..b8f9163105c5a66394a8781915acfe6db90d331c 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -216,30 +216,7 @@
       </div>
 
       <!-- Home -->
-      <div v-if="currentView == views.home">
-        <!-- Loading -->
-        <div v-if="notes == null">
-          <p class="text-center">Loading...</p>
-        </div>
-
-        <!-- No Notes -->
-        <div v-else-if="notes.length == 0">
-          <p class="text-center">No Notes</p>
-        </div>
-
-        <!-- Notes Loaded -->
-        <div v-else>
-          <p
-            v-for="note in notes"
-            class="text-center clickable-link mb-2"
-            :key="note.filename"
-          >
-            <a :href="note.href" @click.prevent="navigate(note.href, $event)">{{
-              note.title
-            }}</a>
-          </p>
-        </div>
-      </div>
+      <RecentlyModified v-if="currentView == views.home"/>
     </div>
   </div>
 </template>

diff --git a/flatnotes/src/components/RecentlyModified.vue b/flatnotes/src/components/RecentlyModified.vue
new file mode 100644 (file)
index 0000000..4e21960
--- /dev/null
+++ b/flatnotes/src/components/RecentlyModified.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h6 class="text-center text-muted text-bold">Recently Modified</h6>
+
+    <!-- Loading -->
+    <div v-if="notes == null">
+      <p class="text-center">Loading...</p>
+    </div>
+
+    <!-- No Notes -->
+    <div v-else-if="notes.length == 0">
+      <p class="text-center">No Notes</p>
+    </div>
+
+    <!-- Notes Loaded -->
+    <div v-else>
+      <p
+        v-for="note in notes"
+        class="text-center clickable-link mb-2"
+        :key="note.filename"
+      >
+        <a :href="note.href" @click.prevent="openNote(note.href, $event)">{{
+          note.title
+        }}</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "../api";
+import { Note } from "./classes";
+import EventBus from "../eventBus";
+
+export default {
+  data: function () {
+    return {
+      notes: null,
+    };
+  },
+
+  methods: {
+    getNotes: function (limit = null, sort = "filename", order = "asc") {
+      let parent = this;
+      api
+        .get("/api/notes", {
+          params: { limit: limit, sort: sort, order: order },
+        })
+        .then(function (response) {
+          parent.notes = [];
+          response.data.forEach(function (note) {
+            parent.notes.push(new Note(note.filename, note.lastModified));
+          });
+        });
+    },
+
+    openNote: function (href, event) {
+      EventBus.$emit("navigate", href, event);
+    },
+  },
+
+  created: function () {
+    this.getNotes(5, "lastModified", "desc");
+  },
+};
+</script>
\ No newline at end of file

diff --git a/flatnotes/src/constants.js b/flatnotes/src/constants.js
index 4fb6edaba94de75db5a785503fe6582c7f5f8c2f..a4c4918ec3366a197dd70fba04fb7424c11527d9 100644 (file)
--- a/flatnotes/src/constants.js
+++ b/flatnotes/src/constants.js
@@ -30,7 +30,6 @@ export const dataDefaults = function() {
     rememberMeInput: false,
 
     // Note Data
-    notes: null,
     searchTerm: null,
     searchResults: null,
     currentNote: null,