Feat: Added code responsible for updating displayed values depending on if the...

Feat: Added code responsible for updating displayed values depending on if the user is looking at first or second answer -- to be optimized later

background/messages/pingAdvanced.ts

-import { collection, getDocs, type DocumentData } from "firebase/firestore/lite"
+import {
+  collection,
+  getDocs,
+  limit,
+  query,
+  where,
+  type DocumentData
+} from "firebase/firestore/lite"
 import type data_advanced from "interfaces/data_advanced"
 
 import type { PlasmoMessaging } from "@plasmohq/messaging"
 
 import { db } from "~background"
 
-async function queryAdvancedData() {
-  //const ref = db.ref('dinosaurs');
-  //ref.orderByChild('height').on('child_added', (snapshot) => {
-  //console.log(snapshot.key + ' was ' + snapshot.val().height + ' meters tall');
-  //});
+async function queryAdvancedData(brandName: string) {
+  const brandsCollection = query(
+    collection(db, "companies"),
+    where("brand", "==", brandName),
+    limit(1)
+  )
+  let brandsData
+  const brandsSnapshot = await getDocs(brandsCollection)
+  brandsSnapshot.forEach((doc) => {
+    brandsData = doc.data()
+    console.log(doc.data())
+  })
+  console.log("done")
+  return brandsData
 }
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
-  const response = await queryAdvancedData()
+  const response = await queryAdvancedData(req.body.name)
   res.send({
     response
   })

components/advancedData.svelte

+<script>
+</script>
+
+<section>
+    hi
+</section>
\ No newline at end of file

content.svelte

@@ -22,20 +22,18 @@
 </script>
 
 <script>
-  import { onMount } from "svelte"
   import { slide } from "svelte/transition"
 
   import { Storage } from "@plasmohq/storage"
+  import AdvancedData from "~components/advancedData.svelte"
 
   let advanced = false
   let visible = false
 
-  const storage = new Storage()
+  chrome.storage.sync.set({ advanced: false })
+  chrome.storage.sync.set({ current: "" })
 
-  onMount(async () => {
-    await storage.set("visible", false)
-    await storage.set("advanced", false)
-  })
+  const storage = new Storage()
 
   storage.watch({
     visible: (c) => {
@@ -45,15 +43,17 @@
       advanced = c.newValue
     }
   })
+  
+  function closePopup() {
+    chrome.storage.sync.set({ visible: false })
+  }
 
   let brand = ""
   let environmental = ""
   let supply = ""
   let social = ""
-
-  function closePopup() {
-    chrome.storage.sync.set({ visible: false })
-  }
+  let current = true
+  let answer
 
   async function getData() {
     const resp = await sendToBackground({
@@ -68,6 +68,7 @@
       supply = "N/A"
       social = "N/A"
     } else {
+      answer = resp.answer
       brand = resp.answer.mainAnswer.brand
       environmental = Math.round(
         (resp.answer.mainAnswer.environmental_total / 1.75) * 100
@@ -80,18 +81,53 @@
       ).toString()
       if (resp.validUrl != undefined) {
         visible = true
+        chrome.storage.sync.set({ visible: true })
       } else {
         visible = false
+        chrome.storage.sync.set({ visible: false })
       }
     }
     getAdvancedData()
   }
 
   async function getAdvancedData() {
-    const resp = await sendToBackground({
-      name: "pingAdvanced"
+    const respAdvanced = await sendToBackground({
+      name: "pingAdvanced",
+      body: {
+        name: brand
+      }
     })
   }
+  // 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() {
+    if (current) {
+      brand = answer.secondAnswer.brand
+      environmental = Math.round(
+        (answer.secondAnswer.environmental_total / 1.75) * 100
+      ).toString()
+      supply = Math.round(
+        (answer.secondAnswer.supplychain_total / 6) * 100
+      ).toString()
+      social = Math.round(
+        (answer.secondAnswer.social_total / 3.25) * 100
+      ).toString()
+      current = false
+    } else {
+      brand = answer.mainAnswer.brand
+      environmental = Math.round(
+        (answer.mainAnswer.environmental_total / 1.75) * 100
+      ).toString()
+      supply = Math.round(
+        (answer.mainAnswer.supplychain_total / 6) * 100
+      ).toString()
+      social = Math.round(
+        (answer.mainAnswer.social_total / 3.25) * 100
+      ).toString()
+      current = true
+    }
+  }
 
   getData()
 </script>
@@ -116,6 +152,7 @@
             alt="add button" /></button>
       </div>
     </div>
+    <button on:click={() => changeBrand()}>change</button>
     <section class="p-2 font-roboto">
       <div>
         <p>Brand: <span class="font-bold">{brand}</span></p>
@@ -127,7 +164,9 @@
         <RatingButton header={"Social"} score={social}></RatingButton>
       </div>
       {#if advanced}
-        <div transition:slide={{ delay: 150, duration: 300 }} class="">hi</div>
+        <div transition:slide={{ delay: 150, duration: 300 }} class="">
+        <AdvancedData></AdvancedData>
+        </div>
       {/if}
       <p class="text-[0.75rem] text-gray-400 font-light">
         Source: <a