Page MenuHomePhabricator
Differential D9466

[lib] Introduce chat mention context
ClosedPublic
Actions

Authored by tomek on Oct 12 2023, 7:13 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 10, 7:52 AM
Unknown Object (File)
Fri, Mar 7, 10:02 PM
Unknown Object (File)
Thu, Feb 27, 7:09 PM
Unknown Object (File)
Jan 20 2025, 11:36 PM
Unknown Object (File)
Jan 19 2025, 9:30 PM
Unknown Object (File)
Jan 19 2025, 9:29 PM
Unknown Object (File)
Jan 19 2025, 9:29 PM
Unknown Object (File)
Jan 19 2025, 7:49 PM
View All Files
Subscribers
will

Details

Reviewers
kamil
inka
atul
ashoat
Commits
rCOMM5011d6a78baf: [lib] Introduce chat mention context
Summary

In the previous implementation, we were correctly memoizing computations, but it was done using hooks, so in each component where these were used, we were doing the same computations again. In this approach, the memoization is moved to a new context, so that computations aren't repeated.

Depends on D9465

https://linear.app/comm/issue/ENG-5224/ashoats-js-thread-freezes-on-app-start-on-build-268

Test Plan

Check if getChatMentionCandidates function invocations happen every time with new inputs (by adding code that saves the input to a global variable, compares new arguments with the previous ones, and console logs the result).
Check if chat mentioning works correctly on the web and native.

Diff Detail

Repository
rCOMM Comm
Branch
mentioning-proper-fix
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Oct 12 2023, 7:13 AM
Herald added a subscriber: will. · View Herald TranscriptOct 12 2023, 7:13 AM
Harbormaster completed remote builds in B23212: Diff 31965.Oct 12 2023, 7:48 AM
tomek requested review of this revision.Oct 12 2023, 7:48 AM
tomek planned changes to this revision.Oct 12 2023, 8:28 AM

This diff needs more work before it can be reviewed, but seems to fix (at least a part of) the performance issue.

tomek updated this revision to Diff 31994.Oct 13 2023, 9:34 AM

Clean up the code

tomek edited the summary of this revision. (Show Details)Oct 13 2023, 9:34 AM
tomek edited the test plan for this revision. (Show Details)
tomek added inline comments.Oct 13 2023, 9:42 AM
lib/components/chat-mention-provider.react.js
44

This replaces useThreadChatMentionSearchIndex - it returns stable indexes which don't need to be memoized

74

Moved from thread-utils - it isn't used anywhere else

179

Also moved from thread-utils

198–200

Moved from thread-utils with a slight difference: now it takes chatMentionCandidatesObj as an argument instead of creating a new value by using a hook. This change makes it possible to call useChatMentionCandidatesObjAndUtils in only one place.

lib/hooks/chat-mention-hooks.js
26–27

Use global value from a context

Harbormaster completed remote builds in B23238: Diff 31994.Oct 13 2023, 9:52 AM
ashoat accepted this revision.Oct 16 2023, 5:54 PM
ashoat added inline comments.
lib/hooks/chat-mention-hooks.js
29–40

I know this code is just getting moved, but I think this is more readable:

const communityID =
  threadInfo.community === genesis.id
    ? communityThreadIDForGenesisThreads[threadInfo.id]
    : (threadInfo.community ?? threadInfo.id);
const allChatsWithinCommunity = chatMentionCandidatesObj[communityID];
if (!allChatsWithinCommunity) {
  return undefined;
}
const { [threadInfo.id]: _, ...result } = allChatsWithinCommunity;
return result;
This revision is now accepted and ready to land.Oct 16 2023, 5:54 PM
ashoat added a child revision: D9523: [lib] Drill allAtOnce from useChatMentionCandidatesObjAndUtils to useENSNames.Oct 18 2023, 12:11 PM
tomek updated this revision to Diff 32179.Oct 19 2023, 3:28 AM

Simplify the code

tomek added inline comments.Oct 19 2023, 3:29 AM
lib/hooks/chat-mention-hooks.js
32 ↗(On Diff #32179)

Eslint complains about wrapping threadInfo.community ?? threadInfo.id with parentheses.

Harbormaster completed remote builds in B23350: Diff 32179.Oct 19 2023, 3:46 AM
Closed by commit rCOMM5011d6a78baf: [lib] Introduce chat mention context (authored by tomek). · Explain WhyOct 19 2023, 5:09 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM5011d6a78baf: [lib] Introduce chat mention context.

Revision Contents
Changeset List

Diff 31994

View Options

lib/components/chat-mention-provider.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;
View Options

lib/hooks/chat-mention-hooks.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;
View Options

lib/shared/thread-utils.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;
View Options

native/chat/chat-input-bar.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;
View Options

native/chat/message-list-types.js

Loading...
View Options

native/chat/message-preview.react.js

Loading...
View Options

native/chat/sidebar-input-bar-height-measurer.react.js

Loading...
View Options

native/chat/sidebar-navigation.js

Loading...
View Options

native/chat/utils.js

Loading...
View Options

native/root.react.js

Loading...
View Options

web/app.react.js

Loading...
View Options

web/chat/chat-input-bar.react.js

Loading...
View Options

web/chat/chat-message-list.react.js

Loading...
View Options

web/chat/message-preview.react.js

Loading...
View Options

web/components/message-result.react.js

Loading...
View Options

web/modals/threads/sidebars/sidebar.react.js

Loading...
View Options

web/modals/threads/subchannels/subchannel.react.js

Loading...
View Options

web/selectors/thread-selectors.js

Loading...