diff --git a/web/sidebar/community-drawer-item-handler.react.js b/web/sidebar/community-drawer-item-handler.react.js --- a/web/sidebar/community-drawer-item-handler.react.js +++ b/web/sidebar/community-drawer-item-handler.react.js @@ -2,6 +2,8 @@ export type CommunityDrawerItemHandler = { +onClick: (event: SyntheticEvent) => void, + +expanded: boolean, + +toggleExpanded: () => void, +isActive: boolean, }; diff --git a/web/sidebar/community-drawer-item-handlers.react.js b/web/sidebar/community-drawer-item-handlers.react.js --- a/web/sidebar/community-drawer-item-handlers.react.js +++ b/web/sidebar/community-drawer-item-handlers.react.js @@ -1,9 +1,7 @@ // @flow import * as React from 'react'; -import { useDispatch } from 'react-redux'; -import { updateCalendarCommunityFilter } from 'lib/actions/community-actions.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react.js'; @@ -24,9 +22,14 @@ const onClick = useOnClickThread(threadInfo); const isActive = useThreadIsActive(threadInfo.id); + const [expanded, setExpanded] = React.useState(false); + const toggleExpanded = React.useCallback(() => { + setExpanded(isExpanded => !isExpanded); + }, []); + const handler = React.useMemo( - () => ({ onClick, isActive }), - [isActive, onClick], + () => ({ onClick, isActive, expanded, toggleExpanded }), + [expanded, isActive, onClick, toggleExpanded], ); React.useEffect(() => { setHandler(handler); @@ -35,21 +38,18 @@ return null; } +const onClick = () => {}; +const expanded = false; +const toggleExpanded = () => {}; + function CalendarDrawerItemHandler(props: HandlerProps): React.Node { const { setHandler, threadInfo } = props; - const dispatch = useDispatch(); - - const onClick = React.useCallback(() => { - dispatch({ - type: updateCalendarCommunityFilter, - payload: threadInfo.id, - }); - }, [dispatch, threadInfo.id]); + const isActive = useCommunityIsPickedCalendar(threadInfo.id); const handler = React.useMemo( - () => ({ onClick, isActive }), - [onClick, isActive], + () => ({ onClick, isActive, expanded, toggleExpanded }), + [isActive], ); React.useEffect(() => { setHandler(handler);