Fix/crew state

src/components/crews/CrewManagement.tsx

@@ -1,26 +1,27 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { supabase } from "@/utils/supabase/client";
 import { Button } from "@/components/ui/button";
-import { Circle, CheckCircle } from "lucide-react";
-import { useToast } from "@/hooks/use-toast";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import {
+  Circle,
+  CheckCircle,
   PlusIcon,
   Trash2Icon,
   UserIcon,
   Settings,
   Globe,
   Lock,
 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import CrewForm from "./CrewForm";
 import { Crew, CrewManagementProps } from "@/types/supabase";
@@ -38,6 +39,25 @@ export function CrewManagement({
   const { toast } = useToast();
   const router = useRouter();
 
+  useEffect(() => {
+    const fetchCrews = async () => {
+      const { data, error } = await supabase.from("crews").select("*");
+      if (error) {
+        console.error("Error fetching crews:", error);
+        toast({
+          title: "Error",
+          description: "Failed to fetch crews. Please refresh the page.",
+          variant: "destructive",
+        });
+      } else if (data) {
+        setCrews(data);
+        onCrewUpdate(data);
+      }
+    };
+
+    fetchCrews();
+  }, [onCrewUpdate, toast]);
+
   const handleDelete = async (id: number) => {
     setLoading(true);
     try {

src/components/public-crew/ClonePublicCrew.tsx

@@ -10,15 +10,10 @@ import type { PublicCrew } from "@/types/supabase";
 
 interface ClonePublicCrewProps {
   crew: PublicCrew;
-  onCloneComplete: () => void;
   disabled: boolean;
 }
 
-export function ClonePublicCrew({
-  crew,
-  onCloneComplete,
-  disabled,
-}: ClonePublicCrewProps) {
+export function ClonePublicCrew({ crew, disabled }: ClonePublicCrewProps) {
   const [isCloning, setIsCloning] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [hasCloned, setHasCloned] = useState(false);
@@ -91,7 +86,6 @@ export function ClonePublicCrew({
       }
 
       setHasCloned(true);
-      onCloneComplete();
       toast({
         title: "Success",
         description: `You've successfully cloned the "${crew.name}" crew. You can find it in your crews list.`,

src/components/public-crew/PublicCrews.tsx

@@ -50,11 +50,6 @@ export default function PublicCrews() {
     fetchCrews();
   }, []);
 
-  const handleCloneComplete = () => {
-    // You can add any additional logic here after a crew has been cloned
-    console.log("Crew cloned successfully");
-  };
-
   if (loading) {
     return <div className="text-center p-4">Loading crews...</div>;
   }
@@ -173,11 +168,7 @@ export default function PublicCrews() {
                 ))}
               </ul>
               <div className="mt-4">
-                <ClonePublicCrew
-                  crew={crew}
-                  onCloneComplete={handleCloneComplete}
-                  disabled={false}
-                />
+                <ClonePublicCrew crew={crew} disabled={false} />
               </div>
             </CardContent>
           </Card>