Page MenuHomePhabricator
Files F3525572

D6976.id26808.diff
No OneTemporary
Actions

D6976.id26808.diff
View Options

diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -5,6 +5,7 @@
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+import { getCommunityDrawerItemCommunityHandler } from './community-drawer-item-community-handlers.react.js';
import css from './community-drawer-item.css';
import type { DrawerItemProps } from './community-drawer-item.react.js';
import {
@@ -16,32 +17,39 @@
function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
const {
itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
- expanded,
- toggleExpanded,
paddingLeft,
expandable = true,
- handler: Handler,
+ handlerType,
} = props;
+ const Handler = getCommunityDrawerItemCommunityHandler(handlerType);
+
+ const [handler, setHandler] = React.useState({
+ onClick: () => {},
+ isActive: false,
+ expanded: false,
+ toggleExpanded: () => {},
+ });
+
const children = React.useMemo(
() =>
getChildren({
- expanded,
+ expanded: handler.expanded,
hasSubchannelsButton,
itemChildren,
paddingLeft,
threadInfo,
expandable,
- handler: Handler,
+ handlerType,
}),
[
- expanded,
+ handler.expanded,
hasSubchannelsButton,
itemChildren,
paddingLeft,
threadInfo,
expandable,
- Handler,
+ handlerType,
],
);
@@ -51,28 +59,15 @@
expandable,
childrenLength: itemChildren?.length,
hasSubchannelsButton,
- expanded,
+ onExpandToggled: null,
+ expanded: handler.expanded,
}),
- [expandable, itemChildren?.length, hasSubchannelsButton, expanded],
- );
-
- const [handler, setHandler] = React.useState({
- // eslint-disable-next-line no-unused-vars
- onClick: event => {},
- isActive: false,
- });
-
- const onClick = React.useCallback(
- (event: SyntheticEvent<HTMLElement>) => {
- toggleExpanded?.(threadInfo.id);
- handler.onClick(event);
- },
- [threadInfo.id, toggleExpanded, handler],
+ [expandable, itemChildren?.length, hasSubchannelsButton, handler.expanded],
);
const classes = classnames({
[css.communityBase]: true,
- [css.communityExpanded]: props.expanded,
+ [css.communityExpanded]: handler.expanded,
});
const { uiName } = useResolvedThreadInfo(threadInfo);
@@ -86,7 +81,7 @@
return (
<div className={classes}>
<Handler setHandler={setHandler} threadInfo={threadInfo} />
- <a onClick={onClick} className={css.threadEntry} style={style}>
+ <a onClick={handler.onClick} className={css.threadEntry} style={style}>
{itemExpandButton}
<div className={css.titleWrapper}>
<ThreadAvatar size="micro" threadInfo={threadInfo} />
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -7,83 +7,80 @@
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import type { HandlerProps } from './community-drawer-item-handlers.react.js';
+import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
import css from './community-drawer-item.css';
import {
getChildren,
getExpandButton,
} from './community-drawer-utils.react.js';
import ThreadAvatar from '../components/thread-avatar.react.js';
+import type { NavigationTab } from '../types/nav-types.js';
import { shouldRenderAvatars } from '../utils/avatar-utils.js';
export type DrawerItemProps = {
+itemData: CommunityDrawerItemData<string>,
- +toggleExpanded?: (threadID: string) => void,
- +expanded: boolean,
+paddingLeft: number,
+expandable?: boolean,
- +handler: React.ComponentType<HandlerProps>,
+ +handlerType: NavigationTab,
};
function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {
itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
- expanded,
- toggleExpanded,
paddingLeft,
expandable = true,
- handler: Handler,
+ handlerType,
} = props;
+ const [handler, setHandler] = React.useState({
+ // eslint-disable-next-line no-unused-vars
+ onClick: event => {},
+ expanded: false,
+ toggleExpanded: () => {},
+ });
+
+ const Handler = getCommunityDrawerItemHandler(handlerType);
+
const children = React.useMemo(
() =>
getChildren({
- expanded,
+ expanded: handler.expanded,
hasSubchannelsButton,
itemChildren,
paddingLeft,
threadInfo,
expandable,
- handler: Handler,
+ handlerType,
}),
[
- expanded,
+ handler.expanded,
hasSubchannelsButton,
itemChildren,
paddingLeft,
threadInfo,
expandable,
- Handler,
+ handlerType,
],
);
- const onExpandToggled = React.useCallback(
- () => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
- [toggleExpanded, threadInfo.id],
- );
-
const itemExpandButton = React.useMemo(
() =>
getExpandButton({
expandable,
childrenLength: itemChildren.length,
hasSubchannelsButton,
- onExpandToggled,
- expanded,
+ onExpandToggled: handler.toggleExpanded,
+ expanded: handler.expanded,
}),
[
expandable,
itemChildren.length,
hasSubchannelsButton,
- onExpandToggled,
- expanded,
+ handler.toggleExpanded,
+ handler.expanded,
],
);
- const [handler, setHandler] = React.useState({
- // eslint-disable-next-line no-unused-vars
- onClick: event => {},
- });
-
const { uiName } = useResolvedThreadInfo(threadInfo);
const titleLabel = classnames({
@@ -128,28 +125,7 @@
+handler: React.ComponentType<HandlerProps>,
};
-function CommunityDrawerItemChat(
- props: CommunityDrawerItemChatProps,
-): React.Node {
- const [expanded, setExpanded] = React.useState(false);
-
- const toggleExpanded = React.useCallback(() => {
- setExpanded(isExpanded => !isExpanded);
- }, []);
-
- return (
- <MemoizedCommunityDrawerItem
- {...props}
- expanded={expanded}
- toggleExpanded={toggleExpanded}
- />
- );
-}
-
-const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> =
- React.memo(CommunityDrawerItemChat);
-
const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
React.memo(CommunityDrawerItem);
-export default MemoizedCommunityDrawerItemChat;
+export default MemoizedCommunityDrawerItem;
diff --git a/web/sidebar/community-drawer-utils.react.js b/web/sidebar/community-drawer-utils.react.js
--- a/web/sidebar/community-drawer-utils.react.js
+++ b/web/sidebar/community-drawer-utils.react.js
@@ -5,11 +5,11 @@
import type { ThreadInfo } from 'lib/types/thread-types';
import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
-import type { HandlerProps } from './community-drawer-item-handlers.react';
import css from './community-drawer-item.css';
import CommunityDrawerItemChat from './community-drawer-item.react.js';
import { ExpandButton } from './expand-buttons.react.js';
import SubchannelsButton from './subchannels-button.react.js';
+import type { NavigationTab } from '../types/nav-types.js';
const indentation = 14;
const subchannelsButtonIndentation = 24;
@@ -21,7 +21,7 @@
paddingLeft,
threadInfo,
expandable,
- handler,
+ handlerType,
}: {
expanded: boolean,
hasSubchannelsButton: boolean,
@@ -29,7 +29,7 @@
paddingLeft: number,
threadInfo: ThreadInfo,
expandable: boolean,
- handler: React.ComponentType<HandlerProps>,
+ handlerType: NavigationTab,
}): React.Node {
if (!expanded) {
return null;
@@ -51,7 +51,7 @@
key={item.threadInfo.id}
paddingLeft={paddingLeft + indentation}
expandable={expandable}
- handler={handler}
+ handlerType={handlerType}
/>
));
}
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -13,7 +13,6 @@
import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js';
-import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
import css from './community-drawer.css';
import { ThreadListProvider } from '../chat/thread-list-provider.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -21,9 +20,6 @@
const maxDepth = 2;
const labelStyles = ['title'];
-const HandlerChat = getCommunityDrawerItemHandler('chat');
-const HandlerCal = getCommunityDrawerItemHandler('calendar');
-
function CommunityDrawer(): React.Node {
const tab = useSelector(state => state.navInfo.tab);
const childThreadInfosMap = useSelector(childThreadInfos);
@@ -41,28 +37,18 @@
maxDepth,
);
- const [openCommunity, setOpenCommunity] = React.useState(
- communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
- );
-
- const setOpenCommunityOrClose = React.useCallback((index: string) => {
- setOpenCommunity(open => (open === index ? null : index));
- }, []);
-
const communitiesComponentsDefault = React.useMemo(
() =>
drawerItemsData.map(item => (
<CommunityDrawerItemCommunity
itemData={item}
key={`${item.threadInfo.id}_chat`}
- toggleExpanded={setOpenCommunityOrClose}
- expanded={item.threadInfo.id === openCommunity}
paddingLeft={10}
expandable={true}
- handler={HandlerChat}
+ handlerType="chat"
/>
)),
- [drawerItemsData, openCommunity, setOpenCommunityOrClose],
+ [drawerItemsData],
);
const communitiesComponentsCal = React.useMemo(
@@ -71,10 +57,9 @@
<CommunityDrawerItemCommunity
itemData={item}
key={`${item.threadInfo.id}_cal`}
- expanded={false}
paddingLeft={10}
expandable={false}
- handler={HandlerCal}
+ handlerType="calendar"
/>
)),
[drawerItemsData],

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 5:41 PM (9 h, 10 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700603
Default Alt Text
D6976.id26808.diff (10 KB)

Event Timeline