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; @@ -138,12 +139,14 @@ ref={removeDeviceContainerRef} onLayout={onLayout} > - + {shouldDisplayRemoveButton && ( + + )} ); 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,10 +24,12 @@ item, index, thisDeviceID, + shouldAllowDeviceRemoval, }: { +item: DeviceIDAndPlatformDetails, +index: number, +thisDeviceID: ?string, + +shouldAllowDeviceRemoval: boolean, ... }) { return ( @@ -35,6 +37,7 @@ {...item} isPrimary={index === 0} isThisDevice={item.deviceID === thisDeviceID} + shouldAllowDeviceRemoval={shouldAllowDeviceRemoval} /> ); } @@ -48,18 +51,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 [shouldAllowDeviceRemoval, setShouldAllowDeviceRemoval] = + React.useState(false); React.useEffect(() => { void (async () => { const { deviceID } = await getAuthMetadata(); setThisDeviceID(deviceID); + setShouldAllowDeviceRemoval(deviceID === primaryDeviceID); })(); - }, [getAuthMetadata]); + }, [getAuthMetadata, primaryDeviceID]); const separatorComponent = React.useCallback( () => , @@ -73,7 +80,12 @@ - renderDeviceListItem({ item, index, thisDeviceID }) + renderDeviceListItem({ + item, + index, + thisDeviceID, + shouldAllowDeviceRemoval, + }) } keyExtractor={keyExtractor} contentContainerStyle={styles.deviceListContentContainer} @@ -82,12 +94,13 @@ ), [ - separatorComponent, - userDevicesInfos, styles.container, styles.header, styles.deviceListContentContainer, + userDevicesInfos, + separatorComponent, thisDeviceID, + shouldAllowDeviceRemoval, ], );