Editor redesign in progress

frontend/src/actions/action-types.js

@@ -2,6 +2,14 @@
  * This file contains action types for the custom redux behaviors (that are not REST related)
  */
 
+// handling of full screen dialog and notifications in an original manner,
+// ie common fot the entire app
+export const OPEN_FULL_SCREEN_DIALOG = "OPEN_FULL_SCREEN_DIALOG";
+export const CLOSE_FULL_SCREEN_DIALOG = "CLOSE_UNIVERSITY_BEING_VIEWED";
+export const CREATE_NOTIFICATION = "CREATE_NOTIFICATION";
+export const DELETE_NOTIFICATION = "DELETE_NOTIFICATION";
+
+// Other redux actions
 export const SAVE_MAIN_MAP_STATUS = "SAVE_MAIN_MAP_STATUS";
 export const SAVE_SELECTED_UNIVERSITIES = "SAVE_SELECTED_UNIVERSITIES";
 export const SAVE_FILTER_CONFIG = "SAVE_FILTER_CONFIG";

frontend/src/actions/fullScreenDialog.js

+/*
+ * This file contains the redux actions related to handling the app fullScreenDialog
+ */
+
+import {
+  OPEN_FULL_SCREEN_DIALOG,
+  CLOSE_FULL_SCREEN_DIALOG,
+} from "./action-types";
+
+
+/**
+ * Action: Open the full screen dialog and pass attributes.
+ *
+ * @export
+ * @param {Node} innerNodes
+ * @returns {object}
+ */
+export function openFullScreenDialog(innerNodes) {
+  return {
+    type: OPEN_FULL_SCREEN_DIALOG,
+    innerNodes
+  };
+
+}
+
+
+/**
+ * Action: Close the full screen dialog
+ *
+ * @export
+ * @returns {object}
+ */
+export function closeFullScreenDialog() {
+  return {
+    type: CLOSE_FULL_SCREEN_DIALOG,
+  };
+
+}

frontend/src/actions/notifications.js

+/*
+ * This file contains the redux actions related to the handling of notifications in the app
+ */
+
+import {
+  CREATE_NOTIFICATION,
+  DELETE_NOTIFICATION,
+} from "./action-types";
+
+
+/**
+ * Action: Create a notifiacation in the app
+ *
+ * @export
+ * @param {object} attrs
+ * @returns {object}
+ */
+export function createNotification(attrs) {
+  return {
+    type: CREATE_NOTIFICATION,
+    attrs
+  };
+
+}
+
+
+/**
+ * Action: Delete a notification
+ * TODO add support for multiple
+ *
+ * @export
+ * @returns {object}
+ */
+export function deleteNotification() {
+  return {
+    type: DELETE_NOTIFICATION,
+  };
+
+}

frontend/src/components/App.js

@@ -16,7 +16,9 @@ import Chip from "@material-ui/core/Chip";
 import Avatar from "@material-ui/core/Avatar";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import SchoolIcon from "@material-ui/icons/School";
-import { mainListItems, secondaryListItems, thirdListItems } from "./template/listItems";
+import { mainListItems, secondaryListItems, thirdListItems } from "./appRelated/listItems";
+import FullScreenDialog from "./appRelated/FullScreenDialog";
+import Notifications from "./appRelated/Notifications";
 
 import { connect } from "react-redux";
 import CustomComponentForAPI from "./CustomComponentForAPI";
