Page MenuHomePhabricator
Differential D11648

[web] Create a function that reassigns notifs session
ClosedPublic
Actions

Authored by tomek on Apr 12 2024, 11:13 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Apr 20, 11:42 AM
Unknown Object (File)
Sat, Apr 19, 2:06 PM
Unknown Object (File)
Wed, Apr 16, 1:07 PM
Unknown Object (File)
Wed, Apr 16, 11:17 AM
Unknown Object (File)
Wed, Apr 16, 3:40 AM
Unknown Object (File)
Tue, Apr 15, 10:57 PM
Unknown Object (File)
Tue, Apr 15, 10:18 AM
Unknown Object (File)
Mar 18 2025, 12:01 AM
View All 75 Files
Subscribers
ashoat

Details

Reviewers
kamil
marcin
varun
Commits
rCOMMd6620dd49be4: [web] Create a function that reassigns notifs session
Summary

This function determines where a session were stored, where it should be placed, and moves it from one to another.

https://linear.app/comm/issue/ENG-7688/introduce-a-function-that-moves-a-notifs-session

Depends on D11647

Test Plan

Tested in combination with the next diff: open the web app, login, send a message from another client - a notif should be displayed (without this stack we can only see a notif with a warning message). Also, verify that the reassignment actually occurs by adding some console logs.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Apr 12 2024, 11:13 AM
Herald added a subscriber: ashoat. · View Herald TranscriptApr 12 2024, 11:13 AM
tomek added a child revision: D11649: [web] Reassign the notifs session.Apr 12 2024, 11:17 AM
Harbormaster completed remote builds in B28192: Diff 39082.Apr 12 2024, 11:36 AM
tomek requested review of this revision.Apr 12 2024, 11:36 AM
marcin accepted this revision.Apr 15 2024, 12:26 AM
marcin added inline comments.
web/shared-worker/worker/worker-crypto.js
368 ↗(On Diff #39082)

Those two promises look like they could run simultaneously. However if the app crashes while those two promises run in parallel we might not be able to recover from it and retry item reassignment but if we separate those two steps we can retry item reassignment. Do I understand correctly that keeping those promises sequential was intentional?

This revision is now accepted and ready to land.Apr 15 2024, 12:26 AM
tomek updated this revision to Diff 39153.Apr 16 2024, 8:45 AM

Rebase

web/shared-worker/worker/worker-crypto.js
368 ↗(On Diff #39082)

Yes, it is safer to first set and then delete. But I'm not sure if we can recover from this currently - we probably would need to introduce some retry logic.

Harbormaster completed remote builds in B28243: Diff 39153.Apr 16 2024, 9:01 AM
Closed by commit rCOMMd6620dd49be4: [web] Create a function that reassigns notifs session (authored by tomek). · Explain WhyApr 18 2024, 7:53 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMMd6620dd49be4: [web] Create a function that reassigns notifs session.

Revision Contents
Changeset List

PathSize
lib/
types/
5 lines
web/
crypto/
1 line
shared-worker/
worker/
42 lines

Diff 39153

View Options

lib/types/crypto-types.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import type { SelectionChangeEvent } from '../types/react-native';
import ClearableTextInput from './clearable-text-input.react'; import ClearableTextInput from './clearable-text-input.react';
import type { import type {
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
} from './selectable-text-input'; } from './selectable-text-input';
const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput( const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput(
props, props,
ref, ref,
): React.Node { ): React.Node {
const { clearableTextInputRef, onUpdateSyncedSelectionData, ...rest } = props; const {
clearableTextInputRef,
onUpdateSyncedSelectionData,
onSelectionChange,
selection,
...rest
} = props;
// React Native doesn't handle controlled selection well, so we only set the
// selection prop when we need to mutate the selection
// https://github.com/facebook/react-native/issues/29063
const [controlSelection, setControlSelection] = React.useState<boolean>(
false,
);
const clearableTextInputRefCallback = React.useCallback( const clearableTextInputRefCallback = React.useCallback(
(clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => { (clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => {
clearableTextInputRef(clearableTextInput); clearableTextInputRef(clearableTextInput);
}, },
[clearableTextInputRef], [clearableTextInputRef],
); );
const prepareForSelectionMutation = React.useCallback(() => {}, []); const prepareForSelectionMutation = React.useCallback(
() => setControlSelection(true),
[],
);
const ourRef = React.useMemo( const ourRef = React.useMemo(
() => ({ () => ({
prepareForSelectionMutation, prepareForSelectionMutation,
}), }),
[prepareForSelectionMutation], [prepareForSelectionMutation],
); );
React.useImperativeHandle(ref, () => ourRef, [ourRef]); React.useImperativeHandle(ref, () => ourRef, [ourRef]);
return <ClearableTextInput {...rest} ref={clearableTextInputRefCallback} />; // - It's important for us to keep text and selection state in sync, since
// upstream code in ChatInputBar processes this data during render to
// generate a list of @-mention suggestions
// - On Android, text change events precede selection events, and each leads
// to a separate React render cycle
// - To prevent render cycles where the data isn't in sync, we defer text
// change events until the corresponding selection event comes in
const onSelectionChangeOverride = React.useCallback(
(event: SelectionChangeEvent) => {
setControlSelection(false);
onSelectionChange?.(event);
onUpdateSyncedSelectionData({
text: props.value,
selection: event.nativeEvent.selection,
});
},
[onUpdateSyncedSelectionData, props.value, onSelectionChange],
);
return (
<ClearableTextInput
{...rest}
onSelectionChange={onSelectionChangeOverride}
selection={controlSelection ? selection : undefined}
ref={clearableTextInputRefCallback}
/>
);
}); });
const MemoizedSelectableTextInput: React.AbstractComponent< const MemoizedSelectableTextInput: React.AbstractComponent<
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
> = React.memo<SelectableTextInputProps, SelectableTextInputRef>( > = React.memo<SelectableTextInputProps, SelectableTextInputRef>(
SelectableTextInput, SelectableTextInput,
); );
export default MemoizedSelectableTextInput; export default MemoizedSelectableTextInput;
View Options

web/crypto/olm-api.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import type { SelectionChangeEvent } from '../types/react-native';
import ClearableTextInput from './clearable-text-input.react'; import ClearableTextInput from './clearable-text-input.react';
import type { import type {
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
} from './selectable-text-input'; } from './selectable-text-input';
const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput( const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput(
props, props,
ref, ref,
): React.Node { ): React.Node {
const { clearableTextInputRef, onUpdateSyncedSelectionData, ...rest } = props; const {
clearableTextInputRef,
onUpdateSyncedSelectionData,
onSelectionChange,
selection,
...rest
} = props;
// React Native doesn't handle controlled selection well, so we only set the
// selection prop when we need to mutate the selection
// https://github.com/facebook/react-native/issues/29063
const [controlSelection, setControlSelection] = React.useState<boolean>(
false,
);
const clearableTextInputRefCallback = React.useCallback( const clearableTextInputRefCallback = React.useCallback(
(clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => { (clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => {
clearableTextInputRef(clearableTextInput); clearableTextInputRef(clearableTextInput);
}, },
[clearableTextInputRef], [clearableTextInputRef],
); );
const prepareForSelectionMutation = React.useCallback(() => {}, []); const prepareForSelectionMutation = React.useCallback(
() => setControlSelection(true),
[],
);
const ourRef = React.useMemo( const ourRef = React.useMemo(
() => ({ () => ({
prepareForSelectionMutation, prepareForSelectionMutation,
}), }),
[prepareForSelectionMutation], [prepareForSelectionMutation],
); );
React.useImperativeHandle(ref, () => ourRef, [ourRef]); React.useImperativeHandle(ref, () => ourRef, [ourRef]);
return <ClearableTextInput {...rest} ref={clearableTextInputRefCallback} />; // - It's important for us to keep text and selection state in sync, since
// upstream code in ChatInputBar processes this data during render to
// generate a list of @-mention suggestions
// - On Android, text change events precede selection events, and each leads
// to a separate React render cycle
// - To prevent render cycles where the data isn't in sync, we defer text
// change events until the corresponding selection event comes in
const onSelectionChangeOverride = React.useCallback(
(event: SelectionChangeEvent) => {
setControlSelection(false);
onSelectionChange?.(event);
onUpdateSyncedSelectionData({
text: props.value,
selection: event.nativeEvent.selection,
});
},
[onUpdateSyncedSelectionData, props.value, onSelectionChange],
);
return (
<ClearableTextInput
{...rest}
onSelectionChange={onSelectionChangeOverride}
selection={controlSelection ? selection : undefined}
ref={clearableTextInputRefCallback}
/>
);
}); });
const MemoizedSelectableTextInput: React.AbstractComponent< const MemoizedSelectableTextInput: React.AbstractComponent<
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
> = React.memo<SelectableTextInputProps, SelectableTextInputRef>( > = React.memo<SelectableTextInputProps, SelectableTextInputRef>(
SelectableTextInput, SelectableTextInput,
); );
export default MemoizedSelectableTextInput; export default MemoizedSelectableTextInput;
View Options

web/shared-worker/worker/worker-crypto.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import type { SelectionChangeEvent } from '../types/react-native';
import ClearableTextInput from './clearable-text-input.react'; import ClearableTextInput from './clearable-text-input.react';
import type { import type {
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
} from './selectable-text-input'; } from './selectable-text-input';
const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput( const SelectableTextInput = React.forwardRef(function BaseSelectableTextInput(
props, props,
ref, ref,
): React.Node { ): React.Node {
const { clearableTextInputRef, onUpdateSyncedSelectionData, ...rest } = props; const {
clearableTextInputRef,
onUpdateSyncedSelectionData,
onSelectionChange,
selection,
...rest
} = props;
// React Native doesn't handle controlled selection well, so we only set the
// selection prop when we need to mutate the selection
// https://github.com/facebook/react-native/issues/29063
const [controlSelection, setControlSelection] = React.useState<boolean>(
false,
);
const clearableTextInputRefCallback = React.useCallback( const clearableTextInputRefCallback = React.useCallback(
(clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => { (clearableTextInput: ?React.ElementRef<typeof ClearableTextInput>) => {
clearableTextInputRef(clearableTextInput); clearableTextInputRef(clearableTextInput);
}, },
[clearableTextInputRef], [clearableTextInputRef],
); );
const prepareForSelectionMutation = React.useCallback(() => {}, []); const prepareForSelectionMutation = React.useCallback(
() => setControlSelection(true),
[],
);
const ourRef = React.useMemo( const ourRef = React.useMemo(
() => ({ () => ({
prepareForSelectionMutation, prepareForSelectionMutation,
}), }),
[prepareForSelectionMutation], [prepareForSelectionMutation],
); );
React.useImperativeHandle(ref, () => ourRef, [ourRef]); React.useImperativeHandle(ref, () => ourRef, [ourRef]);
return <ClearableTextInput {...rest} ref={clearableTextInputRefCallback} />; // - It's important for us to keep text and selection state in sync, since
// upstream code in ChatInputBar processes this data during render to
// generate a list of @-mention suggestions
// - On Android, text change events precede selection events, and each leads
// to a separate React render cycle
// - To prevent render cycles where the data isn't in sync, we defer text
// change events until the corresponding selection event comes in
const onSelectionChangeOverride = React.useCallback(
(event: SelectionChangeEvent) => {
setControlSelection(false);
onSelectionChange?.(event);
onUpdateSyncedSelectionData({
text: props.value,
selection: event.nativeEvent.selection,
});
},
[onUpdateSyncedSelectionData, props.value, onSelectionChange],
);
return (
<ClearableTextInput
{...rest}
onSelectionChange={onSelectionChangeOverride}
selection={controlSelection ? selection : undefined}
ref={clearableTextInputRefCallback}
/>
);
}); });
const MemoizedSelectableTextInput: React.AbstractComponent< const MemoizedSelectableTextInput: React.AbstractComponent<
SelectableTextInputProps, SelectableTextInputProps,
SelectableTextInputRef, SelectableTextInputRef,
> = React.memo<SelectableTextInputProps, SelectableTextInputRef>( > = React.memo<SelectableTextInputProps, SelectableTextInputRef>(
SelectableTextInput, SelectableTextInput,
); );
export default MemoizedSelectableTextInput; export default MemoizedSelectableTextInput;