Add and use DeviceList component

7 files changed, 32 insertions, 28 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx
new file mode 100644
index 0000000000..ce79e980e4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx
@@ -0,0 +1,23 @@
+import { IDevice } from '../../../shared/daemon-rpc-types';
+import { Flex, Spinner } from '../../lib/components';
+import { DeviceListItem } from '../device-list-item';
+import List from '../List';
+import { useGetDevices } from './hooks';
+
+const getDeviceKey = (device: IDevice): string => device.id;
+
+export function DeviceList() {
+  const devices = useGetDevices();
+  const showList = devices.length > 0;
+  return (
+    <Flex $flexDirection="column" $alignItems="center">
+      {showList ? (
+        <List items={devices} getKey={getDeviceKey} skipInitialAddTransition>
+          {(device) => <DeviceListItem device={device} />}
+        </List>
+      ) : (
+        <Spinner size="big" />
+      )}
+    </Flex>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/index.ts
index 1ada24c505..1ada24c505 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/index.ts
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/device-list/hooks/use-get-devices.ts
index 84236ac8fb..c4bed93361 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-get-devices.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useAppContext } from '../../../../context';
-import { useSelector } from '../../../../redux/store';
+import { useAppContext } from '../../../context';
+import { useSelector } from '../../../redux/store';
 import { useSortedDevices } from './use-sorted-devices';
 
 export const useGetDevices = () => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-sorted-devices.ts
index e364188191..4de9d694bf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-sorted-devices.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useSelector } from '../../../../redux/store';
+import { useSelector } from '../../../redux/store';
 
 export const useSortedDevices = () => {
   const devices = useSelector((state) => state.account.devices);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/index.ts
new file mode 100644
index 0000000000..6f96cca162
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/index.ts
@@ -0,0 +1 @@
+export * from './DeviceList';
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 4aea9d8f64..ca8c57fd3a 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,23 +1,17 @@
-import { IDevice } from '../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../shared/gettext';
-import { Spinner, Text } from '../../../lib/components';
+import { 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 { DeviceList } from '../../device-list';
 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() {
   const { pop } = useHistory();
 
-  const { loading, devices } = useGetDevices();
   return (
     <BackAction action={pop}>
       <View backgroundColor="darkBlue">
@@ -47,14 +41,7 @@ export function ManageDevicesView() {
                   </Text>
                 </FlexColumn>
               </View.Container>
-              {loading && <Spinner />}
-              {!loading && (
-                <div>
-                  <List items={devices} getKey={getDeviceKey} skipAddTransition>
-                    {(device) => <DeviceListItem device={device} />}
-                  </List>
-                </div>
-              )}
+              <DeviceList />
             </FlexColumn>
           </NavigationScrollbars>
         </NavigationContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
index b362b41ae3..6596302f4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
@@ -13,8 +13,7 @@ import { IconBadge, IconBadgeProps } from '../../../lib/icon-badge';
 import { useSelector } from '../../../redux/store';
 import { AppMainHeader } from '../../app-main-header';
 import CustomScrollbars from '../../CustomScrollbars';
-import { DeviceListItem } from '../../device-list-item';
-import List from '../../List';
+import { DeviceList } from '../../device-list';
 
 const StyledCustomScrollbars = styled(CustomScrollbars)({
   flex: 1,
@@ -63,11 +62,7 @@ export function TooManyDevicesView() {
                 </Text>
                 <Text variant="labelTiny">{subtitle}</Text>
               </View.Container>
-              <div>
-                <List items={devices} getKey={getDeviceKey} skipAddTransition>
-                  {(device) => <DeviceListItem device={device} />}
-                </List>
-              </div>
+              <DeviceList />
             </>
           )}
 
@@ -92,8 +87,6 @@ export function TooManyDevicesView() {
   );
 }
 
-const getDeviceKey = (device: IDevice): string => device.id;
-
 function getIconSource(devices: Array<IDevice>): IconBadgeProps['state'] {
   if (devices.length === 5) {
     return 'negative';