import { useParams } from 'common' import { Plus, Search } from 'lucide-react' import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { Button, Skeleton } from 'ui' import { Admonition } from 'ui-patterns/admonition' import { Input } from 'ui-patterns/DataInputs/Input' import { NoOrganizationsState } from '@/components/interfaces/Home/ProjectList/EmptyStates' import { OrganizationCard } from '@/components/interfaces/Organization/OrganizationCard' import { AppLayout } from '@/components/layouts/AppLayout/AppLayout' import { DefaultLayout } from '@/components/layouts/DefaultLayout' import { PageLayout } from '@/components/layouts/PageLayout/PageLayout' import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold' import { AlertError } from '@/components/ui/AlertError' import { NoSearchResults } from '@/components/ui/NoSearchResults' import { useOrganizationsQuery } from '@/data/organizations/organizations-query' import { useCustomContent } from '@/hooks/custom-content/useCustomContent' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' import { withAuth } from '@/hooks/misc/withAuth' import { buildStudioPageTitle } from '@/lib/page-title' import type { NextPageWithLayout } from '@/types' const OrganizationsPage: NextPageWithLayout = () => { const router = useRouter() const { appTitle } = useCustomContent(['app:title']) const [search, setSearch] = useState('') const { error: orgNotFoundError, org: orgSlug } = useParams() const orgNotFound = orgNotFoundError === 'org_not_found' const pageTitle = buildStudioPageTitle({ section: 'Organizations', brand: appTitle || 'Briven', }) const { data: organizations = [], error, isPending: isLoading, isError, isSuccess, } = useOrganizationsQuery() const organizationCreationEnabled = useIsFeatureEnabled('organizations:create') const filteredOrganizations = search.length === 0 ? organizations : organizations?.filter( (x) => x.name.toLowerCase().includes(search) || x.slug.toLowerCase().includes(search) ) useEffect(() => { // If there are no organizations, force the user to create one // unless the user is on the not found page if (isSuccess && organizations.length <= 0 && !orgNotFound) { router.push('/new') } }, [isSuccess, organizations]) return ( <> {pageTitle} {orgNotFound && ( The organization {orgSlug} does not exist or you do not have permission to access to it. Contact the the owner if you believe this is a mistake. } /> )} {organizations.length > 0 && (
} className="w-full flex-1 md:w-64" value={search} onChange={(event) => setSearch(event.target.value)} /> {organizationCreationEnabled && ( )}
)} {isSuccess && organizations.length === 0 && !isError && } {search.length > 0 && filteredOrganizations.length === 0 && ( )}
{isLoading && ( <> )} {isError && } {isSuccess && filteredOrganizations.map((org) => ( ))}
) } OrganizationsPage.getLayout = (page) => ( {page} ) export default withAuth(OrganizationsPage)