wip: debugging loading of body

digidem · Oct 24, 2024 · a054680 · a054680
1 parent 3521538
commit a054680
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,21 +9,35 @@ const queryClient = new QueryClient();
 
 // Get the base URL from the environment variable or use a default
 const baseUrl = import.meta.env.BASE_URL || `/`;
-console.log(baseUrl);
+console.log('Starting with Base URL:', baseUrl); // More descriptive logging
 
-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <HashRouter basename={baseUrl}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/partners/:slug" element={<PartnerDetail />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </HashRouter>
-    </TooltipProvider>
-  </QueryClientProvider>
-);
+const App = () => {
+  console.log('App component rendering'); // Debug render
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <Toaster />
+        <HashRouter basename={baseUrl}>
+          <div style={{minHeight: '100vh'}}> {/* Ensure content takes full height */}
+            <Routes>
+              <Route
+                path="/"
+                element={<Home />}
+                onError={(error) => console.error('Route error:', error)}
+              />
+              <Route
+                path="/partners/:slug"
+                element={<PartnerDetail />}
+                onError={(error) => console.error('Partner route error:', error)}
+              />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </div>
+        </HashRouter>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+};
 
 export default App;
diff --git a/src/components/DonateSection.jsx b/src/components/DonateSection.jsx
@@ -17,7 +17,7 @@ const DonateSection = ({ donation }) => {
         <p className="text-xl text-center text-gray-300 mb-8">
           Help us safeguard the Amazon rainforest and empower indigenous communities by making a donation. Every contribution counts!
         </p>
-        
+
         <div className="flex flex-wrap justify-center items-center gap-8">
           <motion.a
             href={donation.openCollectiveUrl}
@@ -30,7 +30,7 @@ const DonateSection = ({ donation }) => {
             <DollarSign className="mr-2" />
             Donate via Open Collective
           </motion.a>
-          
+
           <div className="text-center">
             <h3 className="text-xl font-semibold mb-2 text-white">Donate with PIX</h3>
             <div className="bg-white p-2 rounded-lg shadow-lg inline-block">
@@ -39,7 +39,7 @@ const DonateSection = ({ donation }) => {
             <p className="mt-2 text-sm text-gray-300">Scan the code to donate directly via PIX</p>
           </div>
         </div>
-        
+
         <div className="mt-12 max-w-2xl mx-auto">
           <h3 className="text-2xl font-semibold mb-2 text-center text-white">Our Progress</h3>
           <div className="bg-gray-700 h-4 rounded-full overflow-hidden">
@@ -52,7 +52,7 @@ const DonateSection = ({ donation }) => {
             Raised: ${donation.totalRaised.toLocaleString()} / Goal: ${donation.goal.toLocaleString()}
           </p>
         </div>
-        
+
         <div className="mt-8 text-center">
           <h3 className="text-xl font-semibold mb-2 text-white">Share Our Cause</h3>
           <div className="flex justify-center space-x-4">

diff --git a/src/components/ProjectHighlight.jsx b/src/components/ProjectHighlight.jsx
@@ -5,7 +5,7 @@ import { Check, Wrench } from 'lucide-react';
 const ProjectHighlight = ({ project }) => {
   return (
     <section className="mb-16 px-4">
-      <motion.h2 
+      <motion.h2
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
@@ -20,7 +20,7 @@ const ProjectHighlight = ({ project }) => {
           <h4 className="text-2xl font-semibold mb-4 text-white">Objectives:</h4>
           <ul className="space-y-4 mb-6">
             {project.objectives.map((objective, index) => (
-              <motion.li 
+              <motion.li
                 key={index}
                 initial={{ opacity: 0, x: -20 }}
                 animate={{ opacity: 1, x: 0 }}

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -18,8 +18,8 @@ const Sidebar = ({ isSidebarOpen, setIsSidebarOpen, partners }) => {
         <div className="p-4">
           <div className="flex justify-between items-center mb-4">
             <h2 className="text-2xl font-bold text-cyan-300">Partners</h2>
-            <button 
-              onClick={() => setIsSidebarOpen(false)} 
+            <button
+              onClick={() => setIsSidebarOpen(false)}
               className="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200 text-cyan-300 hover:text-cyan-200"
             >
               <X className="h-6 w-6" />

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -47,7 +47,7 @@ const Home = () => {
   React.useEffect(() => {
     const handleScroll = () => {
       if (!mapRef.current) return;
-      
+
       const mapPosition = mapRef.current.getBoundingClientRect().top;
       if (mapPosition > 0 && mapPosition < 150) {
         mapRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -68,14 +68,14 @@ const Home = () => {
   return (
     <div className="min-h-screen">
       <Hero scrollToMap={scrollToMap} />
-      <MapSection 
+      <MapSection
         mapRef={mapRef}
         filteredPartners={filteredPartners}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
         setIsSidebarOpen={setIsSidebarOpen}
       />
-      <Sidebar 
+      <Sidebar
         isSidebarOpen={isSidebarOpen}
         setIsSidebarOpen={setIsSidebarOpen}
         partners={partners}

diff --git a/src/pages/PartnerDetail.jsx b/src/pages/PartnerDetail.jsx
@@ -80,16 +80,16 @@ const PartnerDetail = () => {
 
       <main className="container mx-auto px-4 py-16">
         <ProjectHighlight project={partner.project_highlight} />
-        
+
         <div className="my-16 bg-gray-800 rounded-lg p-8">
           <h2 className="text-3xl font-bold mb-6 text-cyan-300">Partner Territory</h2>
           <div className="flex flex-col lg:flex-row gap-8">
             <div className="w-full lg:w-1/2 xl:w-2/3">
               <div className="rounded-lg overflow-hidden shadow-xl">
-                <MapSection 
-                  filteredPartners={[partner]} 
-                  noSideBar 
-                  className="h-[400px] lg:h-[500px] w-full" 
+                <MapSection
+                  filteredPartners={[partner]}
+                  noSideBar
+                  className="h-[400px] lg:h-[500px] w-full"
                 />
               </div>
             </div>
@@ -119,7 +119,7 @@ const PartnerDetail = () => {
           </div>
         </div>
 
-        <motion.section 
+        <motion.section
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 1 }}
@@ -128,7 +128,7 @@ const PartnerDetail = () => {
           <div className="absolute inset-0 bg-cover bg-center opacity-20" style={{backgroundImage: "url('https://picsum.photos/seed/amazon-rainforest/1920/1080')"}}></div>
           <div className="container mx-auto px-4 relative z-10">
             <h2 className="text-4xl font-bold mb-8 text-center text-cyan-300">Impact Statement</h2>
-            <motion.blockquote 
+            <motion.blockquote
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ delay: 0.5, duration: 0.8 }}
@@ -140,7 +140,7 @@ const PartnerDetail = () => {
         </motion.section>
 
         <MediaGallery media={partner.media_gallery} />
-        
+
         <DonateSection donation={partner.donation} />
       </main>