From b2f2a4a477b43fd3b8d9f1f567faf0a21eda4712 Mon Sep 17 00:00:00 2001
From: mv88 <matteo.velludini@gmail.com>
Date: Sun, 21 Nov 2021 17:43:32 +0100
Subject: [PATCH] feat: refactor form for routes, ropes and attempts

---
 assets/main.less                              |  27 +++++
 components/attempts/AttemptsAddForm.vue       |  24 ++--
 components/attempts/AttemptsCards.vue         |  31 +----
 .../climbingRoutes/ClimbingRoutesAddForm.vue  |  14 ++-
 .../climbingRoutes/ClimbingRoutesEditForm.vue |   5 +-
 components/climbingRoutes/RouteTable.vue      |   3 -
 components/ropes/Empty.vue                    |  27 +++++
 components/ropes/RopeAddForm.vue              |   5 +-
 components/ropes/RopeEditForm.vue             |   8 +-
 components/ropes/RopesCards.vue               | 110 ++++++++++++++++++
 components/ropes/RopesTable.vue               |  97 +++++++++++++++
 pages/attempts.vue                            |   4 +-
 pages/ropes.vue                               |  95 +++++----------
 pages/routes.vue                              |  70 +++++------
 store/index.js                                |   2 +-
 15 files changed, 354 insertions(+), 168 deletions(-)
 create mode 100644 components/ropes/Empty.vue
 create mode 100644 components/ropes/RopesCards.vue
 create mode 100644 components/ropes/RopesTable.vue

diff --git a/assets/main.less b/assets/main.less
index 3402821..d7b6517 100644
--- a/assets/main.less
+++ b/assets/main.less
@@ -120,6 +120,33 @@ body,
   height: ~"-webkit-calc(100% - 60px)";
   overflow: auto;
   width: 100%;
+
+  .item-card {
+    width: 100%;
+    margin-bottom: 16px;
+    border: 1px solid yellowgreen;
+  }
+  .item-card .info {
+    width: 124px;
+    text-align: left;
+    margin-right: 8px;
+  }
+  .item-card .info-block {
+    display: flex;
+  }
+  .spaced {
+    justify-content: space-evenly;
+  }
+  @media only screen and (min-width: 600px) {
+    .item-card {
+      width: 330px;
+      margin: 0px;
+    }
+  }
+  .item-row {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 @media (min-width: 1025px) {
   .filterItem {
diff --git a/components/attempts/AttemptsAddForm.vue b/components/attempts/AttemptsAddForm.vue
index 9ac93e1..391b9e2 100644
--- a/components/attempts/AttemptsAddForm.vue
+++ b/components/attempts/AttemptsAddForm.vue
@@ -158,6 +158,13 @@
 </template>
 
 <script>
+const defaultValues = {
+  routeId: null,
+  ropeId: null,
+  styleId: null,
+  tries: 1,
+  climbingDate: new Date(),
+};
 export default {
   props: {
     ropes: {
@@ -175,13 +182,7 @@ export default {
   },
   data() {
     return {
-      form: {
-        routeId: null,
-        ropeId: null,
-        styleId: null,
-        tries: 1,
-        climbingDate: new Date(),
-      },
+      form: { ...defaultValues },
     };
   },
   computed: {
@@ -217,18 +218,13 @@ export default {
             hasGrade: { french: this.form.french },
           });
         });
+      this.form = { ...defaultValues };
       this.$bvModal.hide("attemptAddForm");
     },
     onReset(event) {
       event.preventDefault();
       this.$bvModal.hide("attemptAddForm");
-      this.form = {
-        name: "",
-        sector: "",
-        grade: "",
-        link: "",
-        city: "",
-      };
+      this.form = { ...defaultValues };
     },
   },
 };
diff --git a/components/attempts/AttemptsCards.vue b/components/attempts/AttemptsCards.vue
index dbd5c12..68b9152 100644
--- a/components/attempts/AttemptsCards.vue
+++ b/components/attempts/AttemptsCards.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="jc-c spaced attempt-row">
+  <div class="jc-c spaced item-row">
     <Empty />
 
     <b-card
       v-for="item in attempts"
       :key="item.id"
       tag="article"
-      class="attempt-card"
+      class="item-card"
     >
       <div class="info-block">
         <span class="info"><strong>grade(style)</strong></span>
@@ -112,29 +112,4 @@ export default {
 };
 </script>
 
-<style>
-.attempt-card {
-  width: 100%;
-  margin-bottom: 16px;
-  border: 1px solid yellowgreen;
-}
-.attempt-card .info {
-  width: 94px;
-}
-.attempt-card .info-block {
-  display: flex;
-}
-.spaced {
-  justify-content: space-evenly;
-}
-@media only screen and (min-width: 600px) {
-  .attempt-card {
-    width: 330px;
-    margin: 0px;
-  }
-}
-.attempt-row {
-  display: flex;
-  flex-wrap: wrap;
-}
-</style>
+<style></style>
diff --git a/components/climbingRoutes/ClimbingRoutesAddForm.vue b/components/climbingRoutes/ClimbingRoutesAddForm.vue
index f7fcfb4..5e229bd 100644
--- a/components/climbingRoutes/ClimbingRoutesAddForm.vue
+++ b/components/climbingRoutes/ClimbingRoutesAddForm.vue
@@ -161,11 +161,15 @@ export default {
           },
         })
         .then((data) => {
-          this.$emit("updateListItem", {
-            ...data.result,
-            hasGrade: { french: this.form.french },
-          });
+          this.$emit("updateListItem");
         });
