From d1b79568b7d7f97fea78e1f18240586546f37ce4 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Mon, 21 Mar 2022 13:27:03 +0100
Subject: [PATCH 1/3] First step towards a working sort without article

---
 src/components/days/individual_days/Day17.vue | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/components/days/individual_days/Day17.vue b/src/components/days/individual_days/Day17.vue
index fb10e390..3e732471 100644
--- a/src/components/days/individual_days/Day17.vue
+++ b/src/components/days/individual_days/Day17.vue
@@ -1,38 +1,51 @@
 <template>
   <div>
-    <ul id="bands"></ul>
+    <ul id="bands">
+      <li v-for="band in bands" :key="band">{{ band }}</li>
+    </ul>
   </div>
 </template>
 
 <script>
-const bands = [
-  "The Plot in You",
-  "The Devil Wears Prada",
-  "Pierce the Veil",
-  "Norma Jean",
-  "The Bled",
-  "Say Anything",
-  "The Midway State",
-  "We Came as Romans",
-  "Counterparts",
-  "Oh, Sleeper",
-  "A Skylit Drive",
-  "Anywhere But Here",
-  "An Old Dog",
-];
-// Using Regex to remove articles on bands
-function articleBanishment(bandName) {
-  return bandName.replace(/^(a |the |an )/i, "").trim();
-}
+export default {
+  data() {
+    return {
+      bands: [
+        "The Plot in You",
+        "The Devil Wears Prada",
+        "Pierce the Veil",
+        "Norma Jean",
+        "The Bled",
+        "Say Anything",
+        "The Midway State",
+        "We Came as Romans",
+        "Counterparts",
+        "Oh, Sleeper",
+        "A Skylit Drive",
+        "Anywhere But Here",
+        "An Old Dog",
+      ],
+      sortedBands: [],
+    };
+  },
+  methods: {
+    sortBands() {
+      this.bands.sort((a, b) => {
+        this.articleBanishment(a) > this.articleBanishment(b) ? 1 : -1;
+      });
+    },
+    articleBanishment(bandName) {
+      // Using Regex to remove articles on bands
+      return bandName.replace(/^(a |the |an )/i, "").trim();
+    },
+  },
+};
 
 //Using the above function to sort the bands without changing them
-const sortedBands = bands.sort((a, b) =>
-  articleBanishment(a) > articleBanishment(b) ? 1 : -1
-);
 
-document.querySelector("#bands").innerHTML = sortedBands
-  .map((band) => `<li>${band}</li>`)
-  .join("");
+// document.querySelector("#bands").innerHTML = this.sortedBands
+//   .map((band) => `<li>${band}</li>`)
+//   .join("");
 </script>
 
 <style scoped>

From 0ece3b721105b8abeffcb9a0e8d60d27ffe27b05 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Mon, 21 Mar 2022 14:03:28 +0100
Subject: [PATCH 2/3] WIP

---
 src/components/days/individual_days/Day17.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/days/individual_days/Day17.vue b/src/components/days/individual_days/Day17.vue
index 3e732471..76f2587f 100644
--- a/src/components/days/individual_days/Day17.vue
+++ b/src/components/days/individual_days/Day17.vue
@@ -1,13 +1,16 @@
 <template>
   <div>
     <ul id="bands">
-      <li v-for="band in bands" :key="band">{{ band }}</li>
+      <li v-for="band in sortedBands" :key="band">{{ band }}</li>
     </ul>
   </div>
 </template>
 
 <script>
 export default {
+  mounted() {
+    this.sortBands();
+  },
   data() {
     return {
       bands: [
@@ -29,6 +32,7 @@ export default {
     };
   },
   methods: {
+    // Need to find a way to push data into the sortedbands array in a sorted way
     sortBands() {
       this.bands.sort((a, b) => {
         this.articleBanishment(a) > this.articleBanishment(b) ? 1 : -1;

From adf7861fda4f2b7e9a3cc8f550556fbcd89c4d54 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Mon, 21 Mar 2022 14:04:11 +0100
Subject: [PATCH 3/3] First step

---
 src/components/days/individual_days/Day17.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/days/individual_days/Day17.vue b/src/components/days/individual_days/Day17.vue
index 76f2587f..13ec298c 100644
--- a/src/components/days/individual_days/Day17.vue
+++ b/src/components/days/individual_days/Day17.vue
@@ -34,7 +34,7 @@ export default {
   methods: {
     // Need to find a way to push data into the sortedbands array in a sorted way
     sortBands() {
-      this.bands.sort((a, b) => {
+      this.sortedBands = this.bands.sort((a, b) => {
         this.articleBanishment(a) > this.articleBanishment(b) ? 1 : -1;
       });
     },