import React from 'react'

import { Outlet, useParams } from 'react-router-dom'

import { useCurOrg, useQueryOrg } from '~/hooks/state'

import AppLayout from './AppLayout'
import OrgNavBar from './OrgNavBar'

// Make sure the pages inside the OrgGuard have curOrg value
// Currently match /orgs/:orgId/clusters and /orgs/:orgId/settings routes
// Not match /orgs/:orgId/clusters/:cid routes
const OrgGuard: React.FC = () => {
  const { orgId } = useParams<'orgId'>()
  useQueryOrg(orgId || '')
  const { curOrg } = useCurOrg()

  return (
    <AppLayout contentLoading={!curOrg} navbar={<OrgNavBar />}>
      <Outlet />
    </AppLayout>
  )
}

export default OrgGuard