63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import clsx from 'clsx'
|
|
import { useState } from 'react'
|
|
import { ArrangeHome } from 'web/components/arrange-home'
|
|
import { Button } from 'web/components/button'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Page } from 'web/components/page'
|
|
import { SiteLink } from 'web/components/site-link'
|
|
import { Title } from 'web/components/title'
|
|
import { useMemberGroups } from 'web/hooks/use-group'
|
|
import { useTracking } from 'web/hooks/use-tracking'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { updateUser } from 'web/lib/firebase/users'
|
|
import { track } from 'web/lib/service/analytics'
|
|
import { getHomeItems } from '.'
|
|
|
|
export default function Home() {
|
|
const user = useUser()
|
|
|
|
useTracking('edit home')
|
|
|
|
const [homeSections, setHomeSections] = useState(user?.homeSections ?? [])
|
|
|
|
const updateHomeSections = (newHomeSections: string[]) => {
|
|
if (!user) return
|
|
updateUser(user.id, { homeSections: newHomeSections })
|
|
setHomeSections(newHomeSections)
|
|
}
|
|
|
|
const groups = useMemberGroups(user?.id) ?? []
|
|
const { sections } = getHomeItems(groups, homeSections)
|
|
|
|
return (
|
|
<Page>
|
|
<Col className="pm:mx-10 gap-4 px-4 pb-6 pt-2">
|
|
<Row className={'w-full items-center justify-between'}>
|
|
<Title text="Customize your home page" />
|
|
<DoneButton />
|
|
</Row>
|
|
|
|
<ArrangeHome sections={sections} setSectionIds={updateHomeSections} />
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
function DoneButton(props: { className?: string }) {
|
|
const { className } = props
|
|
|
|
return (
|
|
<SiteLink href="/home">
|
|
<Button
|
|
size="lg"
|
|
color="blue"
|
|
className={clsx(className, 'flex whitespace-nowrap')}
|
|
onClick={() => track('done editing home')}
|
|
>
|
|
Done
|
|
</Button>
|
|
</SiteLink>
|
|
)
|
|
}
|