From 3f28f5605afb73278074b4fd57c19e2488c9e31a Mon Sep 17 00:00:00 2001
From: Amber Cronin <amber@amber.vision>
Date: Thu, 18 Jul 2024 00:44:12 +0100
Subject: [PATCH] Backport device sort from development

---
 package.json                            | 3 ++-
 src/components/DeviceList/DeviceList.js | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3ca4e81..21edfe9 100644
--- a/package.json
+++ b/package.json
@@ -48,5 +48,6 @@
     "husky": "^7.0.4",
     "prettier": "^2.4.1",
     "react-scripts": "4.0.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }
diff --git a/src/components/DeviceList/DeviceList.js b/src/components/DeviceList/DeviceList.js
index 2a3ca49..22a2655 100644
--- a/src/components/DeviceList/DeviceList.js
+++ b/src/components/DeviceList/DeviceList.js
@@ -3,10 +3,17 @@
 import { Link } from 'wouter';
 import DeviceCard from '../DeviceCard/DeviceCard';
 
+const deviceSort = (a, b) => {
+  a.friendly_name[0] - b.friendly_name[0] ||
+    a.friendly_name.localeCompare(b.friendly_name, undefined, {
+      numeric: true,
+    });
+};
+
 function DeviceList(props) {
   return (
     <div>
-      {props.devices.map((device) => (
+      {props.devices.sort(deviceSort).map((device) => (
         <Link
           href={`/devices/${device.friendly_name}`}
           key={device.ieee_address}