Update volunteer page to reflect new db structure

Author: Luke-Oldenburg

src/pages/volunteer.astro

@@ -3,8 +3,9 @@ import BackOnTrackLayout from "../layouts/BackOnTrackLayout.astro";
 import PocketBase from "pocketbase";
 
 const pb = new PocketBase("https://pb.backontrackus.org");
+pb.autoCancellation(false);
 
-const records = await pb.collection("locations").getFullList({
+const locations = await pb.collection("locations").getFullList({
   filter: "inactive = false",
   sort: "+name",
 });
@@ -26,42 +27,32 @@ const records = await pb.collection("locations").getFullList({
       </h2>
       <hr class="my-5 w-2/3 border-t border-white" />
       <div
-        class="m-5 grid w-1/2 grid-cols-1 place-items-center gap-5 md:grid-cols-2"
+        class="mb-10 grid w-1/2 grid-cols-1 place-items-center gap-5 md:grid-cols-2"
       >
         {
-          records.map((record) => {
-            if (record.remind || record.groupme || record.whatsapp) {
+          locations.map(async (location) => {
+            const links = await pb.collection("links").getFullList({
+              filter: `location.id = "${location.id}"`,
+            });
+            console.log(links);
+            if (links.length > 0) {
               return (
                 <div class="flex flex-col items-center justify-center gap-3">
                   <p class="text-center text-3xl font-bold text-white md:text-4xl">
-                    {record.name}
+                    {location.name}
                   </p>
-                  <div class="flex items-center justify-center gap-2">
-                    {record.remind && (
-                      <a
-                        href={record.remind}
-                        class="block rounded border-b-4 border-blue-700 bg-blue-500 px-4 py-2 font-bold text-white hover:border-blue-500 hover:bg-blue-400"
-                      >
-                        Remind
-                      </a>
-                    )}
-                    {record.groupme && (
-                      <a
-                        href={record.groupme}
-                        class="block rounded border-b-4 border-blue-700 bg-blue-500 px-4 py-2 font-bold text-white hover:border-blue-500 hover:bg-blue-400"
-                      >
-                        GroupMe
-                      </a>
-                    )}
-                    {record.whatsapp && (
-                      <a
-                        href={record.whatsapp}
-                        class="block rounded border-b-4 border-blue-700 bg-blue-500 px-4 py-2 font-bold text-white hover:border-blue-500 hover:bg-blue-400"
-                      >
-                        WhatsApp
-                      </a>
-                    )}
-                  </div>
+                  {links.map((link) => {
+                    return (
+                      <div class="flex items-center justify-center gap-2">
+                        <a
+                          href={link.url}
+                          class="block rounded border-b-4 border-blue-700 bg-blue-500 px-4 py-2 font-bold text-white hover:border-blue-500 hover:bg-blue-400"
+                        >
+                          {link.name}
+                        </a>
+                      </div>
+                    );
+                  })}
                 </div>
               );
             }