From 5bc875db1ddf3fe75758a722d310c331269dadd6 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 12 Mar 2022 10:20:53 -0700
Subject: [PATCH] Add useMemo to cameras as well

---
 web/src/Sidebar.jsx        |  8 ++++----
 web/src/routes/Cameras.jsx | 26 +++++++++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index a4d31933c..fcd70dffb 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -53,8 +53,8 @@ function SortedCameras({ unsortedCameras }) {
   const sortedCameras = useMemo(() =>
     Object.entries(unsortedCameras)
       .filter(([_, conf]) => conf.ui.show)
-      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
-  , [unsortedCameras]);
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
 
   return (
     <Fragment>
@@ -72,8 +72,8 @@ function SortedRecordingCameras({ unsortedCameras }) {
   const sortedCameras = useMemo(() =>
     Object.entries(unsortedCameras)
       .filter(([_, conf]) => conf.ui.show)
-      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
-  , [unsortedCameras]);
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
 
   return (
     <Fragment>
diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx
index b317adfff..065e9f567 100644
--- a/web/src/routes/Cameras.jsx
+++ b/web/src/routes/Cameras.jsx
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Card from '../components/Card';
 import CameraImage from '../components/CameraImage';
@@ -16,16 +16,28 @@ export default function Cameras() {
     <ActivityIndicator />
   ) : (
     <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
-      {Object.entries(config.cameras)
-        .filter(([_, conf]) => conf.ui.show)
-        .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
-        .map(([camera, conf]) => (
-          <Camera key={camera} name={camera} conf={conf} />
-        ))}
+      <SortedCameras unsortedCameras={config.cameras} />
     </div>
   );
 }
 
+function SortedCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() =>
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
+
+  return (
+    <Fragment>
+      {sortedCameras.map(([camera, conf]) => (
+        <Camera key={camera} name={camera} conf={conf} />
+      ))}
+    </Fragment>
+  );
+}
+
 function Camera({ name }) {
   const { payload: detectValue, send: sendDetect } = useDetectState(name);
   const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);