feat(sub): show 400 errors to user (#5237)

Author: Gene Hynson

src/shared/copy/notifications/categories/subscriptions.ts

@@ -1,20 +1,21 @@
 import {Notification} from 'src/types'
 import {defaultErrorNotification} from 'src/shared/copy/notifications'
 
-// Subscriptions
-export const subscriptionCreateFail = (): Notification => ({
+export const subscriptionCreateFail = (message?: string): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to create Subscription, please try again.`,
+  message: message ?? `Failed to create Subscription, please try again.`,
 })
 
-export const subscriptionUpdateFail = (): Notification => ({
+export const subscriptionUpdateFail = (message?: string): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to update Subscription, please try again.`,
+  message: message ?? `Failed to update Subscription, please try again.`,
 })
 
-export const subscriptionStatusUpdateFail = (): Notification => ({
+export const subscriptionStatusUpdateFail = (
+  message?: string
+): Notification => ({
   ...defaultErrorNotification,
-  message: `Failed to update Subscription status, please try again.`,
+  message: message ?? `Failed to update Subscription status, please try again.`,
 })
 
 export const subscriptionsGetFail = (): Notification => ({

src/writeData/subscriptions/context/api.tsx

@@ -43,46 +43,54 @@ if (CLOUD) {
 
 export const createAPI = async (subscription: typeof PostBrokerSubParams) => {
   const res = await postBrokerSub(subscription)
-  if (res.status != 201) {
+  if (res.status === 400) {
+    // 400s contain an err with info for the user
     throw new Error(res.data.message)
   }
+  if (res.status !== 201) {
+    throw new Error()
+  }
 }
 
 export const updateAPI = async (subscription: typeof PutBrokerSubParams) => {
   const res = await putBrokerSub(subscription)
-  if (res.status != 200) {
+  if (res.status === 400) {
+    // 400s contain an err with info for the user
     throw new Error(res.data.message)
   }
+  if (res.status !== 200) {
+    throw new Error()
+  }
   return res.data
 }
 
 export const deleteAPI = async (id: typeof DeleteBrokerSubParams) => {
   const res = await deleteBrokerSub({id})
-  if (res.status != 204) {
-    throw new Error(res.data.message)
+  if (res.status !== 204) {
+    throw new Error()
   }
 }
 
 export const getAllAPI = async () => {
   const res = await getBrokerSubs()
-  if (res.status != 200) {
-    throw new Error(res.data.message)
+  if (res.status !== 200) {
+    throw new Error()
   }
   return res.data
 }
 
 export const getByIDAPI = async (id: typeof GetBrokerSubParams) => {
   const res = await getBrokerSub(id)
-  if (res.status != 200) {
-    throw new Error(res.data.message)
+  if (res.status !== 200) {
+    throw new Error()
   }
   return res.data
 }
 
 export const getStatusAPI = async (id: typeof GetBrokerSubsStatusParams) => {
   const res = await getBrokerSubsStatus(id)
-  if (res.status != 200) {
-    throw new Error(res.data.message)
+  if (res.status !== 200) {
+    throw new Error()
   }
   return res.data
 }
@@ -91,16 +99,20 @@ export const updateStatusAPI = async (
   status: typeof PutBrokerSubsStatusParams
 ) => {
   const res = await putBrokerSubsStatus(status)
-  if (res.status != 200) {
+  if (res.status === 400) {
+    // 400s contain an err with info for the user
     throw new Error(res.data.message)
   }
+  if (res.status !== 200) {
+    throw new Error()
+  }
   return res.data
 }
 
 export const getAllStatuses = async () => {
   const res = await getBrokerSubsStatuses()
   if (res.status !== 200) {
-    throw new Error(res.data.message)
+    throw new Error()
   }
 
   return res.data

src/writeData/subscriptions/context/subscription.create.tsx

@@ -96,9 +96,9 @@ export const SubscriptionCreateProvider: FC = ({children}) => {
         setLoading(RemoteDataState.Done)
         history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
       })
-      .catch(() => {
+      .catch(err => {
         setLoading(RemoteDataState.Done)
-        dispatch(notify(subscriptionCreateFail()))
+        dispatch(notify(subscriptionCreateFail(err.message)))
       })
   }
 

src/writeData/subscriptions/context/subscription.update.tsx

@@ -130,9 +130,9 @@ export const SubscriptionUpdateProvider: FC = ({children}) => {
         setLoading(RemoteDataState.Done)
         history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
       })
-      .catch(() => {
+      .catch(err => {
         setLoading(RemoteDataState.Done)
-        dispatch(notify(subscriptionUpdateFail()))
+        dispatch(notify(subscriptionUpdateFail(err.message)))
       })
   }
 
@@ -158,9 +158,9 @@ export const SubscriptionUpdateProvider: FC = ({children}) => {
       .then(() => {
         getSubscription()
       })
-      .catch(() => {
+      .catch(err => {
         setLoading(RemoteDataState.Done)
-        dispatch(notify(subscriptionStatusUpdateFail()))
+        dispatch(notify(subscriptionStatusUpdateFail(err.message)))
       })
   }