Page MenuHomePhabricator

[native] linked devices component
ClosedPublic

Authored by varun on Jul 28 2024, 8:13 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Dec 4, 11:40 AM
Unknown Object (File)
Wed, Dec 4, 10:53 AM
Unknown Object (File)
Wed, Dec 4, 12:46 AM
Unknown Object (File)
Wed, Nov 13, 12:57 PM
Unknown Object (File)
Wed, Nov 13, 12:57 PM
Unknown Object (File)
Nov 9 2024, 7:59 AM
Unknown Object (File)
Oct 31 2024, 6:19 AM
Unknown Object (File)
Oct 29 2024, 6:42 PM
Subscribers

Details

Summary

Depends on D12884

UI for linked devices. You can navigate from this screen to the SecondaryDeviceQRCodeScanner using the Add button on the top right

next diff will add a bottom drawer for interacting with each device

Test Plan

successfully added a new device, it appeared in the list. navigation works as expected

Simulator Screenshot - iPhone 15 Pro Max - 2024-07-29 at 00.08.07.png (2ร—1 px, 153 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

varun requested review of this revision.Jul 28 2024, 8:30 PM

Neat! ๐Ÿ˜„ I'm not a React/UI expert so resigning, but I'm glad my gist helped.

Ideas for the future:

  • In the future, we can add a possibility of giving them user-defined friendly names (not sure where they could be stored and how to sync them)
native/profile/linked-devices-list-item.react.js
48โ€“54 โ†—(On Diff #42857)

We could potentially retrieve thisDeviceID and also add a label that this is the current device.

We should probably fetch it once in the parent list component and pass via props, but I am not sure

Looks ok to me, but we need to make sure @ashoat will take a look before landing

native/profile/linked-devices-list-item.react.js
6โ€“7 โ†—(On Diff #42857)

Can be merged

28โ€“42 โ†—(On Diff #42857)

We rarely use switch in our code. Can you replace it with if-else?

51 โ†—(On Diff #42857)

After appending primary it is no longer a base label - doesn't matter that much, but maybe we can make the naming less confusing.

58 โ†—(On Diff #42857)

Why do we use a TouchableOpacity without onPress? If the component isn't pressable, we shouldn't use a component that handles pressing.

This revision is now accepted and ready to land.Jul 29 2024, 12:41 AM

Adding myself as blocking based on @tomek's comment above

This revision now requires review to proceed.Jul 31 2024, 8:58 PM
ashoat added inline comments.
native/profile/keyserver-selection-list.react.js
90โ€“96 โ†—(On Diff #42857)

Nice find!

native/profile/linked-devices-list-item.react.js
48โ€“54 โ†—(On Diff #42857)

I think that's a good idea. I might prefer to use (this device) to make it more consistent with (primary). We should also consider how to format a device when it is both the current device, and the primary device

51 โ†—(On Diff #42857)

You can avoid having to name the final result:

const baseLabel = deviceID.substr(0, 7);
if (!isPrimary) {
  return baseLabel;
}
return `${baseLabel} (primary)`;

Could potentially also combine the last four lines into a single-line ternary

58 โ†—(On Diff #42857)

Yeah this doesn't make sense to me either

This revision is now accepted and ready to land.Aug 2 2024, 2:34 PM
native/profile/linked-devices-list-item.react.js
58 โ†—(On Diff #42857)

next diff adds an onPress

This revision was automatically updated to reflect the committed changes.

We should also consider how to format a device when it is both the current device, and the primary device

Hmm, it seems like not much thought was put here... you just put both parentheticals in at the same time.