feat(db): add slugs and urls

src/components/router/GlobalRoutes.tsx

@@ -21,7 +21,7 @@ export function GlobalRoutes() {
     <Routes>
       {/* Global routes (not scoped to festival/edition) */}
       <Route path="/groups" element={<Groups />} />
-      <Route path="/groups/:groupId" element={<GroupDetail />} />
+      <Route path="/groups/:groupSlug" element={<GroupDetail />} />
 
       {/* Admin routes */}
       <Route path="/admin" element={<AdminLayout />}>
@@ -30,8 +30,8 @@ export function GlobalRoutes() {
         <Route path="analytics" element={<AdminAnalytics />} />
         <Route path="admins" element={<AdminRolesTable />} />
         <Route path="festivals" element={<AdminFestivals />}>
-          <Route path=":festivalId" element={<FestivalDetail />}>
-            <Route path="editions/:editionId" element={<FestivalEdition />}>
+          <Route path=":festivalSlug" element={<FestivalDetail />}>
+            <Route path="editions/:editionSlug" element={<FestivalEdition />}>
               <Route index element={<FestivalStages />} />
               <Route path="stages" element={<FestivalStages />} />
               <Route path="sets" element={<FestivalSets />} />

src/components/router/SubdomainRedirect.tsx

@@ -16,10 +16,10 @@ interface SubdomainRedirectProps {
 export function SubdomainRedirect({
   component: Component,
 }: SubdomainRedirectProps) {
-  const { festivalSlug, editionSlug, setId } = useParams<{
+  const { festivalSlug, editionSlug, setSlug } = useParams<{
     festivalSlug?: string;
     editionSlug?: string;
-    setId?: string;
+    setSlug?: string;
   }>();
 
   const shouldNotRedirect = !isMainGetuplineDomain();
@@ -32,8 +32,8 @@ export function SubdomainRedirect({
     // Build the target path based on current route
     let targetPath = "/";
 
-    if (editionSlug && setId) {
-      targetPath = `/editions/${editionSlug}/sets/${setId}`;
+    if (editionSlug && setSlug) {
+      targetPath = `/editions/${editionSlug}/sets/${setSlug}`;
     } else if (editionSlug && window.location.pathname.includes("schedule")) {
       targetPath = `/editions/${editionSlug}/schedule`;
     } else if (editionSlug) {
@@ -43,7 +43,7 @@ export function SubdomainRedirect({
     // Redirect to subdomain
     const subdomainUrl = createFestivalSubdomainUrl(festivalSlug, targetPath);
     window.location.href = subdomainUrl;
-  }, [festivalSlug, editionSlug, setId, shouldNotRedirect]);
+  }, [festivalSlug, editionSlug, setSlug, shouldNotRedirect]);
 
   if (shouldNotRedirect) {
     return <Component />;

src/hooks/queries/groups/useCreateGroup.ts

@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { supabase } from "@/integrations/supabase/client";
 import { userGroupsKeys } from "./useUserGroups";
+import { generateSlug } from "@/lib/slug";
 
 // Mutation function
 async function createGroup(variables: {
@@ -15,6 +16,7 @@ async function createGroup(variables: {
     .from("groups")
     .insert({
       name,
+      slug: generateSlug(name),
       description,
       created_by: userId,
     })

src/hooks/queries/groups/useGroupBySlug.ts

@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import type { Group } from "@/types/groups";
+
+// Query key factory
+export const groupBySlugKeys = {
+  all: ["groups"] as const,
+  bySlug: () => [...groupBySlugKeys.all, "by-slug"] as const,
+  detail: (slug: string, userId: string) =>
+    [...groupBySlugKeys.bySlug(), slug, userId] as const,
+};
+
+interface UseGroupBySlugParams {
+  slug?: string;
+  userId?: string;
+}
+
+async function fetchGroupBySlug(slug: string, userId: string): Promise<Group> {
+  // First, try to find the group where user is a member
+  const { data: membership, error: membershipError } = await supabase
+    .from("group_members")
+    .select(
+      `
+      group_id,
+      groups!inner (
+        id,
+        name,
+        slug,
+        description,
+        created_by,
+        archived,
+        created_at,
+        updated_at
+      )
+    `,
+    )
+    .eq("user_id", userId)
+    .eq("groups.slug", slug)
+    .eq("groups.archived", false)
+    .single();
+
+  if (!membershipError && membership) {
+    return membership.groups as Group;
+  }
+
+  // If not found as a member, check if user is the creator
+  const { data, error } = await supabase
+    .from("groups")
+    .select("*")
+    .eq("slug", slug)
+    .eq("created_by", userId)
+    .eq("archived", false)
+    .single();
+
+  if (error) {
+    throw new Error("Group not found or you don't have access");
+  }
+
+  return data;
+}
+
+export function useGroupBySlugQuery({ slug, userId }: UseGroupBySlugParams) {
+  return useQuery({
+    queryKey: groupBySlugKeys.detail(slug!, userId!),
+    queryFn: () => fetchGroupBySlug(slug!, userId!),
+    enabled: !!slug && !!userId,
+  });
+}

src/hooks/queries/stages/useCreateStage.ts

@@ -2,14 +2,18 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useToast } from "@/hooks/use-toast";
 import { supabase } from "@/integrations/supabase/client";
 import { stagesKeys } from "./types";
+import { generateSlug } from "@/lib/slug";
 
 async function createStage(stageData: {
   name: string;
   festival_edition_id: string;
 }) {
   const { data, error } = await supabase
     .from("stages")
-    .insert(stageData)
+    .insert({
+      ...stageData,
+      slug: generateSlug(stageData.name),
+    })
     .select()
     .single();
 

src/integrations/supabase/types.ts

@@ -392,6 +392,7 @@ export type Database = {
           description: string | null;
           id: string;
           name: string;
+          slug: string;
           updated_at: string;
         };
         Insert: {
@@ -401,6 +402,7 @@ export type Database = {
           description?: string | null;
           id?: string;
           name: string;
+          slug: string;
           updated_at?: string;
         };
         Update: {
@@ -410,6 +412,7 @@ export type Database = {
           description?: string | null;
           id?: string;
           name?: string;
+          slug?: string;
           updated_at?: string;
         };
         Relationships: [];
@@ -565,6 +568,7 @@ export type Database = {
           festival_edition_id: string;
           id: string;
           name: string;
+          slug: string;
           updated_at: string;
         };
         Insert: {
@@ -573,6 +577,7 @@ export type Database = {
           festival_edition_id: string;
           id?: string;
           name: string;
+          slug: string;
           updated_at?: string;
         };
         Update: {
@@ -581,6 +586,7 @@ export type Database = {
           festival_edition_id?: string;
           id?: string;
           name?: string;
+          slug?: string;
           updated_at?: string;
         };
         Relationships: [];

src/pages/admin/festivals/AdminFestivals.tsx

@@ -12,15 +12,15 @@ export default function AdminFestivals() {
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
 
   const navigate = useNavigate();
-  const { festivalId = "" } = useParams<{
-    festivalId?: string;
+  const { festivalSlug = "" } = useParams<{
+    festivalSlug?: string;
   }>();
 
-  function handleFestivalChange(festivalId: string) {
-    if (festivalId === "none") {
+  function handleFestivalChange(festivalSlug: string) {
+    if (festivalSlug === "none") {
       navigate("/admin/festivals");
     } else {
-      navigate(`/admin/festivals/${festivalId}`);
+      navigate(`/admin/festivals/${festivalSlug}`);
     }
   }
 
@@ -50,9 +50,9 @@ export default function AdminFestivals() {
               setIsEditDialogOpen(true);
             }}
             onSelect={(festival) => {
-              handleFestivalChange(festival.id);
+              handleFestivalChange(festival.slug);
             }}
-            selected={festivalId}
+            selected={festivalSlug}
           />
         </CardContent>
       </Card>

src/pages/admin/festivals/FestivalDetail.tsx

@@ -1,21 +1,21 @@
 import { useParams, useNavigate, Outlet } from "react-router-dom";
 import { FestivalEditionManagement } from "./FestivalEditionManagement";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { useFestivalQuery } from "@/hooks/queries/festivals/useFestival";
+import { useFestivalBySlugQuery } from "@/hooks/queries/festivals/useFestivalBySlug";
 import { Loader2 } from "lucide-react";
 
 export default function FestivalDetail() {
-  const { festivalId, editionId = "" } = useParams<{
-    festivalId: string;
-    editionId?: string;
+  const { festivalSlug, editionSlug = "" } = useParams<{
+    festivalSlug: string;
+    editionSlug?: string;
   }>();
   // const [selectedEditionId, setSelectedEditionId] = useState("");
   const navigate = useNavigate();
 
-  const festivalQuery = useFestivalQuery(festivalId);
+  const festivalQuery = useFestivalBySlugQuery(festivalSlug);
 
-  if (!festivalId) {
-    return <div>festivalId param is missing</div>;
+  if (!festivalSlug) {
+    return <div>festivalSlug param is missing</div>;
   }
 
   if (festivalQuery.isLoading) {
@@ -39,8 +39,8 @@ export default function FestivalDetail() {
     );
   }
 
-  function handleEditionSelect(editionId: string) {
-    navigate(`/admin/festivals/${festivalId}/editions/${editionId}/stages`);
+  function handleEditionSelect(editionSlug: string) {
+    navigate(`/admin/festivals/${festivalSlug}/editions/${editionSlug}/stages`);
   }
 
   const festival = festivalQuery.data;
@@ -58,11 +58,11 @@ export default function FestivalDetail() {
 
         <div className="mt-6">
           <FestivalEditionManagement
-            festivalId={festivalId}
-            onSelect={(editionId) => {
-              handleEditionSelect(editionId);
+            festivalSlug={festivalSlug}
+            onSelect={(editionSlug) => {
+              handleEditionSelect(editionSlug);
             }}
-            selected={editionId}
+            selected={editionSlug}
           />
         </div>
       </>

src/pages/admin/festivals/FestivalEdition.tsx

@@ -3,39 +3,40 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Loader2, MapPin, Music } from "lucide-react";
 import { useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { useFestivalEditionsForFestivalQuery } from "@/hooks/queries/festivals/editions/useFestivalEditionsForFestival";
+import { useFestivalEditionBySlugQuery } from "@/hooks/queries/festivals/editions/useFestivalEditionBySlug";
 
 export default function FestivalEdition() {
-  const { festivalId, editionId } = useParams<{
-    festivalId: string;
-    editionId: string;
+  const { festivalSlug, editionSlug } = useParams<{
+    festivalSlug: string;
+    editionSlug: string;
   }>();
   const location = useLocation();
   const navigate = useNavigate();
 
   // Redirect to stages if we're at the index route
   useEffect(() => {
     if (
-      festivalId &&
-      editionId &&
+      festivalSlug &&
+      editionSlug &&
       location.pathname ===
-        `/admin/festivals/${festivalId}/editions/${editionId}`
+        `/admin/festivals/${festivalSlug}/editions/${editionSlug}`
     ) {
-      navigate(`/admin/festivals/${festivalId}/editions/${editionId}/stages`);
+      navigate(
+        `/admin/festivals/${festivalSlug}/editions/${editionSlug}/stages`,
+      );
     }
-  }, [location.pathname, festivalId, editionId, navigate]);
+  }, [location.pathname, festivalSlug, editionSlug, navigate]);
 
-  const editionsQuery = useFestivalEditionsForFestivalQuery(festivalId);
+  const editionQuery = useFestivalEditionBySlugQuery({
+    festivalSlug,
+    editionSlug,
+  });
 
-  if (!festivalId || !editionId) {
+  if (!festivalSlug || !editionSlug) {
     return <div>Festival or edition not found</div>;
   }
 
-  if (editionsQuery.isLoading) {
-    return <Card>Loading edition data</Card>;
-  }
-
-  if (editionsQuery.isLoading) {
+  if (editionQuery.isLoading) {
     return (
       <Card>
         <CardContent className="flex items-center justify-center p-8">
@@ -46,7 +47,7 @@ export default function FestivalEdition() {
     );
   }
 
-  const currentEdition = editionsQuery.data?.find((f) => f.id === editionId);
+  const currentEdition = editionQuery.data;
 
   if (!currentEdition) {
     return (
@@ -68,7 +69,9 @@ export default function FestivalEdition() {
   const currentSubTab = getCurrentSubTab();
 
   function handleSubTabChange(value: string) {
-    navigate(`/admin/festivals/${festivalId}/editions/${editionId}/${value}`);
+    navigate(
+      `/admin/festivals/${festivalSlug}/editions/${editionSlug}/${value}`,
+    );
   }
 
   return (
@@ -105,7 +108,7 @@ export default function FestivalEdition() {
         </TabsList>
 
         <div className="mt-6">
-          <Outlet />
+          <Outlet context={{ edition: currentEdition }} />
         </div>
       </Tabs>
     </div>