From e3a786bc1653da4f2027b0f0bc0ddfd50f462042 Mon Sep 17 00:00:00 2001
From: Kevin <kevinsebastianate@hotmail.com>
Date: Thu, 5 Sep 2019 21:12:06 +0200
Subject: [PATCH] Make deep clone of resources, access state by getter

---
 components/Sidebar.vue | 2 +-
 pages/_category.vue    | 9 ++++-----
 store/Sidebar.js       | 4 ++++
 store/data.js          | 4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index cb4126b..71fd759 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -20,7 +20,7 @@ export default {
   },
   computed: {
     cardsShown() {
-      return this.$store.state.Sidebar.cardsShown;
+      return this.$store.getters['Sidebar/isCardsShown']
     }
   },
   created() {
diff --git a/pages/_category.vue b/pages/_category.vue
index f7d4c41..c9310ee 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -25,17 +25,16 @@ export default {
   },
   computed: {
     cardsShown() {
-      return this.$store.state.Sidebar.cardsShown;
+      return this.$store.getters['Sidebar/isCardsShown']
     },
     category() {
       const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
       const pagePath = this.$router.history.current.path
       const query = this.$route.query.card
-      // console.log(category.resources)
-      for (const resource of category.resources) {
-        resource.active = (resource.cleanTitle === query) ? 'card--active' : ''
+      const clone = JSON.parse(JSON.stringify(category))
+      for (const resource of clone.resources) {
+        resource.active = resource.cleanTitle === query ? 'card--active' : ''
       }
-      // category.resources.sort(this.compareTitles)
 			return category
     },
   },
diff --git a/store/Sidebar.js b/store/Sidebar.js
index 4ee504a..374b29f 100644
--- a/store/Sidebar.js
+++ b/store/Sidebar.js
@@ -2,6 +2,10 @@ export const state = () => ({
   cardsShown: true
 })
 
+export const getters = {
+  isCardsShown: state => state.cardsShown
+}
+
 export const mutations = {
   toggleCardsShown(state) {
     console.log(state.cardsShown)
diff --git a/store/data.js b/store/data.js
index 6efd8aa..5131c27 100644
--- a/store/data.js
+++ b/store/data.js
@@ -61,10 +61,10 @@ export const getters = {
 	},
 	sortByTitle: (_, getters) => title => {
 		const category = getters.findResources(title)
-		const copy = [...category.resources]
+		const clone = [...category.resources]
 		return {
 			...category,
-			resources: copy.sort(compareTitles)
+			resources: clone.sort(compareTitles)
 		}
 	}
 }