Changeset View
Changeset View
Standalone View
Standalone View
web/sidebar/community-drawer-item-handlers.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { useDispatch } from 'react-redux'; | |||||
import type { ThreadInfo } from 'lib/types/thread-types.js'; | import type { ThreadInfo } from 'lib/types/thread-types.js'; | ||||
import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react.js'; | import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react.js'; | ||||
import { updateCalendarCommunityFilter } from '../redux/action-types.js'; | |||||
import { useCommunityIsPickedCalendar } from '../selectors/calendar-selectors.js'; | import { useCommunityIsPickedCalendar } from '../selectors/calendar-selectors.js'; | ||||
import { | import { | ||||
useOnClickThread, | useOnClickThread, | ||||
useThreadIsActive, | useThreadIsActive, | ||||
} from '../selectors/thread-selectors.js'; | } from '../selectors/thread-selectors.js'; | ||||
import type { NavigationTab } from '../types/nav-types.js'; | import type { NavigationTab } from '../types/nav-types.js'; | ||||
export type HandlerProps = { | export type HandlerProps = { | ||||
+setHandler: (handler: CommunityDrawerItemHandler) => void, | +setHandler: (handler: CommunityDrawerItemHandler) => void, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
}; | }; | ||||
function ChatDrawerItemHandler(props: HandlerProps): React.Node { | function ChatDrawerItemHandler(props: HandlerProps): React.Node { | ||||
const { setHandler, threadInfo } = props; | const { setHandler, threadInfo } = props; | ||||
const onClick = useOnClickThread(threadInfo); | const onClick = useOnClickThread(threadInfo); | ||||
const isActive = useThreadIsActive(threadInfo.id); | const isActive = useThreadIsActive(threadInfo.id); | ||||
const [expanded, setExpanded] = React.useState(false); | |||||
const toggleExpanded = React.useCallback(() => { | |||||
setExpanded(isExpanded => !isExpanded); | |||||
}, []); | |||||
const handler = React.useMemo( | const handler = React.useMemo( | ||||
() => ({ onClick, isActive }), | () => ({ onClick, isActive, expanded, toggleExpanded }), | ||||
[isActive, onClick], | [expanded, isActive, onClick, toggleExpanded], | ||||
); | ); | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
setHandler(handler); | setHandler(handler); | ||||
}, [handler, setHandler]); | }, [handler, setHandler]); | ||||
return null; | return null; | ||||
} | } | ||||
function CalendarDrawerItemHandler(props: HandlerProps): React.Node { | function CalendarDrawerItemHandler(props: HandlerProps): React.Node { | ||||
const { setHandler, threadInfo } = props; | const { setHandler, threadInfo } = props; | ||||
const dispatch = useDispatch(); | |||||
const onClick = React.useCallback(() => { | const onClick = () => {}; | ||||
dispatch({ | const expanded = false; | ||||
type: updateCalendarCommunityFilter, | const toggleExpanded = () => {}; | ||||
tomek: You can define things that don't depend on props outside the component so that renders don't… | |||||
payload: threadInfo.id, | |||||
}); | |||||
}, [dispatch, threadInfo.id]); | |||||
const isActive = useCommunityIsPickedCalendar(threadInfo.id); | const isActive = useCommunityIsPickedCalendar(threadInfo.id); | ||||
const handler = React.useMemo( | const handler = React.useMemo( | ||||
() => ({ onClick, isActive }), | () => ({ onClick, isActive, expanded, toggleExpanded }), | ||||
[onClick, isActive], | [isActive, expanded], | ||||
); | ); | ||||
React.useEffect(() => { | React.useEffect(() => { | ||||
setHandler(handler); | setHandler(handler); | ||||
}, [handler, setHandler]); | }, [handler, setHandler]); | ||||
return null; | return null; | ||||
} | } | ||||
Show All 14 Lines |
You can define things that don't depend on props outside the component so that renders don't recreate them.