Page MenuHomePhabricator
Differential D12871

[lib] DMOperationSpec for leave thread operation
ClosedPublic
Actions

Authored by tomek on Jul 24 2024, 10:12 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 23, 12:56 PM
Unknown Object (File)
Wed, Apr 23, 6:47 AM
Unknown Object (File)
Wed, Apr 23, 4:55 AM
Unknown Object (File)
Sat, Apr 19, 5:06 AM
Unknown Object (File)
Fri, Apr 18, 9:56 AM
Unknown Object (File)
Fri, Apr 18, 9:55 AM
Unknown Object (File)
Fri, Apr 18, 9:49 AM
Unknown Object (File)
Fri, Apr 18, 9:07 AM
View All Files
Subscribers
ashoat

Details

Reviewers
kamil
inka
Commits
rCOMMfdf5495751d3: [lib] DMOperationSpec for leave thread operation
Summary

Create the spec.

https://linear.app/comm/issue/ENG-8740/create-dmoperations-for-leavethreadmessageinfo

Depends on D12870

Test Plan

Just the Flow. Further testing will be performed after it is connected with the rest of the app.

Diff Detail

Repository
rCOMM Comm
Branch
dmops
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Jul 24 2024, 10:12 AM
Herald added a subscriber: ashoat. · View Herald TranscriptJul 24 2024, 10:12 AM
tomek updated this revision to Diff 42743.Jul 24 2024, 10:27 AM

Fix op type

Harbormaster failed remote builds in B30646: Diff 42742!Jul 24 2024, 10:29 AM
Harbormaster returned this revision to the author for changes because remote builds failed.Jul 24 2024, 10:40 AM
Harbormaster failed remote builds in B30647: Diff 42743!
tomek added a child revision: D12872: [lib] DMOperationSpec for remove members operation.Jul 24 2024, 10:43 AM
tomek updated this revision to Diff 42774.Jul 25 2024, 8:57 AM

Fix Flow

Harbormaster returned this revision to the author for changes because remote builds failed.Jul 25 2024, 8:59 AM
Harbormaster failed remote builds in B30670: Diff 42774!
tomek updated this revision to Diff 42806.Jul 26 2024, 3:04 AM

Rebase

