web/modals/threads/subchannels/subchannel.react.js
17 ↗	(On Diff #10959)	Readonly
50–62 ↗	(On Diff #10959)	As a good practice, we can make this more efficient: we're not interested in whole `mostRecentMessageInfo`. We only care if it is defined, so we can introduce a new variable that contains this info and depend on it. (After changes from D3597 its probably no longer relevant)
web/modals/threads/subchannels/subchannels-modal.css
15–16 ↗	(On Diff #10959)	Why do we set `row-gap` when displaying elements in column?

This revision now requires changes to proceed.Apr 4 2022, 2:28 AM

• jacek added inline comments.Apr 4 2022, 4:37 AM

web/modals/threads/subchannels/subchannels-modal.css
15–16 ↗	(On Diff #10959)	When we display elements in column, we have multiple rows containing items, so to define space between these rows we set `row-gap`, don't we?

tomek added inline comments.Apr 4 2022, 4:46 AM

web/modals/threads/subchannels/subchannels-modal.css
15–16 ↗	(On Diff #10959)	Ah, sorry, you're right!

rebase & fix css & fix ReadOnly

Harbormaster failed remote builds in B7826: Diff 10993!Apr 4 2022, 6:35 AM

tomek accepted this revision.Apr 5 2022, 7:07 AM

This revision is now accepted and ready to land.Apr 5 2022, 7:07 AM

rebase

Harbormaster completed remote builds in B8009: Diff 11214.Apr 8 2022, 2:34 AM

Closed by commit rCOMM89dff72c45f7: [web] Introduce `Subchannel` component (authored by • jacek). · Explain WhyApr 8 2022, 7:10 AM

This revision was automatically updated to reflect the committed changes.

• jacek added a commit: rCOMM89dff72c45f7: [web] Introduce `Subchannel` component.

Revision Contents
Changeset List

Path

Size

web/

modals/

threads/

subchannels/

subchannel.react.js

75 lines

subchannels-modal.css

39 lines

theme.css

2 lines

Diff 11237

View Options

web/modals/threads/subchannels/subchannel.react.js

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Lines	type Props = {
+currentTabType: TabType,		+currentTabType: TabType,
+setCurrentTabType: SetState<TabType>,		+setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges,		+queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>,		+setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string,		+namePlaceholder: string,
+changeQueued: boolean,		+changeQueued: boolean,
+setTab: (tabType: TabType) => void,		+setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,		+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
		+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
};		};
class ThreadSettingsModal extends React.PureComponent<Props> {		class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement;		nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement;		accountPasswordInput: ?HTMLInputElement;

constructor(props: Props) {		constructor(props: Props) {
super(props);		super(props);
}		}
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	if (this.props.currentTabType === 'general') {
mainContent = (		mainContent = (
<ThreadSettingsGeneralTab		<ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))}		threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder}		threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName}		threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled}		threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef}		threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')}		threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription}		threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled}		threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')}		threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor}		threadColorOnColorSelection={this.onChangeColor}
/>		/>
);		);
} else if (this.props.currentTabType === 'privacy') {		} else if (this.props.currentTabType === 'privacy') {
mainContent = (		mainContent = (
<ThreadSettingsPrivacyTab		<ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines	class ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => {		nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput;		this.nameInput = nameInput;
};		};

accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {		accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput;		this.accountPasswordInput = accountPasswordInput;
};		};

onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};

onChangeColor = (color: string) => {		onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined;		const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({		this.props.setQueuedChanges({
...this.props.queuedChanges,		...this.props.queuedChanges,
color: newValue,		color: newValue,
});		});
};		};

▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines	const onChangeName = React.useCallback(
name: firstLine(		name: firstLine(
target.value !== threadInfo.name ? target.value : undefined,		target.value !== threadInfo.name ? target.value : undefined,
),		),
});		});
},		},
[queuedChanges, threadInfo],		[queuedChanges, threadInfo],
);		);

		const onChangeDescription = React.useCallback(
		(event: SyntheticEvent<HTMLTextAreaElement>) => {
		invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
		const target = event.currentTarget;
		setQueuedChanges({
		...queuedChanges,
		description:
		target.value !== threadInfo.description ? target.value : undefined,
		});
		},
		[queuedChanges, threadInfo],
		);

if (!threadInfo) {		if (!threadInfo) {
return (		return (
<Modal onClose={modalContext.clearModal} name="Invalid thread">		<Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}>		<div className={css.modal_body}>
<p>You no longer have permission to view this thread</p>		<p>You no longer have permission to view this thread</p>
</div>		</div>
</Modal>		</Modal>
);		);
Show All 17 Lines	return (
currentTabType={currentTabType}		currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType}		setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges}		queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges}		setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder}		namePlaceholder={namePlaceholder}
changeQueued={changeQueued}		changeQueued={changeQueued}
setTab={setTab}		setTab={setTab}
onChangeName={onChangeName}		onChangeName={onChangeName}
		onChangeDescription={onChangeDescription}
/>		/>
);		);
},		},
);		);

export default ConnectedThreadSettingsModal;		export default ConnectedThreadSettingsModal;

View Options

