Merge branch 'handle-api-errors' into 'develop'

Handle error from API on Group Save

See merge request soapbox-pub/soapbox!2440

app/soapbox/entity-store/hooks/useCreateEntity.ts

@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios';
 import { z } from 'zod';
 
 import { useAppDispatch, useLoading } from 'soapbox/hooks';
@@ -23,7 +24,7 @@ function useCreateEntity<TEntity extends Entity = Entity, Data = unknown>(
   const [isSubmitting, setPromise] = useLoading();
   const { entityType, listKey } = parseEntitiesPath(expandedPath);
 
-  async function createEntity(data: Data, callbacks: EntityCallbacks<TEntity> = {}): Promise<void> {
+  async function createEntity(data: Data, callbacks: EntityCallbacks<TEntity, AxiosError> = {}): Promise<void> {
     try {
       const result = await setPromise(entityFn(data));
       const schema = opts.schema || z.custom<TEntity>();
@@ -36,9 +37,13 @@ function useCreateEntity<TEntity extends Entity = Entity, Data = unknown>(
         callbacks.onSuccess(entity);
       }
     } catch (error) {
+      if (error instanceof AxiosError) {
         if (callbacks.onError) {
           callbacks.onError(error);
         }
+      } else {
+        throw error;
+      }
     }
   }
 

app/soapbox/features/group/edit-group.tsx

@@ -62,10 +62,20 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
       avatar: avatar.file,
       header: header.file,
       tags,
+    }, {
+      onSuccess() {
+        toast.success(intl.formatMessage(messages.groupSaved));
+      },
+      onError(error) {
+        const message = (error.response?.data as any)?.error;
+
+        if (error.response?.status === 422 && typeof message !== 'undefined') {
+          toast.error(message);
+        }
+      },
     });
 
     setIsSubmitting(false);
-    toast.success(intl.formatMessage(messages.groupSaved));
   }
 
   const handleAddTag = () => {