⚡ Generate and append a unique ID to each item

src/components/LinkItems/Section.vue

@@ -17,9 +17,9 @@
       :style="gridStyle"
     >
       <Item
-        v-for="(item, index) in sortedItems"
+        v-for="(item) in sortedItems"
-        :id="makeId(title, item.title, index)"
+        :id="item.id"
-        :key="makeId(title, item.title, index)"
+        :key="item.id"
         :url="item.url"
         :title="item.title"
         :description="item.description"
@@ -115,12 +115,6 @@ export default {
     },
   },
   methods: {
-    /* Returns a unique lowercase string, based on name, for section ID */
-    makeId(sectionStr, itemStr, index) {
-      const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
-      const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-      return `${index}_${charSum}_${itemTitleStr}`;
-    },
     /* Opens the iframe modal */
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
@@ -145,14 +139,14 @@ export default {
     /* Sorts items by most used to least used, based on click-count */
     sortByMostUsed(items) {
       const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
-      const gmu = (item) => usageCount[this.makeId(this.title, item.title)] || 0;
+      const gmu = (item) => usageCount[item.id] || 0;
       items.reverse().sort((a, b) => (gmu(a) < gmu(b) ? 1 : -1));
       return items;
     },
     /* Sorts items by most recently used */
     sortBLastUsed(items) {
       const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.LAST_USED) || '{}');
-      const glu = (item) => usageCount[this.makeId(this.title, item.title)] || 0;
+      const glu = (item) => usageCount[item.id] || 0;
       items.reverse().sort((a, b) => (glu(a) < glu(b) ? 1 : -1));
       return items;
     },

src/utils/ConfigAccumalator.js

@@ -13,6 +13,7 @@ import {
   layout as defaultLayout,
 } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
+import { applyItemId } from '@/utils/MiscHelpers';
 import conf from '../../public/conf.yml';
 
 export default class ConfigAccumulator {
@@ -57,18 +58,24 @@ export default class ConfigAccumulator {
 
   /* Sections */
   sections() {
+    let sections = [];
     // If the user has stored sections in local storage, return those
     const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
     if (localSections) {
       try {
         const json = JSON.parse(localSections);
-        if (json.length >= 1) return json;
+        if (json.length >= 1) sections = json;
       } catch (e) {
         ErrorHandler('Malformed section data in local storage');
       }
     }
-    // If the function hasn't yet returned, then return the config file sections
+    // If sections were not set from local data, then use config file instead
-    return this.conf ? this.conf.sections || [] : [];
+    if (sections.length === 0) {
+      sections = this.conf ? this.conf.sections || [] : [];
+    }
+    // Apply a unique ID to each item
+    sections = applyItemId(sections);
+    return sections;
   }
 
   /* Complete config */

src/utils/MiscHelpers.js

@@ -25,3 +25,23 @@ export const sanitize = (string) => {
   const reg = /[&<>"'/]/ig;
   return string.replace(reg, (match) => (map[match]));
 };
+
+/* Based on section title, item name and index, return a string value for ID */
+const makeItemId = (sectionStr, itemStr, index) => {
+  const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
+  const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
+  return `${index}_${charSum}_${itemTitleStr}`;
+};
+
+/* Given an array of sections, apply a unique ID to each item, and return modified array */
+export const applyItemId = (inputSections) => {
+  const sections = inputSections || [];
+  sections.forEach((sec, secIdx) => {
+    if (sec.items) {
+      sec.items.forEach((item, itemIdx) => {
+        sections[secIdx].items[itemIdx].id = makeItemId(sec.name, item.title, itemIdx);
+      });
+    }
+  });
+  return sections;
+};