diff --git a/native/profile/keyserver-selection-list.react.js b/native/profile/keyserver-selection-list.react.js --- a/native/profile/keyserver-selection-list.react.js +++ b/native/profile/keyserver-selection-list.react.js @@ -87,13 +87,6 @@ marginBottom: 24, paddingVertical: 2, }, - keyserverListItemContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 24, - paddingVertical: 10, - }, separator: { backgroundColor: 'panelForegroundBorder', height: 1, diff --git a/native/profile/linked-devices-list-item.react.js b/native/profile/linked-devices-list-item.react.js new file mode 100644 --- /dev/null +++ b/native/profile/linked-devices-list-item.react.js @@ -0,0 +1,94 @@ +// @flow + +import * as React from 'react'; +import { View, TouchableOpacity } from 'react-native'; + +import type { IdentityPlatformDetails } from 'lib/types/identity-service-types.js'; +import { identityDeviceTypes } from 'lib/types/identity-service-types.js'; + +import Pill from '../components/pill.react.js'; +import SWMIcon from '../components/swmansion-icon.react.js'; +import { useStyles, useColors } from '../themes/colors.js'; + +type Props = { + +deviceID: string, + +platformDetails: ?IdentityPlatformDetails, + +isPrimary: boolean, +}; + +function LinkedDevicesListItem(props: Props): React.Node { + const { deviceID, platformDetails, isPrimary } = props; + + const styles = useStyles(unboundStyles); + const colors = useColors(); + + const deviceType = platformDetails?.deviceType; + + const deviceIcon = React.useMemo(() => { + let name; + switch (deviceType) { + case identityDeviceTypes.IOS: + case identityDeviceTypes.ANDROID: + name = 'phone'; + break; + case identityDeviceTypes.KEYSERVER: + name = 'cloud'; + break; + case identityDeviceTypes.WEB: + name = 'globe-1'; + break; + default: + name = 'question'; + } + return ( + + ); + }, [deviceType, colors.panelForegroundLabel]); + + const label = React.useMemo(() => { + let baseLabel = deviceID.substr(0, 7); + if (isPrimary) { + baseLabel += ' (primary)'; + } + return baseLabel; + }, [deviceID, isPrimary]); + + const deviceListItem = React.useMemo( + () => ( + + + + + + ), + [ + styles.listItemContainer, + styles.pillContainer, + label, + colors.codeBackground, + deviceIcon, + ], + ); + + return deviceListItem; +} + +const unboundStyles = { + listItemContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingHorizontal: 24, + paddingVertical: 10, + }, + pillContainer: { + flex: 1, + alignItems: 'baseline', + }, +}; + +export default LinkedDevicesListItem; 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 @@ -1,9 +1,33 @@ // @flow import * as React from 'react'; +import { Text, View, FlatList } from 'react-native'; +import { + getOwnPeerDevices, + type DeviceIDAndPlatformDetails, +} from 'lib/selectors/user-selectors.js'; + +import LinkedDevicesListItem from './linked-devices-list-item.react.js'; import type { ProfileNavigationProp } from './profile.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; +import { useSelector } from '../redux/redux-utils.js'; +import { useStyles } from '../themes/colors.js'; + +function keyExtractor(item: DeviceIDAndPlatformDetails) { + return item.deviceID; +} + +function renderDeviceListItem({ + item, + index, +}: { + +item: DeviceIDAndPlatformDetails, + +index: number, + ... +}) { + return ; +} type Props = { +navigation: ProfileNavigationProp<'LinkedDevices'>, @@ -11,7 +35,67 @@ }; // eslint-disable-next-line no-unused-vars function LinkedDevices(props: Props): React.Node { - return null; + const styles = useStyles(unboundStyles); + + const userDevicesInfos: $ReadOnlyArray = + useSelector(getOwnPeerDevices); + + const separatorComponent = React.useCallback( + () => , + [styles.separator], + ); + + const userDeviceList = React.useMemo( + () => ( + + USER DEVICES + + + ), + [ + separatorComponent, + userDevicesInfos, + styles.container, + styles.header, + styles.deviceListContentContainer, + ], + ); + + return userDeviceList; } +const unboundStyles = { + container: { + flex: 1, + backgroundColor: 'panelBackground', + paddingTop: 24, + }, + header: { + color: 'panelBackgroundLabel', + fontSize: 12, + fontWeight: '400', + paddingBottom: 3, + paddingHorizontal: 24, + }, + deviceListContentContainer: { + backgroundColor: 'panelForeground', + borderBottomWidth: 1, + borderColor: 'panelForegroundBorder', + borderTopWidth: 1, + marginBottom: 24, + paddingVertical: 2, + }, + separator: { + backgroundColor: 'panelForegroundBorder', + height: 1, + marginHorizontal: 16, + }, +}; + export default LinkedDevices;