@@ -111,6 +113,10 @@ class App extends CustomComponentForAPI {
 
           </Drawer>
 
+
+          <Notifications />
+          <FullScreenDialog />
+
           <main className={classNames(classes.content, classes.noPaddingTop)}>
             <div className={classes.paddingTop}>
               <Route path="/app/" exact={true} component={PageHome} />
@@ -126,6 +132,7 @@ class App extends CustomComponentForAPI {
             <div >
               <Route path="/app/university/:id" component={PageUniversity} />
             </div>
+
           </main>
 
         </div>

frontend/src/components/appRelated/FullScreenDialog.js

+import React, { Component } from "react";
+import Dialog from "@material-ui/core/Dialog";
+import Slide from "@material-ui/core/Slide";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+
+/**
+ * Function to enable the FullScreenDialog to have nice transitions
+ * @returns
+ */
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+
+/**
+ * Class to display a full screen dialog.
+ * It is connected to the redux state to have only one of such dialog across the app.
+ *
+ * @class FullScreenDialog
+ * @extends {Component}
+ */
+class FullScreenDialog extends Component {
+  render() {
+    return (
+      <Dialog
+        fullScreen
+        open={this.props.open}
+        TransitionComponent={Transition}
+      >
+        {this.props.innerNodes}
+      </Dialog>
+    );
+  }
+}
+
+
+FullScreenDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  innerNodes: PropTypes.node.isRequired,
+};
+
+// Get the props from the redux store.
+const mapStateToProps = (state) => ({ ...state.app.fullScreenDialog });
+
+export default connect(mapStateToProps)(FullScreenDialog);

frontend/src/components/university/shared/GenericModule.js

@@ -65,7 +65,7 @@ class GenericModule extends CustomComponentForAPI {
     }
   };
 
-  handleCloseEditor = (somethingWasSaved = false) => {
+  handleEditorWasClosed = (somethingWasSaved = false) => {
     this.setState({ editorOpen: false, dataToSave: null });
     if (somethingWasSaved && this.props.moduleInGroupInfos.isInGroup) {
       // this.props.moduleInGroupInfos.invalidateGroup();
@@ -163,7 +163,7 @@ class GenericModule extends CustomComponentForAPI {
         />
         <this.props.editor
           open={this.state.editorOpen}
-          handleCloseEditor={this.handleCloseEditor}
+          handleEditorWasClosed={this.handleEditorWasClosed}
           modelData={this.props.parseRawModelData(this.state.rawModelDataForEditor)}
           outsideData={this.props.outsideData}
           userData={this.props.userData}

frontend/src/components/university/shared/editorFunctions/getMapDispatchToPropsForEditor.js

 import getActions from "../../../../api/getActions";
+import { openFullScreenDialog, closeFullScreenDialog } from "../../../../actions/fullScreenDialog";
 
 /**
  * Function to create the mapDispatchToProps function for editor in a "generic way"
@@ -11,6 +12,8 @@ export default function getMapDispatchToPropsForEditor(name) {
   return (dispatch) => {
     return {
       saveData: (data) => dispatch(getActions(name).update(data)),
+      openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
+      closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),
       // clearSaveError: () => dispatch(savingHasErrorAction(false))
     };
   };

frontend/src/reducers/fullScreenDialog.js

+/*
+ * This file contains the redux reducers related to the app fullScreenDialog
+ */
+
+import React from "react";
+import {
+  OPEN_FULL_SCREEN_DIALOG,
+  CLOSE_FULL_SCREEN_DIALOG
+} from "../actions/action-types";
+
+/**
+ * Reducer for the fullScreenDialog
+ *
+ * @export
+ * @param {object} state
+ * @param {string} action
+ * @returns
+ */
+export function fullScreenDialog(state = { open: false, innerNodes: <div></div> }, action) {
+  switch (action.type) {
+    case OPEN_FULL_SCREEN_DIALOG:
+      return {
+        open: true,
+        innerNodes: action.innerNodes,
+      };
+
+    case CLOSE_FULL_SCREEN_DIALOG:
+      return {
+        open: false,
+        innerNodes: <div></div>
+      };
+
+    default:
+      return state;
+  }
+}

frontend/src/reducers/index.js

 import { combineReducers } from "redux";
 
+import { fullScreenDialog } from "./fullScreenDialog";
+import { notifications } from "./notifications";
 import { saveMainMapStatus } from "./map";
 import { saveSelectedUniversities, saveFilterConfig } from "./filter";
 import { saveAppTheme, saveAppColorPicker } from "./theme";
@@ -8,6 +10,8 @@ import { apiReducers } from "../api/buildApiActionsAndReducers";
 
 // Combine the reducers related to the app
 const app = combineReducers({
+  fullScreenDialog,
+  notifications,
   mainMap: saveMainMapStatus,
   selectedUniversities: saveSelectedUniversities,
   filter: saveFilterConfig,