Harbormaster completed remote builds in B30690: Diff 42806.Jul 26 2024, 3:20 AM
tomek requested review of this revision.Jul 26 2024, 3:20 AM
inka added inline comments.Jul 26 2024, 3:52 AM
lib/shared/dm-ops/leave-thread-spec.js
33–46 ↗(On Diff #42806)

Users can see sidebars they don't belong to - in chats they belong to. They should still record messages for those sidebars.
We should instead check if the thread is present in the users store.

50–55 ↗(On Diff #42806)

Is this is correct for sidebars?

68 ↗(On Diff #42806)

Should we set the unread status?

tomek updated this revision to Diff 42821.Jul 26 2024, 4:35 AM

Rename

Harbormaster completed remote builds in B30704: Diff 42821.Jul 26 2024, 4:57 AM
tomek updated this revision to Diff 42898.Jul 29 2024, 6:29 AM

Delete sidebar only if it doesn't have a parent

tomek marked 2 inline comments as done.Jul 29 2024, 6:32 AM
tomek added inline comments.
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

When we leave a thread we should also leave its sidebars. But it can happen that we don't have all the sidebars in our store while leaving the thread.

One solution could be to iterate through every sidebar here and leave them one by one, but it is still a fragile solution. An alternative is to leave only the thread from the operation. Then, someone who generates operations is responsible for generating all the necessary ones.

47–49 ↗(On Diff #42898)

We're deleting only non-sidebar threads and sidebars without a parent. If a sidebar doesn't have a parent, it means that its parent was deleted in the past.

50–55 ↗(On Diff #42806)

Updated the logic

Harbormaster completed remote builds in B30756: Diff 42898.Jul 29 2024, 6:45 AM
inka accepted this revision.Jul 31 2024, 2:06 AM
inka added inline comments.
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

Do we have this noted somewhere on linear?

This revision is now accepted and ready to land.Jul 31 2024, 2:06 AM
tomek added inline comments.Aug 1 2024, 5:09 AM
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

Created a comment with it https://linear.app/comm/issue/ENG-8923/generate-and-process-dmoperations-in-components#comment-aa034d1b.

ashoat added inline comments.Aug 1 2024, 7:46 AM
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

But it can happen that we don't have all the sidebars in our store while leaving the thread.

In what scenarios might this occur? Would it occur because the user joined the parent chat after the sidebar was created? Or something else?

tomek added inline comments.Aug 1 2024, 8:10 AM
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

This could happen when an update about creating a sidebar was received after the user tried to leave the thread.

ashoat added inline comments.Aug 1 2024, 1:57 PM
lib/shared/dm-ops/leave-thread-spec.js
44–50 ↗(On Diff #42898)

Got it. It seems like in all of these cases (the one I proposed and the one you proposed), it is safe to discard the update

Closed by commit rCOMMfdf5495751d3: [lib] DMOperationSpec for leave thread operation (authored by tomek). · Explain WhyAug 2 2024, 8:38 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMMfdf5495751d3: [lib] DMOperationSpec for leave thread operation.

Revision Contents
Changeset List

PathSize
lib/
shared/
dm-ops/
2 lines
76 lines
types/
21 lines

Diff 42743

View Options

lib/shared/dm-ops/dm-op-specs.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { TextInput, FlatList, StyleSheet } from 'react-native'; import { TextInput, FlatList, StyleSheet } from 'react-native';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
import SearchIndex from 'lib/shared/search-index'; import SearchIndex from 'lib/shared/search-index';
import { threadSearchText } from 'lib/shared/thread-utils'; import { threadSearchText } from 'lib/shared/thread-utils';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types'; import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
import Modal from '../components/modal.react'; import Modal from '../components/modal.react';
import Search from '../components/search.react'; import Search from '../components/search.react';
import type { RootNavigationProp } from '../navigation/root-navigator.react'; import type { RootNavigationProp } from '../navigation/root-navigator.react';
Show All 16 Lines
} }
type Props = { type Props = {
+navigation: RootNavigationProp<'SidebarListModal'>, +navigation: RootNavigationProp<'SidebarListModal'>,
+route: NavigationRoute<'SidebarListModal'>, +route: NavigationRoute<'SidebarListModal'>,
}; };
function SidebarListModal(props: Props): React.Node { function SidebarListModal(props: Props): React.Node {
const threadID = props.route.params.threadInfo.id; const threadID = props.route.params.threadInfo.id;
const { listData, searchState, setSearchState } = useSearchSidebars(
props.route.params.threadInfo,
);
const sidebarInfos = useSelector( const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadID] ?? [], state => sidebarInfoSelector(state)[threadID] ?? [],
); );
const [searchState, setSearchState] = React.useState({
text: '',
results: new Set<string>(),
});
const listData = React.useMemo(() => {
if (!searchState.text) {
return sidebarInfos;
}
return sidebarInfos.filter(({ threadInfo }) =>
searchState.results.has(threadInfo.id),
);
}, [sidebarInfos, searchState]);
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
const viewerID = useSelector( const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id, state => state.currentUserInfo && state.currentUserInfo.id,
); );
const searchIndex = React.useMemo(() => { const searchIndex = React.useMemo(() => {
const index = new SearchIndex(); const index = new SearchIndex();
for (const sidebarInfo of sidebarInfos) { for (const sidebarInfo of sidebarInfos) {
const { threadInfo } = sidebarInfo; const { threadInfo } = sidebarInfo;
index.addEntry( index.addEntry(
threadInfo.id, threadInfo.id,
threadSearchText(threadInfo, userInfos, viewerID), threadSearchText(threadInfo, userInfos, viewerID),
); );
} }
return index; return index;
}, [sidebarInfos, userInfos, viewerID]); }, [sidebarInfos, userInfos, viewerID]);
React.useEffect(() => { React.useEffect(() => {
setSearchState(curState => ({ setSearchState(curState => ({
...curState, ...curState,
results: new Set(searchIndex.getSearchResults(curState.text)), results: new Set(searchIndex.getSearchResults(curState.text)),
})); }));
}, [searchIndex]); }, [searchIndex, setSearchState]);
const onChangeSearchText = React.useCallback( const onChangeSearchText = React.useCallback(
(searchText: string) => (searchText: string) =>
setSearchState({ setSearchState({
text: searchText, text: searchText,
results: new Set(searchIndex.getSearchResults(searchText)), results: new Set(searchIndex.getSearchResults(searchText)),
}), }),
[searchIndex], [searchIndex, setSearchState],
); );
const searchTextInputRef = React.useRef(); const searchTextInputRef = React.useRef();
const setSearchTextInputRef = React.useCallback( const setSearchTextInputRef = React.useCallback(
async (textInput: ?React.ElementRef<typeof TextInput>) => { async (textInput: ?React.ElementRef<typeof TextInput>) => {
searchTextInputRef.current = textInput; searchTextInputRef.current = textInput;
if (!textInput) { if (!textInput) {
return; return;
Show All 13 Lines (threadInfo: ThreadInfo) => {
text: '', text: '',
results: new Set(), results: new Set(),
}); });
if (searchTextInputRef.current) { if (searchTextInputRef.current) {
searchTextInputRef.current.blur(); searchTextInputRef.current.blur();
} }
navigateToThread({ threadInfo }); navigateToThread({ threadInfo });
}, },
[navigateToThread], [navigateToThread, setSearchState],
); );
const renderItem = React.useCallback( const renderItem = React.useCallback(
(row: { item: SidebarInfo, ... }) => { (row: { item: SidebarInfo, ... }) => {
return ( return (
<SidebarItem <SidebarItem
sidebarInfo={row.item} sidebarInfo={row.item}
onPressItem={onPressItem} onPressItem={onPressItem}
▲ Show 20 Lines • Show All 42 Lines • Show Last 20 Lines
View Options

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

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { TextInput, FlatList, StyleSheet } from 'react-native'; import { TextInput, FlatList, StyleSheet } from 'react-native';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
import SearchIndex from 'lib/shared/search-index'; import SearchIndex from 'lib/shared/search-index';
import { threadSearchText } from 'lib/shared/thread-utils'; import { threadSearchText } from 'lib/shared/thread-utils';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types'; import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
import Modal from '../components/modal.react'; import Modal from '../components/modal.react';
import Search from '../components/search.react'; import Search from '../components/search.react';
import type { RootNavigationProp } from '../navigation/root-navigator.react'; import type { RootNavigationProp } from '../navigation/root-navigator.react';
Show All 16 Lines
} }
type Props = { type Props = {
+navigation: RootNavigationProp<'SidebarListModal'>, +navigation: RootNavigationProp<'SidebarListModal'>,
+route: NavigationRoute<'SidebarListModal'>, +route: NavigationRoute<'SidebarListModal'>,
}; };
function SidebarListModal(props: Props): React.Node { function SidebarListModal(props: Props): React.Node {
const threadID = props.route.params.threadInfo.id; const threadID = props.route.params.threadInfo.id;
const { listData, searchState, setSearchState } = useSearchSidebars(
props.route.params.threadInfo,
);
const sidebarInfos = useSelector( const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadID] ?? [], state => sidebarInfoSelector(state)[threadID] ?? [],
); );
const [searchState, setSearchState] = React.useState({
text: '',
results: new Set<string>(),
});
const listData = React.useMemo(() => {
if (!searchState.text) {
return sidebarInfos;
}
return sidebarInfos.filter(({ threadInfo }) =>
searchState.results.has(threadInfo.id),
);
}, [sidebarInfos, searchState]);
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
const viewerID = useSelector( const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id, state => state.currentUserInfo && state.currentUserInfo.id,
); );
const searchIndex = React.useMemo(() => { const searchIndex = React.useMemo(() => {
const index = new SearchIndex(); const index = new SearchIndex();
for (const sidebarInfo of sidebarInfos) { for (const sidebarInfo of sidebarInfos) {
const { threadInfo } = sidebarInfo; const { threadInfo } = sidebarInfo;
index.addEntry( index.addEntry(
threadInfo.id, threadInfo.id,
threadSearchText(threadInfo, userInfos, viewerID), threadSearchText(threadInfo, userInfos, viewerID),
); );
} }
return index; return index;
}, [sidebarInfos, userInfos, viewerID]); }, [sidebarInfos, userInfos, viewerID]);
React.useEffect(() => { React.useEffect(() => {
setSearchState(curState => ({ setSearchState(curState => ({
...curState, ...curState,
results: new Set(searchIndex.getSearchResults(curState.text)), results: new Set(searchIndex.getSearchResults(curState.text)),
})); }));
}, [searchIndex]); }, [searchIndex, setSearchState]);
const onChangeSearchText = React.useCallback( const onChangeSearchText = React.useCallback(
(searchText: string) => (searchText: string) =>
setSearchState({ setSearchState({
text: searchText, text: searchText,
results: new Set(searchIndex.getSearchResults(searchText)), results: new Set(searchIndex.getSearchResults(searchText)),
}), }),
[searchIndex], [searchIndex, setSearchState],
); );
const searchTextInputRef = React.useRef(); const searchTextInputRef = React.useRef();
const setSearchTextInputRef = React.useCallback( const setSearchTextInputRef = React.useCallback(
async (textInput: ?React.ElementRef<typeof TextInput>) => { async (textInput: ?React.ElementRef<typeof TextInput>) => {
searchTextInputRef.current = textInput; searchTextInputRef.current = textInput;
if (!textInput) { if (!textInput) {
return; return;
Show All 13 Lines (threadInfo: ThreadInfo) => {
text: '', text: '',
results: new Set(), results: new Set(),
}); });
if (searchTextInputRef.current) { if (searchTextInputRef.current) {
searchTextInputRef.current.blur(); searchTextInputRef.current.blur();
} }
navigateToThread({ threadInfo }); navigateToThread({ threadInfo });
}, },
[navigateToThread], [navigateToThread, setSearchState],
); );
const renderItem = React.useCallback( const renderItem = React.useCallback(
(row: { item: SidebarInfo, ... }) => { (row: { item: SidebarInfo, ... }) => {
return ( return (
<SidebarItem <SidebarItem
sidebarInfo={row.item} sidebarInfo={row.item}
onPressItem={onPressItem} onPressItem={onPressItem}
▲ Show 20 Lines • Show All 42 Lines • Show Last 20 Lines
View Options

lib/types/dm-ops.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { TextInput, FlatList, StyleSheet } from 'react-native'; import { TextInput, FlatList, StyleSheet } from 'react-native';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import { sidebarInfoSelector } from 'lib/selectors/thread-selectors'; import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
import SearchIndex from 'lib/shared/search-index'; import SearchIndex from 'lib/shared/search-index';
import { threadSearchText } from 'lib/shared/thread-utils'; import { threadSearchText } from 'lib/shared/thread-utils';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types'; import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
import Modal from '../components/modal.react'; import Modal from '../components/modal.react';
import Search from '../components/search.react'; import Search from '../components/search.react';
import type { RootNavigationProp } from '../navigation/root-navigator.react'; import type { RootNavigationProp } from '../navigation/root-navigator.react';
Show All 16 Lines
} }
type Props = { type Props = {
+navigation: RootNavigationProp<'SidebarListModal'>, +navigation: RootNavigationProp<'SidebarListModal'>,
+route: NavigationRoute<'SidebarListModal'>, +route: NavigationRoute<'SidebarListModal'>,
}; };
function SidebarListModal(props: Props): React.Node { function SidebarListModal(props: Props): React.Node {
const threadID = props.route.params.threadInfo.id; const threadID = props.route.params.threadInfo.id;
const { listData, searchState, setSearchState } = useSearchSidebars(
props.route.params.threadInfo,
);
const sidebarInfos = useSelector( const sidebarInfos = useSelector(
state => sidebarInfoSelector(state)[threadID] ?? [], state => sidebarInfoSelector(state)[threadID] ?? [],
); );
const [searchState, setSearchState] = React.useState({
text: '',
results: new Set<string>(),
});
const listData = React.useMemo(() => {
if (!searchState.text) {
return sidebarInfos;
}
return sidebarInfos.filter(({ threadInfo }) =>
searchState.results.has(threadInfo.id),
);
}, [sidebarInfos, searchState]);
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
const viewerID = useSelector( const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id, state => state.currentUserInfo && state.currentUserInfo.id,
); );
const searchIndex = React.useMemo(() => { const searchIndex = React.useMemo(() => {
const index = new SearchIndex(); const index = new SearchIndex();
for (const sidebarInfo of sidebarInfos) { for (const sidebarInfo of sidebarInfos) {
const { threadInfo } = sidebarInfo; const { threadInfo } = sidebarInfo;
index.addEntry( index.addEntry(
threadInfo.id, threadInfo.id,
threadSearchText(threadInfo, userInfos, viewerID), threadSearchText(threadInfo, userInfos, viewerID),
); );
} }
return index; return index;
}, [sidebarInfos, userInfos, viewerID]); }, [sidebarInfos, userInfos, viewerID]);
React.useEffect(() => { React.useEffect(() => {
setSearchState(curState => ({ setSearchState(curState => ({
...curState, ...curState,
results: new Set(searchIndex.getSearchResults(curState.text)), results: new Set(searchIndex.getSearchResults(curState.text)),
})); }));
}, [searchIndex]); }, [searchIndex, setSearchState]);
const onChangeSearchText = React.useCallback( const onChangeSearchText = React.useCallback(
(searchText: string) => (searchText: string) =>
setSearchState({ setSearchState({
text: searchText, text: searchText,
results: new Set(searchIndex.getSearchResults(searchText)), results: new Set(searchIndex.getSearchResults(searchText)),
}), }),
[searchIndex], [searchIndex, setSearchState],
); );
const searchTextInputRef = React.useRef(); const searchTextInputRef = React.useRef();
const setSearchTextInputRef = React.useCallback( const setSearchTextInputRef = React.useCallback(
async (textInput: ?React.ElementRef<typeof TextInput>) => { async (textInput: ?React.ElementRef<typeof TextInput>) => {
searchTextInputRef.current = textInput; searchTextInputRef.current = textInput;
if (!textInput) { if (!textInput) {
return; return;
Show All 13 Lines (threadInfo: ThreadInfo) => {
text: '', text: '',
results: new Set(), results: new Set(),
}); });
if (searchTextInputRef.current) { if (searchTextInputRef.current) {
searchTextInputRef.current.blur(); searchTextInputRef.current.blur();
} }
navigateToThread({ threadInfo }); navigateToThread({ threadInfo });
}, },
[navigateToThread], [navigateToThread, setSearchState],
); );
const renderItem = React.useCallback( const renderItem = React.useCallback(
(row: { item: SidebarInfo, ... }) => { (row: { item: SidebarInfo, ... }) => {
return ( return (
<SidebarItem <SidebarItem
sidebarInfo={row.item} sidebarInfo={row.item}
onPressItem={onPressItem} onPressItem={onPressItem}
▲ Show 20 Lines • Show All 42 Lines • Show Last 20 Lines