Fix: Cleaned up the codebase

components/footer.svelte

+<p class="mt-1 text-[0.75rem] text-gray-400 font-light">
+    Source: <a
+      class="font-bold"
+      href="https://www.fashionrevolution.org/about/transparency/"
+      target="_blank">
+      Fashion Transparency Index
+    </a>
+  </p>
\ No newline at end of file

components/icon.svelte

+<script>
+  export let svg
+</script>
+
+<img
+  class="w-6 h-6 hover:shadow-md transition rounded-md"
+  src={svg}
+  alt="button" />

components/notSupported.svelte

+<div class="font-normal">
+  <h1 class="text-center font-bold">This page is not currently supported</h1>
+  <p class="p-2">
+    If this is an online store and you want to enable checking for it please add
+    it using the button above.
+  </p>
+</div>

components/ping.svelte

+<script>
+  import { scale } from "svelte/transition"
+</script>
+
+<span class="relative flex h-2 w-2 left-1 bottom-2" transition:scale>
+  <span
+    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"
+  ></span>
+  <span class="relative inline-flex rounded-full h-2 w-2 bg-red-400"></span>
+</span>

content.svelte

@@ -32,6 +32,10 @@
   import { Storage } from "@plasmohq/storage"
 
   import AdvancedData from "~components/advancedData.svelte"
+  import Footer from "~components/footer.svelte"
+  import Icon from "~components/icon.svelte"
+  import NotSupported from "~components/notSupported.svelte"
+  import Ping from "~components/ping.svelte"
 
   let visible: boolean = false
   let brand: string = ""
@@ -48,6 +52,8 @@
   let answer
   let advancedValue
 
+  // Chrome store init and watcher setup
+  // needed to manage state between front-end and background workers
   const storage = new Storage()
 
   storage.watch({
@@ -56,18 +62,62 @@
     }
   })
 
-  function closePopup() {
-    chrome.storage.sync.set({ visible: false })
-  }
-
+  // Svelte store for managing global state within the app itself
   const unsubscribe = advanced.subscribe((value) => {
     advancedValue = value
   })
 
+  // Helper and minor functions
+  function closePopup() {
+    chrome.storage.sync.set({ visible: false })
+  }
+
   function setValues(data: number, totalRating: number) {
     return Math.round((data / totalRating) * 100).toString()
   }
 
