Page MenuHomePhabricator
Differential D12987

[lib] Extract read status operations logic
ClosedPublic
Actions

Authored by tomek on Aug 5 2024, 6:58 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 23, 1:02 PM
Unknown Object (File)
Sun, Mar 23, 1:00 PM
Unknown Object (File)
Wed, Mar 12, 9:50 PM
Unknown Object (File)
Fri, Mar 7, 5:39 AM
Unknown Object (File)
Thu, Mar 6, 4:59 AM
Unknown Object (File)
Mon, Mar 3, 3:47 PM
Unknown Object (File)
Mon, Mar 3, 3:46 PM
Unknown Object (File)
Thu, Feb 27, 7:26 PM
View All Files
Subscribers
ashoat

Details

Reviewers
kamil
inka
Commits
rCOMMf9c63706bbd2: [lib] Extract read status operations logic
Summary

Compute the state in a single place.

https://linear.app/comm/issue/ENG-8930/unify-the-approach-to-replies-count-and-unread-status-updates

Depends on D12975

Test Plan

Processed an operation representing creation of a new thread with a viewer and a new user, created by that user. Checked if the thread was created and was set to unread.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Aug 5 2024, 6:58 AM
Herald added a subscriber: ashoat. · View Herald TranscriptAug 5 2024, 6:58 AM
ashoat added inline comments.Aug 5 2024, 8:25 AM
lib/shared/dm-ops/process-dm-ops.js
74–75 ↗(On Diff #43145)

I didn't realize that the client code is able to ignore updateTypes.UPDATE_THREAD_READ_STATUS updates when their timestamp is too old. How does this work?

Harbormaster completed remote builds in B30936: Diff 43145.Aug 5 2024, 9:29 AM
tomek requested review of this revision.Aug 5 2024, 9:29 AM
tomek added inline comments.Aug 6 2024, 2:47 AM
lib/shared/dm-ops/process-dm-ops.js
74–75 ↗(On Diff #43145)

It isn't yet. It needs to be implemented as a part of https://linear.app/comm/project/handle-unordered-dm-operations-1bd291b0b628. We have to make sure that if user A opens a thread on device A1, then user B sends an update to device A2 about a new message, and then A1 sends an update to A2 about changing the thread to read, we don't accidentally mark the thread as read if the message from A1 is older than the message from B.

But there are still more edge cases that need to be handled.

ashoat added inline comments.Aug 6 2024, 9:50 AM
lib/shared/dm-ops/process-dm-ops.js
74–75 ↗(On Diff #43145)

Makes sense, thanks for explaining. I wonder if ignoring outdated updateTypes.UPDATE_THREAD_READ_STATUS would be useful for thin threads too... I often discover weird behavior where one client shows a thread as unread, and another doesn't

inka accepted this revision.Aug 7 2024, 11:59 PM
This revision is now accepted and ready to land.Aug 7 2024, 11:59 PM
tomek added inline comments.Aug 9 2024, 2:46 AM
lib/shared/dm-ops/process-dm-ops.js
74–75 ↗(On Diff #43145)

Added a comment to https://linear.app/comm/issue/ENG-8751/add-a-timestamps-property-to-a-thick-thread-info to consider this.

tomek updated this revision to Diff 43270.Aug 9 2024, 2:53 AM

Rebase

Harbormaster failed remote builds in B31019: Diff 43270!Aug 9 2024, 3:08 AM
tomek updated this revision to Diff 43271.Aug 9 2024, 4:52 AM

Fix eslint

Harbormaster completed remote builds in B31020: Diff 43271.Aug 9 2024, 5:09 AM
Closed by commit rCOMMf9c63706bbd2: [lib] Extract read status operations logic (authored by tomek). · Explain WhyAug 9 2024, 5:24 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMMf9c63706bbd2: [lib] Extract read status operations logic.

Revision Contents
Changeset List

Diff 43272

View Options

lib/reducers/message-reducer.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react'; import * as React from 'react';
import { import {
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
useUpdateCalendarQuery, useUpdateCalendarQuery,
} from '../actions/entry-actions.js'; } from '../actions/entry-actions.js';
import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js'; import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js';
import { extractKeyserverIDFromID } from '../keyserver-conn/keyserver-call-utils.js';
import { filterThreadIDsInFilterList } from '../reducers/calendar-filters-reducer.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import { connectionSelector } from '../selectors/keyserver-selectors.js';
import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js'; import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js';
import { useIsAppForegrounded } from '../shared/lifecycle-utils.js'; import { useIsAppForegrounded } from '../shared/lifecycle-utils.js';
import type { import type {
CalendarQuery, CalendarQuery,
CalendarQueryUpdateResult, CalendarQueryUpdateResult,
CalendarQueryUpdateStartingPayload, CalendarQueryUpdateStartingPayload,
} from '../types/entry-types.js'; } from '../types/entry-types.js';
▲ Show 20 Lines • Show All 103 Lines • ▼ Show 20 Lines possiblyUpdateCalendarQuery = () => {
if (this.shouldUpdateCalendarQuery) { if (this.shouldUpdateCalendarQuery) {
this.updateCalendarQuery(); this.updateCalendarQuery();
} }
}; };
} }
const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> = const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) { React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID)); const { currentCalendarQuery, keyserverID } = props;
const connection = useSelector(connectionSelector(keyserverID));
invariant(connection, 'keyserver missing from keyserverStore'); invariant(connection, 'keyserver missing from keyserverStore');
const lastUserInteractionCalendar = useSelector( const lastUserInteractionCalendar = useSelector(
state => state.entryStore.lastUserInteractionCalendar, state => state.entryStore.lastUserInteractionCalendar,
); );
// We include this so that componentDidUpdate will be called on foreground // We include this so that componentDidUpdate will be called on foreground
const foreground = useIsAppForegrounded(); const foreground = useIsAppForegrounded();
const callUpdateCalendarQuery = useUpdateCalendarQuery(); const callUpdateCalendarQuery = useUpdateCalendarQuery();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const calendarQuery = useSelector(state => state.actualizedCalendarQuery); const calendarQuery = useSelector(state => state.actualizedCalendarQuery);
const getCurrentCalendarQuery = React.useCallback(() => {
const query = currentCalendarQuery();
return {
...query,
filters: filterThreadIDsInFilterList(
query.filters,
(threadID: string) =>
extractKeyserverIDFromID(threadID) === keyserverID,
),
};
}, [currentCalendarQuery, keyserverID]);
return ( return (
<CalendarQueryHandler <CalendarQueryHandler
{...props} {...props}
connection={connection} connection={connection}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
lastUserInteractionCalendar={lastUserInteractionCalendar} lastUserInteractionCalendar={lastUserInteractionCalendar}
foreground={foreground} foreground={foreground}
updateCalendarQuery={callUpdateCalendarQuery} updateCalendarQuery={callUpdateCalendarQuery}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
currentCalendarQuery={getCurrentCalendarQuery}
/> />
); );
}); });
export default ConnectedCalendarQueryHandler; export default ConnectedCalendarQueryHandler;
View Options

