OrgProjectSelector() — supabase Function Reference

Source Code

apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx lines 92–214

function OrgProjectSelector() {
  const isUserLoading = useIsUserLoading()
  const isLoggedIn = useIsLoggedIn()

  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  const { selectedOrg, selectedProject, setSelectedOrgProject } = useSnapshot(projectsStore)

  const {
    data: organizations,
    isPending: organizationsIsPending,
    isError: organizationsIsError,
  } = useOrganizationsQuery({ enabled: isLoggedIn })

  const {
    data: projectsData,
    isPending: projectsIsPending,
    isError: projectsIsError,
    isFetching,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
  } = useProjectsInfiniteQuery(
    { search: search.length === 0 ? search : debouncedSearch },
    { enabled: isLoggedIn }
  )
  const projects =
    useMemo(() => projectsData?.pages.flatMap((page) => page.projects), [projectsData?.pages]) || []

  const anyIsPending = organizationsIsPending || projectsIsPending
  const anyIsError = organizationsIsError || projectsIsError

  const stateSummary: ProjectOrgDataState = isUserLoading
    ? 'userLoading'
    : !isLoggedIn
      ? 'loggedOut'
      : anyIsPending
        ? 'loggedIn.dataPending'
        : anyIsError
          ? 'loggedIn.dataError'
          : projects?.length === 0
            ? 'loggedIn.dataSuccess.hasNoData'
            : 'loggedIn.dataSuccess.hasData'

  const formattedData: ComboBoxOption[] = useMemo(
    () =>
      stateSummary !== 'loggedIn.dataSuccess.hasData'
        ? []
        : (projects!
            .map((project) => {
              const organization = organizations!.find((org) => org.id === project.organization_id)!
              return {
                id: project.ref,
                value: toOrgProjectValue(organization, project),
                displayName: toDisplayNameOrgProject(organization, project),
              }
            })
            .filter(Boolean) as ComboBoxOption[]),
    [organizations, projects, stateSummary]
  )

  useEffect(() => {
    if (stateSummary === 'loggedIn.dataSuccess.hasData' && (!selectedOrg || !selectedProject)) {
      const storedMaybeOrgId = retrieve('local', LOCAL_STORAGE_KEYS.SAVED_ORG)
      const storedMaybeProjectRef = retrieve('local', LOCAL_STORAGE_KEYS.SAVED_PROJECT)

      let storedOrg: Org | undefined
      let storedProject: ProjectInfoInfinite | undefined
      if (storedMaybeOrgId && storedMaybeProjectRef) {
        storedOrg = organizations!.find((org) => org.id === Number(storedMaybeOrgId))
        storedProject = projects!.find((project) => project.ref === storedMaybeProjectRef)
      }

      if (storedOrg && storedProject && storedProject.organization_id === storedOrg.id) {
        setSelectedOrgProject(storedOrg, storedProject)
      } else if (projects!.length > 0) {
        const firstProject = projects![0]
        const matchingOrg = organizations!.find((org) => org.id === firstProject.organization_id)
        if (matchingOrg) setSelectedOrgProject(matchingOrg, firstProject)
      }
    }
  }, [organizations, projects, selectedOrg, selectedProject, setSelectedOrgProject, stateSummary])

  return (
    <ComboBox
      name="project"
      isLoading={stateSummary === 'userLoading' || stateSummary === 'loggedIn.dataPending'}
      disabled={
        stateSummary === 'loggedOut' ||
        stateSummary === 'loggedIn.dataError' ||
        stateSummary === 'loggedIn.dataSuccess.hasNoData'
      }
      options={formattedData}
      selectedDisplayName={
        selectedOrg && selectedProject
          ? toDisplayNameOrgProject(selectedOrg, selectedProject)
          : undefined
      }
      selectedOption={
        selectedOrg && selectedProject ? toOrgProjectValue(selectedOrg, selectedProject) : undefined
      }
      onSelectOption={(optionValue) => {
        const [orgId, projectRef] = fromOrgProjectValue(optionValue)
        if (!orgId || !projectRef) return

        const org = organizations?.find((org) => org.id === orgId)
        const project = projects?.find((project) => project.ref === projectRef)

        if (org && project && project.organization_id === org.id) {
          setSelectedOrgProject(org, project)
        }
      }}
      search={search}
      isFetching={isFetching}
      isFetchingNextPage={isFetchingNextPage}
      hasNextPage={hasNextPage}
      fetchNextPage={fetchNextPage}
      setSearch={setSearch}
      useCommandSearch={false}
    />
  )
}