Function GroupsDialog

components/groups-form.tsx:38–200

({ isOpen, onClose, userId, onGroupsChange }: GroupsDialogProps)

}

export function GroupsDialog({ isOpen, onClose, userId, onGroupsChange }: GroupsDialogProps) {
  const [groups, setGroups] = useState<Group[]>([])
  const supabase = createClient()
  const router = useRouter()
  const [newGroupId, setNewGroupId] = useState<string | null>(null)
  const [hasChanges, setHasChanges] = useState(false)
  const [openColorPicker, setOpenColorPicker] = useState<string | null>(null)

  const saveGroups = useCallback(async (groupsToSave: Group[]) => {
    const { error } = await supabase.from("groups").upsert(groupsToSave)
    if (error) {
      clientLogger.error('Error updating groups', { error })
    } else {
      setHasChanges(true)
      router.refresh()
    }
  }, [supabase, router])

  const debouncedSave = useCallback(debounce(saveGroups, 500), [saveGroups])

  useEffect(() => {
    return () => {
      debouncedSave.cancel()
    }
  }, [debouncedSave])

  useEffect(() => {
    fetchGroups()
  }, [])

  const fetchGroups = async () => {
    const { data, error } = await supabase
      .from("groups")
      .select("*")
      .eq("created_by", userId)

    if (error) {
      clientLogger.error('Error fetching groups', { error })
      toast({ variant: "destructive", description: "Failed to fetch groups" })
    } else {
      setGroups(data || [])
    }
  }

  const handleGroupChange = (
    index: number,
    field: keyof Group,
    value: string
  ) => {
    const newGroups = [...groups]
    newGroups[index] = { ...newGroups[index], [field]: value }
    setGroups(newGroups)
    debouncedSave(newGroups)
  }

  const handleRemoveGroup = async (id: string) => {
    const { error } = await supabase.from("groups").delete().eq("id", id)