Merge pull request #33 from caranicas/beta-react-linting-pt2

Beta react linting pt2

ui/frontend/build_src/.eslintrc.cjs

@@ -18,6 +18,7 @@ module.exports = {
   plugins: ["react"],
 
   extends: [
+    "prettier",
     "plugin:react/recommended",
     "standard-with-typescript",
     "plugin:i18next/recommended",
@@ -48,27 +49,18 @@ module.exports = {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/ban-ts-comment": "off",
 
-    // TS WARNINGS WE WANT
+    // these are things that fight with prettier
-    "@typescript-eslint/no-unused-vars": "warn",
-
-    // TS  things turned off for now
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/strict-boolean-expressions": "off",
-    "@typescript-eslint/no-floating-promises": "off",
-    "@typescript-eslint/consistent-type-assertions": "off",
     "@typescript-eslint/comma-dangle": "off",
+    "@typescript-eslint/space-before-function-paren": "off",
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/semi": "off",
-    "@typescript-eslint/restrict-plus-operands": "off",
     "@typescript-eslint/brace-style": "off",
-    "@typescript-eslint/prefer-ts-expect-error": "off",
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/member-delimiter-style": "off",
-    "@typescript-eslint/prefer-includes": "off",
+
-    "@typescript-eslint/consistent-type-definitions": "off",
+    // TS WARNINGS WE WANT
-    "@typescript-eslint/no-unnecessary-condition": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
-    "@typescript-eslint/no-unnecessary-type-assertion": "off",
+    "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/space-before-function-paren": "off",
 
     // i18n stuff no string literal works but turned off for now
     "i18next/no-literal-string": "off",

ui/frontend/build_src/package-lock.json

@@ -31,6 +31,7 @@
         "@typescript-eslint/parser": "^5.37.0",
         "@vitejs/plugin-react": "^2.0.1",
         "eslint": "^8.23.1",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-config-standard-with-typescript": "^23.0.0",
         "eslint-plugin-i18n-json": "^4.0.0",
         "eslint-plugin-i18next": "^6.0.0-4",
@@ -2201,6 +2202,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-config-standard": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz",
@@ -6392,6 +6405,13 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-config-standard": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz",

ui/frontend/build_src/package.json

@@ -33,6 +33,7 @@
     "@typescript-eslint/parser": "^5.37.0",
     "@vitejs/plugin-react": "^2.0.1",
     "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-i18n-json": "^4.0.0",
     "eslint-plugin-i18next": "^6.0.0-4",

ui/frontend/build_src/src/Translation/config.ts

@@ -12,11 +12,21 @@ export const resources = {
     translation: ESTranslation,
   },
 } as const;
-
+i18n
-i18n.use(initReactI18next).init({
+  .use(initReactI18next)
+  .init({
     lng: "en",
     interpolation: {
       escapeValue: false,
     },
     resources,
-});
+  })
+  .then(() => {
+    console.log("i18n initialized");
+  })
+  .catch((err) => {
+    console.error("i18n initialization failed", err);
+  })
+  .finally(() => {
+    console.log("i18n initialization finished");
+  });

ui/frontend/build_src/src/api/index.ts

@@ -57,18 +57,18 @@ export const toggleBetaConfig = async (branch: string) => {
  * post a new request for an image
  */
 // TODO; put hese some place better
-export type ImageOutput = {
+export interface ImageOutput {
   data: string;
   path_abs: string | null;
   seed: number;
-};
+}
 
-export type ImageReturnType = {
+export interface ImageReturnType {
   output: ImageOutput[];
   request: {};
   status: string;
   session_id: string;
-};
+}
 
 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -99,7 +99,13 @@ export default function DrawImage({
     }
   };
 
-  const _drawCursor = (x, y, brushSize, brushShape, brushColor) => {
+  const _drawCursor = (
+    x: number,
+    y: number,
+    brushSize: number,
+    brushShape: string,
+    brushColor: string
+  ) => {
     const canvas = cursorRef.current;
     if (canvas != null) {
       const ctx = canvas.getContext("2d");

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";
 
 // import { PanelBox } from "../../../../styles/shared.css.ts";

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx

@@ -48,7 +48,7 @@ export default function ImprovementSettings() {
   // should probably be a store selector
   useEffect(() => {
     // if either are true we arent disabled
-    if (isUsingFaceCorrection || useUpscale) {
+    if (isUsingFaceCorrection || useUpscale != "") {
       setIsFilteringDisabled(false);
     } else {
       setIsFilteringDisabled(true);

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -124,7 +124,7 @@ export default function PropertySettings() {
             <span>{guidanceScale}</span>
           </div>
 
-          {initImage && (
+          {void 0 !== initImage && (
             <div className={SettingItem}>
               <label>
                 {t("settings.prompt-str")}{" "}
@@ -152,7 +152,7 @@ export default function PropertySettings() {
               >
                 {IMAGE_DIMENSIONS.map((dimension) => (
                   <option
-                    key={"width-option_" + dimension.value}
+                    key={`width-option_${dimension.value}`}
                     value={dimension.value}
                   >
                     {dimension.label}
@@ -169,7 +169,7 @@ export default function PropertySettings() {
               >
                 {IMAGE_DIMENSIONS.map((dimension) => (
                   <option
-                    key={"height-option_" + dimension.value}
+                    key={`height-option_${dimension.value}`}
                     value={dimension.value}
                   >
                     {dimension.label}

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../../styles/theme/index.css.ts";
 
 export const MakeButtonStyle = style({

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -34,7 +34,7 @@ export default function SeedImage(_props: any) {
     // @ts-expect-error
     const file = event.target.files[0];
 
-    if (file) {
+    if (void 0 !== file) {
       const reader = new FileReader();
       reader.onload = (e) => {
         if (e.target != null) {
@@ -74,7 +74,7 @@ export default function SeedImage(_props: any) {
       </div>
 
       <div className={ImageFixer}>
-        {initImage && (
+        {void 0 !== initImage && (
           <>
             <div>
               <img src={initImage} width="100" height="100" />

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../../styles/theme/index.css.ts";
 
 export const ImageInputDisplay = style({

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts

@@ -2,7 +2,7 @@ import create from "zustand";
 import produce from "immer";
 import { persist } from "zustand/middleware";
 
-export type ImageCreationUIOptions = {
+export interface ImageCreationUIOptions {
   isOpenAdvancedSettings: boolean;
   isOpenAdvImprovementSettings: boolean;
   isOpenAdvPropertySettings: boolean;
@@ -20,10 +20,10 @@ export type ImageCreationUIOptions = {
 
   toggleImageModifier: () => void;
   // addImageModifier: (modifier: string) => void;
-};
+}
 
 export const useCreateUI = create<ImageCreationUIOptions>(
-  //@ts-ignore
+  //@ts-expect-error
   persist(
     (set, get) => ({
       isOpenAdvancedSettings: false,
@@ -36,7 +36,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvancedSettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
           })
         );
@@ -44,7 +44,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvImprovementSettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenAdvImprovementSettings =
               !state.isOpenAdvImprovementSettings;
           })
@@ -53,7 +53,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvPropertySettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings;
           })
         );
@@ -61,7 +61,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvWorkflowSettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
           })
         );
@@ -69,7 +69,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvGPUSettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
           })
         );
@@ -77,7 +77,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleImageModifier: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
             state.isOpenImageModifier = !state.isOpenImageModifier;
           })
         );

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts

@@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const ImagerModifierGroups = style({

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -78,14 +78,13 @@ export default function ImageModifers() {
         <h3>Image Modifiers (art styles, tags, ect)</h3>
       </button>
 
-      {/* @ts-ignore */}
       {imageModifierIsOpen && (
         <ul className={ImagerModifierGroups}>
           {allModifiers.map((item, index) => {
             return (
-              // @ts-ignore
+              // @ts-expect-error
               <li key={item[0]}>
-                {/* @ts-ignore */}
+                {/* @ts-expect-error */}
                 <ModifierGrouping title={item[0]} tags={item[1]} />
               </li>
             );

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const completedImagesMain = style({

ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx

@@ -2,10 +2,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
-import {
+import { useImageCreate } from "../../../../stores/imageCreateStore";
-  ImageRequest,
-  useImageCreate,
-} from "../../../../stores/imageCreateStore";
 
 import { CompletedImagesType } from "../index";
 
@@ -32,7 +29,7 @@ export default function CurrentDisplay({
       use_upscale,
       width,
       height,
-    } = info! as ImageRequest;
+    } = info!;
 
     // Most important information is the prompt
     let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
@@ -40,10 +37,10 @@ export default function CurrentDisplay({
     // name and the top level metadata
     let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
     // Add the face correction and upscale
-    if (use_face_correction) {
+    if (typeof use_face_correction == "string") {
       fileName += `_FaceCorrection-${use_face_correction}`;
     }
-    if (use_upscale) {
+    if (typeof use_upscale == "string") {
       fileName += `_Upscale-${use_upscale}`;
     }
     // Add the width and height
@@ -70,7 +67,8 @@ export default function CurrentDisplay({
       {isLoading ? (
         <h4 className="loading">Loading...</h4>
       ) : (
-        (image != null && (
+        (image !== null && (
+          // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
           <div>
             <p> {info?.prompt}</p>
             <GeneratedImage imageData={data} metadata={info}></GeneratedImage>

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -80,7 +80,8 @@ export default function DisplayPanel() {
       // check to make sure that the image was created
       if (data.status === "succeeded") {
         if (isSoundEnabled) {
-          dingRef.current?.play();
+          // not awaiting the promise or error handling
+          void dingRef.current?.play();
         }
         removeFirstInQueue();
       }
@@ -123,7 +124,13 @@ export default function DisplayPanel() {
         .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
 
       setCompletedImages(temp);
-      setCurrentImage(temp[0] || null);
+
+      // could move this to the useEffect for completedImages
+      if (temp.length > 0) {
+        setCurrentImage(temp[0]);
+      } else {
+        setCurrentImage(null);
+      }
     } else {
       setCompletedImages([]);
       setCurrentImage(null);

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts

@@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../styles/theme/index.css.ts";
 
 export const FooterDisplayMain = style({

ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import {
   FooterDisplayMain,
-  CoffeeButton, // @ts-ignore
+  CoffeeButton, // @ts-expect-error
 } from "./footerDisplay.css.ts";
 
 import { API_URL } from "../../../api";

ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts

@@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-//@ts-ignore
+//@ts-expect-error
 import { vars } from "../../../styles/theme/index.css.ts";
 
 export const HeaderDisplayMain = style({

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const StartingStatus = style({

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../styles/theme/index.css.ts";
 
 export const AppLayout = style({

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -4,13 +4,13 @@ import { devtools } from "zustand/middleware";
 
 import { useRandomSeed } from "../utils";
 
-export type ImageCreationUiOptions = {
+export interface ImageCreationUiOptions {
   isUseRandomSeed: boolean;
   isUseAutoSave: boolean;
   isSoundEnabled: boolean;
-};
+}
 
-export type ImageRequest = {
+export interface ImageRequest {
   prompt: string;
   seed: number;
   num_outputs: number;
@@ -48,7 +48,7 @@ export type ImageRequest = {
     | 896
     | 960
     | 1024;
-  // allow_nsfw: boolean;
+  // allow_nsfw: boolean
   turbo: boolean;
   use_cpu: boolean;
   use_full_precision: boolean;
@@ -58,7 +58,7 @@ export type ImageRequest = {
   show_only_filtered_image: boolean;
   init_image: undefined | string;
   prompt_strength: undefined | number;
-};
+}
 
 type ModifiersList = string[];
 type ModifiersOptions = string | ModifiersList[];
@@ -84,7 +84,7 @@ interface ImageCreateState {
 
   uiOptions: ImageCreationUiOptions;
   toggleUseUpscaling: () => void;
-  // isUsingUpscaling: () => boolean;
+  // isUsingUpscaling: () => boolean
   toggleUseFaceCorrection: () => void;
   isUsingFaceCorrection: () => boolean;
   isUsingUpscaling: () => boolean;
@@ -99,7 +99,7 @@ interface ImageCreateState {
 
 // devtools breaks TS
 export const useImageCreate = create<ImageCreateState>(
-  // @ts-ignore
+  // @ts-expect-error
   devtools((set, get) => ({
     parallelCount: 1,
 
@@ -120,7 +120,8 @@ export const useImageCreate = create<ImageCreateState>(
       use_face_correction: "GFPGANv1.3",
       use_upscale: "RealESRGAN_x4plus",
       show_only_filtered_image: true,
-    } as ImageRequest,
+      init_image: undefined,
+    },
 
     // selected tags
     tags: [] as string[],
@@ -178,7 +179,7 @@ export const useImageCreate = create<ImageCreateState>(
     },
 
     hasTag: (tag: string) => {
-      return get().tags.indexOf(tag) > -1;
+      return get().tags.includes(tag);
     },
 
     selectedTags: () => {
@@ -256,15 +257,16 @@ export const useImageCreate = create<ImageCreateState>(
 
     toggleUseRandomSeed: () => {
       set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
           state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed;
           state.requestOptions.seed = state.uiOptions.isUseRandomSeed
             ? useRandomSeed()
             : state.requestOptions.seed;
-          localStorage.setItem(
+
-            "ui:isUseRandomSeed",
+          // localStorage.setItem(
-            state.uiOptions.isUseRandomSeed
+          //   "ui:isUseRandomSeed",
-          );
+          //   state.uiOptions.isUseRandomSeed
+          // );
         })
       );
     },
@@ -277,12 +279,13 @@ export const useImageCreate = create<ImageCreateState>(
       //isUseAutoSave
       //save_to_disk_path
       set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
           state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave;
-          localStorage.setItem(
+
-            "ui:isUseAutoSave",
+          // localStorage.setItem(
-            state.uiOptions.isUseAutoSave
+          //   "ui:isUseAutoSave",
-          );
+          //   state.uiOptions.isUseAutoSave
+          // );
         })
       );
     },
@@ -293,7 +296,7 @@ export const useImageCreate = create<ImageCreateState>(
 
     toggleSoundEnabled: () => {
       set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
           state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
           //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
         })
@@ -306,7 +309,7 @@ export const useImageCreate = create<ImageCreateState>(
 
     toggleInpainting: () => {
       set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
           state.isInpainting = !state.isInpainting;
         })
       );

ui/frontend/build_src/src/stores/imageQueueStore.ts

@@ -9,7 +9,7 @@ interface ImageQueueState {
   completedImageIds: string[];
   addNewImage: (id: string, imgRec: ImageRequest) => void;
   hasQueuedImages: () => boolean;
-  firstInQueue: () => ImageRequest | [];
+  firstInQueue: () => ImageRequest | {};
   removeFirstInQueue: () => void;
   clearCachedIds: () => void;
 }
@@ -33,8 +33,11 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
   hasQueuedImages: () => {
     return get().images.length > 0;
   },
+
   firstInQueue: () => {
-    return (get().images[0] as ImageRequest) || [];
+    let first: ImageRequest | {} = get().images[0];
+    first = void 0 !== first ? first : {};
+    return first;
   },
 
   removeFirstInQueue: () => {
@@ -45,6 +48,7 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
       })
     );
   },
+
   clearCachedIds: () => {
     set(
       produce((state) => {

ui/frontend/build_src/src/styles/index.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "./theme/index.css.ts";
 
 // baisc body style

ui/frontend/build_src/src/styles/shared.css.ts

@@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "./theme/index.css.ts";
 
 export const PanelBox = style({