fix: we need to refresh the custom scripts list page to see the added/edited entries #137

Author: duttarnab

admin-ui/plugins/admin/components/CustomScripts/CustomScriptAddPage.js

@@ -1,25 +1,39 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { Container, CardBody, Card } from '../../../../app/components'
 import CustomScriptForm from './CustomScriptForm'
 import { addCustomScript } from '../../redux/actions/CustomScriptActions'
 import { buildPayload } from '../../../../app/utils/PermChecker'
+import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
+import { useTranslation } from 'react-i18next'
 
-function CustomScriptAddPage({ scripts, dispatch }) {
+function CustomScriptAddPage({ scripts, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
   const history = useHistory()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (saveOperationFlag && !errorInSaveOperationFlag)
+      history.push('/adm/scripts')
+  }, [saveOperationFlag])
+
+
   function handleSubmit(data) {
     if (data) {
       let message = data.customScript.action_message
       delete data.customScript.action_message
       buildPayload(userAction, message, data)
       dispatch(addCustomScript(userAction))
-      history.push('/adm/scripts')
     }
   }
   return (
     <React.Fragment>
+      <GluuAlert
+        severity={t('titles.error')}
+        message={t('messages.error_in_saving')}
+        show={errorInSaveOperationFlag}
+      />
       <Container>
         <Card className="mb-3">
           <CardBody>
@@ -39,6 +53,8 @@ const mapStateToProps = (state) => {
     scripts: state.customScriptReducer.items,
     loading: state.customScriptReducer.loading,
     permissions: state.authReducer.permissions,
+    saveOperationFlag: state.customScriptReducer.saveOperationFlag,
+    errorInSaveOperationFlag: state.customScriptReducer.errorInSaveOperationFlag,
   }
 }
 export default connect(mapStateToProps)(CustomScriptAddPage)

admin-ui/plugins/admin/components/CustomScripts/CustomScriptEditPage.js

@@ -1,26 +1,39 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { CardBody, Card } from '../../../../app/components'
 import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
 import CustomScriptForm from './CustomScriptForm'
 import { editCustomScript } from '../../redux/actions/CustomScriptActions'
 import { buildPayload } from '../../../../app/utils/PermChecker'
+import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
+import { useTranslation } from 'react-i18next'
 
-function CustomScriptEditPage({ item, scripts, loading, dispatch }) {
+function CustomScriptEditPage({ item, scripts, loading, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
   const history = useHistory()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (saveOperationFlag && !errorInSaveOperationFlag)
+      history.push('/adm/scripts')
+  }, [saveOperationFlag])
+
   function handleSubmit(data) {
     if (data) {
       let message = data.customScript.action_message
       delete data.customScript.action_message
       buildPayload(userAction, message, data)
       dispatch(editCustomScript(userAction))
-      history.push('/adm/scripts')
     }
   }
   return (
     <GluuLoader blocking={loading}>
+      <GluuAlert
+        severity={t('titles.error')}
+        message={t('messages.error_in_saving')}
+        show={errorInSaveOperationFlag}
+      />
       <Card className="mb-3">
         <CardBody>
           <CustomScriptForm
@@ -39,6 +52,8 @@ const mapStateToProps = (state) => {
     scripts: state.customScriptReducer.items,
     loading: state.customScriptReducer.loading,
     permissions: state.authReducer.permissions,
+    saveOperationFlag: state.customScriptReducer.saveOperationFlag,
+    errorInSaveOperationFlag: state.customScriptReducer.errorInSaveOperationFlag,
   }
 }
 export default connect(mapStateToProps)(CustomScriptEditPage)

admin-ui/plugins/admin/redux/reducers/CustomScriptReducer.js

@@ -16,17 +16,16 @@ import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
 const INIT_STATE = {
   items: [],
   loading: true,
+  saveOperationFlag: false,
+  errorInSaveOperationFlag: false,
 }
 
 const reducerName = 'customScriptReducer'
 
 export default function customScriptReducer(state = INIT_STATE, action) {
   switch (action.type) {
     case GET_CUSTOM_SCRIPT:
-      return {
-        ...state,
-        loading: true,
-      }
+      return handleLoading()
     case GET_CUSTOM_SCRIPT_RESPONSE:
       if (action.payload.data) {
         return {
@@ -38,10 +37,7 @@ export default function customScriptReducer(state = INIT_STATE, action) {
         return handleDefault()
       }
     case GET_CUSTOM_SCRIPT_BY_TYPE:
-      return {
-        ...state,
-        loading: true,
-      }
+      return handleLoading()
     case GET_CUSTOM_SCRIPT_BY_TYPE_RESPONSE:
       if (action.payload.data) {
         return {
@@ -56,32 +52,50 @@ export default function customScriptReducer(state = INIT_STATE, action) {
       return {
         ...state,
         loading: true,
+        saveOperationFlag: false,
+        errorInSaveOperationFlag: false,
       }
     case ADD_CUSTOM_SCRIPT_RESPONSE:
       if (action.payload.data) {
         return {
           ...state,
           items: [...state.items, action.payload.data],
           loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: false,
         }
       } else {
-        return handleDefault()
+        return {
+          ...state,
+          loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: true,
+        }
       }
 
     case EDIT_CUSTOM_SCRIPT:
       return {
         ...state,
         loading: true,
+        saveOperationFlag: false,
+        errorInSaveOperationFlag: false,
       }
     case EDIT_CUSTOM_SCRIPT_RESPONSE:
       if (action.payload.data) {
         return {
           ...state,
           items: [...state.items],
           loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: false,
         }
       } else {
-        return handleDefault()
+        return {
+          ...state,
+          loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: true,
+        }
       }
 
     case DELETE_CUSTOM_SCRIPT:
@@ -121,6 +135,17 @@ export default function customScriptReducer(state = INIT_STATE, action) {
     return {
       ...state,
       loading: false,
+      saveOperationFlag: false,
+      errorInSaveOperationFlag: false,
+    }
+  }
+
+  function handleLoading() {
+    return {
+      ...state,
+      loading: true,
+      saveOperationFlag: false,
+      errorInSaveOperationFlag: false,
     }
   }
 }