Page MenuHomePhabricator
Differential D5476

[native] Refactor Spoiler component to MarkdownSpoiler
AbandonedPublicDraft
Actions

Authored by rohan on Oct 25 2022, 5:28 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 23, 4:24 AM
Unknown Object (File)
Mon, Mar 17, 3:57 AM
Unknown Object (File)
Mon, Mar 17, 3:52 AM
Unknown Object (File)
Feb 25 2025, 2:58 PM
Unknown Object (File)
Feb 17 2025, 2:04 AM
Unknown Object (File)
Feb 14 2025, 6:24 PM
Unknown Object (File)
Feb 12 2025, 9:17 PM
Unknown Object (File)
Feb 12 2025, 9:17 PM
View All Files
Subscribers
• abosh
ashoat
tomek

Details

Reviewers
atul
ginsu
Summary

For consistency with the existing MarkdownLink component in
native, refactoring Spoiler to MarkdownSpoiler and putting it in the same
directory native/markdown/... makes the most sense. This is Step 2 in
ENG-2072
(https://linear.app/comm/issue/ENG-2072/maintain-the-spoiler-state-upon-opening-textmessagetooltipmodal).

Test Plan

Spoiler text still works as expected, and they are revealed on
click.

Diff Detail

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

Revision Contents
Changeset List

PathSize
native/
components/
markdown/
components/
6 lines
markdown/
6 lines

Diff 17892

View Options

native/components/spoiler.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/markdown/markdown-spoiler.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/markdown/rules.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