Page MenuHomePhabricator
Differential D6363 Diff 22118 web/sidebar/community-drawer.react.js

Changeset View

Standalone View

View Options

web/sidebar/community-drawer.react.js

Show All 15 Lines
import { ThreadListProvider } from '../chat/thread-list-provider'; import { ThreadListProvider } from '../chat/thread-list-provider';
import CommunityDrawerItemCommunity from './community-drawer-item-community.react'; import CommunityDrawerItemCommunity from './community-drawer-item-community.react';
import css from './community-drawer.css'; import css from './community-drawer.css';
const maxDepth = 2; const maxDepth = 2;
const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];
function CommunityDrawer(): React.Node { function CommunityDrawer(): React.Node {
const tab = useSelector(state => state.navInfo.tab);
const childThreadInfosMap = useSelector(childThreadInfos); const childThreadInfosMap = useSelector(childThreadInfos);
const communities = useSelector(communityThreadSelector); const communities = useSelector(communityThreadSelector);
const resolvedCommunities = useResolvedThreadInfos(communities); const resolvedCommunities = useResolvedThreadInfos(communities);
const communitiesSuffixed = React.useMemo( const communitiesSuffixed = React.useMemo(
() => appendSuffix(resolvedCommunities), () => appendSuffix(resolvedCommunities),
[resolvedCommunities], [resolvedCommunities],
); );
const drawerItemsData = createRecursiveDrawerItemsData( const drawerItemsData = createRecursiveDrawerItemsData(
childThreadInfosMap, childThreadInfosMap,
communitiesSuffixed, communitiesSuffixed,
labelStyles, labelStyles,
maxDepth, maxDepth,
); );
const [openCommunity, setOpenCommunity] = React.useState( const [openCommunity, setOpenCommunity] = React.useState(
communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null, communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
); );
const setOpenCommunityOrClose = React.useCallback((communityID: string) => { const setOpenCommunityOrClose = React.useCallback((index: string) => {
setOpenCommunity(open => (open === communityID ? null : communityID)); setOpenCommunity(open => (open === index ? null : index));
}, []); }, []);
const communitiesComponents = drawerItemsData.map(item => ( const communitiesComponentsDefault = React.useMemo(
() =>
drawerItemsData.map(item => (
<CommunityDrawerItemCommunity <CommunityDrawerItemCommunity
itemData={item} itemData={item}
key={item.threadInfo.id} key={`${item.threadInfo.id}_chat`}
toggleExpanded={setOpenCommunityOrClose} toggleExpanded={setOpenCommunityOrClose}
expanded={item.threadInfo.id === openCommunity} expanded={item.threadInfo.id === openCommunity}
paddingLeft={10} paddingLeft={10}
expandable={true}
/> />
)); )),
[drawerItemsData, openCommunity, setOpenCommunityOrClose],
);
const communitiesComponentsCal = React.useMemo(
() =>
drawerItemsData.map(item => (
<CommunityDrawerItemCommunity
itemData={item}
key={`${item.threadInfo.id}_cal`}
toggleExpanded={() => {}}
tomekUnsubmitted
Not Done
Inline Actions

Can we make this an optional prop and don't provide it here instead of using an empty function?

tomek: Can we make this an optional prop and don't provide it here instead of using an empty function?
expanded={false}
paddingLeft={10}
expandable={false}
/>
)),
[drawerItemsData],
);
const defaultStyle = React.useMemo(
() => (tab === 'calendar' ? { display: 'none' } : null),
[tab],
);
const calStyle = React.useMemo(
() => (tab !== 'calendar' ? { display: 'none' } : null),
[tab],
);
tomekUnsubmitted
Not Done
Inline Actions
[drawerItemsData],
);
- const defaultStyle = React.useMemo(
- () => (tab === 'calendar' ? { display: 'none' } : null),
- [tab],
- );
- const calStyle = React.useMemo(
- () => (tab !== 'calendar' ? { display: 'none' } : null),
- [tab],
- );
+ const defaultStyle = tab === 'calendar' ? css.hidden : null;
+ const calStyle = tab !== 'calendar' ? css.hidden : null;
return (

You can create a class e.g. .hidden and use it conditionally.

tomek: You can create a class e.g. `.hidden` and use it conditionally.
return ( return (
<ThreadListProvider> <ThreadListProvider>
<div className={css.container}>{communitiesComponents}</div> <div className={css.container}>
<div style={defaultStyle}>{communitiesComponentsDefault}</div>
<div style={calStyle}>{communitiesComponentsCal}</div>
</div>
</ThreadListProvider> </ThreadListProvider>
); );
} }
export default CommunityDrawer; export default CommunityDrawer;