Page MenuHomePhabricator
Differential D7087

[Comm-opaque2] Add wasm build to client
ClosedPublic
Actions

Authored by • jon on Mar 16 2023, 4:30 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 19, 3:19 AM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 8:01 PM
Unknown Object (File)
Mar 2 2025, 7:40 PM
View All Files
Subscribers
atul

Details

Reviewers
varun
ashoat
tomek
bartek
Group Reviewers
Restricted Owners Package(Owns No Changed Paths)
Commits
rCOMMfa13b21baf73: [Comm-opaque2] Add wasm build to client
Summary

Build wasm and js bindings for the client sided opaque
code.

https://linear.app/comm/issue/ENG-3265

Depends on D7022

Test Plan
nix develop
cd shared/comm-opaque2
wasm-pack build

# pkg directory contains js, ts, and wasm artifacts
ls pkg/

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

• jon created this revision.Mar 16 2023, 4:30 PM
Herald added a subscriber: atul. · View Herald TranscriptMar 16 2023, 4:30 PM
Harbormaster completed remote builds in B17370: Diff 23803.Mar 16 2023, 4:45 PM
• jon requested review of this revision.Mar 16 2023, 4:45 PM
• jon updated this revision to Diff 23807.Mar 16 2023, 5:00 PM

Add wasm-pack to this diff

Owners added a reviewer: Restricted Owners Package.Mar 16 2023, 5:00 PM
• jon updated this revision to Diff 23808.Mar 16 2023, 5:01 PM

Add back rlib for in-repo usage

• jon added a comment.Mar 16 2023, 5:02 PM

Add @ashoat because addtion of wasm-pack utility, and new usage of wasm_bindgen crate

• jon added a comment.Mar 16 2023, 5:04 PM

This currently produces the outpus:

$ du -hd0 --apparent-size pkg/*
715	pkg/comm_opaque.d.ts
160	pkg/comm_opaque.js
14K	pkg/comm_opaque_bg.js
142K	pkg/comm_opaque_bg.wasm
1005	pkg/comm_opaque_bg.wasm.d.ts
249	pkg/package.json
Harbormaster completed remote builds in B17374: Diff 23807.Mar 16 2023, 5:15 PM
Harbormaster completed remote builds in B17375: Diff 23808.
ashoat accepted this revision.Mar 17 2023, 8:29 AM
ashoat added 1 blocking reviewer(s): varun.

Dependencies look good! No context on Rust unfortunately

varun requested changes to this revision.Mar 20 2023, 7:33 AM
varun added inline comments.
shared/comm-opaque2/Cargo.toml
11 ↗(On Diff #23808)

where does this get used?

22 ↗(On Diff #23808)

optimize

shared/comm-opaque2/src/client/login.rs
32 ↗(On Diff #23808)

why do we need the wasm_bindgen attribute on every function? other examples i looked at only had it above the impl block

shared/comm-opaque2/src/client/register.rs
29 ↗(On Diff #23808)

again don't think we need all these decorators

shared/comm-opaque2/src/error.rs
5 ↗(On Diff #23808)

I would say due to Rust's orphan rules

shared/comm-opaque2/src/lib.rs
54–55 ↗(On Diff #23803)

nit: maybe rename login_client to client_login just for consistency

This revision now requires changes to proceed.Mar 20 2023, 7:33 AM
• jon updated this revision to Diff 23874.Mar 20 2023, 10:03 AM
• jon marked 6 inline comments as done.

Address Feedback

shared/comm-opaque2/Cargo.toml
11 ↗(On Diff #23808)

rand brings in getrandom. It essentially fails to compile unless you specify this dependency

22 ↗(On Diff #23808)

apparently I've been around too many british :/

shared/comm-opaque2/src/client/login.rs
32 ↗(On Diff #23808)

you're right, we don't. Was just following wasm-opaque.

shared/comm-opaque2/src/lib.rs
54–55 ↗(On Diff #23803)

fair

Harbormaster completed remote builds in B17421: Diff 23874.Mar 20 2023, 10:18 AM
varun accepted this revision.Mar 20 2023, 1:15 PM
varun added inline comments.
shared/comm-opaque2/src/error.rs
5 ↗(On Diff #23874)

can not -> cannot

This revision is now accepted and ready to land.Mar 20 2023, 1:15 PM
• jon updated this revision to Diff 23891.Mar 20 2023, 3:17 PM
• jon marked an inline comment as done.

typo

• jon added a comment.Mar 20 2023, 3:22 PM

feedback

Harbormaster completed remote builds in B17437: Diff 23891.Mar 20 2023, 3:32 PM
Closed by commit rCOMMfa13b21baf73: [Comm-opaque2] Add wasm build to client (authored by • jon). · Explain WhyMar 20 2023, 8:50 PM
This revision was automatically updated to reflect the committed changes.
• jon added a commit: rCOMMfa13b21baf73: [Comm-opaque2] Add wasm build to client.

Revision Contents
Changeset List

PathSize
nix/
2 lines
shared/
comm-opaque2/
1 line
10 lines
src/
client/
20 lines
9 lines
41 lines
13 lines

Diff 23909

View Options

nix/dev-shell.nix

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/.gitignore

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/Cargo.lock

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/Cargo.toml

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/src/client/login.rs

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/src/client/register.rs

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/src/error.rs

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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

shared/comm-opaque2/src/lib.rs

Loading...