feat: initial map for app.tsx

albertkun · Jan 19, 2024 · 4fd1557 · 4fd1557
1 parent f1bdcaa
commit 4fd1557
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/index2.html b/index2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+        <title>Supabase in Vanilla JS</title>
+        <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@latest"></script>
+</head>
+<body>
+        <script>
+                // Initialize supabaseClient
+                let supabaseClient = supabase.createClient('https://baaspecsqpmgittvdian.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJhYXNwZWNzcXBtZ2l0dHZkaWFuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDUxNzE5NTEsImV4cCI6MjAyMDc0Nzk1MX0.yvkgXVATqe79CSZnKPWWIN83pHM3-Q5buZJrao5BCsc');
+                async function getPlaces() {
+                        let { data: travel, error } = await supabaseClient
+                            .from('travel')
+                            .select('*')
+
+                        if (error) {
+                            console.error('Error: ', error);
+                            return;
+                        }
+
+                        // Log the data to the console
+                        console.log('Data: ', travel);
+
+                        // Get the div where we want to display the data
+                        const dataDiv = document.getElementById('data');
+
+                        // Create a string to hold the HTML
+                        let htmlString = '';
+
+                        // Loop through the data and add each item to the HTML string
+                        for (let item of travel) {
+                            htmlString += `<p>${JSON.stringify(item)}</p>`;
+                        }
+
+                        // Set the innerHTML of the div to the HTML string
+                        dataDiv.innerHTML = htmlString;
+                    }
+
+                    getPlaces();
+        </script>
+        <div id="data"></div>
+</body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import maplibre from "maplibre-gl";
 import { createClient } from "@supabase/supabase-js";
 
-const supabase = createClient("https://albertmaps.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJhYXNwZWNzcXBtZ2l0dHZkaWFuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDUxNzE5NTEsImV4cCI6MjAyMDc0Nzk1MX0.yvkgXVATqe79CSZnKPWWIN83pHM3-Q5buZJrao5BCsc");
+const supabase = createClient("https://baaspecsqpmgittvdian.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJhYXNwZWNzcXBtZ2l0dHZkaWFuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDUxNzE5NTEsImV4cCI6MjAyMDc0Nzk1MX0.yvkgXVATqe79CSZnKPWWIN83pHM3-Q5buZJrao5BCsc");
 
 function App() {
   const mapContainer = useRef(null);