Do not remount everything when closing room edit

indico · May 17, 2019 · e55fceb · e55fceb
1 parent 67c4297
commit e55fceb
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 18 deletions.
diff --git a/indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx b/indico/modules/rb/client/js/common/rooms/RoomEditModal.jsx
@@ -411,6 +411,7 @@ class RoomEditModal extends React.Component {
         roomEquipment: null,
         submitState: '',
         wasEverDirty: false,
+        wasEverSaved: false,
         closing: false,
     };
 
@@ -519,21 +520,22 @@ class RoomEditModal extends React.Component {
 
     handleCloseModal = async () => {
         const {
-            onClose,
+            afterCreation, onClose,
             actions: {fetchEquipmentTypes, fetchRoom, fetchRoomDetails, fetchRoomPermissions}
         } = this.props;
+        const {wasEverSaved} = this.state;
         // eslint-disable-next-line react/destructuring-assignment
         const roomId = this.newRoom ? this.state.newRoomId : this.props.roomId;
         this.setState({closing: true});
-        if (roomId !== null) {
+        if (roomId !== null && wasEverSaved) {
             await Promise.all([
                 fetchEquipmentTypes(),
                 fetchRoom(roomId),
                 fetchRoomPermissions(roomId),
                 fetchRoomDetails(roomId, true)
             ]);
         }
-        onClose();
+        onClose(wasEverSaved || afterCreation);
     };
 
     handleSubmit = async (data, form) => {
@@ -561,7 +563,10 @@ class RoomEditModal extends React.Component {
 
         // reload room so the form gets new initialValues
         await this.fetchRoomData(roomId);
-        this.setState({submitState});
+        this.setState({
+            wasEverSaved: true,
+            submitState,
+        });
         return camelizeKeys(submitError);
     };
 

diff --git a/indico/modules/rb/client/js/common/rooms/selectors.js b/indico/modules/rb/client/js/common/rooms/selectors.js
@@ -12,7 +12,9 @@ import {RequestState} from 'indico/utils/redux';
 import {getAllUserRoomPermissions, isUserRBAdmin} from '../user/selectors';
 
 
-export const hasLoadedEquipmentTypes = ({rooms}) => rooms.requests.equipmentTypes.state === RequestState.SUCCESS;
+export const hasLoadedEquipmentTypes = ({rooms}) => (
+    rooms.requests.equipmentTypes.state === RequestState.SUCCESS || rooms.requests.equipmentTypes.reloading
+);
 export const getAllEquipmentTypes = ({rooms}) => rooms.equipmentTypes;
 const getUsedEquipmentTypes = createSelector(
     getAllEquipmentTypes,
@@ -94,7 +96,9 @@ export const getAllRooms = createSelector(
     }
 );
 
-export const hasLoadedRooms = ({rooms}) => rooms.requests.rooms.state === RequestState.SUCCESS;
+export const hasLoadedRooms = ({rooms}) => (
+    rooms.requests.rooms.state === RequestState.SUCCESS || rooms.requests.rooms.reloading
+);
 export const getRoom = (state, {roomId}) => getAllRooms(state)[roomId];
 
 const getAllAvailabilities = ({rooms}) => rooms.availability;

diff --git a/indico/modules/rb/client/js/modules/admin/AdminLocationRooms.jsx b/indico/modules/rb/client/js/modules/admin/AdminLocationRooms.jsx
@@ -17,12 +17,13 @@ import * as adminSelectors from './selectors';
 import {RoomEditModal} from '../../common/rooms';
 
 import './AdminLocationRooms.module.scss';
+import * as adminActions from './actions';
 
 
 const SearchBar = searchBarFactory('admin', adminSelectors);
 
 
-function AdminLocationRooms({location, isFetching, filters: {text}}) {
+function AdminLocationRooms({location, isFetching, fetchRooms, filters: {text}}) {
     const [adding, setAdding] = useState(false);
 
     if (isFetching) {
@@ -42,6 +43,13 @@ function AdminLocationRooms({location, isFetching, filters: {text}}) {
         });
     }
 
+    const handleCloseModal = saved => {
+        if (saved) {
+            fetchRooms();
+        }
+        setAdding(false);
+    };
+
     return (
         <>
             <Header as="h2" styleName="header">
@@ -66,7 +74,7 @@ function AdminLocationRooms({location, isFetching, filters: {text}}) {
                 </Message>
             )}
             {adding && (
-                <RoomEditModal locationId={location.id} onClose={() => setAdding(false)} />
+                <RoomEditModal locationId={location.id} onClose={handleCloseModal} />
             )}
         </>
     );
@@ -75,6 +83,7 @@ function AdminLocationRooms({location, isFetching, filters: {text}}) {
 AdminLocationRooms.propTypes = {
     location: PropTypes.object,
     isFetching: PropTypes.bool.isRequired,
+    fetchRooms: PropTypes.func.isRequired,
     filters: PropTypes.exact({
         text: PropTypes.string,
     }).isRequired,
@@ -90,5 +99,8 @@ export default connect(
         isFetching: adminSelectors.isFetchingLocations(state),
         location: adminSelectors.getLocation(state, {locationId}),
         filters: adminSelectors.getFilters(state),
-    })
+    }),
+    {
+        fetchRooms: adminActions.fetchRooms,
+    }
 )(AdminLocationRooms);
diff --git a/indico/modules/rb/client/js/modules/admin/AdminRoomItem.jsx b/indico/modules/rb/client/js/modules/admin/AdminRoomItem.jsx
@@ -17,10 +17,17 @@ import * as adminActions from './actions';
 import './AdminRoomItem.module.scss';
 
 
-function AdminRoomItem({room, deleteRoom}) {
+function AdminRoomItem({room, deleteRoom, fetchRooms}) {
     const [editing, setEditing] = useState(false);
     const [deleting, setDeleting] = useState(false);
 
+    const handleCloseModal = saved => {
+        if (saved) {
+            fetchRooms();
+        }
+        setEditing(false);
+    };
+
     return (
         <Item key={room.id} styleName="room-item">
             <Item.Image size="small" styleName="room-item-image">
@@ -42,7 +49,7 @@ function AdminRoomItem({room, deleteRoom}) {
                 </Item.Description>
             </Item.Content>
             {editing && (
-                <RoomEditModal roomId={room.id} onClose={() => setEditing(false)} />
+                <RoomEditModal roomId={room.id} onClose={handleCloseModal} />
             )}
             <Confirm header={Translate.string('Confirm deletion')}
                      content={Translate.string('Are you sure you want to delete this room?')}
@@ -59,9 +66,13 @@ function AdminRoomItem({room, deleteRoom}) {
 AdminRoomItem.propTypes = {
     room: PropTypes.object.isRequired,
     deleteRoom: PropTypes.func.isRequired,
+    fetchRooms: PropTypes.func.isRequired,
 };
 
 export default connect(
     null,
-    {deleteRoom: adminActions.deleteRoom}
+    {
+        deleteRoom: adminActions.deleteRoom,
+        fetchRooms: adminActions.fetchRooms,
+    }
 )(AdminRoomItem);
diff --git a/indico/modules/rb/client/js/modules/admin/selectors.js b/indico/modules/rb/client/js/modules/admin/selectors.js
@@ -43,8 +43,12 @@ export const getLocation = createSelector(
     }
 );
 
-const _isFetchingLocations = ({admin}) => admin.requests.locations.state === RequestState.STARTED;
-const _isFetchingRooms = ({admin}) => admin.requests.rooms.state === RequestState.STARTED;
+const _isFetchingLocations = ({admin}) => (
+    admin.requests.locations.state === RequestState.STARTED && !admin.requests.locations.reloading
+);
+const _isFetchingRooms = ({admin}) => (
+    admin.requests.rooms.state === RequestState.STARTED && !admin.requests.rooms.reloading
+);
 export const isFetchingLocations = state => _isFetchingLocations(state) || _isFetchingRooms(state);
 export const getFilters = ({admin}) => admin.filters;
 

diff --git a/indico/web/client/js/utils/redux.js b/indico/web/client/js/utils/redux.js
@@ -64,15 +64,20 @@ export const RequestState = {
 
 
 export function requestReducer(requestAction, successAction, errorAction) {
-    const initialState = {state: RequestState.NOT_STARTED, error: null};
+    const initialState = {state: RequestState.NOT_STARTED, error: null, reloading: false};
     return (state = initialState, action) => {
         switch (action.type) {
             case requestAction:
-                return {...state, state: RequestState.STARTED, error: null};
+                return {
+                    ...state,
+                    state: RequestState.STARTED,
+                    error: null,
+                    reloading: state.state === RequestState.SUCCESS
+                };
             case successAction:
-                return {...state, state: RequestState.SUCCESS, error: null};
+                return {...state, state: RequestState.SUCCESS, error: null, reloading: false};
             case errorAction:
-                return {...state, state: RequestState.ERROR, error: action.error};
+                return {...state, state: RequestState.ERROR, error: action.error, reloading: false};
             default:
                 return state;
         }