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,
],
);