Page MenuHomePhorge
Files F33256455

D13262.1768585198.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D13262.1768585198.diff
View Options

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 = (
+ <Button
+ style={styles.removeButtonContainer}
+ onPress={confirmDeviceRemoval}
+ >
+ <Text style={styles.removeButtonText}>Remove device</Text>
+ </Button>
+ );
+ }
+
return (
<BottomSheet ref={bottomSheetRef} onClosed={goBack}>
<View
@@ -141,12 +154,7 @@
ref={removeDeviceContainerRef}
onLayout={onLayout}
>
- <Button
- style={styles.removeButtonContainer}
- onPress={confirmDeviceRemoval}
- >
- <Text style={styles.removeButtonText}>Remove device</Text>
- </Button>
+ {removeDeviceButton}
</View>
</BottomSheet>
);
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(
- () => (
- <TouchableOpacity style={styles.listItemContainer} onPress={onPress}>
+ const deviceListItem = React.useMemo(() => {
+ let editIcon;
+ if (shouldAllowDeviceRemoval) {
+ editIcon = (
+ <SWMIcon
+ name="edit-1"
+ size={20}
+ color={colors.modalForegroundSecondaryLabel}
+ />
+ );
+ }
+ return (
+ <TouchableOpacity
+ style={styles.listItemContainer}
+ disabled={!shouldAllowDeviceRemoval}
+ onPress={onPress}
+ >
<View style={styles.pillContainer}>
<Pill
label={label}
@@ -84,17 +109,19 @@
icon={deviceIcon}
/>
</View>
+ {editIcon}
</TouchableOpacity>
- ),
- [
- 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 (
<LinkedDevicesListItem
{...item}
- isPrimary={index === 0}
- isThisDevice={item.deviceID === thisDeviceID}
+ isPrimary={isPrimary}
+ isThisDevice={isThisDevice}
+ shouldAllowDeviceRemoval={shouldAllowDeviceRemoval}
/>
);
}
+
+type ViewerInfo = {
+ +deviceID: ?string,
+ +canEdit: boolean,
+};
type Props = {
+navigation: ProfileNavigationProp<'LinkedDevices'>,
+route: NavigationRoute<'LinkedDevices'>,
@@ -48,18 +57,25 @@
const userDevicesInfos: $ReadOnlyArray<DeviceIDAndPlatformDetails> =
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<?string>(null);
+ const [viewerInfo, setViewerInfo] = React.useState<ViewerInfo>({
+ 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(
() => <View style={styles.separator} />,
@@ -73,7 +89,12 @@
<FlatList
data={userDevicesInfos}
renderItem={({ item, index }) =>
- 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 @@
</View>
),
[
- separatorComponent,
- userDevicesInfos,
styles.container,
styles.header,
styles.deviceListContentContainer,
- thisDeviceID,
+ userDevicesInfos,
+ separatorComponent,
+ viewerInfo,
],
);

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 16, 5:39 PM (11 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5945443
Default Alt Text
D13262.1768585198.diff (6 KB)

Event Timeline