Refactor, cleanup.

Author: dannon

client/src/components/Libraries/LibraryFolder/LibraryFolder.vue

@@ -267,8 +267,8 @@ import BootstrapVue from "bootstrap-vue";
 import { initFolderTableIcons } from "components/Libraries/icons";
 import { DEFAULT_PER_PAGE, MAX_DESCRIPTION_LENGTH } from "components/Libraries/library-utils";
 import UtcDate from "components/UtcDate";
-import { Toast } from "composables/toast";
 import { usePersistentRef } from "composables/persistentRef";
+import { Toast } from "composables/toast";
 import { sanitize } from "dompurify";
 import linkifyHtml from "linkify-html";
 import { getAppRoot } from "onload/loadConfig";
@@ -319,8 +319,6 @@ export default {
         },
     },
     data() {
-        const perPageRef = usePersistentRef("library-folder-per-page", DEFAULT_PER_PAGE);
-
         return {
             ...initialFolderState(),
             ...{
@@ -334,8 +332,7 @@ export default {
                 folder_metadata: {},
                 fields: fields,
                 selectMode: "multi",
-                perPage: perPageRef.value,
-                perPageRef,
+                perPage: DEFAULT_PER_PAGE,
                 maxDescriptionLength: MAX_DESCRIPTION_LENGTH,
                 total_rows: 0,
                 root: getAppRoot(),
@@ -347,7 +344,9 @@ export default {
     },
     watch: {
         perPage(newValue) {
-            this.perPageRef.value = newValue;
+            if (this.perPageRef) {
+                this.perPageRef.value = newValue;
+            }
             this.fetchFolderContents();
         },
         includeDeleted() {
@@ -362,6 +361,8 @@ export default {
     },
     created() {
         this.services = new Services({ root: this.root });
+        this.perPageRef = usePersistentRef("library-folder-per-page", DEFAULT_PER_PAGE);
+        this.perPage = this.perPageRef.value;
         this.getFolder(this.folder_id, this.page);
     },
     methods: {
@@ -375,6 +376,10 @@ export default {
         resetData() {
             const data = initialFolderState();
             Object.keys(data).forEach((k) => (this[k] = data[k]));
+            // Restore perPage from localStorage after reset
+            if (this.perPageRef) {
+                this.perPage = this.perPageRef.value;
+            }
         },
         onSort(props) {
             this.sortBy = props.sortBy;