+  async function addUrl() {
+    const resp = await sendToBackground({
+      name: "sendUrl"
+    })
+  }
+
+  // todo: encapsulate and take out the logic to take in an answer object and set
+  // brand, supply, social and enviromental to the newly provided values
+  // (will also be useful for the initial setting of those values)
+  function changeBrand() {
+    checked = true
+    if (current === "Brand") {
+      advancedDataDisplay = advancedDataSecond
+      brand = answer.secondAnswer.brand
+      country = answer.secondAnswer.COUNTRY
+      environmental = setValues(answer.secondAnswer.environmental_total, 1.75)
+      supply = setValues(answer.secondAnswer.supplychain_total, 6)
+      social = setValues(answer.secondAnswer.social_total, 3.25)
+      current = "Store"
+    } else {
+      advancedDataDisplay = advancedData
+      brand = answer.mainAnswer.brand
+      country = answer.mainAnswer.COUNTRY
+      environmental = setValues(answer.mainAnswer.environmental_total, 1.75)
+      supply = setValues(answer.mainAnswer.supplychain_total, 6)
+      social = setValues(answer.mainAnswer.social_total, 3.25)
+      current = "Brand"
+    }
+  }
+
+  async function getAdvancedData(brand: string) {
+    const respAdvanced = await sendToBackground({
+      name: "pingAdvanced",
+      body: {
+        name: brand
+      }
+    })
+    return respAdvanced.response
+  }
+
+  //main function that is run when the component is added to the DOM
+  //it triggers background workers that query and provide data to the app
   async function getData() {
     const resp = await sendToBackground({
       name: "ping"
@@ -102,47 +152,7 @@
     }
   }
 
-  async function getAdvancedData(brand: string) {
-    const respAdvanced = await sendToBackground({
-      name: "pingAdvanced",
-      body: {
-        name: brand
-      }
-    })
-    return respAdvanced.response
-  }
-
-  async function addUrl() {
-    const resp = await sendToBackground({
-      name: "sendUrl"
-    })
-  }
-
-  // todo: encapsulate and take out the logic to take in an answer object and set
-  // brand, supply, social and enviromental to the newly provided values
-  // (will also be useful for the initial setting of those values)
-  function changeBrand() {
-    checked = true
-    if (current === "Brand") {
-      advancedDataDisplay = advancedDataSecond
-      brand = answer.secondAnswer.brand
-      country = answer.secondAnswer.COUNTRY
-      environmental = setValues(answer.secondAnswer.environmental_total, 1.75)
-      supply = setValues(answer.secondAnswer.supplychain_total, 6)
-      social = setValues(answer.secondAnswer.social_total, 3.25)
-      current = "Store"
-    } else {
-      advancedDataDisplay = advancedData
-      brand = answer.mainAnswer.brand
-      country = answer.mainAnswer.COUNTRY
-      environmental = setValues(answer.mainAnswer.environmental_total, 1.75)
-      supply = setValues(answer.mainAnswer.supplychain_total, 6)
-      social = setValues(answer.mainAnswer.social_total, 3.25)
-      current = "Brand"
-    }
-  }
   getData()
-  console.log(answer)
 </script>
 
 {#if visible}
@@ -155,32 +165,18 @@
       <div class="justify-self-end mr-1 text-2xl flex items-center">
         {#if answer?.mainAnswer?.brand != answer?.secondAnswer?.brand}
           {#if !checked}
-            <span
-              class="relative flex h-2 w-2 left-1 bottom-2"
-              transition:scale>
-              <span
-                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"
-              ></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-red-400"
-              ></span>
-            </span>
+            <Ping />
           {/if}
           <button class="mr-2" title="See store" on:click={changeBrand}
             ><img
               class="w-5 h-5 hover:shadow-md transition rounded-md"
               src={store}
-              alt="add button" /></button>
+              alt="store button" /></button>
         {/if}
         <button class="mr-1" title="Add url to the list" on:click={addUrl}
-          ><img
-            class="w-6 h-6 hover:shadow-md transition rounded-md"
-            src={add}
-            alt="add button" /></button>
+          ><Icon svg={add} /></button>
         <button title="Close window" on:click={closePopup}
-          ><img
-            class="w-6 h-6 hover:shadow-md transition rounded-md"
-            src={exit}
-            alt="add button" /></button>
+          ><Icon svg={exit} /></button>
       </div>
     </div>
     <section class="p-2 font-roboto">
@@ -189,8 +185,8 @@
           {current}: <span class="font-bold">{brand}</span>
           {#if country != ""}
             <!--Making use of an API that returns country flags when queried using ISO
-        3166-1 standard. Turning full country names to ISO 3166-1 compatible
-        using a node-country-to-iso package-->
+            3166-1 standard. Turning full country names to ISO 3166-1 compatible
+            using a node-country-to-iso package-->
             <img
               class="h-6"
               src="https://flagsapi.com/{countryToAlpha2(country)}/flat/32.png"
@@ -198,10 +194,9 @@
           {/if}
         </p>
         <div class="grid grid-cols-3 justify-items-center text-sm my-2">
-          <RatingButton header={"Environmental"} score={environmental}
-          ></RatingButton>
-          <RatingButton header={"Supply Chain"} score={supply}></RatingButton>
-          <RatingButton header={"Social"} score={social}></RatingButton>
+          <RatingButton header={"Environmental"} score={environmental} />
+          <RatingButton header={"Supply Chain"} score={supply} />
+          <RatingButton header={"Social"} score={social} />
         </div>
         {#if advancedValue.length > 0}
           <div class="mt-1" transition:slide={{ duration: 300 }}>
@@ -209,24 +204,9 @@
             ></AdvancedData>
           </div>
         {/if}
-        <p class="mt-1 text-[0.75rem] text-gray-400 font-light">
-          Source: <a
-            class="font-bold"
-            href="https://www.fashionrevolution.org/about/transparency/"
-            target="_blank">
-            Fashion Transparency Index
-          </a>
-        </p>
+        <Footer />
       {:else}
-        <div class="font-normal">
-          <h1 class="text-center font-bold">
-            This page is not currently supported
-          </h1>
-          <p class="p-2">
-            If this is an online store and you want to enable checking for it
-            please add it using the button above.
-          </p>
-        </div>
+        <NotSupported />
       {/if}
     </section>
   </section>