refactor: put the stateModel reducer in a slice to make room for othe…

…r slices

(cherry picked from commit c1676c7)

client/src/dataset/addtoproject/DatasetAdd.present.js

@@ -63,7 +63,7 @@ function HeaderAddDataset({ dataset }) {
 
 function DatasetAdd({ dataset, model, handlers, isDatasetValid, currentStatus, importingDataset, insideProject }) {
   const [isNewProject, setIsNewProject] = useState(false);
-  const logged = useSelector((state) => state.user.logged);
+  const logged = useSelector((state) => state.stateModel.user.logged);
 
   // Return early if there is no dataset
   if (!dataset) return <Loader />;

client/src/dataset/addtoproject/addDatasetNewProject.js

@@ -40,7 +40,7 @@ const AddDatasetNewProject = (
   const [ newProject, setNewProject ] = useState(null);
   const setCurrentStatus = handlers.setCurrentStatus;
   const { client } = useContext(AppContext);
-  const user = useSelector( (state) => state.user);
+  const user = useSelector( (state) => state.stateModel.user);
 
   useEffect(() => setCurrentStatus(null), [setCurrentStatus]);
 

client/src/index.js

@@ -96,7 +96,7 @@ Promise.all([configFetch, privacyFetch]).then(valuesRead => {
 
     // Map redux user data to the initial react application
     function mapStateToProps(state, ownProps) {
-      return { user: state.user, ...ownProps };
+      return { user: state.stateModel.user, ...ownProps };
     }
 
     // Render UI application

client/src/landing/Landing.js

@@ -52,7 +52,7 @@ class Home extends Component {
 
   mapStateToProps(state, ownProps) {
     // map projects to props
-    return { projects: state.projects };
+    return { projects: state.stateModel.projects };
   }
 
   render() {

client/src/landing/NabBarWarnings.js

@@ -64,7 +64,7 @@ function pollComponentsVersion(model, client) {
  */
 function VersionsBanner(props) {
   function mapStateToProps(state, ownProps) {
-    return { environment: state.environment };
+    return { environment: state.stateModel.environment };
   }
 
   const VisibleBanner = connect(mapStateToProps)(VersionsBannerPresent);

client/src/model/Model.js

@@ -142,17 +142,24 @@ class Schema {
   }
 }
 
+function getReduxState(reduxStore, slice) {
+  const state = reduxStore.getState();
+  if (slice) return state[slice];
+  return state;
+}
+
 class ReduxStateModel {
 
-  constructor(owner, stateBinding, stateHolder, initialState) {
+  constructor(owner, stateBinding, stateHolder, initialState, slice = null) {
     this.stateBinding = stateBinding; // We know stateBinding === StateKind.REDUX
     this.reduxStore = stateHolder;
+    this.slice = slice;
     // Initialize state
-    const updateObj = updateObjectFromObject(initialState, this.reduxStore.getState());
+    const updateObj = updateObjectFromObject(initialState, getReduxState(stateHolder, slice));
     this.immutableUpdate(updateObj, null);
   }
 
-  getStateObject() { return this.reduxStore.getState(); }
+  getStateObject() { return getReduxState(this.reduxStore, this.slice); }
 
   immutableUpdate(updateObj, callback) {
     this.reduxStore.dispatch({
@@ -194,8 +201,12 @@ class StateModel {
     const initializedState = initialState ? initialState : schema.createInitialized();
 
     if (stateBinding === StateKind.REDUX) {
-      if (!stateHolder) stateHolder = createStore(schema.reducer(), this.constructor.name);
-      this._stateModel = new ReduxStateModel(this, stateBinding, stateHolder, initializedState);
+      let slice = null;
+      if (!stateHolder) {
+        slice = "stateModel";
+        stateHolder = createStore({ [slice]: schema.reducer() }, this.constructor.name);
+      }
+      this._stateModel = new ReduxStateModel(this, stateBinding, stateHolder, initializedState, slice);
       this.reduxStore = this._stateModel.reduxStore;
     }
     else if (stateBinding === StateKind.REACT) {

client/src/notebooks/Notebooks.container.js

@@ -49,7 +49,7 @@ import { sleep } from "../utils/helpers/HelperFunctions";
  */
 
 function mapSessionStateToProps(state, ownProps) {
-  const notebooks = state.notebooks.notebooks;
+  const notebooks = state.stateModel.notebooks.notebooks;
   const available = notebooks.all[ownProps.target] ?
     true :
     false;
@@ -60,12 +60,12 @@ function mapSessionStateToProps(state, ownProps) {
     data: available ?
       notebooks.all[ownProps.target] :
       {},
-    logs: state.notebooks.logs
+    logs: state.stateModel.notebooks.logs
   };
   return {
     handlers: ownProps.handlers,
     target: ownProps.target,
-    filters: state.notebooks.filters,
+    filters: state.stateModel.notebooks.filters,
     notebook
   };
 }
@@ -144,8 +144,8 @@ class ShowSession extends Component {
 function mapSessionListStateToProps(state, ownProps) {
   return {
     handlers: ownProps.handlers,
-    ...state.notebooks,
-    logs: { ...state.notebooks.logs, show: ownProps.showingLogs }
+    ...state.stateModel.notebooks,
+    logs: { ...state.stateModel.notebooks.logs, show: ownProps.showingLogs }
   };
 }
 
@@ -823,7 +823,7 @@ class StartNotebookServer extends Component {
 }
 
 function mapNotebookStatusStateToProps(state, ownProps) {
-  const subState = state.notebooks;
+  const subState = state.stateModel.notebooks;
 
   const notebookKeys = Object.keys(subState.notebooks.all);
   const notebook = notebookKeys.length > 0 ?
@@ -888,7 +888,7 @@ class CheckNotebookStatus extends Component {
   }
 
   mapStateToProps(state, ownProps) {
-    const subState = state.notebooks;
+    const subState = state.stateModel.notebooks;
 
     const notebookKeys = Object.keys(subState.notebooks.all);
     const notebook = notebookKeys.length > 0 ?

client/src/notifications/Notifications.container.js

@@ -173,9 +173,9 @@ class NotificationsMenu extends Component {
   mapStateToProps(state, ownProps) {
     return {
       handlers: this.handlers,
-      notifications: state.notifications.all,
-      unread: state.notifications.unread,
-      enabled: state.notifications.dropdown.enabled
+      notifications: state.stateModel.notifications.all,
+      unread: state.stateModel.notifications.unread,
+      enabled: state.stateModel.notifications.dropdown.enabled
     };
   }
 
@@ -213,8 +213,8 @@ class NotificationsPage extends Component {
   mapStateToProps(state, ownProps) {
     return {
       handlers: this.handlers,
-      notifications: state.notifications.all,
-      unread: state.notifications.unread
+      notifications: state.stateModel.notifications.all,
+      unread: state.stateModel.notifications.unread
     };
   }
 

client/src/project/Project.js

@@ -705,7 +705,7 @@ class View extends Component {
  */
 function mapProjectFeatures(projectCoordinator, features = [], parentProperty = null) {
   let mapStateToProps = function (state) {
-    const projectState = state.project;
+    const projectState = projectCoordinator.get();
     if (!features || !features.length)
       features = Object.keys(projectState);
 

client/src/project/new/ProjectNew.container.js

@@ -136,16 +136,17 @@ class ForkProjectMapper extends Component {
 
   mapStateToProps(state, ownProps) {
     return {
-      namespaces: { ...state.projects.namespaces },
+      namespaces: { ...state.stateModel.projects.namespaces },
       // We need only a selection of the featured projects. Replicate the namespaces structure fetched/fetching/list
       projects: {
-        fetched: state.projects.featured.fetched,
-        fetching: state.projects.featured.fetching,
-        list: state.projects.featured.member,
+        fetched: state.stateModel.projects.featured.fetched,
+        fetching: state.stateModel.projects.featured.fetching,
+        list: state.stateModel.projects.featured.member,
       },
       user: {
-        logged: state.user.logged,
-        username: state.user.data && state.user.data.username ? state.user.data.username : null
+        logged: state.stateModel.user.logged,
+        username: state.stateModel.user.data && state.stateModel.user.data.username ?
+          state.stateModel.user.data.username : null
       }
     };
   }
@@ -580,24 +581,25 @@ class NewProject extends Component {
     // map minimal projects and user information
     const additional = {
       projects: {
-        fetched: state.projects.featured.fetched,
-        fetching: state.projects.featured.fetching,
-        list: state.projects.featured.member
+        fetched: state.stateModel.projects.featured.fetched,
+        fetching: state.stateModel.projects.featured.fetching,
+        list: state.stateModel.projects.featured.member
       },
       namespaces: {
-        fetched: state.projects.namespaces.fetched,
-        fetching: state.projects.namespaces.fetching,
-        list: state.projects.namespaces.list
+        fetched: state.stateModel.projects.namespaces.fetched,
+        fetching: state.stateModel.projects.namespaces.fetching,
+        list: state.stateModel.projects.namespaces.list
       },
       user: {
-        logged: state.user.logged,
-        username: state.user.data && state.user.data.username ? state.user.data.username : null
+        logged: state.stateModel.user.logged,
+        username: state.stateModel.user.data && state.stateModel.user.data.username ?
+          state.stateModel.user.data.username : null
       },
     };
 
     return {
       ...additional,
-      ...state.newProject,
+      ...state.stateModel.newProject,
       handlers: this.handlers
     };
   }

client/src/project/settings/ProjectSettings.container.js

@@ -139,11 +139,11 @@ class ProjectSettingsSessionsMapper extends Component {
 
   mapStateToProps(state, ownProps) {
     return {
-      backend: state.project.migration.core,
-      options: state.notebooks.options,
-      metadata: state.project.metadata,
-      config: state.project.config,
-      user: state.user
+      backend: state.stateModel.project.migration.core,
+      options: state.stateModel.notebooks.options,
+      metadata: state.stateModel.project.metadata,
+      config: state.stateModel.project.config,
+      user: state.stateModel.user
     };
   }
   render() {

client/src/statuspage/Statuspage.container.js

@@ -29,7 +29,7 @@ import { connect } from "react-redux";
 import { StatuspageDisplay as DisplayPresent, StatuspageBanner as BannerPresent } from "./Statuspage.present";
 
 function mapStateToProps(state, ownProps) {
-  return { statusSummary: state.statuspage, ...ownProps };
+  return { statusSummary: state.stateModel.statuspage, ...ownProps };
 }
 
 /**

client/src/utils/components/formgenerator/FormGenerator.container.js

@@ -35,7 +35,7 @@ import { simpleHash } from "../../helpers/HelperFunctions";
 function locationToLocationHash(loc) { return "uid_" + simpleHash(loc); }
 
 function mapStateToProps(state, props) {
-  const currentDraft = state.formGenerator.formDrafts[props.locationHash];
+  const currentDraft = state.stateModel.formGenerator.formDrafts[props.locationHash];
   return {
     draft: currentDraft,
     ...props

client/src/utils/helpers/EnhancedState.js

@@ -26,12 +26,12 @@
 
 import { configureStore } from "@reduxjs/toolkit";
 
-function createStore(reducer, name = "renku") {
+function createStore(renkuStateModelReducer, name = "renku") {
 
   // For the moment, disable the custom middleware, since it causes
   // problems for our app.
   const store = configureStore({
-    reducer: reducer,
+    reducer: renkuStateModelReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
         immutableCheck: false,