refactor: centralize start analysis logic and update component hooks for consistency

jumski · jumski · commit e66c78cabe8f · 2025-05-16T17:55:08.000+02:00
- Moved inline start analysis functions to a dedicated useStartAnalysis hook
- Updated components to use the new hook for initiating website analysis
- Removed redundant inline RPC call logic from components
- Added startWebsiteAnalysis service for handling analysis start with auth check
- Simplified flow by delegating start logic to shared hook, improving maintainability
- Minor style adjustments and cleanup for better code organization and clarity
diff --git a/examples/playground/app/websites/page.tsx b/examples/playground/app/websites/page.tsx
@@ -1,24 +1,22 @@
 'use client';
 
 import { createClient } from '@/utils/supabase/client';
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState } from 'react';
+import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
 import type { Database } from '@/supabase/functions/database-types';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { FormMessage } from '@/components/form-message';
 import { SubmitButton } from '@/components/submit-button';
-import { useRouter } from 'next/navigation';
 import { SkeletonTable } from '@/components/skeleton-table';
 
 type WebsiteRow = Database['public']['Tables']['websites']['Row'];
 
 export default function Page() {
   const [websites, setWebsites] = useState<WebsiteRow[] | null>(null);
-  const [formError, setFormError] = useState<string | null>(null);
   const [url, setUrl] = useState('https://reddit.com/r/supabase');
-  const [isPending, startTransition] = useTransition();
+  const { start: startAnalysis, isPending, error: formError } = useStartAnalysis();
   const supabase = createClient();
-  const router = useRouter();
 
   // Process URL parameter when the component mounts
   useEffect(() => {
@@ -44,64 +42,12 @@ export default function Page() {
         }, 10);
       }
     }
-  }, []);
+  }, [startAnalysis]);
   
-  async function startAnalysis(url: string) {
-    if (!url || isPending) {
-      return;
-    }
-
-    try {
-      startTransition(async () => {
-        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-          url,
-        });
-
-        if (error) {
-          setFormError(error.message);
-          return;
-        }
-
-        if (data && data.run_id) {
-          router.push(`/websites/runs/${data.run_id}`);
-        } else {
-          setFormError('Failed to start flow analysis');
-        }
-      });
-    } catch (error) {
-      setFormError('An error occurred while starting the analysis');
-      console.error(error);
-    }
-  }
-
   async function startAnalyzeWebsiteFlow(formData: FormData) {
     const url = formData.get('url') as string;
-
-    if (!url || isPending) {
-      setFormError('Please enter a URL');
-      return;
-    }
-
-    try {
-      startTransition(async () => {
-        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-          url,
-        });
-
-        if (error) {
-          setFormError(error.message);
-          return;
-        }
-
-        if (data && data.run_id) {
-          router.push(`/websites/runs/${data.run_id}`);
-        } else {
-          setFormError('Failed to start flow analysis');
-        }
-      });
-    } catch (error) {
-      setFormError('An error occurred while starting the analysis');
-      console.error(error);
+    if (url) {
+      startAnalysis(url);
     }
   }
 
