From 168e52c251aaac67ae4be6ef0c1bcd077bc5eac9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 13:45:47 +0100
Subject: [PATCH] :zap: Item size and layout are now managed by store

---
 src/components/Settings/ItemSizeSelector.vue  |  1 -
 src/components/Settings/LayoutSelector.vue    |  6 ----
 src/components/Settings/SettingsContainer.vue | 10 ++----
 src/store.js                                  |  9 +++++
 src/views/Home.vue                            | 36 ++++++++-----------
 5 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 470a186f..9143a465 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -47,7 +47,6 @@ export default {
   },
   methods: {
     updateIconSize(iconSize) {
-      this.$emit('iconSizeUpdated', iconSize);
       this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
     },
     tooltip(content) {
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index f7fea7a0..f4c624e5 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -32,11 +32,6 @@ import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
 
 export default {
   name: 'LayoutSelector',
-  data() {
-    return {
-      input: '',
-    };
-  },
   props: {
     displayLayout: String,
   },
@@ -47,7 +42,6 @@ export default {
   },
   methods: {
     updateDisplayLayout(layout) {
-      this.$emit('layoutUpdated', layout);
       this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
     },
     tooltip(content) {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 36f9226a..dd3834f1 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -7,8 +7,8 @@
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
         <ThemeSelector />
-        <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
-        <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+        <LayoutSelector :displayLayout="displayLayout" />
+        <ItemSizeSelector :iconSize="iconSize" />
         <ConfigLauncher />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
@@ -106,12 +106,6 @@ export default {
     clearFilterInput() {
       this.$refs.SearchBar.clearFilterInput();
     },
-    updateDisplayLayout(layout) {
-      this.$emit('change-display-layout', layout);
-    },
-    updateIconSize(iconSize) {
-      this.$emit('change-icon-size', iconSize);
-    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
diff --git a/src/store.js b/src/store.js
index fa986990..f978bcc5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -86,6 +86,12 @@ const store = new Vuex.Store({
       });
       return foundSection;
     },
+    layout(state) {
+      return state.config.appConfig.layout || 'auto';
+    },
+    iconSize(state) {
+      return state.config.appConfig.iconSize || 'medium';
+    },
   },
   mutations: {
     [SET_CONFIG](state, config) {
@@ -217,12 +223,15 @@ const store = new Vuex.Store({
     },
     [SET_ITEM_LAYOUT](state, layout) {
       state.config.appConfig.layout = layout;
+      InfoHandler('Layout updated', InfoKeys.VISUAL);
     },
     [SET_ITEM_SIZE](state, iconSize) {
       state.config.appConfig.iconSize = iconSize;
+      InfoHandler('Item size updated', InfoKeys.VISUAL);
     },
     [UPDATE_CUSTOM_CSS](state, customCss) {
       state.config.appConfig.customCss = customCss;
+      InfoHandler('Custom colors updated', InfoKeys.VISUAL);
     },
   },
   actions: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ef782c04..bba5b52b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,8 +4,6 @@
     <!-- Search bar, layout options and settings -->
     <SettingsContainer ref="filterComp"
       @user-is-searchin="searching"
-      @change-display-layout="setLayoutOrientation"
-      @change-icon-size="setItemSize"
       @change-modal-visibility="updateModalVisibility"
       :displayLayout="layout"
       :iconSize="itemSizeBound"
@@ -120,20 +118,22 @@ export default {
       return sections.filter((section) => this.filterTiles(section.items, this.searchValue));
     },
     /* Updates layout (when button clicked), and saves in local storage */
-    layoutOrientation: {
-      get() { return this.appConfig.layout || Defaults.layout; },
-      set: function setLayout(layout) {
-        localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
-        this.layout = layout;
-      },
+    layoutOrientation() {
+      return this.$store.getters.layout;
     },
     /* Updates icon size (when button clicked), and saves in local storage */
-    iconSize: {
-      get() { return this.appConfig.iconSize || Defaults.iconSize; },
-      set: function setIconSize(iconSize) {
-        localStorage.setItem(localStorageKeys.ICON_SIZE, iconSize);
-        this.itemSizeBound = iconSize;
-      },
+    iconSize() {
+      return this.$store.getters.iconSize;
+    },
+  },
+  watch: {
+    layoutOrientation(layout) {
+      localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
+      this.layout = layout;
+    },
+    iconSize(size) {
+      localStorage.setItem(localStorageKeys.ICON_SIZE, size);
+      this.itemSizeBound = size;
     },
   },
   methods: {
@@ -158,14 +158,6 @@ export default {
     getDisplayData(section) {
       return !section.displayData ? {} : section.displayData;
     },
-    /* Sets layout attribute, which is used by Section */
-    setLayoutOrientation(layout) {
-      this.layoutOrientation = layout;
-    },
-    /* Sets item size attribute, which is used by Section */
-    setItemSize(itemSize) {
-      this.iconSize = itemSize;
-    },
     /* Update data when modal is open (so that key bindings can be disabled) */
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);