fix(ui): model install error toasts not updating correctly

Author: psychedelicious

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx

@@ -7,10 +7,10 @@ import {
   FormHelperText,
   FormLabel,
   Input,
-  useToast,
 } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { toast } from 'features/toast/toast';
 import type { ChangeEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +23,6 @@ export const HFToken = () => {
   const [token, setToken] = useState('');
   const { currentData } = useGetHFTokenStatusQuery(isHFTokenEnabled ? undefined : skipToken);
   const [trigger, { isLoading, isUninitialized }] = useSetHFTokenMutation();
-  const toast = useToast();
   const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setToken(e.target.value);
   }, []);
@@ -41,7 +40,7 @@ export const HFToken = () => {
           });
         }
       });
-  }, [t, toast, token, trigger]);
+  }, [t, token, trigger]);
 
   const error = useMemo(() => {
     if (!currentData || isUninitialized || isLoading) {

invokeai/frontend/web/src/features/toast/toast.ts

@@ -3,7 +3,7 @@ import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-libra
 import { nanoid } from 'features/controlLayers/konva/util';
 import { map } from 'nanostores';
 
-const toastApi = createStandaloneToast({
+export const toastApi = createStandaloneToast({
   theme: theme,
   defaultOptions: TOAST_OPTIONS.defaultOptions,
 }).toast;

invokeai/frontend/web/src/services/events/onModelInstallError.tsx

@@ -1,11 +1,11 @@
-import { Button, ExternalLink, Spinner, Text, useToast } from '@invoke-ai/ui-library';
+import { Button, ExternalLink, Spinner, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { logger } from 'app/logging/logger';
 import type { AppDispatch, RootState } from 'app/store/store';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { toast } from 'features/toast/toast';
+import { toast, toastApi } from 'features/toast/toast';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { t } from 'i18next';
 import { useCallback } from 'react';
@@ -151,12 +151,11 @@ const HFUnauthorizedToastDescription = () => {
 
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const toast = useToast();
 
   const onClick = useCallback(() => {
     dispatch(setActiveTab('models'));
-    toast.close(UNAUTHORIZED_TOAST_ID);
-  }, [dispatch, toast]);
+    toastApi.close(UNAUTHORIZED_TOAST_ID);
+  }, [dispatch]);
 
   if (!data) {
     return <Spinner />;