diff --git a/examples/playground/components/example-links.tsx b/examples/playground/components/example-links.tsx
@@ -1,73 +1,23 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { useTransition, useEffect, useState } from 'react';
-import { createClient } from '@/utils/supabase/client';
+import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
 import { exampleLinks } from '@/lib/example-links';
 import { useLoadingState } from './loading-state-provider';
 
 export default function ExampleLinks() {
-  const [isPending, startTransition] = useTransition();
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
-  const router = useRouter();
-  const supabase = createClient();
+  const { start, isPending, error: startError } = useStartAnalysis();
   const { setLoading } = useLoadingState();
 
-  useEffect(() => {
-    supabase.auth.getUser().then(({ data }) => {
-      setIsLoggedIn(!!data.user);
-    });
-  }, []);
-
   // Function to handle example link clicks
   const handleExampleClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
-    if (isPending) {
-      e.preventDefault();
-      return;
-    }
-
     e.preventDefault();
-    
-    // If user is not logged in, redirect to sign-in page
-    if (!isLoggedIn) {
-      console.log('User not logged in, storing URL and redirecting to sign-in:', url);
-      localStorage.setItem('pendingAnalysisUrl', url);
-      router.push('/sign-in');
-      return;
-    }
-
-    console.log('Starting analysis for example URL:', url);
+    if (isPending) return;
     
     // Set global loading state to true
     setLoading(true);
     
-    startTransition(async () => {
-      try {
-        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-          url,
-        });
-
-        if (error) {
-          console.error('Error starting analysis:', error);
-          setLoading(false);
-          return;
-        }
-
-        if (data && data.run_id) {
-          console.log(
-            'Analysis started, redirecting to:',
-            `/websites/runs/${data.run_id}`,
-          );
-          router.push(`/websites/runs/${data.run_id}`);
-        } else {
-          console.error('No run_id returned from analysis');
-          setLoading(false);
-        }
-      } catch (error) {
-        console.error('Exception during analysis:', error);
-        setLoading(false);
-      }
-    });
+    // Start analysis will handle auth check and redirect
+    start(url);
   };
 
   return (
diff --git a/examples/playground/components/flow-run-provider.tsx b/examples/playground/components/flow-run-provider.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useEffect, useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
+import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
 import {
   fetchFlowRunData,
   observeFlowRun,
@@ -61,12 +62,13 @@ export function FlowRunProvider({ runId, children }: FlowRunProviderProps) {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [currentTime, setCurrentTime] = useState<Date>(new Date());
-  const [analyzeLoading, setAnalyzeLoading] = useState<boolean>(false);
-  const [analyzeError, setAnalyzeError] = useState<string | null>(null);
 
   const router = useRouter();
   const supabase = createClient();
   const { setLoading: setGlobalLoading } = useLoadingState();
+  
+  // Use the shared hook for starting analysis
+  const { start: analyzeWebsite, isPending: analyzeLoading, error: analyzeError } = useStartAnalysis();
 
   // Derive runData from the separate state pieces
   const runData = useMemo<ResultRow | null>(() => {
@@ -108,51 +110,6 @@ export function FlowRunProvider({ runId, children }: FlowRunProviderProps) {
     } as ResultRow;
   }, [run, stepStates, stepTasks]);
 
-  // Function to analyze a new website
-  const analyzeWebsite = async (url: string) => {
-    if (!url) {
-      setAnalyzeError('Please enter a URL');
-      return;
-    }
-
-    setAnalyzeLoading(true);
-    setAnalyzeError(null);
-    
-    // Set global loading state to true
-    setGlobalLoading(true);
-
-    try {
-      console.log('Starting analysis for URL:', url);
-      const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-        url,
-      });
-
-      if (error) {
-        console.error('Error starting analysis:', error);
-        setAnalyzeError(error.message);
-        setGlobalLoading(false);
-        return;
-      }
-
-      if (data && data.run_id) {
-        console.log(
-          'Analysis started, redirecting to:',
-          `/websites/runs/${data.run_id}`,
-        );
-        router.push(`/websites/runs/${data.run_id}`);
-      } else {
-        console.error('No run_id returned from analysis');
-        setAnalyzeError('Failed to start flow analysis');
-        setGlobalLoading(false);
-      }
-    } catch (error) {
-      setAnalyzeError('An error occurred while starting the analysis');
-      console.error('Exception during analysis:', error);
-      setGlobalLoading(false);
-    } finally {
-      setAnalyzeLoading(false);
-    }
-  };
 
 
   useEffect(() => {
diff --git a/examples/playground/components/website-analyzer-form.tsx b/examples/playground/components/website-analyzer-form.tsx
@@ -1,96 +1,35 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { useState, useTransition, useEffect } from 'react';
+import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { FormMessage } from '@/components/form-message';
 import { SubmitButton } from '@/components/submit-button';
-import { createClient } from '@/utils/supabase/client';
 import { useLoadingState } from './loading-state-provider';
 
 export default function WebsiteAnalyzerForm() {
-  const [formError, setFormError] = useState<string | null>(null);
-  const [isPending, startTransition] = useTransition();
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
-  const router = useRouter();
-  const supabase = createClient();
+  const { start: startAnalysis, isPending, error: formError } = useStartAnalysis();
   const { setLoading } = useLoadingState();
 
-  useEffect(() => {
-    supabase.auth.getUser().then(({ data }) => {
-      setIsLoggedIn(!!data.user);
-    });
-  }, []);
-
   async function handleAnalyzeWebsite(formData: FormData) {
     const url = formData.get('url') as string;
-
-    if (!url) {
-      setFormError('Please enter a URL');
-      return;
-    }
-
-    // If user is not logged in, redirect to sign-in page
-    if (!isLoggedIn) {
-      console.log(
-        'User not logged in, storing URL and redirecting to sign-in:',
-        url,
-      );
-      // Store the URL in localStorage to redirect back after login
-      localStorage.setItem('pendingAnalysisUrl', url);
-      router.push('/sign-in');
-      return;
-    }
-
+    
     if (!url) {
-      setFormError('Please enter a URL');
       return;
     }
-
-    try {
-      console.log('Starting analysis for URL:', url);
-      // Set global loading state to true
-      setLoading(true);
-      
-      // Start the transition to show loading state
-      startTransition(async () => {
-        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-          url,
-        });
-
-        if (error) {
-          console.error('Error starting analysis:', error);
-          setFormError(error.message);
-          setLoading(false);
-          return;
-        }
-
-        if (data && data.run_id) {
-          console.log(
-            'Analysis started, redirecting to:',
-            `/websites/runs/${data.run_id}`,
-          );
-          router.push(`/websites/runs/${data.run_id}`);
-        } else {
-          console.error('No run_id returned from analysis');
-          setFormError('Failed to start flow analysis');
-          setLoading(false);
-        }
-      });
-    } catch (error) {
-      setFormError('An error occurred while starting the analysis');
-      console.error('Exception during analysis:', error);
-      setLoading(false);
-    }
+    
+    // Set global loading state to true
+    setLoading(true);
+    
+    // Start analysis will handle auth check and redirect
+    startAnalysis(url);
   }
 
   return (
     <div className="flex flex-col w-full p-4 gap-4 border rounded-lg shadow-sm">
       <h2 className="text-2xl font-medium">Analyze a Website</h2>
       <p className="text-sm text-foreground/60">
         Enter a URL to analyze a website
-        {!isLoggedIn && " (you'll need to sign in first)"}
       </p>
       <form action={handleAnalyzeWebsite} className="flex flex-col gap-4">
         <div>
@@ -106,18 +45,10 @@ export default function WebsiteAnalyzerForm() {
           />
         </div>
         <SubmitButton disabled={isPending} pendingText="🔄 Starting analysis...">
-          {isLoggedIn ? '🚀 Start Analysis' : 'Sign in & Analyze'}
+          🚀 Start Analysis
         </SubmitButton>
         {formError && <FormMessage message={{ error: formError }} />}
       </form>
-      {isLoggedIn === false && (
-        <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
-          <p className="text-yellow-800">
-            You'll need to sign in to analyze websites. When you click the
-            button, you'll be redirected to the sign-in page.
-          </p>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/examples/playground/lib/hooks/use-start-analysis.ts b/examples/playground/lib/hooks/use-start-analysis.ts
diff --git a/examples/playground/lib/services/start-analysis.ts b/examples/playground/lib/services/start-analysis.ts
