Implement manage devices view

3 files changed, 83 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
index 4acdf38a0f..c7c0855810 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
@@ -1,3 +1,64 @@
+import { IDevice } from '../../../../shared/daemon-rpc-types';
+import { messages } from '../../../../shared/gettext';
+import { Spinner, Text } from '../../../lib/components';
+import { FlexColumn } from '../../../lib/components/flex-column';
+import { View } from '../../../lib/components/view';
+import { useHistory } from '../../../lib/history';
+import { AppNavigationHeader } from '../../app-navigation-header';
+import { DeviceListItem } from '../../device-list-item';
+import { BackAction } from '../../KeyboardNavigation';
+import List from '../../List';
+import { NavigationContainer } from '../../NavigationContainer';
+import { NavigationScrollbars } from '../../NavigationScrollbars';
+import { useGetDevices } from './hooks';
+
+const getDeviceKey = (device: IDevice): string => device.id;
+
 export function ManageDevicesView() {
-  return <div>Manage Devices View</div>;
+  const { pop } = useHistory();
+
+  const { loading, devices } = useGetDevices();
+  return (
+    <BackAction action={pop}>
+      <View backgroundColor="darkBlue">
+        <NavigationContainer>
+          <AppNavigationHeader
+            title={
+              // TRANSLATORS: Title label in navigation bar for the manage devices view.
+              messages.pgettext('device-management', 'Manage devices')
+            }
+          />
+          <NavigationScrollbars>
+            <FlexColumn $gap="medium">
+              <View.Container>
+                <FlexColumn $gap="small">
+                  <Text variant="titleBig">
+                    {messages.pgettext('device-management', 'Manage devices')}
+                  </Text>
+                  <Text variant="labelTiny" color="whiteAlpha60">
+                    {
+                      // TRANSLATORS: Subtitle text in the manage devices view, explaining
+                      // TRANSLATORS: devices and what they can do in the manage devices view.
+                      messages.pgettext(
+                        'device-management',
+                        'View and manage all your logged in devices. You can have up to 5 devices on one account at a time. Each device gets a name when logged in to help you tell them apart easily.',
+                      )
+                    }
+                  </Text>
+                </FlexColumn>
+              </View.Container>
+              {loading && <Spinner />}
+              {!loading && (
+                <div>
+                  <List items={devices} getKey={getDeviceKey}>
+                    {(device) => <DeviceListItem device={device} />}
+                  </List>
+                </div>
+              )}
+            </FlexColumn>
+          </NavigationScrollbars>
+        </NavigationContainer>
+      </View>
+    </BackAction>
+  );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
new file mode 100644
index 0000000000..1dfb60199c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-get-devices';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
new file mode 100644
index 0000000000..1016f8f37f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useAppContext } from '../../../../context';
+import { useSelector } from '../../../../redux/store';
+
+export const useGetDevices = () => {
+  const { fetchDevices } = useAppContext();
+  const accountNumber = useSelector((state) => state.account.accountNumber)!;
+  const devices = useSelector((state) => state.account.devices);
+
+  React.useEffect(() => {
+    try {
+      void fetchDevices(accountNumber);
+    } catch {
+      /* no-op */
+    }
+  }, [accountNumber, fetchDevices]);
+
+  return devices;
+};