Differential D6973 Diff 23486 web/sidebar/community-drawer-utils.react.js

Changeset View

Standalone View

web/sidebar/community-drawer-utils.react.js

This file was added.

				// @flow

				import * as React from 'react';

				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';

				const indentation = 14;
				const subchannelsButtonIndentation = 24;

				function getChildren(
				expanded: boolean,
				hasSubchannelsButton: boolean,
				itemChildren: ?$ReadOnlyArray<CommunityDrawerItemData<string>>,
				paddingLeft: number,
				threadInfo: ThreadInfo,
				expandable: boolean,
				Handler: React.ComponentType<HandlerProps>,
				ashoatUnsubmitted Not Done Inline Actions This would be good to be an object as well ashoat: This would be good to be an object as well
				ashoatUnsubmitted Not Done Inline Actions Typical pattern for React components being passed around as variables is to use the standard `lowercaseVariableName`, and then to do something like this where it's used in JSX: const ComponentName = componentName; return <ComponentName />; ashoat: Typical pattern for React components being passed around as variables is to use the standard…
				): React.Node {
				if (!expanded \|\| !itemChildren) {
				return null;
				}
				michalUnsubmitted Not Done Inline Actions Previously the check for `!itemChildren` was after the check for `hasSubchannelsButton`. Does this break anything? michal: Previously the check for `!itemChildren` was after the check for `hasSubchannelsButton`. Does…
				inkaAuthorUnsubmitted Done Inline Actions This condition actually wasn't used, because `!array` is not true when `array.length === 0`. But this is not a problem, because we just return an empty array that is handled in the same way as null. inka: This condition actually wasn't used, because `!array` is not true when `array.length === 0`.
				if (hasSubchannelsButton) {
				const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
				return (
				<div
				className={css.subchannelsButton}
				style={{ paddingLeft: buttonPaddingLeft }}
				>
				<SubchannelsButton threadInfo={threadInfo} />
				</div>
				);
				}
				return itemChildren.map(item => (
				<CommunityDrawerItemChat
				itemData={item}
				key={item.threadInfo.id}
				paddingLeft={paddingLeft + indentation}
				expandable={expandable}
				handler={Handler}
				/>
				));
				}

				function getExpandButton(
				expandable: boolean,
				childrenLength: ?number,
				hasSubchannelsButton: boolean,
				onExpandToggled: ?() => ?void,
				expanded: boolean,
				ashoatUnsubmitted Not Done Inline Actions This is a lot of params, and three of them are booleans. You should pass in a single object instead ashoat: This is a lot of params, and three of them are booleans. You should pass in a single object…
				): React.Node {
				if (!expandable) {
				return null;
				}
				if (childrenLength === 0 && !hasSubchannelsButton) {
				return (
				<div className={css.buttonContainer}>
				<ExpandButton disabled={true} />
				</div>
				);
				}
				if (!onExpandToggled) {
				return (
				<div className={css.buttonContainer}>
				<ExpandButton expanded={expanded} />
				</div>
				);
				}
				return (
				<div className={css.buttonContainer}>
				<ExpandButton onClick={onExpandToggled} expanded={expanded} />
				</div>
				);
				}
				tomekUnsubmitted Not Done Inline Actions You can consider making `onClick` nullable so that these two cases can become one. tomek: You can consider making `onClick` nullable so that these two cases can become one.

				export { getChildren, getExpandButton };