Commit 0e2adf44 authored by Florent Chehab's avatar Florent Chehab

Feat(front): switch full screen service created, dropped redux for this.

parent 699dee3e
......@@ -4,7 +4,7 @@
import React from "react";
import { compose } from "recompose";
import { Route, Switch } from "react-router-dom";
import FullScreenDialog from "./FullScreenDialog";
import FullScreenDialog from "../services/FullScreenDialog";
import { withErrorBoundary } from "../common/ErrorBoundary";
import PageMap from "../pages/PageMap";
......@@ -26,6 +26,7 @@ import FooterImportantInformation from "./FooterImportantInformation";
import PageAboutUnlinkedPartners from "../pages/PageAboutUnlinkedPartners";
import PageLogout from "../pages/PageLogout";
import withNetworkWrapper, { NetWrapParam } from "../../hoc/withNetworkWrapper";
import FullScreenDialogService from "../../services/FullScreenDialogService";
// import PageFiles from "../pages/PageFiles";
......@@ -43,7 +44,7 @@ function App() {
}}
>
<MainAppFrame>
<FullScreenDialog />
<FullScreenDialog ref={FullScreenDialogService.setComponent} />
<NotifierImportantInformation />
<main>
<Switch>
......
......@@ -12,6 +12,7 @@ import Alert from "../common/Alert";
// Form is imported only for type hints
// eslint-disable-next-line no-unused-vars
import Form from "../form/Form";
import FullScreenDialogService from "../../services/FullScreenDialogService";
/**
* Class to handle editions of models on the frontend. It should be extended, eg:
......@@ -199,7 +200,7 @@ class Editor extends Component {
* @param {Boolean} somethingWasSaved
*/
closeEditor(somethingWasSaved) {
this.props.closeFullScreenDialog();
FullScreenDialogService.closeDialog();
this.props.closeEditorPanel(somethingWasSaved);
}
......@@ -215,7 +216,7 @@ class Editor extends Component {
// don't check the if prevProps was false before, we need to rerender it anyway so that we can
// display the alert.
if (this.props.open) {
this.props.openFullScreenDialog(this.renderEditor());
FullScreenDialogService.openDialog(this.renderEditor());
}
// we make to notify if saving to the server has errors
......@@ -379,8 +380,6 @@ Editor.propTypes = {
clearSaveError: PropTypes.func.isRequired,
lastUpdateTimeInModel: PropTypes.string,
hasPendingModeration: PropTypes.bool,
openFullScreenDialog: PropTypes.func.isRequired,
closeFullScreenDialog: PropTypes.func.isRequired,
saveData: PropTypes.func.isRequired,
// Notifications related
enqueueSnackbar: PropTypes.func.isRequired,
......
import getActions from "../../redux/api/getActions";
import {
closeFullScreenDialog,
openFullScreenDialog
} from "../../redux/actions/fullScreenDialog";
import RequestParams from "../../redux/api/RequestParams";
/**
......@@ -34,9 +30,6 @@ export default function getMapDispatchToPropsForEditor(name) {
dispatch(getActions(name).create(params));
}
},
openFullScreenDialog: innerNodes =>
dispatch(openFullScreenDialog(innerNodes)),
closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),
clearSaveError: () => {
// we need to clear the correct error
// depending on if it was a save or a create
......
import React from "react";
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";
/**
* Component to enable the FullScreenDialog to have nice transitions
......@@ -16,21 +14,21 @@ const Transition = React.forwardRef((props, ref) => (
/**
* Component to display a full screen dialog.
* It is connected to the redux state to have only one of such dialog across the app.
*
* WARNING must be a class for the full screen dialog service to work !
*/
function FullScreenDialog({ open, innerNodes }) {
return (
<Dialog fullScreen open={open} TransitionComponent={Transition}>
{innerNodes}
</Dialog>
);
}
class FullScreenDialog extends Component {
state = { open: false, children: undefined };
FullScreenDialog.propTypes = {
open: PropTypes.bool.isRequired, // Is the full screen dialog open
innerNodes: PropTypes.node.isRequired // content of the fullScreen Dialog
};
render() {
const { open, children } = this.state;
// Get the props from the redux store.
const mapStateToProps = state => ({ ...state.app.fullScreenDialog });
return (
<Dialog fullScreen open={open} TransitionComponent={Transition}>
{typeof children !== "undefined" ? children : <></>}
</Dialog>
);
}
}
export default connect(mapStateToProps)(FullScreenDialog);
export default FullScreenDialog;
......@@ -16,10 +16,6 @@ import Divider from "@material-ui/core/Divider";
import MobileStepper from "@material-ui/core/MobileStepper";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import {
closeFullScreenDialog,
openFullScreenDialog
} from "../../../../redux/actions/fullScreenDialog";
import CustomComponentForAPI from "../../../common/CustomComponentForAPI";
import Loading from "../../../common/Loading";
......@@ -29,6 +25,7 @@ import editorStyle from "../../../editor/editorStyle";
import getActions from "../../../../redux/api/getActions";
import RequestParams from "../../../../redux/api/RequestParams";
import FullScreenDialogService from "../../../../services/FullScreenDialogService";
/**
* Component to display the previous versions of module
......@@ -92,7 +89,7 @@ class History extends CustomComponentForAPI {
*/
componentDidUpdate(prevProps, prevState, snapshot) {
super.componentDidUpdate(prevProps, prevState, snapshot);
this.props.openFullScreenDialog(this.renderPanel());
FullScreenDialogService.openDialog(this.renderPanel());
}
/**
......@@ -102,7 +99,7 @@ class History extends CustomComponentForAPI {
*/
closeHistory() {
this.props.closeHistoryPanel();
this.props.closeFullScreenDialog();
FullScreenDialogService.closeDialog();
this.props.resetVersions();
}
......@@ -110,7 +107,6 @@ class History extends CustomComponentForAPI {
* Renders the panel that contain the history data
*
* @returns
* @memberof History
*/
renderPanel() {
if (!this.allApiDataIsReady()) {
......@@ -257,8 +253,6 @@ History.propTypes = {
resetVersions: PropTypes.func.isRequired,
versions: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
openFullScreenDialog: PropTypes.func.isRequired,
closeFullScreenDialog: PropTypes.func.isRequired,
modelInfo: PropTypes.object.isRequired,
renderer: PropTypes.object.isRequired
};
......@@ -276,10 +270,7 @@ const mapDispatchToProps = dispatch => ({
api: {
versions: params => dispatch(getActions("versions").readAll(params))
},
resetVersions: () => dispatch(getActions("versions").invalidateAll()),
openFullScreenDialog: innerNodes =>
dispatch(openFullScreenDialog(innerNodes)),
closeFullScreenDialog: () => dispatch(closeFullScreenDialog())
resetVersions: () => dispatch(getActions("versions").invalidateAll())
});
const styles = theme => ({
......
......@@ -12,16 +12,13 @@ import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import CloseIcon from "@material-ui/icons/Close";
import Divider from "@material-ui/core/Divider";
import {
closeFullScreenDialog,
openFullScreenDialog
} from "../../../../redux/actions/fullScreenDialog";
import CustomComponentForAPI from "../../../common/CustomComponentForAPI";
import getActions from "../../../../redux/api/getActions";
import editorStyle from "../../../editor/editorStyle";
import Loading from "../../../common/Loading";
import RequestParams from "../../../../redux/api/RequestParams";
import FullScreenDialogService from "../../../../services/FullScreenDialogService";
/**
* Class to handle models that are pending moderation.
......@@ -43,7 +40,6 @@ class PendingModeration extends CustomComponentForAPI {
/**
* Force update to force call of componentDidUpdate en mount and force the rendering of the moderation panel.
*
* @memberof PendingModeration
*/
componentDidMount() {
super.componentDidMount();
......@@ -53,18 +49,16 @@ class PendingModeration extends CustomComponentForAPI {
/**
* Customization to handle opening the app full screen dialog when needed.
*
* @memberof PendingModeration
*/
componentDidUpdate(prevProps, prevState, snapshot) {
super.componentDidUpdate(prevProps, prevState, snapshot);
this.props.openFullScreenDialog(this.renderPanel());
FullScreenDialogService.openDialog(this.renderPanel());
}
/**
* Retrieve the raw model data from the pending moderation data
*
* @returns
* @memberof PendingModeration
*/
getRawModelDataFromPending() {
const pendingObject = this.getLatestReadData("pendingModeration")[0];
......@@ -79,7 +73,6 @@ class PendingModeration extends CustomComponentForAPI {
*
* @param {object} rawModelData
* @returns
* @memberof PendingModeration
*/
renderPendingModerationInfo(rawModelData) {
return (
......@@ -116,10 +109,9 @@ class PendingModeration extends CustomComponentForAPI {
/**
* Close the panel and make sure to update parent
*
* @memberof PendingModeration
*/
closePanel() {
this.props.closeFullScreenDialog();
FullScreenDialogService.closeDialog();
this.props.closePendingModerationPanel();
this.props.resetPendingModeration();
}
......@@ -128,7 +120,6 @@ class PendingModeration extends CustomComponentForAPI {
* Renders the panel content
*
* @returns
* @memberof PendingModeration
*/
renderPanel() {
if (!this.allApiDataIsReady()) {
......@@ -168,7 +159,6 @@ class PendingModeration extends CustomComponentForAPI {
* @override
*
* @returns
* @memberof PendingModeration
*/
render() {
return <></>;
......@@ -185,8 +175,6 @@ PendingModeration.propTypes = {
closePendingModerationPanel: PropTypes.func.isRequired,
moderatePendingModeration: PropTypes.func.isRequired,
userCanModerate: PropTypes.bool.isRequired,
openFullScreenDialog: PropTypes.func.isRequired,
closeFullScreenDialog: PropTypes.func.isRequired,
renderer: PropTypes.object.isRequired
};
......@@ -205,10 +193,7 @@ const mapDispatchToProps = dispatch => ({
dispatch(getActions("pendingModerationObj").readAll(params))
},
resetPendingModeration: () =>
dispatch(getActions("pendingModerationObj").invalidateAll()),
openFullScreenDialog: innerNodes =>
dispatch(openFullScreenDialog(innerNodes)),
closeFullScreenDialog: () => dispatch(closeFullScreenDialog())
dispatch(getActions("pendingModerationObj").invalidateAll())
});
const styles = theme => ({
......
......@@ -2,11 +2,6 @@
* 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_FULL_SCREEN_DIALOG";
// Other redux actions
export const SAVE_MAIN_MAP_STATUS = "SAVE_MAIN_MAP_STATUS";
export const SAVE_SELECTED_UNIVERSITIES = "SAVE_SELECTED_UNIVERSITIES";
/*
* This file contains the redux actions related to handling the app fullScreenDialog
*/
import {
CLOSE_FULL_SCREEN_DIALOG,
OPEN_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
};
}
/* eslint-disable react/jsx-filename-extension */
/*
* This file contains the redux reducers related to the app fullScreenDialog
*/
import React from "react";
import {
CLOSE_FULL_SCREEN_DIALOG,
OPEN_FULL_SCREEN_DIALOG
} from "../actions/action-types";
/**
* Reducer for the fullScreenDialog
*
* @export
* @param {object} state
* @param {string} action
* @returns
*/
// eslint-disable-next-line import/prefer-default-export
export function fullScreenDialog(
state = {
open: false,
innerNodes: <></>
},
action
) {
switch (action.type) {
case OPEN_FULL_SCREEN_DIALOG:
return {
open: true,
innerNodes: action.innerNodes
};
case CLOSE_FULL_SCREEN_DIALOG:
return {
open: false,
innerNodes: <></>
};
default:
return state;
}
}
import { combineReducers } from "redux";
import { fullScreenDialog } from "./fullScreenDialog";
import { saveSelectedUniversities } from "./filter";
import { apiReducers } from "../api/buildApiActionsAndReducers";
// Combine the reducers related to the app
const app = combineReducers({
fullScreenDialog,
selectedUniversities: saveSelectedUniversities
});
......
/**
* Manage the full screen dialog
*/
class FullScreenDialogService {
/**
* @type {React.Component}
* @private
*/
_component = undefined;
/**
* TO BE USED ONLY in App.jsx to get the ref to the component
* @param ref
*/
setComponent = ref => {
this._component = ref;
};
closeDialog = () => {
const { open } = this._component.state;
if (open) this._component.setState({ open: false });
};
openDialog = children => {
const { open } = this._component.state;
if (!open) this._component.setState({ open: true, children });
};
}
export default new FullScreenDialogService();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment