Move event group to separate comp

web/src/pages/FaceLibrary.tsx

@@ -402,8 +402,7 @@ function TrainingGrid({
   onClickFace,
   onRefresh,
 }: TrainingGridProps) {
-  const { t } = useTranslation(["views/faceLibrary", "views/explore"]);
-  const navigate = useNavigate();
+  const { t } = useTranslation(["views/faceLibrary"]);
 
   // face data
 
@@ -516,10 +515,49 @@ function TrainingGrid({
       <div className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1">
         {Object.entries(faceGroups).map(([key, group]) => {
           const event = events?.find((ev) => ev.id == key);
+          return (
+            <FaceAttemptGroup
+              key={key}
+              config={config}
+              group={group}
+              event={event}
+              faceNames={faceNames}
+              selectedFaces={selectedFaces}
+              onClickFace={onClickFace}
+              onSelectEvent={setSelectedEvent}
+              onRefresh={onRefresh}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}
 
+type FaceAttemptGroupProps = {
+  config: FrigateConfig;
+  group: RecognizedFaceData[];
+  event?: Event;
+  faceNames: string[];
+  selectedFaces: string[];
+  onClickFace: (image: string, ctrl: boolean) => void;
+  onSelectEvent: (event: Event) => void;
+  onRefresh: () => void;
+};
+function FaceAttemptGroup({
+  config,
+  group,
+  event,
+  faceNames,
+  selectedFaces,
+  onClickFace,
+  onSelectEvent,
+  onRefresh,
+}: FaceAttemptGroupProps) {
+  const navigate = useNavigate();
+  const { t } = useTranslation(["views/faceLibrary", "views/explore"]);
   return (
     <div
-              key={key}
       className={cn(
         "flex flex-col gap-2 rounded-lg bg-card p-2",
         isMobile && "w-full",
@@ -574,7 +612,7 @@ function TrainingGrid({
               if (meta || selectedFaces.length > 0) {
                 onClickFace(data.filename, true);
               } else if (event) {
-                        setSelectedEvent(event);
+                onSelectEvent(event);
               }
             }}
             onRefresh={onRefresh}
@@ -583,10 +621,6 @@ function TrainingGrid({
       </div>
     </div>
   );
-        })}
-      </div>
-    </>
-  );
 }
 
 type FaceAttemptProps = {