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 { useMemberGroupsSubscription } 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, TrendingGroupsSection } 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 = useMemberGroupsSubscription(user) const { sections } = getHomeItems(groups, homeSections) return ( <DoneButton /> </Row> <Col className="gap-8 md:flex-row"> <Col className="flex-1"> <ArrangeHome sections={sections} setSectionIds={updateHomeSections} /> </Col> <TrendingGroupsSection className="flex-1" user={user} full /> </Col> </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> ) }