fix: fix infinite loading state of submit button on edit alert (#13550)

* fix: fix infinite spinner on edit alert * fixes View all z-index and manages isLoading state on alert create Co-authored-by: dariakoko <nargle30@gmail.com> --------- Co-authored-by: dariakoko <nargle30@gmail.com>
artsy · Feb 29, 2024 · 2165b40 · 2165b40
1 parent c9e4b16
commit 2165b40
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/src/Apps/Settings/Routes/SavedSearchAlerts/Components/SavedSearchAlertEditForm.tsx b/src/Apps/Settings/Routes/SavedSearchAlerts/Components/SavedSearchAlertEditForm.tsx
@@ -112,16 +112,18 @@ const SavedSearchAlertEditForm: React.FC<SavedSearchAlertEditFormProps> = ({
 
   const isMounted = useDidMount()
 
+  const handleSubmit = () => {
+    onComplete()
+    onCompleted()
+  }
+
   return (
     <Formik<AlertFormikValues>
       initialValues={state.settings}
-      onSubmit={() => {
-        onComplete()
-        onCompleted()
-      }}
+      onSubmit={handleSubmit}
       validateOnChange
     >
-      {({ isSubmitting, values, handleSubmit }) => {
+      {({ values, handleSubmit }) => {
         let isSaveAlertButtonDisabled = true
 
         if (state.criteriaChanged || !isEqual(state.settings, values)) {
@@ -178,7 +180,7 @@ const SavedSearchAlertEditForm: React.FC<SavedSearchAlertEditFormProps> = ({
                   <Spacer x={2} />
                   <Button
                     flex={1}
-                    loading={isSubmitting}
+                    loading={state.isSubmitting}
                     onClick={() => {
                       dispatch({ type: "SET_SETTINGS", payload: values })
                       handleSubmit()
@@ -194,7 +196,7 @@ const SavedSearchAlertEditForm: React.FC<SavedSearchAlertEditFormProps> = ({
                 <Spacer y={4} />
 
                 <Button
-                  loading={isSubmitting}
+                  loading={state.isSubmitting}
                   width="100%"
                   onClick={() => {
                     dispatch({ type: "SET_SETTINGS", payload: values })

diff --git a/src/Apps/Settings/Routes/SavedSearchAlerts/Components/SavedSearchAlertListItem.tsx b/src/Apps/Settings/Routes/SavedSearchAlerts/Components/SavedSearchAlertListItem.tsx
@@ -88,7 +88,7 @@ export const SavedSearchAlertListItem: React.FC<SavedSearchAlertListItemProps> =
             <Text variant="sm">Edit</Text>
           </Clickable>
           <Spacer x={2} />
-          <RouterLink to={viewAllHref} textDecoration="underline" zIndex={1000}>
+          <RouterLink to={viewAllHref} textDecoration="underline">
             <Text variant="sm">View All</Text>
           </RouterLink>
         </Flex>

diff --git a/src/Apps/Settings/Routes/SavedSearchAlerts/SavedSearchAlertsApp.tsx b/src/Apps/Settings/Routes/SavedSearchAlerts/SavedSearchAlertsApp.tsx
@@ -109,7 +109,7 @@ export const SavedSearchAlertsApp: React.FC<SavedSearchAlertsAppProps> = ({
     setShowDeleteModal(false)
   }
 
-  const handleCompletedDesctop = () => {
+  const handleCompletedDesktop = () => {
     refresh()
 
     sendToast({
@@ -271,7 +271,7 @@ export const SavedSearchAlertsApp: React.FC<SavedSearchAlertsAppProps> = ({
                     <Sticky bottomBoundary="#content-end">
                       <SavedSearchAlertEditFormQueryRenderer
                         editAlertEntity={editAlertEntity}
-                        onCompleted={handleCompletedDesctop}
+                        onCompleted={handleCompletedDesktop}
                         onDeleteClick={handleDeleteClick}
                       />
                     </Sticky>

diff --git a/src/Apps/Settings/Routes/SavedSearchAlerts/__tests__/SavedSearchAlertsApp.jest.tsx b/src/Apps/Settings/Routes/SavedSearchAlerts/__tests__/SavedSearchAlertsApp.jest.tsx
@@ -134,7 +134,7 @@ describe("SavedSearchAlertsApp", () => {
     })
   })
 
-  describe("desctop", () => {
+  describe("desktop", () => {
     beforeEach(() => {
       breakpoint = "md"
     })

diff --git a/src/Components/Alert/AlertContext.ts b/src/Components/Alert/AlertContext.ts
@@ -31,6 +31,7 @@ export type State = {
   isEditMode?: boolean
   criteriaChanged?: boolean
   metric?: Metric
+  isSubmitting?: boolean
 }
 
 export const DEFAULT_STATE: State = {
@@ -71,6 +72,7 @@ type Action =
   | { type: "SET_SEARCH_CRITERIA_ID"; payload: string }
   | { type: "SET_ALERT_ID"; payload: string }
   | { type: "SET_METRIC"; payload: Metric }
+  | { type: "SET_IS_SUBMITTING"; payload: boolean }
 
 export const reducer = (onShow: (State) => State, onReset: () => State) => (
   state: State,
@@ -151,6 +153,12 @@ export const reducer = (onShow: (State) => State, onReset: () => State) => (
         metric: action.payload,
       }
 
+    case "SET_IS_SUBMITTING":
+      return {
+        ...state,
+        isSubmitting: action.payload,
+      }
+
     default:
       return state
   }

diff --git a/src/Components/Alert/AlertProvider.tsx b/src/Components/Alert/AlertProvider.tsx
@@ -101,6 +101,8 @@ export const AlertProvider: FC<AlertProviderProps> = ({
       })
     }
     try {
+      dispatch({ type: "SET_IS_SUBMITTING", payload: true })
+
       await submitEditAlert({
         variables: {
           input: {
@@ -110,6 +112,8 @@ export const AlertProvider: FC<AlertProviderProps> = ({
           },
         },
       })
+
+      dispatch({ type: "SET_IS_SUBMITTING", payload: false })
     } catch (error) {
       console.error("Alert/useAlertContext", error)
       logger.error(error)
@@ -118,6 +122,8 @@ export const AlertProvider: FC<AlertProviderProps> = ({
 
   const handleComplete = async () => {
     try {
+      dispatch({ type: "SET_IS_SUBMITTING", payload: true })
+
       const reponse = await submitCreateAlert({
         variables: {
           input: {
@@ -145,6 +151,7 @@ export const AlertProvider: FC<AlertProviderProps> = ({
         createdAlert(searchCriteriaID)
       }
 
+      dispatch({ type: "SET_IS_SUBMITTING", payload: false })
       setCurrent("ALERT_CONFIRMATION")
     } catch (error) {
       console.error("Alert/useAlertContext", error)