Page MenuHomePhabricator
Differential D13995

[native] introduce community list component
ClosedPublic
Actions

Authored by varun on Nov 21 2024, 1:41 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Mar 27, 5:02 PM
Unknown Object (File)
Thu, Mar 27, 11:58 AM
Unknown Object (File)
Thu, Mar 27, 9:17 AM
Unknown Object (File)
Mar 26 2025, 10:49 PM
Unknown Object (File)
Mar 26 2025, 3:07 PM
Unknown Object (File)
Feb 25 2025, 7:30 AM
Unknown Object (File)
Feb 23 2025, 11:00 PM
Unknown Object (File)
Feb 22 2025, 8:28 PM
View All 52 Files
Subscribers
tomek

Details

Reviewers
ashoat
Commits
rCOMM3427c719adc5: [native] introduce community list component
Summary

this component is basically a fork of the native ThreadList component

the differences are, the new component:

  • renders CommunityListItems
  • does not have an onSelect (we may consider adding this in the future to display community info)
  • does not have a searchRef (we don't want to call focus() on the textInput, keyboard should not display unless user presses search bar)

Depends on D13994

Test Plan

see video

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

varun created this revision.Nov 21 2024, 1:41 PM
Herald added a subscriber: tomek. · View Herald TranscriptNov 21 2024, 1:41 PM
varun edited the test plan for this revision. (Show Details)Nov 21 2024, 1:44 PM
varun attached a referenced file: F3336053: RPReplay_Final1732225392.MP4. (Show Details)
varun mentioned this in D13994: [native] community list item component.
Harbormaster completed remote builds in B32756: Diff 45932.Nov 21 2024, 2:00 PM
varun requested review of this revision.Nov 21 2024, 2:00 PM
ashoat requested changes to this revision.Nov 21 2024, 6:28 PM

React class components should not be used for new components in 95% of cases... can you try to make this a function component?

native/components/community-list.react.js
44 ↗(On Diff #45932)

We should not be introducing any new class components

50–65 ↗(On Diff #45932)

This messy pattern is approximating React.useMemo

84 ↗(On Diff #45932)

There's a shorthand for this now

95 ↗(On Diff #45932)
This revision now requires changes to proceed.Nov 21 2024, 6:28 PM
varun added a child revision: D13996: [native] community joiner modal.Nov 21 2024, 7:58 PM
varun updated this revision to Diff 46370.Dec 11 2024, 8:43 PM

rewrite as a functional component

Harbormaster completed remote builds in B33052: Diff 46370.Dec 11 2024, 9:00 PM
ashoat accepted this revision.Dec 12 2024, 10:49 AM
ashoat added inline comments.
native/components/community-list.react.js
24–26

Do we actually have multiple use cases for this component?

If not, I think:

  1. We should avoid having optional properties, and make them all requires
  2. We should remove any properties that are not used in our upcoming first (and only?) use case
48–50

Nit: shorthand

This revision is now accepted and ready to land.Dec 12 2024, 10:49 AM
varun added inline comments.Jan 14 2025, 1:08 PM
native/components/community-list.react.js
24–26

made similar changes downstream

Closed by commit rCOMM3427c719adc5: [native] introduce community list component (authored by varun). · Explain WhyJan 14 2025, 1:09 PM
This revision was automatically updated to reflect the committed changes.
varun added a commit: rCOMM3427c719adc5: [native] introduce community list component.

Revision Contents
Changeset List

PathSize
native/
components/
108 lines

Diff 46370

View Options

native/components/community-list.react.js

// @flow // @flow
import invariant from 'invariant';
import { import {
setThreadUnreadStatusActionTypes, setThreadUnreadStatusActionTypes,
updateActivityActionTypes, updateActivityActionTypes,
} from '../actions/activity-actions.js'; } from '../actions/activity-actions.js';
import { setClientDBStoreActionType } from '../actions/client-db-store-actions.js'; import { setClientDBStoreActionType } from '../actions/client-db-store-actions.js';
import { saveMessagesActionType } from '../actions/message-actions.js'; import { saveMessagesActionType } from '../actions/message-actions.js';
import { siweAuthActionTypes } from '../actions/siwe-actions.js'; import { siweAuthActionTypes } from '../actions/siwe-actions.js';
import { import {
Show All 15 Linesimport {
updateSubscriptionActionTypes, updateSubscriptionActionTypes,
} from '../actions/user-actions.js'; } from '../actions/user-actions.js';
import { import {
type ThreadStoreOperation, type ThreadStoreOperation,
threadStoreOpsHandlers, threadStoreOpsHandlers,
} from '../ops/thread-store-ops.js'; } from '../ops/thread-store-ops.js';
import { stateSyncSpecs } from '../shared/state-sync/state-sync-specs.js'; import { stateSyncSpecs } from '../shared/state-sync/state-sync-specs.js';
import { updateSpecs } from '../shared/updates/update-specs.js'; import { updateSpecs } from '../shared/updates/update-specs.js';
import type { MinimallyEncodedRawThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js';
import type { BaseAction } from '../types/redux-types.js'; import type { BaseAction } from '../types/redux-types.js';
import { type ClientThreadInconsistencyReportCreationRequest } from '../types/report-types.js'; import { type ClientThreadInconsistencyReportCreationRequest } from '../types/report-types.js';
import { import {
serverRequestTypes, serverRequestTypes,
processServerRequestsActionType, processServerRequestsActionType,
} from '../types/request-types.js'; } from '../types/request-types.js';
import { import {
fullStateSyncActionType, fullStateSyncActionType,
incrementalStateSyncActionType, incrementalStateSyncActionType,
} from '../types/socket-types.js'; } from '../types/socket-types.js';
import type { import type {
RawThreadInfo, MinimallyEncodedRawThreadInfos,
RawThreadInfos,
ThreadStore, ThreadStore,
} from '../types/thread-types.js'; } from '../types/thread-types.js';
import { import {
type ClientUpdateInfo, type ClientUpdateInfo,
processUpdatesActionType, processUpdatesActionType,
} from '../types/update-types.js'; } from '../types/update-types.js';
import { setNewSessionActionType } from '../utils/action-utils.js'; import { setNewSessionActionType } from '../utils/action-utils.js';
const { processStoreOperations: processThreadStoreOperations } = const { processStoreOperations: processThreadStoreOperations } =
threadStoreOpsHandlers; threadStoreOpsHandlers;
function generateOpsForThreadUpdates( function generateOpsForThreadUpdates(
threadInfos: RawThreadInfos, threadInfos: MinimallyEncodedRawThreadInfos,
payload: { payload: {
+updatesResult: { +newUpdates: $ReadOnlyArray<ClientUpdateInfo>, ... }, +updatesResult: { +newUpdates: $ReadOnlyArray<ClientUpdateInfo>, ... },
... ...
}, },
): $ReadOnlyArray<ThreadStoreOperation> { ): $ReadOnlyArray<ThreadStoreOperation> {
return payload.updatesResult.newUpdates return payload.updatesResult.newUpdates
.map(update => .map(update =>
updateSpecs[update.type].generateOpsForThreadUpdates?.( updateSpecs[update.type].generateOpsForThreadUpdates?.(
Show All 19 Lines if (
action.type === registerActionTypes.success || action.type === registerActionTypes.success ||
action.type === fullStateSyncActionType action.type === fullStateSyncActionType
) { ) {
const newThreadInfos = action.payload.threadInfos; const newThreadInfos = action.payload.threadInfos;
const threadStoreOperations = [ const threadStoreOperations = [
{ {
type: 'remove_all', type: 'remove_all',
}, },
...Object.keys(newThreadInfos).map((id: string) => ({ ...Object.keys(newThreadInfos).map((id: string) => {
invariant(
newThreadInfos[id].minimallyEncoded,
'newThreadInfos must be minimallyEncoded for current clients',
);
atulAuthorUnsubmitted
Done
Inline Actions

I thought putting an invariant here was a reasonable trade-off vs. refactoring the types in the fullStateSyncActionType payload (specifically StateSyncFullActionPayload which is derived from ClientFullStateSync which is derived from BaseFullStateSync) which are used across clients and keyserver.

Open to re-exploring if that would be preferred.

atul: I thought putting an `invariant` here was a reasonable trade-off vs. refactoring the types in…
return {
type: 'replace', type: 'replace',
payload: { id, threadInfo: newThreadInfos[id] }, payload: { id, threadInfo: newThreadInfos[id] },
})), };
}),
]; ];
const updatedThreadStore = processThreadStoreOperations( const updatedThreadStore = processThreadStoreOperations(
state, state,
threadStoreOperations, threadStoreOperations,
); );
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines ) {
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations, threadStoreOperations,
}; };
} else if (action.type === updateSubscriptionActionTypes.success) { } else if (action.type === updateSubscriptionActionTypes.success) {
const { threadID, subscription } = action.payload; const { threadID, subscription } = action.payload;
const threadInfo = state.threadInfos[threadID]; const threadInfo = state.threadInfos[threadID];
// TODO (atul): Try to get rid of this ridiculous branching.
if (threadInfo.minimallyEncoded) {
const newThreadInfo = {
...threadInfo,
currentUser: {
...threadInfo.currentUser,
subscription,
},
};
const threadStoreOperations = [
{
type: 'replace',
payload: {
id: threadID,
threadInfo: newThreadInfo,
},
},
];
const updatedThreadStore = processThreadStoreOperations(
state,
threadStoreOperations,
);
return {
threadStore: updatedThreadStore,
newThreadInconsistencies: [],
threadStoreOperations,
};
} else {
const newThreadInfo = { const newThreadInfo = {
...threadInfo, ...threadInfo,
currentUser: { currentUser: {
...threadInfo.currentUser, ...threadInfo.currentUser,
subscription, subscription,
}, },
}; };
const threadStoreOperations = [ const threadStoreOperations = [
{ {
type: 'replace', type: 'replace',
payload: { payload: {
id: threadID, id: threadID,
threadInfo: newThreadInfo, threadInfo: newThreadInfo,
}, },
}, },
]; ];
const updatedThreadStore = processThreadStoreOperations( const updatedThreadStore = processThreadStoreOperations(
state, state,
threadStoreOperations, threadStoreOperations,
); );
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations, threadStoreOperations,
}; };
}
} else if (action.type === saveMessagesActionType) { } else if (action.type === saveMessagesActionType) {
const threadIDToMostRecentTime = new Map<string, number>(); const threadIDToMostRecentTime = new Map<string, number>();
for (const messageInfo of action.payload.rawMessageInfos) { for (const messageInfo of action.payload.rawMessageInfos) {
const current = threadIDToMostRecentTime.get(messageInfo.threadID); const current = threadIDToMostRecentTime.get(messageInfo.threadID);
if (!current || current < messageInfo.time) { if (!current || current < messageInfo.time) {
threadIDToMostRecentTime.set(messageInfo.threadID, messageInfo.time); threadIDToMostRecentTime.set(messageInfo.threadID, messageInfo.time);
} }
} }
const changedThreadInfos: { [string]: RawThreadInfo } = {}; const changedThreadInfos: { [string]: MinimallyEncodedRawThreadInfo } = {};
for (const [threadID, mostRecentTime] of threadIDToMostRecentTime) { for (const [threadID, mostRecentTime] of threadIDToMostRecentTime) {
const threadInfo = state.threadInfos[threadID]; const threadInfo = state.threadInfos[threadID];
if ( if (
!threadInfo || !threadInfo ||
threadInfo.currentUser.unread || threadInfo.currentUser.unread ||
action.payload.updatesCurrentAsOf > mostRecentTime action.payload.updatesCurrentAsOf > mostRecentTime
) { ) {
continue; continue;
} }
const changedThreadInfo = state.threadInfos[threadID]; const changedThreadInfo = state.threadInfos[threadID];
// TODO (atul): Try to get rid of this ridiculous branching.
if (changedThreadInfo.minimallyEncoded) {
changedThreadInfos[threadID] = {
...changedThreadInfo,
currentUser: {
...changedThreadInfo.currentUser,
unread: true,
},
};
} else {
changedThreadInfos[threadID] = { changedThreadInfos[threadID] = {
...changedThreadInfo, ...changedThreadInfo,
currentUser: { currentUser: {
...changedThreadInfo.currentUser, ...changedThreadInfo.currentUser,
unread: true, unread: true,
}, },
}; };
} }
}
if (Object.keys(changedThreadInfos).length !== 0) { if (Object.keys(changedThreadInfos).length !== 0) {
const threadStoreOperations = Object.keys(changedThreadInfos).map(id => ({ const threadStoreOperations = Object.keys(changedThreadInfos).map(id => ({
type: 'replace', type: 'replace',
payload: { payload: {
id, id,
threadInfo: changedThreadInfos[id], threadInfo: changedThreadInfos[id],
}, },
})); }));
Show All 25 Lines if (!rawThreadInfos && !deleteThreadIDs) {
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations: [], threadStoreOperations: [],
}; };
} }
const threadStoreOperations: ThreadStoreOperation[] = []; const threadStoreOperations: ThreadStoreOperation[] = [];
if (rawThreadInfos) { if (rawThreadInfos) {
for (const rawThreadInfo of rawThreadInfos) { for (const rawThreadInfo of rawThreadInfos) {
invariant(
rawThreadInfo.minimallyEncoded,
'rawThreadInfo must be minimallyEncoded on new clients',
);
atulAuthorUnsubmitted
Done
Inline Actions

Similarly thought this was a reasonable trade-off to avoid having to refactor types related to state check mechanism.

Open to re-exploring if that would be preferred.

atul: Similarly thought this was a reasonable trade-off to avoid having to refactor types related to…
threadStoreOperations.push({ threadStoreOperations.push({
type: 'replace', type: 'replace',
payload: { payload: {
id: rawThreadInfo.id, id: rawThreadInfo.id,
threadInfo: rawThreadInfo, threadInfo: rawThreadInfo,
}, },
}); });
} }
Show All 20 Lines const newThreadInconsistencies =
); );
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies, newThreadInconsistencies,
threadStoreOperations, threadStoreOperations,
}; };
} else if (action.type === updateActivityActionTypes.success) { } else if (action.type === updateActivityActionTypes.success) {
const updatedThreadInfos: { [string]: RawThreadInfo } = {}; const updatedThreadInfos: { [string]: MinimallyEncodedRawThreadInfo } = {};
for (const setToUnread of action.payload.result.unfocusedToUnread) { for (const setToUnread of action.payload.result.unfocusedToUnread) {
const threadInfo = state.threadInfos[setToUnread]; const threadInfo = state.threadInfos[setToUnread];
// TODO (atul): Try to get rid of this ridiculous branching.
if (threadInfo.minimallyEncoded) {
if (threadInfo && !threadInfo.currentUser.unread) {
updatedThreadInfos[setToUnread] = {
...threadInfo,
currentUser: {
...threadInfo.currentUser,
unread: true,
},
};
}
} else {
if (threadInfo && !threadInfo.currentUser.unread) { if (threadInfo && !threadInfo.currentUser.unread) {
updatedThreadInfos[setToUnread] = { updatedThreadInfos[setToUnread] = {
...threadInfo, ...threadInfo,
currentUser: { currentUser: {
...threadInfo.currentUser, ...threadInfo.currentUser,
unread: true, unread: true,
}, },
}; };
} }
} }
}
if (Object.keys(updatedThreadInfos).length === 0) { if (Object.keys(updatedThreadInfos).length === 0) {
return { return {
threadStore: state, threadStore: state,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations: [], threadStoreOperations: [],
}; };
} }
const threadStoreOperations = Object.keys(updatedThreadInfos).map(id => ({ const threadStoreOperations = Object.keys(updatedThreadInfos).map(id => ({
Show All 10 Lines ) {
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations, threadStoreOperations,
}; };
} else if (action.type === setThreadUnreadStatusActionTypes.started) { } else if (action.type === setThreadUnreadStatusActionTypes.started) {
const { threadID, unread } = action.payload; const { threadID, unread } = action.payload;
const threadInfo = state.threadInfos[threadID]; const threadInfo = state.threadInfos[threadID];
// TODO (atul): Try to get rid of this ridiculous branching.
if (threadInfo.minimallyEncoded) {
const updatedThreadInfo = {
...threadInfo,
currentUser: {
...threadInfo.currentUser,
unread,
},
};
const threadStoreOperations = [
{
type: 'replace',
payload: {
id: threadID,
threadInfo: updatedThreadInfo,
},
},
];
const updatedThreadStore = processThreadStoreOperations(
state,
threadStoreOperations,
);
return {
threadStore: updatedThreadStore,
newThreadInconsistencies: [],
threadStoreOperations,
};
} else {
const updatedThreadInfo = { const updatedThreadInfo = {
...threadInfo, ...threadInfo,
currentUser: { currentUser: {
...threadInfo.currentUser, ...threadInfo.currentUser,
unread, unread,
}, },
}; };
const threadStoreOperations = [ const threadStoreOperations = [
{ {
type: 'replace', type: 'replace',
payload: { payload: {
id: threadID, id: threadID,
threadInfo: updatedThreadInfo, threadInfo: updatedThreadInfo,
}, },
}, },
]; ];
const updatedThreadStore = processThreadStoreOperations( const updatedThreadStore = processThreadStoreOperations(
state, state,
threadStoreOperations, threadStoreOperations,
); );
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations, threadStoreOperations,
}; };
}
} else if (action.type === setThreadUnreadStatusActionTypes.success) { } else if (action.type === setThreadUnreadStatusActionTypes.success) {
const { threadID, resetToUnread } = action.payload; const { threadID, resetToUnread } = action.payload;
const currentUser = state.threadInfos[threadID].currentUser; const currentUser = state.threadInfos[threadID].currentUser;
if (!resetToUnread || currentUser.unread) { if (!resetToUnread || currentUser.unread) {
return { return {
threadStore: state, threadStore: state,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations: [], threadStoreOperations: [],
}; };
} }
const threadInfo = state.threadInfos[threadID]; const threadInfo = state.threadInfos[threadID];
// TODO (atul): Try to get rid of this ridiculous branching.
if (threadInfo.minimallyEncoded) {
const updatedThread = { const updatedThread = {
...threadInfo, ...threadInfo,
currentUser: { ...threadInfo.currentUser, unread: true }, currentUser: { ...threadInfo.currentUser, unread: true },
}; };
const threadStoreOperations = [ const threadStoreOperations = [
{ {
type: 'replace', type: 'replace',
payload: { payload: {
id: threadID, id: threadID,
threadInfo: updatedThread, threadInfo: updatedThread,
}, },
}, },
]; ];
const updatedThreadStore = processThreadStoreOperations( const updatedThreadStore = processThreadStoreOperations(
state, state,
threadStoreOperations, threadStoreOperations,
); );
return { return {
threadStore: updatedThreadStore, threadStore: updatedThreadStore,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations, threadStoreOperations,
}; };
} else {
const updatedThread = {
...threadInfo,
currentUser: { ...threadInfo.currentUser, unread: true },
};
const threadStoreOperations = [
{
type: 'replace',
payload: {
id: threadID,
threadInfo: updatedThread,
},
},
];
const updatedThreadStore = processThreadStoreOperations(
state,
threadStoreOperations,
);
return {
threadStore: updatedThreadStore,
newThreadInconsistencies: [],
threadStoreOperations,
};
}
} else if (action.type === setClientDBStoreActionType) { } else if (action.type === setClientDBStoreActionType) {
return { return {
threadStore: action.payload.threadStore ?? state, threadStore: action.payload.threadStore ?? state,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations: [], threadStoreOperations: [],
}; };
} }
return { return {
threadStore: state, threadStore: state,
newThreadInconsistencies: [], newThreadInconsistencies: [],
threadStoreOperations: [], threadStoreOperations: [],
}; };
} }
export { reduceThreadInfos }; export { reduceThreadInfos };