+      this.form = {
+        name: "",
+        sector: "",
+        french: "",
+        link: "",
+        city: "",
+      };
       this.$bvModal.hide("climbingRouteAddForm");
     },
     onReset(event) {
@@ -174,7 +178,7 @@ export default {
       this.form = {
         name: "",
         sector: "",
-        grade: "",
+        french: "",
         link: "",
         city: "",
       };
diff --git a/components/climbingRoutes/ClimbingRoutesEditForm.vue b/components/climbingRoutes/ClimbingRoutesEditForm.vue
index b1688f7..f7e9ffb 100644
--- a/components/climbingRoutes/ClimbingRoutesEditForm.vue
+++ b/components/climbingRoutes/ClimbingRoutesEditForm.vue
@@ -178,10 +178,7 @@ export default {
           },
         })
         .then((data) => {
-          this.$emit("updateItemById", this.form.id, {
-            ...data.result,
-            hasGrade: { french: this.form.hasGrade.french },
-          });
+          this.$emit("updateListItem");
         })
         .catch((e) => {
           console.error(e);
diff --git a/components/climbingRoutes/RouteTable.vue b/components/climbingRoutes/RouteTable.vue
index e470425..88d2b17 100644
--- a/components/climbingRoutes/RouteTable.vue
+++ b/components/climbingRoutes/RouteTable.vue
@@ -82,9 +82,6 @@ export default {
     editItem(route) {
       this.$emit("editItem", route);
     },
-    updateItemById(id) {
-      this.$emit("updateItemById", id);
-    },
     deleteItemById(id) {
       this.$emit("deleteItemById", id);
     },
diff --git a/components/ropes/Empty.vue b/components/ropes/Empty.vue
new file mode 100644
index 0000000..7ad829b
--- /dev/null
+++ b/components/ropes/Empty.vue
@@ -0,0 +1,27 @@
+<template>
+  <b-card tag="article" class="attempt-card">
+    <small>
+      <b-btn id="add" @click.stop="addNew()"> Add </b-btn> Click here to add new
+      rope
+    </small>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: "Empty",
+  data() {
+    return {
+      size: 200,
+      showDelete: false,
+    };
+  },
+  methods: {
+    addNew() {
+      this.$bvModal.show("ropeAddForm");
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/components/ropes/RopeAddForm.vue b/components/ropes/RopeAddForm.vue
index 00300b7..b58ed92 100644
--- a/components/ropes/RopeAddForm.vue
+++ b/components/ropes/RopeAddForm.vue
@@ -174,7 +174,7 @@ export default {
   data() {
     return {
       previewImageSrc: "",
-      form: defaultValues,
+      form: { ...defaultValues },
     };
   },
   methods: {
@@ -206,8 +206,9 @@ export default {
           },
         })
         .then((data) => {
-          this.$emit("updateListItem", data.result.rope);
+          this.$emit("updateListItem");
         });
+      this.form = { ...defaultValues };
       this.$bvModal.hide("addRopeForm");
     },
     onReset(event) {
diff --git a/components/ropes/RopeEditForm.vue b/components/ropes/RopeEditForm.vue
index 1885659..1a6d2ce 100644
--- a/components/ropes/RopeEditForm.vue
+++ b/components/ropes/RopeEditForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-modal id="editRopeForm" title="Edit Rope Form" hide-footer>
+    <b-modal id="ropeEditForm" title="Edit Rope Form" hide-footer>
       <b-form @submit="onSubmit" @reset="onReset">
         <b-form-group
           v-slot="{ ariaDescribedby }"
@@ -220,14 +220,14 @@ export default {
           },
         })
         .then((data) => {
-          this.$emit("updateItemById", this.form.id, data.result);
+          this.$emit("updateListItem");
         });
 
-      this.$bvModal.hide("editRopeForm");
+      this.$bvModal.hide("ropeEditForm");
     },
     onReset(event) {
       event.preventDefault();
-      this.$bvModal.hide("editRopeForm");
+      this.$bvModal.hide("ropeEditForm");
       // Reset our form values
       this.form = { ...defaultValues };
     },
diff --git a/components/ropes/RopesCards.vue b/components/ropes/RopesCards.vue
new file mode 100644
index 0000000..0374fb0
--- /dev/null
+++ b/components/ropes/RopesCards.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="jc-c spaced item-row">
+    <Empty />
+
+    <b-card
+      v-for="item in ropes"
+      :key="item.id"
+      tag="article"
+      class="item-card"
+    >
+      <div class="info-block">
+        <span class="info"><strong>brand</strong></span>
+        <span>{{ `${item.brand}` }}</span>
+      </div>
+      <div class="info-block">
+        <span class="info"><strong>length</strong></span>
+        <span>{{ `${item.length} m` }}</span>
+      </div>
+      <div class="info-block">
+        <span class="info"><strong>thickness</strong></span>
+        <span>{{ `${item.thickness} mm` }}</span>
+      </div>
+      <div class="info-block">
+        <span class="info"><strong>color</strong></span>
+        <span>{{ `${item.color}` }}</span>
+      </div>
+      <div class="info-block">
+        <span class="info"><strong> purchase date</strong></span>
+        <span>{{
+          item.purchaseDate
+            ? `${new Date(item.purchaseDate).getDate()}/${
+                new Date(item.purchaseDate).getMonth() + 1
+              }/${new Date(item.purchaseDate).getFullYear()}`
+            : "N.A."
+        }}</span>
+      </div>
+
+      <template #footer>
+        <div>
+          <b-btn @click.stop="editItem(item)">
+            <b-icon icon="pencil" scale="0.75" />
+          </b-btn>
+          <b-btn
+            :id="`${item.id}deleteRope`"
+            @click.stop="showPopoverById(item.id)"
+          >
+            <b-icon icon="trash" scale="0.75"
+          /></b-btn>
+          <b-popover
+            :show="itemId === item.id"
+            :target="`${item.id}deleteRope`"
+            triggers="focus"
+            title="Click on Delete if you are sure"
+          >
+            <b-btn @click="showPopoverById(null)">Cancel</b-btn>
+            <b-btn variant="danger" @click="deleteItemById(item.id)"
+              >Delete</b-btn
+            >
+          </b-popover>
+        </div>
+      </template>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import Empty from "./Empty.vue";
+
+export default {
+  name: "RopesCards",
+  components: {
+    Empty,
+  },
+  props: {
+    ropes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      itemId: null,
+    };
+  },
+  methods: {
+    showPopoverById(id) {
+      this.itemId = id;
+    },
+    editItem(item) {
+      this.$store.commit("setEditingItem", item);
+      this.$bvModal.show("ropeEditForm");
+    },
+    async deleteItemById(id) {
+      await this.$axios.$delete(`/api/v1/ropes/${id}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.$store.getters.accessToken}`,
+        },
+      });
+      const ropes = await this.$axios.$get("api/v1/ropes");
+      this.$store.commit("setResources", {
+        name: "ropes",
+        resources: ropes.result,
+      });
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/components/ropes/RopesTable.vue b/components/ropes/RopesTable.vue
new file mode 100644
index 0000000..dd37009
--- /dev/null
+++ b/components/ropes/RopesTable.vue
@@ -0,0 +1,97 @@
+<template>
+  <b-table striped hover :items="ropes" :fields="fields">
+    <template #cell(hasThumbnail)="data">
+      <img height="100" :src="data.value.url" />
+    </template>
+    <template #cell(shopLink)="data">
+      <a height="100" :href="data.value" target="_blank">{{ data.value }}</a>
+    </template>
+    <template #cell(purchaseDate)="data">
+      <div class="info-block">
+        <span>{{
+          data.value
+            ? `${new Date(data.value).getDate()}/${
+                new Date(data.value).getMonth() + 1
+              }/${new Date(data.value).getFullYear()}`
+            : "N.A."
+        }}</span>
+      </div>
+    </template>
+    <template #cell(actions)="data">
+      <div class="flex">
+        <b-btn @click.stop="editItem(data.item)">
+          <b-icon icon="pencil" scale="0.75" />
+        </b-btn>
+        <b-btn
+          :id="`${data.item.id}deleteRope`"
+          @click.stop="showPopoverById(data.item.id)"
+        >
+          <b-icon icon="trash" scale="0.75"
+        /></b-btn>
+        <b-popover
+          :show="itemId === data.item.id"
+          :target="`${data.item.id}deleteRope`"
+          triggers="focus"
+          title="Click on Delete if you are sure"
+        >
+          <b-btn @click="showPopoverById(null)">Cancel</b-btn>
+          <b-btn variant="danger" @click="deleteItemById(data.item.id)"
+            >Delete</b-btn
+          >
+        </b-popover>
+      </div>
+    </template>
+  </b-table>
+</template>
+
+<script>
+export default {
+  name: "RopesTable",
+  props: {
+    ropes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      itemId: "",
+      form: "defaultValues",
+      fields: [
+        "brand",
+        "hasThumbnail",
+        "color",
+        "purchaseDate",
+        "length",
+        "thickness",
+        "shopLink",
+        "actions",
+      ],
+    };
+  },
+  methods: {
+    showPopoverById(id) {
+      this.itemId = id;
+    },
+    editItem(item) {
+      this.$store.commit("setEditingItem", item);
+      this.$bvModal.show("ropeEditForm");
+    },
+    async deleteItemById(id) {
+      await this.$axios.$delete(`/api/v1/ropes/${id}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.$store.getters.accessToken}`,
+        },
+      });
+      const ropes = await this.$axios.$get("api/v1/ropes");
+      this.$store.commit("setResources", {
+        name: "ropes",
+        resources: ropes.result,
+      });
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/pages/attempts.vue b/pages/attempts.vue
index 620ea88..975ed0b 100644
--- a/pages/attempts.vue
+++ b/pages/attempts.vue
@@ -39,6 +39,7 @@
 import AttemptsAddForm from "../components/attempts/AttemptsAddForm.vue";
 import AttemptsEditForm from "../components/attempts/AttemptsEditForm.vue";
 import AttemptsCards from "../components/attempts/AttemptsCards.vue";
+import AttemptsTable from "../components/attempts/AttemptsTable.vue";
 
 export default {
   name: "Attempts",
@@ -46,6 +47,7 @@ export default {
     AttemptsAddForm,
     AttemptsCards,
     AttemptsEditForm,
+    AttemptsTable,
   },
   data() {
     return {
@@ -82,7 +84,7 @@ export default {
         const attempts = await this.$axios.$get("api/v1/attempts");
         this.$store.commit("setResources", {
           name: "attempts",
-          resources: attempts.result.concat(attempts.result),
+          resources: attempts.result,
         });
       }
       if (this.routes.length === 0) {
diff --git a/pages/ropes.vue b/pages/ropes.vue
index 4fb2cc4..27e4252 100644
--- a/pages/ropes.vue
+++ b/pages/ropes.vue
@@ -11,80 +11,49 @@
           <li>Oldness</li>
         </ul>
         <span>We suggest you to share them with your friends</span>
-        <b-btn @click="addItem"> Add new rope </b-btn>
       </div>
-      <b-table striped hover :items="ropes" :fields="fields">
-        <template #cell(hasThumbnail)="data">
-          <img height="100" :src="data.value.url" />
-        </template>
-        <template #cell(shopLink)="data">
-          <a height="100" :href="data.value" target="_blank">{{
-            data.value
-          }}</a>
-        </template>
-        <template #cell(actions)="data">
-          <div class="flex">
-            <b-btn @click.stop="editItem(data.item)">
-              <b-icon icon="pencil" scale="0.75" />
-            </b-btn>
-            <b-btn
-              :id="`${data.item.id}deleteRope`"
-              @click.stop="showPopoverById(data.item.id)"
-            >
-              <b-icon icon="trash" scale="0.75"
-            /></b-btn>
-            <b-popover
-              :show="itemId === data.item.id"
-              :target="`${data.item.id}deleteRope`"
-              triggers="focus"
-              title="Click on Delete if you are sure"
-            >
-              <b-btn @click="showPopoverById(null)">Cancel</b-btn>
-              <b-btn variant="danger" @click="deleteItemById(data.item.id)"
-                >Delete</b-btn
-              >
-            </b-popover>
-          </div>
-        </template>
-      </b-table>
+
+      <div v-if="width > 700">
+        Click here to
+        <b-btn @click="addRope"> add a rope </b-btn>
+        <RopesTable v-if="isLoggedIn" :ropes="ropes" />
+      </div>
+
+      <RopesCards v-else :ropes="ropes" />
 
       <RopeAddForm @updateListItem="updateListItem" />
-      <RopeEditForm @updateItemById="updateItemById" />
+      <RopeEditForm @updateListItem="updateListItem" />
     </b-container>
   </div>
 </template>
 
 <script>
-import findIndex from "lodash/findIndex";
 import RopeAddForm from "../components/ropes/RopeAddForm.vue";
+import RopesTable from "../components/ropes/RopesTable.vue";
+import RopesCards from "../components/ropes/RopesCards.vue";
 import RopeEditForm from "../components/ropes/RopeEditForm.vue";
 
 export default {
   name: "Ropes",
   components: {
+    RopesTable,
     RopeAddForm,
+    RopesCards,
     RopeEditForm,
   },
   data() {
     return {
+      width: window.innerWidth,
       itemId: null,
-      editingItem: null,
-      fields: [
-        "brand",
-        "hasThumbnail",
-        "color",
-        "purchaseDate",
-        "length",
-        "thickness",
-        "shopLink",
-        "actions",
-      ],
     };
   },
   computed: {
     ropes() {
       return this.$store.getters.getResourcesRopes;
     },
+    isLoggedIn() {
+      return this.$store.getters.isLoggedIn;
+    },
   },
   mounted() {
     this.getData();
@@ -95,30 +64,18 @@ export default {
         const ropes = await this.$axios.$get("api/v1/ropes");
         this.$store.commit("setResources", {
           name: "ropes",
-          resources: ropes.result
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result)
-            .concat(ropes.result),
+          resources: ropes.result,
         });
       }
     },
     showPopoverById(itemId) {
       this.itemId = itemId;
     },
-    addItem() {
-      this.editingItem = null;
+    addRope() {
       this.$bvModal.show("addRopeForm");
     },
     editItem(item) {
-      this.$bvModal.show("editRopeForm");
+      this.$bvModal.show("ropeEditForm");
       this.$store.commit("setEditingItem", { ...item });
     },
     async deleteItemById(id) {
@@ -130,11 +87,13 @@ export default {
       });
       this.getData();
     },
-    updateItemById(id, item) {
-      this.ropes.splice(findIndex(this.ropes, { id }), 1, item);
-    },
-    updateListItem(rope) {
-      this.ropes.push(rope);
+    async updateListItem() {
+      const ropes = await this.$axios.$get("api/v1/ropes");
+      this.$store.commit("setEditingItem", null);
+      this.$store.commit("setResources", {
+        name: "ropes",
+        resources: ropes.result,
+      });
     },
   },
 };
diff --git a/pages/routes.vue b/pages/routes.vue
index 4514b5a..94a4692 100644
--- a/pages/routes.vue
+++ b/pages/routes.vue
@@ -16,7 +16,6 @@
                 v-model="sortBy"
                 class="sortItem"
                 name="sorter"
-                @change="checkFilterSort()"
               >
                 <b-form-radio v-model="sortBy" :value="ASC + 'grade'"
                   >ASC</b-form-radio
@@ -32,7 +31,6 @@
                 placeholder="Filter by Grade"
                 required
                 class="filterItem"
-                @input="checkFilterSort()"
               />
             </li>
             <li class="sort-filter">
@@ -43,7 +41,6 @@
                 v-model="sortBy"
                 class="sortItem"
                 name="sorter"
-                @change="checkFilterSort()"
               >
                 <b-form-radio v-model="sortBy" :value="ASC + 'sector'"
                   >ASC</b-form-radio
@@ -59,7 +56,6 @@
                 placeholder="Filter by Sector"
                 required
                 class="filterItem"
-                @input="checkFilterSort()"
               />
             </li>
             <li class="sort-filter">
@@ -70,7 +66,6 @@
                 v-model="sortBy"
                 class="sortItem"
                 name="sorter"
-                @change="checkFilterSort()"
               >
                 <b-form-radio v-model="sortBy" :value="ASC + 'city'"
                   >ASC</b-form-radio
@@ -86,7 +81,6 @@
                 placeholder="Filter by City"
                 required
                 class="filterItem"
-                @input="checkFilterSort()"
               />
             </li>
           </ul>
@@ -97,7 +91,6 @@
         :item-id="routeId"
         :items="climbingRoutesFiltered"
         @showPopoverById="showPopoverById"
-        @updateItemById="updateItemById"
         @editItem="editItem"
         @deleteItemById="deleteItemById"
       />
@@ -106,14 +99,13 @@
         v-if="width <= 600"
         :routes="climbingRoutesFiltered"
       />
-      <ClimbingRoutesEditForm @updateItemById="updateItemById" />
+      <ClimbingRoutesEditForm @updateListItem="updateListItem" />
       <ClimbingRoutesAddForm @updateListItem="updateListItem" />
     </b-container>
   </div>
 </template>
 
 <script>
-import findIndex from "lodash/findIndex";
 import sortBy from "lodash/sortBy";
 import reverse from "lodash/reverse";
 import RouteTable from "../components/climbingRoutes/RouteTable.vue";
@@ -137,13 +129,17 @@ export default {
       sortBy: "",
       DESC,
       ASC,
-      climbingRoutes: [],
-      climbingRoutesFiltered: [],
       routeId: null,
       width: window.innerWidth,
     };
   },
   computed: {
+    climbingRoutes() {
+      return this.$store.getters.getResourcesRoutes;
+    },
+    climbingRoutesFiltered() {
+      return this.checkFilterSort();
+    },
     isLoggedIn() {
       return this.$store.getters.isLoggedIn;
     },
@@ -154,11 +150,14 @@ export default {
   methods: {
     async getData() {
       const routes = await this.$axios.$get("api/v1/climbing-routes");
-      this.climbingRoutes = routes.result;
-      this.climbingRoutesFiltered = routes.result;
+      this.$store.commit("setResources", {
+        name: "routes",
+        resources: routes.result,
+      });
     },
+
     checkFilterSort() {
-      this.climbingRoutesFiltered = this.climbingRoutes.filter((item) => {
+      let climbingRoutesFiltered = this.climbingRoutes.filter((item) => {
         let grade = true;
         let sector = true;
         let city = true;
@@ -180,24 +179,22 @@ export default {
         return grade && sector && city;
       });
 
-      this.climbingRoutesFiltered = sortBy(
-        this.climbingRoutesFiltered,
-        (item) => {
-          if (this.sortBy.includes("grade")) {
-            return item.hasGrade.french.toLowerCase();
-          }
-          if (this.sortBy.includes("sector")) {
-            return item.sector.toLowerCase();
-          }
-          if (this.sortBy.includes("city")) {
-            return item.city.toLowerCase();
-          }
-          return item;
+      climbingRoutesFiltered = sortBy(climbingRoutesFiltered, (item) => {
+        if (this.sortBy.includes("grade")) {
+          return item.hasGrade.french.toLowerCase();
+        }
+        if (this.sortBy.includes("sector")) {
+          return item.sector.toLowerCase();
         }
-      );
+        if (this.sortBy.includes("city")) {
+          return item.city.toLowerCase();
+        }
+        return item;
+      });
       if (this.sortBy.includes(DESC)) {
-        this.climbingRoutesFiltered = reverse(this.climbingRoutesFiltered);
+        climbingRoutesFiltered = reverse(climbingRoutesFiltered);
       }
+      return climbingRoutesFiltered;
     },
     showPopoverById(routeId) {
       this.routeId = routeId;
@@ -219,16 +216,13 @@ export default {
       });
       this.getData();
     },
-    updateListItem(item) {
-      this.climbingRoutes.push(item);
-    },
-    updateItemById(id, item) {
+    async updateListItem() {
+      const routes = await this.$axios.$get("api/v1/climbing-routes");
       this.$store.commit("setEditingItem", null);
-      this.climbingRoutes.splice(
-        findIndex(this.climbingRoutes, { id }),
-        1,
-        item
-      );
+      this.$store.commit("setResources", {
+        name: "routes",
+        resources: routes.result,
+      });
     },
   },
 };
diff --git a/store/index.js b/store/index.js
index d209830..288e624 100644
--- a/store/index.js
+++ b/store/index.js
@@ -3,7 +3,7 @@ import get from "lodash/get";
 export const state = () => ({
   user: {
     accessToken:
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwibmFtZSI6IkNocm9ub3MiLCJ1c2VybmFtZSI6IkNocm9ub3MiLCJpYXQiOjE2MTYzNDg4OTIsImV4cCI6MTYyNTM0ODg5Mn0.J1P8s6YFGLq0eQzzyQS4lIqr1DqTqUVmwdVDkrj9xcU",
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwibmFtZSI6IkNocm9ub3MiLCJ1c2VybmFtZSI6IkNocm9ub3MiLCJpYXQiOjE2MzcwOTM4MzUsImV4cCI6MTY0NjA5MzgzNX0.rFfG9Ne24402u1-93mmLgwvxSAkFBkdLnK8hbImiuwQ",
     accessTokenExpiry: null,
   },
   auth: {