move modal looker state to use-looker

app/packages/core/src/components/Modal/ModalLooker.tsx

@@ -1,11 +1,10 @@
 import { useTheme } from "@fiftyone/components";
 import type { ImageLooker } from "@fiftyone/looker";
 import * as fos from "@fiftyone/state";
-import React, { useEffect, useMemo } from "react";
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from "recoil";
+import React, { useMemo } from "react";
+import { useRecoilCallback, useRecoilValue } from "recoil";
 import { ImaVidLookerReact } from "./ImaVidLooker";
 import { VideoLookerReact } from "./VideoLooker";
-import { useModalContext } from "./hooks";
 import useLooker from "./use-looker";
 
 export const useShowOverlays = () => {
@@ -28,21 +27,8 @@ interface LookerProps {
 }
 
 const ModalLookerNoTimeline = React.memo((props: LookerProps) => {
-  const { id, looker, ref } = useLooker<ImageLooker>(props);
+  const { id, ref } = useLooker<ImageLooker>(props);
   const theme = useTheme();
-  const setModalLooker = useSetRecoilState(fos.modalLooker);
-
-  const { setActiveLookerRef } = useModalContext();
-
-  useEffect(() => {
-    setModalLooker(looker);
-  }, [looker, setModalLooker]);
-
-  useEffect(() => {
-    if (looker) {
-      setActiveLookerRef(looker as fos.Lookers);
-    }
-  }, [looker, setActiveLookerRef]);
 
   return (
     <div

app/packages/core/src/components/Modal/use-looker.ts

@@ -1,10 +1,10 @@
 import * as fos from "@fiftyone/state";
 import React, { useEffect, useRef, useState } from "react";
 import { useErrorHandler } from "react-error-boundary";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { v4 as uuid } from "uuid";
 import { useClearSelectedLabels, useShowOverlays } from "./ModalLooker";
-import { useLookerOptionsUpdate } from "./hooks";
+import { useLookerOptionsUpdate, useModalContext } from "./hooks";
 import useKeyEvents from "./use-key-events";
 import { shortcutToHelpItems } from "./utils";
 
@@ -103,6 +103,20 @@ function useLooker<L extends fos.Lookers>({
 
   useKeyEvents(initialRef, sample.sample._id, looker);
 
+  const setModalLooker = useSetRecoilState(fos.modalLooker);
+
+  const { setActiveLookerRef } = useModalContext();
+
+  useEffect(() => {
+    setModalLooker(looker);
+  }, [looker, setModalLooker]);
+
+  useEffect(() => {
+    if (looker) {
+      setActiveLookerRef(looker as fos.Lookers);
+    }
+  }, [looker, setActiveLookerRef]);
+
   return { id, looker, ref, sample, updateLookerOptions };
 }