Feat: Implemented conditional rendering of the store button depending on the...

Feat: Implemented conditional rendering of the store button depending on the state of mainAnswer and secondAnswer

content.svelte

@@ -27,7 +27,7 @@
 <script lang="ts">
   import { countryToAlpha2 } from "country-to-iso"
   import type BrandData from "interfaces/data_advanced"
-  import { slide } from "svelte/transition"
+  import { scale, slide } from "svelte/transition"
 
   import { Storage } from "@plasmohq/storage"
 
@@ -42,6 +42,9 @@
   let social: string = ""
   let current: boolean = true
   let advancedData: BrandData
+  let advancedDataSecond: BrandData
+  let advancedDataDisplay: BrandData
+  let checked: boolean = false
   let answer
   let advancedValue
 
@@ -97,24 +100,27 @@
         chrome.storage.sync.set({ visible: false })
       }
     }
-    getAdvancedData()
+    advancedData = await getAdvancedData(brand)
+    advancedDataSecond = await getAdvancedData(secondBrand)
+    advancedDataDisplay = advancedData
   }
 
-  async function getAdvancedData() {
+  async function getAdvancedData(brand: string) {
     const respAdvanced = await sendToBackground({
       name: "pingAdvanced",
       body: {
         name: brand
       }
     })
-    advancedData = respAdvanced.response
-    console.log("Advanced: " + advancedData.brand)
+    return respAdvanced.response
   }
   // 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) {
+      advancedDataDisplay = advancedDataSecond
       brand = answer.secondAnswer.brand
       country = answer.secondAnswer.COUNTRY
       environmental = setValues(answer.secondAnswer.environmental_total, 1.75)
@@ -122,6 +128,7 @@
       social = setValues(answer.secondAnswer.social_total, 3.25)
       current = false
     } else {
+      advancedDataDisplay = advancedData
       brand = answer.mainAnswer.brand
       country = answer.mainAnswer.COUNTRY
       environmental = setValues(answer.mainAnswer.environmental_total, 1.75)
@@ -142,18 +149,24 @@
         <img class="h-6" src={logo} alt="Leaf logo" />
       </div>
       <div class="justify-self-end mr-1 text-2xl flex items-center">
-        <span class="relative flex h-2 w-2 left-1 bottom-2">
-          <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>
-        <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>
+        {#if !answer.secondAnswer === undefined || !(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>
+          {/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>
+        {/if}
         <button class="mr-1" title="Add url to the list"
           ><img
             class="w-6 h-6 hover:shadow-md transition rounded-md"
@@ -187,7 +200,7 @@
       </div>
       {#if advancedValue.length > 0}
         <div class="mt-1" transition:slide={{ duration: 300 }}>
-          <AdvancedData current={advancedValue} data={advancedData}
+          <AdvancedData current={advancedValue} data={advancedDataDisplay}
           ></AdvancedData>
         </div>
       {/if}