Page MenuHomePhabricator
Differential D7673

[native] Display the pinned messages for the thread in the new screen
ClosedPublic
Actions

Authored by rohan on Apr 27 2023, 11:15 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 5:39 PM
Unknown Object (File)
Mon, Mar 17, 5:39 PM
Unknown Object (File)
Mon, Mar 17, 5:38 PM
Unknown Object (File)
Mon, Mar 17, 5:38 PM
Unknown Object (File)
Mon, Mar 17, 5:38 PM
Unknown Object (File)
Mon, Mar 17, 5:38 PM
Unknown Object (File)
Mon, Mar 17, 5:38 PM
Unknown Object (File)
Mon, Mar 17, 5:37 PM
View All Files
Subscribers
ashoat
inka

Details

Reviewers
atul
ginsu
tomek
ashoat
Commits
rCOMMdb4d128b7604: [native] Display the pinned messages for the thread in the new screen
Summary

This is the screen that should display the pinned messages / the search results.

Logic is similar to web: https://phab.comm.dev/D7380

Depends on D7672

Test Plan

Check to see the pinned messages render in the screen

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

rohan created this revision.Apr 27 2023, 11:15 AM
Herald added a subscriber: ashoat. · View Herald TranscriptApr 27 2023, 11:15 AM
rohan edited the test plan for this revision. (Show Details)Apr 27 2023, 11:19 AM
rohan attached a referenced file: F513347: Simulator Screen Recording - iPhone 14 Pro - 2023-04-27 at 14.18.46.mp4. (Show Details)
rohan added inline comments.Apr 27 2023, 11:21 AM
native/chat/message-results-screen.react.js
28 ↗(On Diff #25877)

The logic is very similar to web: https://phab.comm.dev/D7380

37–38 ↗(On Diff #25877)

I can probably use dispatchActionPromise() here to use a loading state

119–144 ↗(On Diff #25877)

Same comment as here: https://phab.comm.dev/D7607#inline-49676

native/chat/message.react.js
33–39 ↗(On Diff #25877)

Here, as well as in text-message.react.js and robotext-message.react.js, I can probably extract this to one shared type, so we only have to update it in one place

native/chat/robotext-message.react.js
31–38 ↗(On Diff #25877)

Can probably extract to one shared type (though this is for the flow errors I was running into by not including ChatNavigationProp<'MessageResultsScreen'> and NavigationRoute<'MessageResultsScreen'> here, but I can check if there's a better way to handle this without including it here

native/chat/text-message.react.js
41–48 ↗(On Diff #25877)

Can probably extract to one shared type

Harbormaster completed remote builds in B18891: Diff 25877.Apr 27 2023, 11:32 AM
rohan requested review of this revision.Apr 27 2023, 11:32 AM
rohan edited the summary of this revision. (Show Details)Apr 27 2023, 11:38 AM
rohan added inline comments.Apr 27 2023, 5:57 PM
native/chat/message-result.react.js
50 ↗(On Diff #25877)

Accidental change

ashoat added inline comments.Apr 28 2023, 5:23 AM
native/chat/robotext-message.react.js
31–38 ↗(On Diff #25877)

Here's a comment of mine on one of @ginsu's diff that explains how to do this in a more idiomatic way. @ginsu can help with pointers if you need any!

rohan updated this revision to Diff 26020.May 2 2023, 1:12 PM

Rebase

rohan added inline comments.May 2 2023, 1:19 PM
native/chat/robotext-message.react.js
31–38 ↗(On Diff #25877)

Thanks! I'll take a look and give it a go

Harbormaster completed remote builds in B19000: Diff 26020.May 2 2023, 1:32 PM
atul added a comment.May 3 2023, 8:13 AM

Thanks! I'll take a look and give it a go

Is this ready for review at the moment? Sending back to your queue, feel free to re-request review if it is.

atul requested changes to this revision.May 3 2023, 8:13 AM
This revision now requires changes to proceed.May 3 2023, 8:13 AM
ashoat added inline comments.May 5 2023, 11:08 AM
native/chat/robotext-message.react.js
31–38 ↗(On Diff #25877)

Looking at this again, I can see that we have some ChatNavigationProps and some AppNavigationProps... it'll be pretty messy to select the right one based on the route name, so probably not worth it. I think we can leave this as-is

rohan requested review of this revision.May 5 2023, 11:18 AM
In D7673#228607, @atul wrote:

Thanks! I'll take a look and give it a go

Is this ready for review at the moment? Sending back to your queue, feel free to re-request review if it is.

It's ready for review now, talked about it in my sync with Ashoat and it'll be best to leave it as is at the moment

rohan updated this revision to Diff 26137.May 5 2023, 4:29 PM

Fix screen styles

rohan edited the summary of this revision. (Show Details)May 5 2023, 4:30 PM
rohan edited the test plan for this revision. (Show Details)
rohan attached a referenced file: F524331: Simulator Screen Recording - iPhone 14 Pro - 2023-05-05 at 19.24.29.mp4. (Show Details)
Harbormaster completed remote builds in B19089: Diff 26137.May 5 2023, 4:46 PM
rohan edited the summary of this revision. (Show Details)May 5 2023, 5:32 PM
rohan added a child revision: D7735: [native] Show message tooltip on press in the pinned messages screen.May 5 2023, 5:55 PM
ashoat requested changes to this revision.May 6 2023, 1:57 AM
ashoat added inline comments.
native/chat/message-results-screen.react.js
58–60 ↗(On Diff #26137)

I think there's a serious issue here – you don't appear to be fetching the pinned messages' related messages (eg. reactions, edits), and are instead relying on them coincidentally being in the Redux store. Is this correct?

I thought you and @inka had been collaborating on this work, and @inka had introduced a utility on the keyserver side that you would be able to use for this. @inka sent this message to you on Thursday:

Screenshot 2023-05-06 at 10.53.51 AM.png (412×1 px, 101 KB)

Have you followed up on that and implemented the functionality to fetch related messages using that utility? If yes, can you please explain why you need to access messageListData here? If no, you'll need to make those changes on both native and web in order to be able to land this project...

This revision now requires changes to proceed.May 6 2023, 1:57 AM
ashoat attached a referenced file: F524570: Screenshot 2023-05-06 at 10.53.51 AM.png. (Show Details)May 6 2023, 4:49 AM
rohan requested review of this revision.May 7 2023, 2:52 PM

Re-requesting review after D7736 and following up about whether we need messageListData or not:

I think so personally, since that seems like the place where the logic for constructing ChatMessageInfoItems is handled (getting the reactions, the thread created from the message, etc.). Without that, I feel like it'd involve a lot of copy-paste for doing all of that

ashoat accepted this revision.May 7 2023, 8:06 PM

Accepting to unblock

ashoat added a comment.May 8 2023, 6:30 AM

Some nits that aren't super important

native/chat/message-results-screen.react.js
116 ↗(On Diff #26137)

You could use a shorthand and skip the return here

151 ↗(On Diff #26137)

You could use a shorthand and skip the return here

152 ↗(On Diff #26137)

You could use a shorthand and skip the return here

atul accepted this revision.May 8 2023, 7:17 AM
This revision is now accepted and ready to land.May 8 2023, 7:17 AM
rohan updated this revision to Diff 26213.May 8 2023, 10:35 AM

Use short hand

Harbormaster completed remote builds in B19143: Diff 26213.May 8 2023, 10:53 AM
rohan updated this revision to Diff 26217.May 8 2023, 11:40 AM

Rebase

Harbormaster completed remote builds in B19147: Diff 26217.May 8 2023, 12:00 PM
rohan updated this revision to Diff 26227.May 8 2023, 12:07 PM

Rebase

Harbormaster completed remote builds in B19156: Diff 26227.May 8 2023, 12:30 PM
Closed by commit rCOMMdb4d128b7604: [native] Display the pinned messages for the thread in the new screen (authored by RohanK6 <rohan.khanderia@gmail.com>, committed by rohan). · Explain WhyMay 8 2023, 12:38 PM
This revision was automatically updated to reflect the committed changes.
rohan added a commit: rCOMMdb4d128b7604: [native] Display the pinned messages for the thread in the new screen.
inka mentioned this in D7774: [native] Add MessageSearchContent.May 10 2023, 3:49 AM
• InkaSokolowska mentioned this in rCOMM4b9285c9f6a5: [native] Add MessageSearchContent.May 24 2023, 2:12 AM

Revision Contents
Changeset List

Diff 26217

View Options

native/chat/message-result.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native'; import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View, Text } from 'react-native';
import genesis from 'lib/facts/genesis.js'; import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import {
userInfoSelectorForPotentialMembers, userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers, userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js'; } from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
▲ Show 20 Lines • Show All 189 Lines • ▼ Show 20 Lines if (this.frozen) {
this.pendingListDataWithHeights = listDataWithHeights; this.pendingListDataWithHeights = listDataWithHeights;
} else { } else {
this.setState({ listDataWithHeights }); this.setState({ listDataWithHeights });
} }
}; };
} }
const unboundStyles = { const unboundStyles = {
pinnedCountBanner: {
backgroundColor: 'panelForeground',
height: 30,
flexDirection: 'row',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
pinnedCountText: {
color: 'panelBackgroundLabel',
marginRight: 5,
},
container: { container: {
backgroundColor: 'listBackground', backgroundColor: 'listBackground',
flex: 1, flex: 1,
}, },
threadContent: { threadContent: {
flex: 1, flex: 1,
}, },
hiddenThreadContent: { hiddenThreadContent: {
▲ Show 20 Lines • Show All 124 Lines • ▼ Show 20 Lines ) {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
const measureMessages = useHeightMeasurer(); const measureMessages = useHeightMeasurer();
const genesisThreadInfo = useSelector( const genesisThreadInfo = useSelector(
state => threadInfoSelector(state)[genesis.id], state => threadInfoSelector(state)[genesis.id],
); );
const bannerText = React.useMemo(() => {
if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
return '';
}
const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
}, [threadInfo.pinnedCount]);
atulUnsubmitted
Not Done
Inline Actions

You don't need to use React.useMemo(...) here.

The useMemo() hook is helpful for maintaining referential equality so that objects will be considered "shallowly equal" (== in JS) and we can avoid re-renders. This is helpful for objects (including Map(), Set(), etc), arrays (which are objects), and functions (which are objects).

On the other hand, strings in JS are considered shallowly equal if they have the same contents, so we don't have to worry about re-renders if the "content" stays the same.

See below:

875403.png (620×810 px, 104 KB)

(In like C++, which you've been working w/ recently, std::strings can be allocated on the heap (unlike integers, booleans, etc) which may have been part of your reasoning that shallow equality would check reference instead of contents?)

atul: You don't need to use `React.useMemo(...)` here. The `useMemo()` hook is helpful for…
const pinnedCountBanner = React.useMemo(() => {
if (!bannerText) {
return null;
}
return (
<View style={styles.pinnedCountBanner}>
<Text style={styles.pinnedCountText}>{bannerText}</Text>
<Icon
name="chevron-right"
size={12}
color={colors.panelBackgroundLabel}
/>
</View>
);
}, [
bannerText,
styles.pinnedCountBanner,
styles.pinnedCountText,
colors.panelBackgroundLabel,
]);
return ( return (
<MessageListContextProvider threadInfo={threadInfo}> <MessageListContextProvider threadInfo={threadInfo}>
{pinnedCountBanner}
<MessageListContainer <MessageListContainer
{...props} {...props}
usernameInputText={usernameInputText} usernameInputText={usernameInputText}
updateUsernameInput={updateUsernameInput} updateUsernameInput={updateUsernameInput}
userInfoInputArray={userInfoInputArray} userInfoInputArray={userInfoInputArray}
updateTagInput={updateTagInput} updateTagInput={updateTagInput}
resolveToUser={resolveToUser} resolveToUser={resolveToUser}
otherUserInfos={otherUserInfos} otherUserInfos={otherUserInfos}
Show All 14 Lines
View Options

native/chat/message-results-screen.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native'; import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View, Text } from 'react-native';
import genesis from 'lib/facts/genesis.js'; import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import {
userInfoSelectorForPotentialMembers, userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers, userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js'; } from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
▲ Show 20 Lines • Show All 189 Lines • ▼ Show 20 Lines if (this.frozen) {
this.pendingListDataWithHeights = listDataWithHeights; this.pendingListDataWithHeights = listDataWithHeights;
} else { } else {
this.setState({ listDataWithHeights }); this.setState({ listDataWithHeights });
} }
}; };
} }
const unboundStyles = { const unboundStyles = {
pinnedCountBanner: {
backgroundColor: 'panelForeground',
height: 30,
flexDirection: 'row',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
pinnedCountText: {
color: 'panelBackgroundLabel',
marginRight: 5,
},
container: { container: {
backgroundColor: 'listBackground', backgroundColor: 'listBackground',
flex: 1, flex: 1,
}, },
threadContent: { threadContent: {
flex: 1, flex: 1,
}, },
hiddenThreadContent: { hiddenThreadContent: {
▲ Show 20 Lines • Show All 124 Lines • ▼ Show 20 Lines ) {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
const measureMessages = useHeightMeasurer(); const measureMessages = useHeightMeasurer();
const genesisThreadInfo = useSelector( const genesisThreadInfo = useSelector(
state => threadInfoSelector(state)[genesis.id], state => threadInfoSelector(state)[genesis.id],
); );
const bannerText = React.useMemo(() => {
if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
return '';
}
const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
}, [threadInfo.pinnedCount]);
atulUnsubmitted
Not Done
Inline Actions

You don't need to use React.useMemo(...) here.

The useMemo() hook is helpful for maintaining referential equality so that objects will be considered "shallowly equal" (== in JS) and we can avoid re-renders. This is helpful for objects (including Map(), Set(), etc), arrays (which are objects), and functions (which are objects).

On the other hand, strings in JS are considered shallowly equal if they have the same contents, so we don't have to worry about re-renders if the "content" stays the same.

See below:

875403.png (620×810 px, 104 KB)

(In like C++, which you've been working w/ recently, std::strings can be allocated on the heap (unlike integers, booleans, etc) which may have been part of your reasoning that shallow equality would check reference instead of contents?)

atul: You don't need to use `React.useMemo(...)` here. The `useMemo()` hook is helpful for…
const pinnedCountBanner = React.useMemo(() => {
if (!bannerText) {
return null;
}
return (
<View style={styles.pinnedCountBanner}>
<Text style={styles.pinnedCountText}>{bannerText}</Text>
<Icon
name="chevron-right"
size={12}
color={colors.panelBackgroundLabel}
/>
</View>
);
}, [
bannerText,
styles.pinnedCountBanner,
styles.pinnedCountText,
colors.panelBackgroundLabel,
]);
return ( return (
<MessageListContextProvider threadInfo={threadInfo}> <MessageListContextProvider threadInfo={threadInfo}>
{pinnedCountBanner}
<MessageListContainer <MessageListContainer
{...props} {...props}
usernameInputText={usernameInputText} usernameInputText={usernameInputText}
updateUsernameInput={updateUsernameInput} updateUsernameInput={updateUsernameInput}
userInfoInputArray={userInfoInputArray} userInfoInputArray={userInfoInputArray}
updateTagInput={updateTagInput} updateTagInput={updateTagInput}
resolveToUser={resolveToUser} resolveToUser={resolveToUser}
otherUserInfos={otherUserInfos} otherUserInfos={otherUserInfos}
Show All 14 Lines
View Options

native/chat/message.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native'; import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View, Text } from 'react-native';
import genesis from 'lib/facts/genesis.js'; import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import {
userInfoSelectorForPotentialMembers, userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers, userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js'; } from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
▲ Show 20 Lines • Show All 189 Lines • ▼ Show 20 Lines if (this.frozen) {
this.pendingListDataWithHeights = listDataWithHeights; this.pendingListDataWithHeights = listDataWithHeights;
} else { } else {
this.setState({ listDataWithHeights }); this.setState({ listDataWithHeights });
} }
}; };
} }
const unboundStyles = { const unboundStyles = {
pinnedCountBanner: {
backgroundColor: 'panelForeground',
height: 30,
flexDirection: 'row',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
pinnedCountText: {
color: 'panelBackgroundLabel',
marginRight: 5,
},
container: { container: {
backgroundColor: 'listBackground', backgroundColor: 'listBackground',
flex: 1, flex: 1,
}, },
threadContent: { threadContent: {
flex: 1, flex: 1,
}, },
hiddenThreadContent: { hiddenThreadContent: {
▲ Show 20 Lines • Show All 124 Lines • ▼ Show 20 Lines ) {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
const measureMessages = useHeightMeasurer(); const measureMessages = useHeightMeasurer();
const genesisThreadInfo = useSelector( const genesisThreadInfo = useSelector(
state => threadInfoSelector(state)[genesis.id], state => threadInfoSelector(state)[genesis.id],
); );
const bannerText = React.useMemo(() => {
if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
return '';
}
const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
}, [threadInfo.pinnedCount]);
atulUnsubmitted
Not Done
Inline Actions

You don't need to use React.useMemo(...) here.

The useMemo() hook is helpful for maintaining referential equality so that objects will be considered "shallowly equal" (== in JS) and we can avoid re-renders. This is helpful for objects (including Map(), Set(), etc), arrays (which are objects), and functions (which are objects).

On the other hand, strings in JS are considered shallowly equal if they have the same contents, so we don't have to worry about re-renders if the "content" stays the same.

See below:

875403.png (620×810 px, 104 KB)

(In like C++, which you've been working w/ recently, std::strings can be allocated on the heap (unlike integers, booleans, etc) which may have been part of your reasoning that shallow equality would check reference instead of contents?)

atul: You don't need to use `React.useMemo(...)` here. The `useMemo()` hook is helpful for…
const pinnedCountBanner = React.useMemo(() => {
if (!bannerText) {
return null;
}
return (
<View style={styles.pinnedCountBanner}>
<Text style={styles.pinnedCountText}>{bannerText}</Text>
<Icon
name="chevron-right"
size={12}
color={colors.panelBackgroundLabel}
/>
</View>
);
}, [
bannerText,
styles.pinnedCountBanner,
styles.pinnedCountText,
colors.panelBackgroundLabel,
]);
return ( return (
<MessageListContextProvider threadInfo={threadInfo}> <MessageListContextProvider threadInfo={threadInfo}>
{pinnedCountBanner}
<MessageListContainer <MessageListContainer
{...props} {...props}
usernameInputText={usernameInputText} usernameInputText={usernameInputText}
updateUsernameInput={updateUsernameInput} updateUsernameInput={updateUsernameInput}
userInfoInputArray={userInfoInputArray} userInfoInputArray={userInfoInputArray}
updateTagInput={updateTagInput} updateTagInput={updateTagInput}
resolveToUser={resolveToUser} resolveToUser={resolveToUser}
otherUserInfos={otherUserInfos} otherUserInfos={otherUserInfos}
Show All 14 Lines
View Options

native/chat/robotext-message.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native'; import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View, Text } from 'react-native';
import genesis from 'lib/facts/genesis.js'; import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
import { import {
userInfoSelectorForPotentialMembers, userInfoSelectorForPotentialMembers,
userSearchIndexForPotentialMembers, userSearchIndexForPotentialMembers,
} from 'lib/selectors/user-selectors.js'; } from 'lib/selectors/user-selectors.js';
import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
▲ Show 20 Lines • Show All 189 Lines • ▼ Show 20 Lines if (this.frozen) {
this.pendingListDataWithHeights = listDataWithHeights; this.pendingListDataWithHeights = listDataWithHeights;
} else { } else {
this.setState({ listDataWithHeights }); this.setState({ listDataWithHeights });
} }
}; };
} }
const unboundStyles = { const unboundStyles = {
pinnedCountBanner: {
backgroundColor: 'panelForeground',
height: 30,
flexDirection: 'row',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
pinnedCountText: {
color: 'panelBackgroundLabel',
marginRight: 5,
},
container: { container: {
backgroundColor: 'listBackground', backgroundColor: 'listBackground',
flex: 1, flex: 1,
}, },
threadContent: { threadContent: {
flex: 1, flex: 1,
}, },
hiddenThreadContent: { hiddenThreadContent: {
▲ Show 20 Lines • Show All 124 Lines • ▼ Show 20 Lines ) {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
const measureMessages = useHeightMeasurer(); const measureMessages = useHeightMeasurer();
const genesisThreadInfo = useSelector( const genesisThreadInfo = useSelector(
state => threadInfoSelector(state)[genesis.id], state => threadInfoSelector(state)[genesis.id],
); );
const bannerText = React.useMemo(() => {
if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
return '';
}
const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
}, [threadInfo.pinnedCount]);
atulUnsubmitted
Not Done
Inline Actions

You don't need to use React.useMemo(...) here.

The useMemo() hook is helpful for maintaining referential equality so that objects will be considered "shallowly equal" (== in JS) and we can avoid re-renders. This is helpful for objects (including Map(), Set(), etc), arrays (which are objects), and functions (which are objects).

On the other hand, strings in JS are considered shallowly equal if they have the same contents, so we don't have to worry about re-renders if the "content" stays the same.

See below:

875403.png (620×810 px, 104 KB)

(In like C++, which you've been working w/ recently, std::strings can be allocated on the heap (unlike integers, booleans, etc) which may have been part of your reasoning that shallow equality would check reference instead of contents?)

atul: You don't need to use `React.useMemo(...)` here. The `useMemo()` hook is helpful for…
const pinnedCountBanner = React.useMemo(() => {
if (!bannerText) {
return null;
}
return (
<View style={styles.pinnedCountBanner}>
<Text style={styles.pinnedCountText}>{bannerText}</Text>
<Icon
name="chevron-right"
size={12}
color={colors.panelBackgroundLabel}
/>
</View>
);
}, [
bannerText,
styles.pinnedCountBanner,
styles.pinnedCountText,
colors.panelBackgroundLabel,
]);
return ( return (
<MessageListContextProvider threadInfo={threadInfo}> <MessageListContextProvider threadInfo={threadInfo}>
{pinnedCountBanner}
<MessageListContainer <MessageListContainer
{...props} {...props}
usernameInputText={usernameInputText} usernameInputText={usernameInputText}
updateUsernameInput={updateUsernameInput} updateUsernameInput={updateUsernameInput}
userInfoInputArray={userInfoInputArray} userInfoInputArray={userInfoInputArray}
updateTagInput={updateTagInput} updateTagInput={updateTagInput}
resolveToUser={resolveToUser} resolveToUser={resolveToUser}
otherUserInfos={otherUserInfos} otherUserInfos={otherUserInfos}
Show All 14 Lines
View Options

native/chat/text-message.react.js

Loading...