lib/shared/dm-ops/add-members-spec.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react'; import * as React from 'react';
import { import {
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
useUpdateCalendarQuery, useUpdateCalendarQuery,
} from '../actions/entry-actions.js'; } from '../actions/entry-actions.js';
import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js'; import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js';
import { extractKeyserverIDFromID } from '../keyserver-conn/keyserver-call-utils.js';
import { filterThreadIDsInFilterList } from '../reducers/calendar-filters-reducer.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import { connectionSelector } from '../selectors/keyserver-selectors.js';
import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js'; import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js';
import { useIsAppForegrounded } from '../shared/lifecycle-utils.js'; import { useIsAppForegrounded } from '../shared/lifecycle-utils.js';
import type { import type {
CalendarQuery, CalendarQuery,
CalendarQueryUpdateResult, CalendarQueryUpdateResult,
CalendarQueryUpdateStartingPayload, CalendarQueryUpdateStartingPayload,
} from '../types/entry-types.js'; } from '../types/entry-types.js';
▲ Show 20 Lines • Show All 103 Lines • ▼ Show 20 Lines possiblyUpdateCalendarQuery = () => {
if (this.shouldUpdateCalendarQuery) { if (this.shouldUpdateCalendarQuery) {
this.updateCalendarQuery(); this.updateCalendarQuery();
} }
}; };
} }
const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> = const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) { React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID)); const { currentCalendarQuery, keyserverID } = props;
const connection = useSelector(connectionSelector(keyserverID));
invariant(connection, 'keyserver missing from keyserverStore'); invariant(connection, 'keyserver missing from keyserverStore');
const lastUserInteractionCalendar = useSelector( const lastUserInteractionCalendar = useSelector(
state => state.entryStore.lastUserInteractionCalendar, state => state.entryStore.lastUserInteractionCalendar,
); );
// We include this so that componentDidUpdate will be called on foreground // We include this so that componentDidUpdate will be called on foreground
const foreground = useIsAppForegrounded(); const foreground = useIsAppForegrounded();
const callUpdateCalendarQuery = useUpdateCalendarQuery(); const callUpdateCalendarQuery = useUpdateCalendarQuery();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const calendarQuery = useSelector(state => state.actualizedCalendarQuery); const calendarQuery = useSelector(state => state.actualizedCalendarQuery);
const getCurrentCalendarQuery = React.useCallback(() => {
const query = currentCalendarQuery();
return {
...query,
filters: filterThreadIDsInFilterList(
query.filters,
(threadID: string) =>
extractKeyserverIDFromID(threadID) === keyserverID,
),
};
}, [currentCalendarQuery, keyserverID]);
return ( return (
<CalendarQueryHandler <CalendarQueryHandler
{...props} {...props}
connection={connection} connection={connection}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
lastUserInteractionCalendar={lastUserInteractionCalendar} lastUserInteractionCalendar={lastUserInteractionCalendar}
foreground={foreground} foreground={foreground}
updateCalendarQuery={callUpdateCalendarQuery} updateCalendarQuery={callUpdateCalendarQuery}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
currentCalendarQuery={getCurrentCalendarQuery}
/> />
); );
}); });
export default ConnectedCalendarQueryHandler; export default ConnectedCalendarQueryHandler;
View Options

