From 0356e33fe04f4d4d0bb61b167239ca6b4dfdd1ad Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Sat, 17 Dec 2022 06:15:54 -0800
Subject: [PATCH] fix key prop for lint

* Change MultiSelect onSolo to onSelectSingle
---
 web/src/components/MultiSelect.jsx | 10 ++++------
 web/src/routes/Events.jsx          |  8 ++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 03c8d55ca..d700f5dae 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -5,14 +5,13 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
 
-export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSolo }) {
+export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
 
   const popupRef = useRef(null);
 
   const [state, setState] = useState({
     showMenu: false,
   });
-  
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div
@@ -31,10 +30,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
             </Button>
           </div>
           {options.map((item) => (
-            <div className='flex grow'>
+            <div className="flex grow" key={item}>
               <label
-                className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
-                key={item}>
+                className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}>
                 <input
                   className="mx-4 m-0 align-middle"
                   type="checkbox"
@@ -43,7 +41,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                 {item.replaceAll("_", " ")}
               </label>
               <div className=' justify-right'>
-                <Button className="mx-2" onClick={() => onSolo(item)}>
+                <Button className="mx-2" onClick={() => onSelectSingle(item)}>
                   👀
                 </Button>
               </div>
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index b61bda759..dde5f058a 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -302,7 +302,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.cameras}
           onToggle={(item) => onToggleNamedFilter("cameras", item)}
           onShowAll={() => onFilter("cameras", ["all"])}
-          onSolo={(item) => onFilter("cameras", item)}
+          onSelectSingle={(item) => onFilter("cameras", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -311,7 +311,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.labels}
           onToggle={(item) => onToggleNamedFilter("labels", item) }
           onShowAll={() => onFilter("labels", ["all"])}
-          onSolo={(item) => onFilter("labels", item)}
+          onSelectSingle={(item) => onFilter("labels", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -320,7 +320,7 @@ export default function Events({ path, ...props }) {
           selection={searchParams.zones}
           onToggle={(item) => onToggleNamedFilter("zones", item) }
           onShowAll={() => onFilter("zones", ["all"])}
-          onSolo={(item) => onFilter("zones", item)}
+          onSelectSingle={(item) => onFilter("zones", item)}
         />
         {
           filterValues.sub_labels.length > 0 && (
@@ -331,7 +331,7 @@ export default function Events({ path, ...props }) {
               selection={searchParams.sub_labels}
               onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
               onShowAll={() => onFilter("sub_labels", ["all"])}
-              onSolo={(item) => onFilter("sub_labels", item)}
+              onSelectSingle={(item) => onFilter("sub_labels", item)}
             />
           )}
         <div ref={datePicker} className="ml-auto">