web/modals/threads/subchannels/subchannels-modal.css

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Lines	type Props = {
+currentTabType: TabType,		+currentTabType: TabType,
+setCurrentTabType: SetState<TabType>,		+setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges,		+queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>,		+setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string,		+namePlaceholder: string,
+changeQueued: boolean,		+changeQueued: boolean,
+setTab: (tabType: TabType) => void,		+setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,		+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
		+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
};		};
class ThreadSettingsModal extends React.PureComponent<Props> {		class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement;		nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement;		accountPasswordInput: ?HTMLInputElement;

constructor(props: Props) {		constructor(props: Props) {
super(props);		super(props);
}		}
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	if (this.props.currentTabType === 'general') {
mainContent = (		mainContent = (
<ThreadSettingsGeneralTab		<ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))}		threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder}		threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName}		threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled}		threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef}		threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')}		threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription}		threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled}		threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')}		threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor}		threadColorOnColorSelection={this.onChangeColor}
/>		/>
);		);
} else if (this.props.currentTabType === 'privacy') {		} else if (this.props.currentTabType === 'privacy') {
mainContent = (		mainContent = (
<ThreadSettingsPrivacyTab		<ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines	class ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => {		nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput;		this.nameInput = nameInput;
};		};

accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {		accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput;		this.accountPasswordInput = accountPasswordInput;
};		};

onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};

onChangeColor = (color: string) => {		onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined;		const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({		this.props.setQueuedChanges({
...this.props.queuedChanges,		...this.props.queuedChanges,
color: newValue,		color: newValue,
});		});
};		};

▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines	const onChangeName = React.useCallback(
name: firstLine(		name: firstLine(
target.value !== threadInfo.name ? target.value : undefined,		target.value !== threadInfo.name ? target.value : undefined,
),		),
});		});
},		},
[queuedChanges, threadInfo],		[queuedChanges, threadInfo],
);		);

		const onChangeDescription = React.useCallback(
		(event: SyntheticEvent<HTMLTextAreaElement>) => {
		invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
		const target = event.currentTarget;
		setQueuedChanges({
		...queuedChanges,
		description:
		target.value !== threadInfo.description ? target.value : undefined,
		});
		},
		[queuedChanges, threadInfo],
		);

if (!threadInfo) {		if (!threadInfo) {
return (		return (
<Modal onClose={modalContext.clearModal} name="Invalid thread">		<Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}>		<div className={css.modal_body}>
<p>You no longer have permission to view this thread</p>		<p>You no longer have permission to view this thread</p>
</div>		</div>
</Modal>		</Modal>
);		);
Show All 17 Lines	return (
currentTabType={currentTabType}		currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType}		setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges}		queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges}		setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder}		namePlaceholder={namePlaceholder}
changeQueued={changeQueued}		changeQueued={changeQueued}
setTab={setTab}		setTab={setTab}
onChangeName={onChangeName}		onChangeName={onChangeName}
		onChangeDescription={onChangeDescription}
/>		/>
);		);
},		},
);		);

export default ConnectedThreadSettingsModal;		export default ConnectedThreadSettingsModal;

View Options

web/theme.css

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Lines	type Props = {
+currentTabType: TabType,		+currentTabType: TabType,
+setCurrentTabType: SetState<TabType>,		+setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges,		+queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>,		+setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string,		+namePlaceholder: string,
+changeQueued: boolean,		+changeQueued: boolean,
+setTab: (tabType: TabType) => void,		+setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,		+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
		+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
};		};
class ThreadSettingsModal extends React.PureComponent<Props> {		class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement;		nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement;		accountPasswordInput: ?HTMLInputElement;

constructor(props: Props) {		constructor(props: Props) {
super(props);		super(props);
}		}
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	if (this.props.currentTabType === 'general') {
mainContent = (		mainContent = (
<ThreadSettingsGeneralTab		<ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))}		threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder}		threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName}		threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled}		threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef}		threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')}		threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription}		threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled}		threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')}		threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor}		threadColorOnColorSelection={this.onChangeColor}
/>		/>
);		);
} else if (this.props.currentTabType === 'privacy') {		} else if (this.props.currentTabType === 'privacy') {
mainContent = (		mainContent = (
<ThreadSettingsPrivacyTab		<ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines	class ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => {		nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput;		this.nameInput = nameInput;
};		};

accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {		accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput;		this.accountPasswordInput = accountPasswordInput;
};		};

onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};

onChangeColor = (color: string) => {		onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined;		const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({		this.props.setQueuedChanges({
...this.props.queuedChanges,		...this.props.queuedChanges,
color: newValue,		color: newValue,
});		});
};		};

▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines	const onChangeName = React.useCallback(
name: firstLine(		name: firstLine(
target.value !== threadInfo.name ? target.value : undefined,		target.value !== threadInfo.name ? target.value : undefined,
),		),
});		});
},		},
[queuedChanges, threadInfo],		[queuedChanges, threadInfo],
);		);

		const onChangeDescription = React.useCallback(
		(event: SyntheticEvent<HTMLTextAreaElement>) => {
		invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
		const target = event.currentTarget;
		setQueuedChanges({
		...queuedChanges,
		description:
		target.value !== threadInfo.description ? target.value : undefined,
		});
		},
		[queuedChanges, threadInfo],
		);

if (!threadInfo) {		if (!threadInfo) {
return (		return (
<Modal onClose={modalContext.clearModal} name="Invalid thread">		<Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}>		<div className={css.modal_body}>
<p>You no longer have permission to view this thread</p>		<p>You no longer have permission to view this thread</p>
</div>		</div>
</Modal>		</Modal>
);		);
Show All 17 Lines	return (
currentTabType={currentTabType}		currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType}		setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges}		queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges}		setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder}		namePlaceholder={namePlaceholder}
changeQueued={changeQueued}		changeQueued={changeQueued}
setTab={setTab}		setTab={setTab}
onChangeName={onChangeName}		onChangeName={onChangeName}
		onChangeDescription={onChangeDescription}
/>		/>
);		);
},		},
);		);

export default ConnectedThreadSettingsModal;		export default ConnectedThreadSettingsModal;

[web] Introduce `Subchannel` componentClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 11237

web/modals/threads/subchannels/subchannel.react.js

web/modals/threads/subchannels/subchannels-modal.css

web/theme.css

[web] Introduce `Subchannel` component
ClosedPublic
Actions

Revision Contents
Changeset List