lib/shared/dm-ops/change-thread-settings-spec.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react'; import * as React from 'react';
import { import {
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
useUpdateCalendarQuery, useUpdateCalendarQuery,
} from '../actions/entry-actions.js'; } from '../actions/entry-actions.js';
import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js'; import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js';
import { extractKeyserverIDFromID } from '../keyserver-conn/keyserver-call-utils.js';
import { filterThreadIDsInFilterList } from '../reducers/calendar-filters-reducer.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import { connectionSelector } from '../selectors/keyserver-selectors.js';
import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js'; import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js';
import { useIsAppForegrounded } from '../shared/lifecycle-utils.js'; import { useIsAppForegrounded } from '../shared/lifecycle-utils.js';
import type { import type {
CalendarQuery, CalendarQuery,
CalendarQueryUpdateResult, CalendarQueryUpdateResult,
CalendarQueryUpdateStartingPayload, CalendarQueryUpdateStartingPayload,
} from '../types/entry-types.js'; } from '../types/entry-types.js';
▲ Show 20 Lines • Show All 103 Lines • ▼ Show 20 Lines possiblyUpdateCalendarQuery = () => {
if (this.shouldUpdateCalendarQuery) { if (this.shouldUpdateCalendarQuery) {
this.updateCalendarQuery(); this.updateCalendarQuery();
} }
}; };
} }
const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> = const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) { React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID)); const { currentCalendarQuery, keyserverID } = props;
const connection = useSelector(connectionSelector(keyserverID));
invariant(connection, 'keyserver missing from keyserverStore'); invariant(connection, 'keyserver missing from keyserverStore');
const lastUserInteractionCalendar = useSelector( const lastUserInteractionCalendar = useSelector(
state => state.entryStore.lastUserInteractionCalendar, state => state.entryStore.lastUserInteractionCalendar,
); );
// We include this so that componentDidUpdate will be called on foreground // We include this so that componentDidUpdate will be called on foreground
const foreground = useIsAppForegrounded(); const foreground = useIsAppForegrounded();
const callUpdateCalendarQuery = useUpdateCalendarQuery(); const callUpdateCalendarQuery = useUpdateCalendarQuery();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const calendarQuery = useSelector(state => state.actualizedCalendarQuery); const calendarQuery = useSelector(state => state.actualizedCalendarQuery);
const getCurrentCalendarQuery = React.useCallback(() => {
const query = currentCalendarQuery();
return {
...query,
filters: filterThreadIDsInFilterList(
query.filters,
(threadID: string) =>
extractKeyserverIDFromID(threadID) === keyserverID,
),
};
}, [currentCalendarQuery, keyserverID]);
return ( return (
<CalendarQueryHandler <CalendarQueryHandler
{...props} {...props}
connection={connection} connection={connection}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
lastUserInteractionCalendar={lastUserInteractionCalendar} lastUserInteractionCalendar={lastUserInteractionCalendar}
foreground={foreground} foreground={foreground}
updateCalendarQuery={callUpdateCalendarQuery} updateCalendarQuery={callUpdateCalendarQuery}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
currentCalendarQuery={getCurrentCalendarQuery}
/> />
); );
}); });
export default ConnectedCalendarQueryHandler; export default ConnectedCalendarQueryHandler;
View Options

