55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { useSearchParams } from 'react-router-dom'
|
|
import { useCallback, useMemo } from 'react'
|
|
|
|
import {
|
|
EmployeesTabs,
|
|
type EmployeesSection,
|
|
} from './components/EmployeesTabs/EmployeesTabs'
|
|
import { UsersSection } from './components/UsersSection/UsersSection'
|
|
import { OrganisationsSection } from './components/OrganisationsSection/OrganisationsSection'
|
|
|
|
import './EmployeesPage.scss'
|
|
|
|
export function EmployeesPage() {
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
|
|
const activeSection = useMemo<EmployeesSection>(() => {
|
|
return searchParams.get('section') === 'organisations'
|
|
? 'organisations'
|
|
: 'users'
|
|
}, [searchParams])
|
|
|
|
const handleSectionChange = useCallback((section: EmployeesSection) => {
|
|
if (activeSection === section) return
|
|
|
|
setSearchParams(
|
|
(prev) => {
|
|
const next = new URLSearchParams(prev)
|
|
next.set('section', section)
|
|
|
|
return next
|
|
},
|
|
{
|
|
replace: true,
|
|
},
|
|
)
|
|
}, [activeSection, setSearchParams])
|
|
|
|
return (
|
|
<section className="employees-page">
|
|
<EmployeesTabs
|
|
activeSection={activeSection}
|
|
onChange={handleSectionChange}
|
|
/>
|
|
|
|
<div className="employees-page__section">
|
|
{activeSection === 'users' ? (
|
|
<UsersSection />
|
|
) : (
|
|
<OrganisationsSection />
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|