diff --git a/native/profile/linked-devices-bottom-sheet.react.js b/native/profile/linked-devices-bottom-sheet.react.js --- a/native/profile/linked-devices-bottom-sheet.react.js +++ b/native/profile/linked-devices-bottom-sheet.react.js @@ -27,6 +27,7 @@ export type LinkedDevicesBottomSheetParams = { +deviceID: string, + +shouldDisplayRemoveButton: boolean, }; type Props = { @@ -38,7 +39,7 @@ const { navigation, route: { - params: { deviceID }, + params: { deviceID, shouldDisplayRemoveButton }, }, } = props; @@ -134,6 +135,18 @@ ); }, [insets.bottom, setContentHeight]); + let removeDeviceButton; + if (shouldDisplayRemoveButton) { + removeDeviceButton = ( + + ); + } + return ( - + {removeDeviceButton} ); diff --git a/native/profile/linked-devices-list-item.react.js b/native/profile/linked-devices-list-item.react.js --- a/native/profile/linked-devices-list-item.react.js +++ b/native/profile/linked-devices-list-item.react.js @@ -19,10 +19,17 @@ +platformDetails: ?IdentityPlatformDetails, +isPrimary: boolean, +isThisDevice: boolean, + +shouldAllowDeviceRemoval: boolean, }; function LinkedDevicesListItem(props: Props): React.Node { - const { deviceID, platformDetails, isPrimary, isThisDevice } = props; + const { + deviceID, + platformDetails, + isPrimary, + isThisDevice, + shouldAllowDeviceRemoval, + } = props; const styles = useStyles(unboundStyles); const colors = useColors(); @@ -30,13 +37,17 @@ const { navigate } = useNavigation(); const onPress = React.useCallback(() => { + if (!shouldAllowDeviceRemoval) { + return; + } navigate<'LinkedDevicesBottomSheet'>({ name: LinkedDevicesBottomSheetRouteName, params: { deviceID, + shouldDisplayRemoveButton: shouldAllowDeviceRemoval, }, }); - }, [deviceID, navigate]); + }, [deviceID, navigate, shouldAllowDeviceRemoval]); const deviceType = platformDetails?.deviceType; @@ -74,9 +85,23 @@ return finalLabel; }, [deviceID, isPrimary, isThisDevice]); - const deviceListItem = React.useMemo( - () => ( - + const deviceListItem = React.useMemo(() => { + let editIcon; + if (shouldAllowDeviceRemoval) { + editIcon = ( + + ); + } + return ( + + {editIcon} - ), - [ - styles.listItemContainer, - styles.pillContainer, - onPress, - label, - colors.codeBackground, - deviceIcon, - ], - ); + ); + }, [ + styles.listItemContainer, + styles.pillContainer, + onPress, + label, + colors.codeBackground, + colors.modalForegroundSecondaryLabel, + deviceIcon, + shouldAllowDeviceRemoval, + ]); return deviceListItem; } diff --git a/native/profile/linked-devices.react.js b/native/profile/linked-devices.react.js --- a/native/profile/linked-devices.react.js +++ b/native/profile/linked-devices.react.js @@ -22,22 +22,31 @@ function renderDeviceListItem({ item, - index, - thisDeviceID, + isThisDevice, + isPrimary, + allowEdits, }: { +item: DeviceIDAndPlatformDetails, - +index: number, - +thisDeviceID: ?string, + +isThisDevice: boolean, + +isPrimary: boolean, + +allowEdits: boolean, ... }) { + const shouldAllowDeviceRemoval = allowEdits && !isPrimary && !isThisDevice; return ( ); } + +type ViewerInfo = { + +deviceID: ?string, + +canEdit: boolean, +}; type Props = { +navigation: ProfileNavigationProp<'LinkedDevices'>, +route: NavigationRoute<'LinkedDevices'>, @@ -48,18 +57,25 @@ const userDevicesInfos: $ReadOnlyArray = useSelector(getOwnPeerDevices); + const primaryDeviceID = userDevicesInfos[0].deviceID; const identityContext = React.useContext(IdentityClientContext); invariant(identityContext, 'identity context not set'); const { getAuthMetadata } = identityContext; - const [thisDeviceID, setThisDeviceID] = React.useState(null); + const [viewerInfo, setViewerInfo] = React.useState({ + deviceID: null, + canEdit: false, + }); React.useEffect(() => { void (async () => { const { deviceID } = await getAuthMetadata(); - setThisDeviceID(deviceID); + setViewerInfo({ + deviceID, + canEdit: deviceID === primaryDeviceID, + }); })(); - }, [getAuthMetadata]); + }, [getAuthMetadata, primaryDeviceID]); const separatorComponent = React.useCallback( () => , @@ -73,7 +89,12 @@ - renderDeviceListItem({ item, index, thisDeviceID }) + renderDeviceListItem({ + item, + isPrimary: index === 0, + isThisDevice: item.deviceID === viewerInfo.deviceID, + allowEdits: viewerInfo.canEdit, + }) } keyExtractor={keyExtractor} contentContainerStyle={styles.deviceListContentContainer} @@ -82,12 +103,12 @@ ), [ - separatorComponent, - userDevicesInfos, styles.container, styles.header, styles.deviceListContentContainer, - thisDeviceID, + userDevicesInfos, + separatorComponent, + viewerInfo, ], );