lib/shared/dm-ops/join-thread-spec.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react'; import * as React from 'react';
import { import {
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
useUpdateCalendarQuery, useUpdateCalendarQuery,
} from '../actions/entry-actions.js'; } from '../actions/entry-actions.js';
import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js'; import type { UpdateCalendarQueryInput } from '../actions/entry-actions.js';
import { extractKeyserverIDFromID } from '../keyserver-conn/keyserver-call-utils.js';
import { filterThreadIDsInFilterList } from '../reducers/calendar-filters-reducer.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import { connectionSelector } from '../selectors/keyserver-selectors.js';
import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js'; import { timeUntilCalendarRangeExpiration } from '../selectors/nav-selectors.js';
import { useIsAppForegrounded } from '../shared/lifecycle-utils.js'; import { useIsAppForegrounded } from '../shared/lifecycle-utils.js';
import type { import type {
CalendarQuery, CalendarQuery,
CalendarQueryUpdateResult, CalendarQueryUpdateResult,
CalendarQueryUpdateStartingPayload, CalendarQueryUpdateStartingPayload,
} from '../types/entry-types.js'; } from '../types/entry-types.js';
▲ Show 20 Lines • Show All 103 Lines • ▼ Show 20 Lines possiblyUpdateCalendarQuery = () => {
if (this.shouldUpdateCalendarQuery) { if (this.shouldUpdateCalendarQuery) {
this.updateCalendarQuery(); this.updateCalendarQuery();
} }
}; };
} }
const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> = const ConnectedCalendarQueryHandler: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) { React.memo<BaseProps>(function ConnectedCalendarQueryHandler(props) {
const connection = useSelector(connectionSelector(props.keyserverID)); const { currentCalendarQuery, keyserverID } = props;
const connection = useSelector(connectionSelector(keyserverID));
invariant(connection, 'keyserver missing from keyserverStore'); invariant(connection, 'keyserver missing from keyserverStore');
const lastUserInteractionCalendar = useSelector( const lastUserInteractionCalendar = useSelector(
state => state.entryStore.lastUserInteractionCalendar, state => state.entryStore.lastUserInteractionCalendar,
); );
// We include this so that componentDidUpdate will be called on foreground // We include this so that componentDidUpdate will be called on foreground
const foreground = useIsAppForegrounded(); const foreground = useIsAppForegrounded();
const callUpdateCalendarQuery = useUpdateCalendarQuery(); const callUpdateCalendarQuery = useUpdateCalendarQuery();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const calendarQuery = useSelector(state => state.actualizedCalendarQuery); const calendarQuery = useSelector(state => state.actualizedCalendarQuery);
const getCurrentCalendarQuery = React.useCallback(() => {
const query = currentCalendarQuery();
return {
...query,
filters: filterThreadIDsInFilterList(
query.filters,
(threadID: string) =>
extractKeyserverIDFromID(threadID) === keyserverID,
),
};
}, [currentCalendarQuery, keyserverID]);
return ( return (
<CalendarQueryHandler <CalendarQueryHandler
{...props} {...props}
connection={connection} connection={connection}
calendarQuery={calendarQuery} calendarQuery={calendarQuery}
lastUserInteractionCalendar={lastUserInteractionCalendar} lastUserInteractionCalendar={lastUserInteractionCalendar}
foreground={foreground} foreground={foreground}
updateCalendarQuery={callUpdateCalendarQuery} updateCalendarQuery={callUpdateCalendarQuery}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
currentCalendarQuery={getCurrentCalendarQuery}
/> />
); );
}); });
export default ConnectedCalendarQueryHandler; export default ConnectedCalendarQueryHandler;
View Options

lib/shared/dm-ops/leave-thread-spec.js

Loading...
View Options

lib/shared/dm-ops/process-dm-ops.js

Loading...
View Options

lib/shared/dm-ops/remove-members-spec.js

Loading...
View Options

lib/shared/dm-ops/send-edit-message-spec.js

Loading...
View Options

lib/shared/dm-ops/send-reaction-message-spec.js

Loading...
View Options

lib/shared/dm-ops/send-text-message-spec.js

Loading...