Fix #2243 - AssetSize bar disappears when deleting an asset

client/constants.js

@@ -132,8 +132,6 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 
 export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
-export const SET_ASSETS = 'SET_ASSETS';
-export const DELETE_ASSET = 'DELETE_ASSET';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';

client/middleware.js

@@ -0,0 +1,5 @@
+import { createListenerMiddleware } from '@reduxjs/toolkit';
+
+const listenerMiddleware = createListenerMiddleware();
+
+export default listenerMiddleware;

client/modules/App/App.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import getConfig from '../../utils/getConfig';
+import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
@@ -51,9 +51,7 @@ class App extends React.Component {
     return (
       <div className="app">
         <CookieConsent hide={hide} />
-        {this.state.isMounted &&
-          !window.devToolsExtension &&
-          getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {this.state.isMounted && showReduxDevTools() && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/actions/assets.js

@@ -1,22 +1,22 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
+import { assetsActions } from '../reducers/assets';
 
-function setAssets(assets, totalSize) {
-  return {
-    type: ActionTypes.SET_ASSETS,
-    assets,
-    totalSize
-  };
-}
+const { setAssets, deleteAsset } = assetsActions;
 
 export function getAssets() {
   return (dispatch) => {
     dispatch(startLoader());
     apiClient
       .get('/S3/objects')
       .then((response) => {
-        dispatch(setAssets(response.data.assets, response.data.totalSize));
+        dispatch(
+          setAssets({
+            list: response.data.assets,
+            totalSize: response.data.totalSize
+          })
+        );
         dispatch(stopLoader());
       })
       .catch(() => {
@@ -28,13 +28,6 @@ export function getAssets() {
   };
 }
 
-export function deleteAsset(assetKey) {
-  return {
-    type: ActionTypes.DELETE_ASSET,
-    key: assetKey
-  };
-}
-
 export function deleteAssetRequest(assetKey) {
   return (dispatch) => {
     apiClient

client/modules/IDE/reducers/assets.js

@@ -1,20 +1,27 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
-// 1,000,000 bytes in a MB. can't upload if totalSize is bigger than this.
 const initialState = {
   list: [],
   totalSize: 0
 };
 
-const assets = (state = initialState, action) => {
-  switch (action.type) {
-    case ActionTypes.SET_ASSETS:
-      return { list: action.assets, totalSize: action.totalSize };
-    case ActionTypes.DELETE_ASSET:
-      return { list: state.list.filter((asset) => asset.key !== action.key) };
-    default:
-      return state;
+const assetsSlice = createSlice({
+  name: 'assets',
+  initialState,
+  reducers: {
+    setAssets: (state, action) => action.payload,
+    deleteAsset: (state, action) => {
+      const key = action.payload;
+      const index = state.list.findIndex((asset) => asset.key === key);
+      if (index !== -1) {
+        const asset = state.list[index];
+        state.totalSize -= asset.size;
+        state.list.splice(index, 1);
+      }
+    }
   }
-};
+});
+
+export const assetsActions = assetsSlice.actions;
 
-export default assets;
+export default assetsSlice.reducer;

client/modules/IDE/selectors/collections.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import find from 'lodash/find';
 import orderBy from 'lodash/orderBy';

client/modules/IDE/selectors/project.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 export const selectProjectOwner = (state) => state.project.owner;
 export const selectProjectId = (state) => state.project.id;

client/modules/IDE/selectors/projects.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import orderBy from 'lodash/orderBy';
 import { DIRECTION } from '../actions/sorting';

client/modules/IDE/selectors/users.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import getConfig from '../../../utils/getConfig';
 
 const getAuthenticated = (state) => state.user.authenticated;

client/store.js

@@ -1,30 +1,36 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
+import listenerMiddleware from './middleware';
 import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
 import { clearState, loadState } from './persistState';
 import getConfig from './utils/getConfig';
 
-export default function configureStore(initialState) {
-  const enhancers = [applyMiddleware(thunk)];
-
-  if (getConfig('CLIENT') && getConfig('NODE_ENV') === 'development') {
-    // Enable DevTools only when rendering on client and during development.
-    enhancers.push(
-      window.devToolsExtension
-        ? window.devToolsExtension()
-        : DevTools.instrument()
-    );
-  }
+// Enable DevTools only when rendering on client and during development.
+// Display the dock monitor only if no browser extension is found.
+export function showReduxDevTools() {
+  return (
+    getConfig('CLIENT') &&
+    getConfig('NODE_ENV') === 'development' &&
+    !window.__REDUX_DEVTOOLS_EXTENSION__
+  );
+}
 
+export default function setupStore(initialState) {
   const savedState = loadState();
   clearState();
 
-  const store = createStore(
-    rootReducer,
-    savedState != null ? savedState : initialState,
-    compose(...enhancers)
-  );
+  const store = configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        thunk: true,
+        serializableCheck: true,
+        // TODO: enable immutableCheck once the mutations are fixed.
+        immutableCheck: false
+      }).concat(listenerMiddleware.middleware),
+    preloadedState: savedState || initialState,
+    enhancers: showReduxDevTools() ? [DevTools.instrument()] : []
+  });
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers