Fix Lint

Author: MrFlashAccount

app/gui/src/dashboard/components/Activity.tsx

@@ -4,8 +4,7 @@
  * This component is used to suspend the rendering of a subtree until a promise is resolved.
  */
 import { unsafeWriteValue } from '#/utilities/write'
-import { startTransition, Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { useAwait } from './Await'
+import { startTransition, Suspense, use, useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 /**
  * Props for {@link Activity}
@@ -88,8 +87,10 @@ interface ActivityInnerProps {
 function ActivityInner(props: ActivityInnerProps) {
   const { promise, children } = props
 
-  // Suspend the subtree
-  useAwait(promise)
+  if (promise != null) {
+    // Suspend the subtree
+    use(promise)
+  }
 
   return children
 }

app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx

@@ -38,7 +38,8 @@ export function CopyButton<IconType extends string>(props: CopyButtonProps<IconT
     ...buttonProps
   } = props
   const { getText } = textProvider.useText()
-  const { copy, isCopying, isCopied } = useCopy({ onCopy })
+  const { copy, isCopied } = useCopy({ onCopy })
+
   const showIcon = copyIcon !== false
   const icon =
     showIcon ?
@@ -52,11 +53,8 @@ export function CopyButton<IconType extends string>(props: CopyButtonProps<IconT
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any,no-restricted-syntax */
       {...(buttonProps as any)}
       variant={variant}
-      isLoading={isCopying}
       aria-label={props['aria-label'] ?? getText('copyShortcut')}
-      onPress={() => {
-        copy(copyText)
-      }}
+      onPress={() => copy(copyText)}
       icon={icon}
     />
   )

app/gui/src/dashboard/components/AriaComponents/Form/components/FormProvider.tsx

@@ -3,7 +3,7 @@
  *
  * Context that injects form instance into the component tree.
  */
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 import invariant from 'tiny-invariant'
 import type * as types from './types'
 import type { FormInstance, FormInstanceValidated } from './types'
@@ -36,32 +36,19 @@ export function FormProvider<Schema extends types.TSchema>(
 export function useFormContext<Schema extends types.TSchema>(
   form?: FormInstanceValidated<Schema>,
 ): FormInstance<Schema> {
-  if (form != null && 'control' in form) {
-    return form
-  } else {
-    // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ctx = useContext(FormContext)
+  const formInstance = useOptionalFormContext<Schema, FormInstanceValidated<Schema>>(form)
 
-    invariant(ctx, 'FormContext not found')
+  invariant(formInstance, 'FormContext not found')
 
-    // This is safe, as we pass the value transparently and it is typed outside
-    // eslint-disable-next-line no-restricted-syntax
-    return ctx.form as unknown as types.UseFormReturn<Schema>
-  }
+  return formInstance
 }
 
 /** Returns the form instance from the context, or null if the context is not available. */
 // eslint-disable-next-line react-refresh/only-export-components
 export function useOptionalFormContext<
-  Form extends FormInstanceValidated<Schema> | undefined,
   Schema extends types.TSchema,
->(form?: Form): Form extends undefined ? FormInstance<Schema> | null : FormInstance<Schema> {
-  try {
-    // eslint-disable-next-line react-compiler/react-compiler
-    return useFormContext<Schema>(form)
-  } catch {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return null!
-  }
+  Form extends FormInstanceValidated<Schema> | undefined,
+>(form?: Form) {
+  // eslint-disable-next-line no-restricted-syntax
+  return (form ?? use(FormContext)?.form ?? null) as FormInstance<Schema> | null
 }

app/gui/src/dashboard/components/Await.tsx

@@ -3,9 +3,8 @@
  *
  * Await a promise and render the children when the promise is resolved.
  */
-import { type ReactNode } from 'react'
+import { use, type ReactNode } from 'react'
 
-import invariant from 'tiny-invariant'
 import { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary'
 import { Suspense, type SuspenseProps } from './Suspense'
 
@@ -87,8 +86,6 @@ export function Await<PromiseType>(props: AwaitProps<PromiseType>) {
   )
 }
 
-const PRIVATE_AWAIT_PROMISE_STATE = Symbol('PRIVATE_AWAIT_PROMISE_STATE_REF')
-
 /**
  * Internal implementation of the {@link Await} component.
  *
@@ -99,84 +96,7 @@ const PRIVATE_AWAIT_PROMISE_STATE = Symbol('PRIVATE_AWAIT_PROMISE_STATE_REF')
 function AwaitInternal<PromiseType>(props: AwaitProps<PromiseType>) {
   const { promise, children } = props
 
-  const data = useAwait(promise)
+  const data = use(promise)
 
   return typeof children === 'function' ? children(data) : children
 }
-
-export function useAwait(promise?: null): void
-export function useAwait<PromiseType>(promise: Promise<PromiseType>): PromiseType
-export function useAwait<PromiseType>(
-  promise?: Promise<PromiseType> | null,
-): PromiseType | undefined
-
-/**
- * A hook that accepts a promise and triggers the Suspense boundary until the promise is resolved.
- * @param promise - The promise to await.
- * @throws {Promise} - The promise that is being awaited by Suspense
- * @returns The data of the promise.
- */
-// eslint-disable-next-line react-refresh/only-export-components
-export function useAwait<PromiseType>(
-  promise?: Promise<PromiseType> | null,
-): PromiseType | undefined {
-  if (promise == null) {
-    return
-  }
-
-  /**
-   * Define the promise state on the promise.
-   */
-  const definePromiseState = (
-    promiseToDefineOn: Promise<PromiseType>,
-    promiseState: PromiseState<PromiseType>,
-  ) => {
-    // @ts-expect-error: we know that the promise state is not defined in the type but it's fine,
-    // because it's a private and scoped to the component.
-    promiseToDefineOn[PRIVATE_AWAIT_PROMISE_STATE] = promiseState
-  }
-
-  // We need to define the promise state, only once.
-  // We don't want to use refs on state, because it scopes the state to the component.
-  // But we might use multiple Await components with the same promise.
-  if (!(PRIVATE_AWAIT_PROMISE_STATE in promise)) {
-    definePromiseState(promise, { status: 'pending' })
-
-    // This breaks the chain of promises, but it's fine,
-    // because this is suppsed to the last in the chain.
-    // and the error will be thrown in the render phase
-    // to trigger the error boundary.
-    void promise.then((data) => {
-      definePromiseState(promise, { status: 'success', data })
-    })
-    void promise.catch((error) => {
-      definePromiseState(promise, { status: 'error', error })
-    })
-  }
-
-  // This should never happen, as the promise state is defined above.
-  // But we need to check it, because the promise state is not defined in the type.
-  // And we want to make TypeScript happy.
-  invariant(
-    PRIVATE_AWAIT_PROMISE_STATE in promise,
-    'Promise state is not defined. This should never happen.',
-  )
-
-  const promiseState =
-    // This is safe, as we defined the promise state above.
-    // and it always present in the promise object.
-    // eslint-disable-next-line no-restricted-syntax
-    promise[PRIVATE_AWAIT_PROMISE_STATE] as PromiseState<PromiseType>
-
-  if (promiseState.status === 'pending') {
-    // Throwing a promise is the valid way to trigger Suspense
-    // eslint-disable-next-line @typescript-eslint/only-throw-error
-    throw promise
-  }
-
-  if (promiseState.status === 'error') {
-    throw promiseState.error
-  }
-
-  return promiseState.data
-}

app/gui/src/dashboard/components/JSONSchemaInput.tsx

@@ -11,7 +11,7 @@ import { useText } from '#/providers/TextProvider'
 import { constantValueOfSchema, getSchemaName, lookupDef } from '#/utilities/jsonSchema'
 import { asObject, singletonObjectOrNull } from '#/utilities/object'
 import { twMerge } from '#/utilities/tailwindMerge'
-import React from 'react'
+import * as React from 'react'
 import { twJoin } from 'tailwind-merge'
 
 /** Props for a {@link JSONSchemaInput}. */

app/gui/src/dashboard/layouts/AssetContextMenu.tsx

@@ -171,7 +171,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
       color="accent"
       action="copyId"
       doAction={() => {
-        copyMutation.copy(asset.id)
+        void copyMutation.copy(asset.id)
       }}
     />
   )
@@ -415,7 +415,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
             hidden={hidden}
             action="copyAsPath"
             doAction={() => {
-              copyMutation.copy(path)
+              void copyMutation.copy(path)
             }}
           />
         )}

app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx

@@ -132,7 +132,9 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
       action="copyId"
       color="accent"
       label={getText('copyAllIdsShortcut')}
-      doAction={() => copyMutation.copy(selectedAssets.map((asset) => asset.id).join('\n'))}
+      doAction={() => {
+        void copyMutation.copy(selectedAssets.map((asset) => asset.id).join('\n'))
+      }}
     />
   )
 

app/gui/src/dashboard/providers/AuthProvider.tsx

@@ -437,27 +437,30 @@ export function GuestLayout() {
   const { session } = useAuth()
   const { localStorage } = localStorageProvider.useLocalStorage()
 
-  if (session?.type === UserSessionType.partial) {
-    return <router.Navigate to={appUtils.SETUP_PATH} />
-  } else if (session?.type === UserSessionType.full) {
+  if (session?.type === UserSessionType.full) {
     const redirectTo = localStorage.get('loginRedirect')
+
     if (redirectTo != null) {
       localStorage.delete('loginRedirect')
-      location.href = redirectTo
+      unsafeWriteValue(window.location, 'href', redirectTo)
       return
-    } else {
-      return <router.Navigate to={appUtils.DASHBOARD_PATH} />
     }
-  } else {
-    return (
-      <>
-        {/* This div is used as a flag to indicate that the user is not logged in. */}
-        {/* also it guarantees that the top-level suspense boundary is already resolved */}
-        <div data-testid="before-auth-layout" aria-hidden />
-        <router.Outlet />
-      </>
-    )
+
+    return <router.Navigate to={appUtils.DASHBOARD_PATH} />
   }
+
+  if (session?.type === UserSessionType.partial) {
+    return <router.Navigate to={appUtils.SETUP_PATH} />
+  }
+
+  return (
+    <>
+      {/* This div is used as a flag to indicate that the user is not logged in. */}
+      {/* also it guarantees that the top-level suspense boundary is already resolved */}
+      <div data-testid="before-auth-layout" aria-hidden />
+      <router.Outlet />
+    </>
+  )
 }
 
 /** A React Router layout route containing routes only accessible by users that are not deleted. */
@@ -466,9 +469,9 @@ export function NotDeletedUserLayout() {
 
   if (isUserMarkedForDeletion()) {
     return <router.Navigate to={appUtils.RESTORE_USER_PATH} />
-  } else {
-    return <router.Outlet context={session} />
   }
+
+  return <router.Outlet context={session} />
 }
 
 /** A React Router layout route containing routes only accessible by users that are deleted softly. */