lint(gui): clean up imports and elses

gui/.eslintrc.json

@@ -229,7 +229,12 @@
         "no-redeclare": "off",
         "no-restricted-syntax": [
             "error",
-            "ForInStatement"
+            "ForInStatement",
+            "WithStatement",
+            "MemberExpression[optional=true]",
+            "IfStatement[alternate.type='IfStatement']",
+            "UnaryExpression[operator='!']",
+            "BinaryExpression[operator='==='][right.value=true]"
         ],
         "no-return-await": "error",
         "no-sequences": "error",

gui/src/components/LoadingCard.tsx

@@ -1,4 +1,4 @@
-import { mustExist } from '@apextoaster/js-utils';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Card, CardContent, CircularProgress } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
@@ -20,17 +20,21 @@ export function LoadingCard(props: LoadingCardProps) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const pushHistory = useStore(mustExist(useContext(StateContext)), (state) => state.pushHistory);
 
-  const ready = useQuery('ready', () => client.ready(props.loading), {
+  const query = useQuery('ready', () => client.ready(props.loading), {
     // data will always be ready without this, even if the API says its not
     cacheTime: 0,
     refetchInterval: POLL_TIME,
   });
 
+  function ready() {
+    return doesExist(query.data) && query.data.ready;
+  }
+
   React.useEffect(() => {
-    if (ready.status === 'success' && ready.data.ready) {
+    if (query.status === 'success' && query.data.ready) {
       pushHistory(props.loading);
     }
-  }, [ready.status, ready.data?.ready]);
+  }, [query.status, ready()]);
 
   return <Card sx={{ maxWidth: params.width.default }}>
     <CardContent sx={{ height: params.height.default }}>

gui/src/components/OnnxWeb.tsx

@@ -1,17 +1,16 @@
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Box, Container, Divider, Link, Tab, Typography } from '@mui/material';
 import * as React from 'react';
+import { useState } from 'react';
 
+import { ModelControl } from './control/ModelControl.js';
 import { ImageHistory } from './ImageHistory.js';
 import { Img2Img } from './tab/Img2Img.js';
 import { Inpaint } from './tab/Inpaint.js';
-import { ModelControl } from './control/ModelControl.js';
 import { Settings } from './tab/Settings.js';
 import { Txt2Img } from './tab/Txt2Img.js';
 import { Upscale } from './tab/Upscale.js';
 
-const { useState } = React;
-
 export function OnnxWeb() {
   const [tab, setTab] = useState('txt2img');
 

gui/src/components/control/ImageControl.tsx

@@ -2,6 +2,7 @@ import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
 import { Casino } from '@mui/icons-material';
 import { Button, Stack, TextField } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useQuery } from 'react-query';
 import { useStore } from 'zustand';
 
@@ -12,8 +13,6 @@ import { SCHEDULER_LABELS } from '../../strings.js';
 import { NumericField } from '../input/NumericField.js';
 import { QueryList } from '../input/QueryList.js';
 
-const { useContext } = React;
-
 export const PROMPT_LIMIT = 70;
 
 export interface ImageControlProps {

gui/src/components/error/ServerParams.tsx

@@ -9,11 +9,13 @@ export interface ServerParamsErrorProps {
 function getErrorMessage(error: unknown): string {
   if (error instanceof Error) {
     return error.message;
-  } else if (typeof error === 'string') {
-    return error;
-  } else {
-    return 'unknown error';
   }
+
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  return 'unknown error';
 }
 
 export function ServerParamsError(props: ServerParamsErrorProps) {

gui/src/components/tab/Img2Img.tsx

@@ -1,17 +1,16 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
 import { IMAGE_FILTER } from '../../config.js';
 import { ClientContext, ConfigContext, StateContext } from '../../state.js';
 import { ImageControl } from '../control/ImageControl.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 import { ImageInput } from '../input/ImageInput.js';
 import { NumericField } from '../input/NumericField.js';
-import { UpscaleControl } from '../control/UpscaleControl.js';
-
-const { useContext } = React;
 
 export function Img2Img() {
   const { params } = mustExist(useContext(ConfigContext));

gui/src/components/tab/Inpaint.tsx

@@ -1,6 +1,7 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
@@ -8,14 +9,12 @@ import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
 import { ClientContext, ConfigContext, StateContext } from '../../state.js';
 import { MASK_LABELS, NOISE_LABELS } from '../../strings.js';
 import { ImageControl } from '../control/ImageControl.js';
+import { OutpaintControl } from '../control/OutpaintControl.js';
+import { UpscaleControl } from '../control/UpscaleControl.js';
 import { ImageInput } from '../input/ImageInput.js';
 import { MaskCanvas } from '../input/MaskCanvas.js';
 import { NumericField } from '../input/NumericField.js';
-import { OutpaintControl } from '../control/OutpaintControl.js';
 import { QueryList } from '../input/QueryList.js';
-import { UpscaleControl } from '../control/UpscaleControl.js';
-
-const { useContext } = React;
 
 export function Inpaint() {
   const { params } = mustExist(useContext(ConfigContext));

gui/src/components/tab/Txt2Img.tsx

@@ -1,15 +1,14 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
 import { ClientContext, ConfigContext, StateContext } from '../../state.js';
 import { ImageControl } from '../control/ImageControl.js';
-import { NumericField } from '../input/NumericField.js';
 import { UpscaleControl } from '../control/UpscaleControl.js';
-
+import { NumericField } from '../input/NumericField.js';
-const { useContext } = React;
 
 export function Txt2Img() {
   const { params } = mustExist(useContext(ConfigContext));

gui/src/components/tab/Upscale.tsx

@@ -1,15 +1,14 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
 
 import { IMAGE_FILTER } from '../../config.js';
-import { ClientContext, ConfigContext, StateContext } from '../../state.js';
+import { ClientContext, StateContext } from '../../state.js';
-import { ImageInput } from '../input/ImageInput.js';
 import { UpscaleControl } from '../control/UpscaleControl.js';
-
+import { ImageInput } from '../input/ImageInput.js';
-const { useContext } = React;
 
 export function Upscale() {
   async function uploadSource() {
@@ -38,11 +37,16 @@ export function Upscale() {
 
   return <Box>
     <Stack spacing={2}>
-      <ImageInput filter={IMAGE_FILTER} image={params.source} label='Source' onChange={(file) => {
+      <ImageInput
+        filter={IMAGE_FILTER}
+        image={params.source}
+        label='Source'
+        onChange={(file) => {
           setSource({
             source: file,
           });
-      }} />
+        }}
+      />
       <UpscaleControl />
       <Button
         disabled={doesExist(params.source) === false}

gui/src/main.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { mustDefault, mustExist, timeout } from '@apextoaster/js-utils';
 import * as React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { satisfies } from 'semver';
 import { createStore } from 'zustand';
@@ -27,7 +27,7 @@ export async function main() {
 
   // prep react-dom
   const appElement = mustExist(document.getElementById('app'));
-  const app = ReactDOM.createRoot(appElement);
+  const app = createRoot(appElement);
 
   try {
     // load full params from the API server and merge with the initial client config