From 4ff3b63738fab754de8729e4c612745af7903e6a Mon Sep 17 00:00:00 2001
From: Greg <trystuffwospam@livingonlinenow.com>
Date: Sun, 18 May 2025 16:44:13 +0200
Subject: [PATCH] feat: implement Supabase client setup and homepage with item
 grid display

---
 myfavstuff/app/page.js           | 32 ++++++---------
 myfavstuff/lib/supabaseClient.js | 68 +++++++++++++++++++++++---------
 2 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/myfavstuff/app/page.js b/myfavstuff/app/page.js
index e8c3c70..ec29a52 100644
--- a/myfavstuff/app/page.js
+++ b/myfavstuff/app/page.js
@@ -1,4 +1,4 @@
-import { supabase } from '../lib/supabaseClient';
+import { supabase, safeQuery } from '../lib/supabaseClient';
 
 // Function to generate star ratings
 const StarRating = ({ rating }) => {
@@ -18,25 +18,19 @@ export default async function Home() {
   let items = [];
   let fetchError = null;
 
-  if (supabase) {
-    try {
-      const { data, error } = await supabase
-        .from('items')
-        .select('*')
-        .order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
-
-      if (error) {
-        throw error;
-      }
-      items = data || [];
-    } catch (error) {
-      console.error('Error fetching items:', error.message);
-      fetchError = 'Could not fetch items. Please check the connection and try again.';
-      // If Supabase client isn't initialized (e.g. missing .env.local), items will remain []
-      // and this error message will be displayed if supabase itself was the issue.
-    }
+  // Using safeQuery helper to handle missing Supabase client gracefully
+  const { data, error } = await safeQuery(async (supabase) => {
+    return await supabase
+      .from('items')
+      .select('*')
+      .order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
+  });
+  
+  if (error) {
+    console.error('Error fetching items:', error.message);
+    fetchError = 'Could not fetch items. ' + error.message;
   } else {
-    fetchError = 'Supabase client is not initialized. Please check your .env.local file and ensure it has the correct Supabase URL and Anon key.';
+    items = data || [];
   }
 
 
diff --git a/myfavstuff/lib/supabaseClient.js b/myfavstuff/lib/supabaseClient.js
index acec01e..ca6aed6 100644
--- a/myfavstuff/lib/supabaseClient.js
+++ b/myfavstuff/lib/supabaseClient.js
@@ -1,23 +1,55 @@
 import { createClient } from '@supabase/supabase-js';
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+// Function to create a supabase client that doesn't fail build if env vars are missing
+const createSupabaseClient = () => {
+  // For Coolify docker deployment with build args
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  
+  // Skip errors during build
+  if (typeof window === 'undefined') {
+    if (!supabaseUrl || !supabaseAnonKey) {
+      // During build/SSR, return null client - this prevents build errors
+      console.log('Building without Supabase credentials. Will connect at runtime if available.');
+      return null;
+    }
+  } else {
+    // In browser, log helpful messages but don't block rendering
+    if (!supabaseUrl) {
+      console.warn('Warning: Missing Supabase URL. Please configure NEXT_PUBLIC_SUPABASE_URL.');
+    }
+    if (!supabaseAnonKey) {
+      console.warn('Warning: Missing Supabase Anon Key. Please configure NEXT_PUBLIC_SUPABASE_ANON_KEY.');
+    }
+  }
 
-if (!supabaseUrl) {
-  console.error('Error: Missing Supabase URL. Please set NEXT_PUBLIC_SUPABASE_URL in .env.local');
-}
+  // Only create client if we have credentials
+  if (supabaseUrl && supabaseAnonKey) {
+    try {
+      return createClient(supabaseUrl, supabaseAnonKey);
+    } catch (error) {
+      console.error('Error initializing Supabase client:', error);
+      return null;
+    }
+  }
+  
+  return null;
+};
 
-if (!supabaseAnonKey) {
-  console.error('Error: Missing Supabase Anon Key. Please set NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local');
-}
+// Create the client (can be null during build or if credentials missing)
+export const supabase = createSupabaseClient();
 
-// Ensure client is only created if keys are present, to avoid errors during build or in environments where keys might not be set.
-// The actual fetch operations in components should handle cases where supabase might not be initialized.
-let supabaseInstance = null;
-if (supabaseUrl && supabaseAnonKey) {
-  supabaseInstance = createClient(supabaseUrl, supabaseAnonKey);
-} else {
-  console.warn('Supabase client not initialized due to missing URL or Anon Key. App will run without Supabase functionality.');
-}
-
-export const supabase = supabaseInstance;
+// Helper function for components to safely use supabase
+export const safeQuery = async (queryFn) => {
+  if (!supabase) {
+    console.warn('Supabase client not available. Check your environment variables.');
+    return { data: null, error: { message: 'Database connection not available' } };
+  }
+  
+  try {
+    return await queryFn(supabase);
+  } catch (error) {
+    console.error('Error in Supabase query:', error);
+    return { data: null, error: { message: 'Error connecting to database' } };
+  }
+};