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; @@ -133,6 +134,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(); @@ -34,9 +41,10 @@ name: LinkedDevicesBottomSheetRouteName, params: { deviceID, + shouldDisplayRemoveButton: shouldAllowDeviceRemoval, }, }); - }, [deviceID, navigate]); + }, [deviceID, navigate, shouldAllowDeviceRemoval]); const deviceType = platformDetails?.deviceType; 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 @@ -24,17 +24,23 @@ item, index, thisDeviceID, + allowEdits, }: { +item: DeviceIDAndPlatformDetails, +index: number, +thisDeviceID: ?string, + +allowEdits: boolean, ... }) { + const isPrimary = index === 0; + const isThisDevice = item.deviceID === thisDeviceID; + const shouldAllowDeviceRemoval = allowEdits && !isPrimary && !isThisDevice; return ( ); } @@ -48,18 +54,22 @@ 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 [shouldAllowEdits, setShouldAllowEdits] = + React.useState(false); React.useEffect(() => { void (async () => { const { deviceID } = await getAuthMetadata(); setThisDeviceID(deviceID); + setShouldAllowEdits(deviceID === primaryDeviceID); })(); - }, [getAuthMetadata]); + }, [getAuthMetadata, primaryDeviceID]); const separatorComponent = React.useCallback( () => , @@ -73,7 +83,12 @@ - renderDeviceListItem({ item, index, thisDeviceID }) + renderDeviceListItem({ + item, + index, + thisDeviceID, + allowEdits: shouldAllowEdits, + }) } keyExtractor={keyExtractor} contentContainerStyle={styles.deviceListContentContainer} @@ -82,12 +97,13 @@ ), [ - separatorComponent, - userDevicesInfos, styles.container, styles.header, styles.deviceListContentContainer, + userDevicesInfos, + separatorComponent, thisDeviceID, + shouldAllowEdits, ], );