Page MenuHomePhabricator
Differential D6287 Diff 21020 web/sidebar/community-drawer-item-handlers.react.js

Changeset View

Standalone View

View Options

web/sidebar/community-drawer-item-handlers.react.js

  • This file was added.
// @flow
import * as React from 'react';
import { useDispatch } from 'react-redux';
import {
updateCalendarThreadFilter,
calendarThreadFilterTypes,
} from 'lib/types/filter-types';
import type { ThreadInfo } from 'lib/types/thread-types';
import { useOnClickThread } from '../selectors/thread-selectors';
import type { CommunityDrawerItemHandlerSpec } from './community-drawer-item-spec.react';
type HandlerProps = {
+setHandler: (handler: CommunityDrawerItemHandlerSpec) => void,
+threadInfo: ThreadInfo,
};
function ChatDrawerItemHandler(props: HandlerProps): React.Node {
const { setHandler, threadInfo } = props;
const onClick = useOnClickThread(threadInfo);
const handler = React.useMemo(() => ({ onClick }), [onClick]);
React.useEffect(() => {
setHandler(handler);
}, [handler, onClick, setHandler]);
tomekUnsubmitted
Not Done
Inline Actions
setHandler(handler);
- }, [handler, onClick, setHandler]);
+ }, [handler, setHandler]);
return null;

We don't need to specify the transitive dependencies

tomek: We don't need to specify the transitive dependencies
return null;
}
function CalendarDrawerItemHandler(props: HandlerProps): React.Node {
const { setHandler, threadInfo } = props;
const dispatch = useDispatch();
const onClick = React.useCallback(
() =>
dispatch({
type: updateCalendarThreadFilter,
payload: {
type: calendarThreadFilterTypes.THREAD_LIST,
threadIDs: [threadInfo.id],
},
}),
[dispatch, threadInfo.id],
);
inkaAuthorUnsubmitted
Done
Inline Actions

Based on what happens when we press "only" in calendar filters next to a chat item: source code

inka: Based on what happens when we press "only" in calendar filters next to a chat item: [[ https…
const handler = React.useMemo(() => ({ onClick }), [onClick]);
React.useEffect(() => {
setHandler(handler);
}, [dispatch, handler, onClick, setHandler, threadInfo.id]);
tomekUnsubmitted
Not Done
Inline Actions
setHandler(handler);
- }, [dispatch, handler, onClick, setHandler, threadInfo.id]);
+ }, [handler, setHandler]);
return null;

We don't need to specify the transitive dependencies

tomek: We don't need to specify the transitive dependencies
return null;
}
const communityDrawerItemHandlers: {
[tab: string]: React.ComponentType<HandlerProps>,
ashoatUnsubmitted
Not Done
Inline Actions
const communityDrawerItemHandlers: {
- [tab: string]: React.ComponentType<HandlerProps>,
+ +[tab: string]: React.ComponentType<HandlerProps>,
} = Object.freeze({

This syntax can be $ReadOnly too

ashoat: This syntax can be `$ReadOnly` too
tomekUnsubmitted
Not Done
Inline Actions

Can we limit the available keys by using NavigationTab from nav-types?

tomek: Can we limit the available keys by using `NavigationTab` from `nav-types`?
} = Object.freeze({
default: ChatDrawerItemHandler,
chat: ChatDrawerItemHandler,
calendar: CalendarDrawerItemHandler,
});
function getCommunityDrawerItemHandler(
tab: string,
): React.ComponentType<HandlerProps> {
return (
communityDrawerItemHandlers[tab] ?? communityDrawerItemHandlers['default']
);
}
tomekUnsubmitted
Not Done
Inline Actions
return null;
}
const communityDrawerItemHandlers: {
[tab: string]: React.ComponentType<HandlerProps>,
} = Object.freeze({
- default: ChatDrawerItemHandler,
chat: ChatDrawerItemHandler,
calendar: CalendarDrawerItemHandler,
});
function getCommunityDrawerItemHandler(
tab: string,
): React.ComponentType<HandlerProps> {
return (
- communityDrawerItemHandlers[tab] ?? communityDrawerItemHandlers['default']
+ communityDrawerItemHandlers[tab] ?? ChatDrawerItemHandler
);
}
export { getCommunityDrawerItemHandler };

Seems a little risky to include default as a key. It is unlikely, but if we introduce an app with default as a name, it could cause some issues.

tomek: Seems a little risky to include `default` as a key. It is unlikely, but if we introduce an app…
export { getCommunityDrawerItemHandler };