Auto-format frontend (#2009)

* Auto-format frontend

* Update lint-frontend GA workflow node and checkout

* Fix linter error in ThemeChanger

* Add a `on: pull_request` to lint-frontend workflow

Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

frontend/src/Loading.tsx

@@ -1,22 +1,22 @@
 import { Flex, Spinner } from '@chakra-ui/react';
 
 const Loading = () => {
-    return (
-        <Flex
-            width={'100vw'}
-            height={'100vh'}
-            alignItems='center'
-            justifyContent='center'
-        >
-            <Spinner
-                thickness='2px'
-                speed='1s'
-                emptyColor='gray.200'
-                color='gray.400'
-                size='xl'
-            />
-        </Flex>
-    );
+  return (
+    <Flex
+      width={'100vw'}
+      height={'100vh'}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Spinner
+        thickness="2px"
+        speed="1s"
+        emptyColor="gray.200"
+        color="gray.400"
+        size="xl"
+      />
+    </Flex>
+  );
 };
 
 export default Loading;

frontend/src/common/components/radix-ui/IAITooltip.tsx

@@ -20,10 +20,15 @@ const IAITooltip = (props: IAITooltipProps) => {
         <Tooltip.Portal>
           <Tooltip.Content
             {...contentProps}
-            onPointerDownOutside={(e) => {e.preventDefault()}}
+            onPointerDownOutside={(e) => {
+              e.preventDefault();
+            }}
             className="invokeai__tooltip-content"
           >
-            <Tooltip.Arrow {...arrowProps} className="invokeai__tooltip-arrow" />
+            <Tooltip.Arrow
+              {...arrowProps}
+              className="invokeai__tooltip-arrow"
+            />
             {children}
           </Tooltip.Content>
         </Tooltip.Portal>

frontend/src/common/hooks/useClickOutsideWatcher.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect} from 'react';
+import { RefObject, useEffect } from 'react';
 
 const watchers: {
   ref: RefObject<HTMLElement>;

frontend/src/common/icons/ImageToImageIcon.tsx

@@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';
 
 const ImageToImageIcon = createIcon({
   displayName: 'ImageToImageIcon',

frontend/src/common/icons/NodesIcon.tsx

@@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';
 
 const NodesIcon = createIcon({
   displayName: 'NodesIcon',

frontend/src/common/icons/OutpaintIcon.tsx

@@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';
 
 const OutpaintIcon = createIcon({
   displayName: 'OutpaintIcon',

frontend/src/common/icons/TextToImageIcon.tsx

@@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';
 
 const TextToImageIcon = createIcon({
   displayName: 'TextToImageIcon',

frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -43,7 +43,7 @@ const IAICanvasIntermediateImage = (props: Props) => {
   const {
     boundingBox: { x, y, width, height },
   } = intermediateImage;
-  
+
   return loadedImageElement ? (
     <KonvaImage
       x={x}

frontend/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -4,7 +4,10 @@ import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import _ from 'lodash';
 import { MutableRefObject, useCallback } from 'react';
-import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 import {
   // addPointToCurrentEraserLine,
   addPointToCurrentLine,

frontend/src/features/gallery/store/thunks/uploadImage.ts

@@ -38,7 +38,7 @@ export const uploadImage =
     });
 
     const image = (await response.json()) as InvokeAI.ImageUploadResponse;
-    console.log(image)
+    console.log(image);
     const newImage: InvokeAI.Image = {
       uuid: uuidv4(),
       category: 'user',

frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -9,7 +9,8 @@ import _ from 'lodash';
 const selector = createSelector(
   canvasSelector,
   (canvas) => {
-    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = canvas;
+    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } =
+      canvas;
     return {
       boundingBoxDimensions,
       boundingBoxScale,

frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx

@@ -60,7 +60,7 @@ const UpscaleOptions = () => {
   const handleChangeStrength = (v: number) => dispatch(setUpscalingStrength(v));
 
   return (
-    <div className='upscale-options'>
+    <div className="upscale-options">
       <IAISelect
         isDisabled={!isESRGANAvailable}
         label="Scale"

frontend/src/features/options/components/ProcessButtons/Loopback.tsx

@@ -3,7 +3,10 @@ import { FaRecycle } from 'react-icons/fa';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { OptionsState, setShouldLoopback } from 'features/options/store/optionsSlice';
+import {
+  OptionsState,
+  setShouldLoopback,
+} from 'features/options/store/optionsSlice';
 
 const loopbackSelector = createSelector(
   (state: RootState) => state.options,

frontend/src/features/system/components/Console.tsx

@@ -1,7 +1,11 @@
 import { IconButton, Tooltip } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
-import { errorSeen, setShouldShowLogViewer, SystemState } from 'features/system/store/systemSlice';
+import {
+  errorSeen,
+  setShouldShowLogViewer,
+  SystemState,
+} from 'features/system/store/systemSlice';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
 import { createSelector } from '@reduxjs/toolkit';

frontend/src/features/system/components/ThemeChanger.tsx

@@ -23,7 +23,7 @@ export default function ThemeChanger() {
     if (colorMode !== currentTheme) {
       setColorMode(currentTheme);
     }
-  }, [colorMode, currentTheme]);
+  }, [setColorMode, colorMode, currentTheme]);
 
   const handleChangeTheme = (theme: string) => {
     dispatch(setCurrentTheme(theme));

frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx

@@ -31,7 +31,7 @@ export default function InitImagePreview() {
   return (
     <>
       <div className="init-image-preview-header">
-      {/* <div className="init-image-preview-header"> */}
+        {/* <div className="init-image-preview-header"> */}
         <h2>Initial Image</h2>
         {/* <IconButton
           isDisabled={!initialImage}