Merge pull request #3 from hexawulf/public-view-system

fix: Resolve post-login 404 and PublicHome button functionality

Author: hexawulf

client/src/App.tsx

@@ -1,7 +1,7 @@
 // client/src/App.tsx
 
 import React, { useEffect, useState } from "react";
-import { Switch, Route } from "wouter";
+import { Redirect, Switch, Route } from "wouter"; // Added Redirect
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { CodeThemeProvider } from "@/contexts/CodeThemeContext";
@@ -29,6 +29,7 @@ function AuthenticatedRouter() {
       <Route path="/tags" component={Tags} />
       <Route path="/settings" component={Settings} />
       <Route path="/shared/:shareId" component={SharedSnippet} />
+      <Route path="/login"><Redirect to="/" /></Route> {/* Added for authenticated users */}
       <Route component={NotFound} />
     </Switch>
   );
@@ -38,13 +39,47 @@ function PublicRouter() {
   return (
     <Switch>
       <Route path="/" component={PublicHome} />
+      <Route path="/login" component={SignInTriggerPage} /> {/* Added for unauthenticated users */}
       <Route path="/shared/:shareId" component={SharedSnippet} />
       {/* For non-matched routes, redirect to PublicHome */}
       <Route component={PublicHome} />
     </Switch>
   );
 }
 
+// SignInTriggerPage Helper Component
+const SignInTriggerPage: React.FC = () => {
+  const { signIn, user, loading } = useAuthContext(); // useAuthContext is already imported
+  useEffect(() => {
+    // Only attempt to sign in if not already authenticated and not loading
+    if (!user && !loading) {
+      signIn();
+    }
+  }, [signIn, user, loading]);
+
+  // If already logged in (e.g., due to fast auth resolution), redirect to home.
+  if (user) {
+    return <Redirect to="/" />;
+  }
+  // If still loading auth state
+  if (loading) {
+    return (
+      <div className="h-screen flex flex-col items-center justify-center">
+        <div className="mb-4">Loading authentication...</div>
+        <div className="animate-spin h-8 w-8 border-t-2 border-b-2 border-blue-500 rounded-full"></div>
+      </div>
+    );
+  }
+  // Default state while sign-in is being triggered or if user backs out of Google prompt
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      <p>Redirecting to sign-in...</p>
+      {/* Or redirect to PublicHome if sign-in is not immediate / user needs to click again */}
+      {/* For now, this message is fine as signIn() should overlay Google prompt */}
+    </div>
+  );
+};
+
 // Added debug component to show authentication state
 function AuthDebug({ user, loading }: { user: any, loading: boolean }) {
   return (
@@ -135,4 +170,4 @@ export default function App() {
       </CodeThemeProvider>
     </ThemeProvider>
   );
-}
+}

client/src/pages/PublicHome.tsx

@@ -1,6 +1,7 @@
 // client/src/pages/PublicHome.tsx
 import React, { useState, useEffect, useMemo } from 'react';
-import { Link } from 'wouter'; // Or your routing library
+import { Link } from 'wouter'; 
+import { useAuthContext } from '@/contexts/AuthContext'; // Added
 import SnippetGrid from '@/components/SnippetGrid'; // Adjust path as needed
 import { Input } from '@/components/ui/input'; // Adjust path for your UI components
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; // Adjust path
@@ -11,6 +12,7 @@ import Layout from '@/components/Layout'; // Adjust path for Layout component
 const ALL_ITEMS_VALUE = "_ALL_"; // Define placeholder for "All" options
 
 const PublicHome: React.FC = () => {
+  const { signIn } = useAuthContext(); // Added
   const [snippets, setSnippets] = useState<Snippet[]>([]);
   const [allSnippets, setAllSnippets] = useState<Snippet[]>([]); // Store all fetched snippets for client-side filtering
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -119,11 +121,13 @@ const PublicHome: React.FC = () => {
           <p className="text-xl text-gray-600 dark:text-gray-300 mb-6">
             Discover & Share Code Snippets with the World.
           </p>
-          <Link href="/login"> {/* Adjust if your login route is different */}
-            <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
-              Sign In / Sign Up
-            </Button>
-          </Link>
+          <Button 
+            size="lg" 
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+            onClick={() => signIn()} // Call the signIn function from context
+          >
+            Sign In / Sign Up
+          </Button>
         </header>
 
         <div className="mb-8 p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
@@ -208,4 +212,4 @@ const PublicHome: React.FC = () => {
   );
 };
 
-export default PublicHome;
+export default PublicHome;