chore(ui): lint

Author: psychedelicious

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -15,8 +15,6 @@ import { addGalleryOffsetChangedListener } from 'app/store/middleware/listenerMi
 import { addGetOpenAPISchemaListener } from 'app/store/middleware/listenerMiddleware/listeners/getOpenAPISchema';
 import { addImageAddedToBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard';
 import { addImageRemovedFromBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageRemovedFromBoard';
-import { addImagesStarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesStarred';
-import { addImagesUnstarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesUnstarred';
 import { addImageUploadedFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageUploaded';
 import { addModelSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelSelected';
 import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded';
@@ -47,10 +45,6 @@ addImageUploadedFulfilledListener(startAppListening);
 // Image deleted
 addDeleteBoardAndImagesFulfilledListener(startAppListening);
 
-// Image starred
-addImagesStarredListener(startAppListening);
-addImagesUnstarredListener(startAppListening);
-
 // Gallery
 addGalleryImageClickedListener(startAppListening);
 addGalleryOffsetChangedListener(startAppListening);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts

@@ -23,7 +23,7 @@ import {
 } from 'react-icons/pi';
 import { useImageDTO } from 'services/api/endpoints/images';
 
-import { useImageViewerContext } from './ImageViewerPanel';
+import { useImageViewerContext } from './context';
 
 export const CurrentImageButtons = memo(() => {
   const { t } = useTranslation();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts

@@ -18,7 +18,7 @@ import { NoContentForViewer } from './NoContentForViewer';
 import { ProgressImage } from './ProgressImage2';
 import { ProgressIndicator } from './ProgressIndicator2';
 
-export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO?: ImageDTO }) => {
+export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | null }) => {
   const shouldShowImageDetails = useAppSelector(selectShouldShowImageDetails);
   const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer);
 

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx

@@ -1,14 +1,9 @@
 import { Divider, Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
-import type { ProgressImage as ProgressImageType } from 'features/nodes/types/common';
-import { type Atom, atom, computed } from 'nanostores';
-import type { PropsWithChildren } from 'react';
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import type { ImageDTO, S } from 'services/api/types';
-import { $socket } from 'services/events/stores';
-import { assert } from 'tsafe';
+import { memo } from 'react';
+
+import { ImageViewerContextProvider } from './context';
 
 export const ImageViewerPanel = memo(() => {
   return (
@@ -22,65 +17,3 @@ export const ImageViewerPanel = memo(() => {
   );
 });
 ImageViewerPanel.displayName = 'ImageViewerPanel';
-
-type ImageViewerContextValue = {
-  $progressEvent: Atom<S['InvocationProgressEvent'] | null>;
-  $progressImage: Atom<ProgressImageType | null>;
-  $hasProgressImage: Atom<boolean>;
-  onLoadImage: (imageDTO: ImageDTO) => void;
-};
-
-const ImageViewerContext = createContext<ImageViewerContextValue | null>(null);
-
-const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
-  const socket = useStore($socket);
-  const $progressEvent = useState(() => atom<S['InvocationProgressEvent'] | null>(null))[0];
-  const $progressImage = useState(() => atom<ProgressImageType | null>(null))[0];
-  const $hasProgressImage = useState(() => computed($progressImage, (progressImage) => progressImage !== null))[0];
-
-  useEffect(() => {
-    if (!socket) {
-      return;
-    }
-
-    const onInvocationProgress = (data: S['InvocationProgressEvent']) => {
-      $progressEvent.set(data);
-      if (data.image) {
-        $progressImage.set(data.image);
-      }
-    };
-
-    socket.on('invocation_progress', onInvocationProgress);
-
-    return () => {
-      socket.off('invocation_progress', onInvocationProgress);
-    };
-  }, [$progressEvent, $progressImage, socket]);
-
-  const onLoadImage = useCallback(
-    (imageDTO: ImageDTO) => {
-      const progressEvent = $progressEvent.get();
-      if (!progressEvent || !imageDTO) {
-        return;
-      }
-      if (progressEvent.session_id === imageDTO.session_id) {
-        $progressImage.set(null);
-      }
-    },
-    [$progressEvent, $progressImage]
-  );
-
-  const value = useMemo(
-    () => ({ $progressEvent, $progressImage, $hasProgressImage, onLoadImage }),
-    [$hasProgressImage, $progressEvent, $progressImage, onLoadImage]
-  );
-
-  return <ImageViewerContext.Provider value={value}>{props.children}</ImageViewerContext.Provider>;
-});
-ImageViewerContextProvider.displayName = 'ImageViewerContextProvider';
-
-export const useImageViewerContext = () => {
-  const value = useContext(ImageViewerContext);
-  assert(value !== null, 'useImageViewerContext must be used within a ImageViewerContextProvider');
-  return value;
-};

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx

@@ -9,7 +9,7 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiInfoBold } from 'react-icons/pi';
 
-import { useImageViewerContext } from './ImageViewerPanel';
+import { useImageViewerContext } from './context';
 
 export const ToggleMetadataViewerButton = memo(() => {
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerPanel.tsx

@@ -0,0 +1,70 @@
+import { useStore } from '@nanostores/react';
+import type { ProgressImage as ProgressImageType } from 'features/nodes/types/common';
+import { type Atom, atom, computed } from 'nanostores';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import type { ImageDTO, S } from 'services/api/types';
+import { $socket } from 'services/events/stores';
+import { assert } from 'tsafe';
+
+type ImageViewerContextValue = {
+  $progressEvent: Atom<S['InvocationProgressEvent'] | null>;
+  $progressImage: Atom<ProgressImageType | null>;
+  $hasProgressImage: Atom<boolean>;
+  onLoadImage: (imageDTO: ImageDTO) => void;
+};
+
+const ImageViewerContext = createContext<ImageViewerContextValue | null>(null);
+
+export const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
+  const socket = useStore($socket);
+  const $progressEvent = useState(() => atom<S['InvocationProgressEvent'] | null>(null))[0];
+  const $progressImage = useState(() => atom<ProgressImageType | null>(null))[0];
+  const $hasProgressImage = useState(() => computed($progressImage, (progressImage) => progressImage !== null))[0];
+
+  useEffect(() => {
+    if (!socket) {
+      return;
+    }
+
+    const onInvocationProgress = (data: S['InvocationProgressEvent']) => {
+      $progressEvent.set(data);
+      if (data.image) {
+        $progressImage.set(data.image);
+      }
+    };
+
+    socket.on('invocation_progress', onInvocationProgress);
+
+    return () => {
+      socket.off('invocation_progress', onInvocationProgress);
+    };
+  }, [$progressEvent, $progressImage, socket]);
+
+  const onLoadImage = useCallback(
+    (imageDTO: ImageDTO) => {
+      const progressEvent = $progressEvent.get();
+      if (!progressEvent || !imageDTO) {
+        return;
+      }
+      if (progressEvent.session_id === imageDTO.session_id) {
+        $progressImage.set(null);
+      }
+    },
+    [$progressEvent, $progressImage]
+  );
+
+  const value = useMemo(
+    () => ({ $progressEvent, $progressImage, $hasProgressImage, onLoadImage }),
+    [$hasProgressImage, $progressEvent, $progressImage, onLoadImage]
+  );
+
+  return <ImageViewerContext.Provider value={value}>{props.children}</ImageViewerContext.Provider>;
+});
+ImageViewerContextProvider.displayName = 'ImageViewerContextProvider';
+
+export const useImageViewerContext = () => {
+  const value = useContext(ImageViewerContext);
+  assert(value !== null, 'useImageViewerContext must be used within a ImageViewerContextProvider');
+  return value;
+};