Prevent status message handler from re-rendering component tree

Status message handler changes

Prevent status message handler from re-rendering component tree

src/App.js

@@ -72,9 +72,6 @@ const App = (): React$Element<typeof React.Fragment> => {
   const dispatch = useDispatch()
 
   const locale = useSelector(state => state.locale)
-  const statusDetails = useSelector(state =>
-    state.statusDetails ? JSON.parse(state.statusDetails) : state.statusDetails
-  )
 
   // Fetch array of schemas from backend and store it in frontend
   // Fetch only if the initial array is empty
@@ -194,13 +191,7 @@ const App = (): React$Element<typeof React.Fragment> => {
         </Route>
       </Switch>
       {/* Centralized status message handler */}
-      {statusDetails?.status === "asd" && !Array.isArray(statusDetails.response) && (
-        <StatusMessageHandler
-          status={statusDetails.status}
-          response={statusDetails.response}
-          helperText={statusDetails.helperText}
-        />
-      )}
+      <StatusMessageHandler />
     </React.Fragment>
   )
 }

src/__tests__/StatusMessageHandler.test.js

@@ -11,13 +11,15 @@ import { ResponseStatus } from "constants/responseStatus"
 const mockStore = configureStore([])
 
 describe("StatusMessageHandler", () => {
-  const store = mockStore({
-    errorMessage: "",
-  })
-
   it("should render error message", () => {
     const responseMock = { data: { accessionId: "TESTID1234", status: 504 } }
     const helperTextMock = "Test prefix"
+
+    const store = mockStore({
+      // errorMessage: "",
+      statusDetails: { status: ResponseStatus.error, response: responseMock, helperText: helperTextMock },
+    })
+
     render(
       <Provider store={store}>
         <StatusMessageHandler status={ResponseStatus.error} response={responseMock} helperText={helperTextMock} />
@@ -28,6 +30,10 @@ describe("StatusMessageHandler", () => {
   })
 
   it("should render info message", () => {
+    const store = mockStore({
+      statusDetails: { status: ResponseStatus.info },
+    })
+
     render(
       <Provider store={store}>
         <StatusMessageHandler status={ResponseStatus.info} />
@@ -40,6 +46,11 @@ describe("StatusMessageHandler", () => {
 
   it("should render success message", () => {
     const responseMock = { data: { accessionId: "TESTID1234" }, config: { baseURL: "/drafts" } }
+
+    const store = mockStore({
+      statusDetails: { status: ResponseStatus.success, response: responseMock },
+    })
+
     render(
       <Provider store={store}>
         <StatusMessageHandler response={responseMock} status={ResponseStatus.success} />

src/components/Home/UserDraftTemplateActions.js

@@ -92,7 +92,7 @@ const UserDraftTemplateActions = (props: { item: { schema: string, accessionId:
         updateStatus({
           status: ResponseStatus.error,
           response: response,
-          errorPrefix: "Unable to delete template",
+          helperText: "Unable to delete template",
         })
       )
     }

src/components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm.js

@@ -225,8 +225,8 @@ const CustomCardHeader = (props: CustomCardHeaderProps) => {
         root: classes.cardHeader,
         action: classes.cardHeaderAction,
       }}
-      className={currentObject.status === ObjectStatus.template ? classes.resetTopMargin : null}
-      action={currentObject.status === ObjectStatus.template ? templateButtonGroup : buttonGroup}
+      className={currentObject?.status === ObjectStatus.template ? classes.resetTopMargin : null}
+      action={currentObject?.status === ObjectStatus.template ? templateButtonGroup : buttonGroup}
     />
   )
 }
@@ -375,7 +375,7 @@ const FormContent = ({
     resetTimer()
 
     // Prevent auto save from template dialog
-    if (currentObject.status !== ObjectStatus.template) startTimer()
+    if (currentObject?.status !== ObjectStatus.template) startTimer()
   }
 
   useEffect(() => {
@@ -427,7 +427,6 @@ const FormContent = ({
     dispatch(
       updateStatus({
         status: ResponseStatus.info,
-        response: "",
         helperText: "An empty form cannot be saved. Please fill in the form before saving it.",
       })
     )
@@ -439,9 +438,6 @@ const FormContent = ({
     if (checkFormCleanedValuesEmpty(cleanedValues)) {
       const response = await templateAPI.patchTemplateFromJSON(objectType, currentObject.accessionId, cleanedValues)
 
-      // closeDialog()
-      // console.log(response)
-
       if (response.ok) {
         dispatch(
           updateStatus({
@@ -528,7 +524,7 @@ const FormContent = ({
 /*
  * Container for json schema based form. Handles json schema loading, form rendering, form submitting and error/success alerts.
  */
-const WizardFillObjectDetailsForm = (props: { closeDialog: () => void }): React$Element<typeof Container> => {
+const WizardFillObjectDetailsForm = (props: { closeDialog?: () => void }): React$Element<typeof Container> => {
   const { closeDialog } = props
   const classes = useStyles()
   const dispatch = useDispatch()
@@ -635,7 +631,7 @@ const WizardFillObjectDetailsForm = (props: { closeDialog: () => void }): React$
         folder={folder}
         currentObject={currentObject}
         key={currentObject?.accessionId || folder.folderId}
-        closeDialog={closeDialog}
+        closeDialog={closeDialog || (() => {})}
       />
       {submitting && <LinearProgress />}
     </Container>

src/components/NewDraftWizard/WizardHooks/WizardSubmitObjectHook.js

@@ -16,7 +16,6 @@ const submitObjectHook = async (formData: any, folderId: string, objectType: str
     dispatch(
       updateStatus({
         status: ResponseStatus.info,
-        response: {},
         helperText: "",
       })
     )

src/components/StatusMessageHandler.js

@@ -1,10 +1,10 @@
 //@flow
 import React, { useState } from "react"
 
-import Portal from "@material-ui/core/Portal"
+// import Portal from "@material-ui/core/Portal"
 import Snackbar from "@material-ui/core/Snackbar"
 import Alert from "@material-ui/lab/Alert"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 
 import { ResponseStatus } from "constants/responseStatus"
 import { resetStatusDetails } from "features/statusMessageSlice"
@@ -123,7 +123,7 @@ const SuccessHandler = ({
   )
 }
 
-const StatusMessageHandler = ({
+const Message = ({
   status,
   response,
   helperText,
@@ -155,11 +155,25 @@ const StatusMessageHandler = ({
   }
 
   return (
-    <Portal>
-      <Snackbar autoHideDuration={autoHideDuration} open={open} onClose={() => handleClose()}>
-        {messageTemplate(status)}
-      </Snackbar>
-    </Portal>
+    <Snackbar autoHideDuration={autoHideDuration} open={open} onClose={() => handleClose()}>
+      {messageTemplate(status)}
+    </Snackbar>
+  )
+}
+
+const StatusMessageHandler = (): React$Element<any> => {
+  const statusDetails = useSelector(state => state.statusDetails)
+
+  return (
+    <React.Fragment>
+      {statusDetails?.status && !Array.isArray(statusDetails.response) && (
+        <Message
+          status={statusDetails.status}
+          response={statusDetails.response}
+          helperText={statusDetails.helperText}
+        />
+      )}
+    </React.Fragment>
   )
 }
 

src/features/statusMessageSlice.js

@@ -1,7 +1,9 @@
 //@flow
 import { createSlice } from "@reduxjs/toolkit"
 
-const initialState = null
+import type { StatusDetails, Response } from "types"
+
+const initialState: null | StatusDetails = null
 
 const statusMessageSlice: any = createSlice({
   name: "wizardStatusMessage",
@@ -14,14 +16,23 @@ const statusMessageSlice: any = createSlice({
 export const { setStatusDetails, resetStatusDetails } = statusMessageSlice.actions
 export default statusMessageSlice.reducer
 
-type StatusDetails = {
-  status: string,
-  response?: Object,
-  helperText?: string,
-}
-
 export const updateStatus =
   (statusDetails: StatusDetails): ((dispatch: (any) => void) => Promise<void>) =>
   async (dispatch: any => void) => {
-    dispatch(setStatusDetails(JSON.stringify(statusDetails)))
+    const response = statusDetails.response || {}
+
+    const statusResponse: Response = {
+      config: { baseURL: response.config.baseURL, method: response.config.method },
+      data: response.data,
+      ok: response.ok,
+      status: response.status,
+    }
+
+    const details: StatusDetails = {
+      status: statusDetails.status,
+      response: statusResponse,
+      helperText: statusDetails.helperText,
+    }
+
+    dispatch(setStatusDetails(details))
   }

src/types/index.js

@@ -46,3 +46,16 @@ export type FolderDataFromForm = {
 }
 
 export type CreateFolderFormRef = ElementRef<typeof useForm>
+
+export type Response = {
+  config: { baseURL: string, method: string },
+  data: any,
+  ok: boolean,
+  status: number,
+}
+
+export type StatusDetails = {
+  status: string,
+  response?: Response,
+  helperText?: string,
+}