From 8bb6bce78a6f72fbeeae5c2911305da632b6e98b Mon Sep 17 00:00:00 2001 From: Kevin Duret Date: Wed, 5 Jun 2019 11:39:28 +0200 Subject: [PATCH] fix(front): retrieve main loading animation (#7587) * fix(front): retrieve main loading animation * fix history paramas in legacyRoute --- www/front_src/src/App.js | 10 +- .../src/components/mainRouter/index.js | 18 +++ .../src/route-components/legacyRoute/index.js | 16 ++- .../src/route-components/module/index.js | 126 ------------------ 4 files changed, 29 insertions(+), 141 deletions(-) create mode 100644 www/front_src/src/components/mainRouter/index.js delete mode 100755 www/front_src/src/route-components/module/index.js diff --git a/www/front_src/src/App.js b/www/front_src/src/App.js index 7901e2f195e..a5e404c4dcc 100755 --- a/www/front_src/src/App.js +++ b/www/front_src/src/App.js @@ -1,16 +1,14 @@ import React, { Component } from "react"; import Header from "./components/header"; -import { Switch, Route } from "react-router-dom"; import { connect } from 'react-redux'; import { ConnectedRouter } from "react-router-redux"; import { history } from "./store"; -import ReactRouter from "./components/reactRouter"; -import LegacyRoute from "./route-components/legacyRoute"; import NavigationComponent from "./components/navigation"; import Tooltip from "./components/tooltip"; import Footer from "./components/footer"; import Fullscreen from 'react-fullscreen-crossbrowser'; +import MainRouter from './components/mainRouter'; import queryString from 'query-string'; import axios from './axios'; @@ -115,11 +113,7 @@ class App extends Component { onChange={isFullscreenEnabled => this.setState({isFullscreenEnabled})} >
- - - ()}/> - - +
diff --git a/www/front_src/src/components/mainRouter/index.js b/www/front_src/src/components/mainRouter/index.js new file mode 100644 index 00000000000..2bfaac23259 --- /dev/null +++ b/www/front_src/src/components/mainRouter/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { Switch, Route, withRouter } from 'react-router-dom'; +import ReactRouter from '../reactRouter'; +import LegacyRoute from '../../route-components/legacyRoute'; + +// main router to handle switch between legacy routes and react pages +// legacy route has a key to make it fully uncontrolled +// (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) +// it allows to reconstruct the component to display loading animation +const MainRouter = ({ history: { location: { key } } }) => ( + + + ()}/> + + +); + +export default withRouter(MainRouter); diff --git a/www/front_src/src/route-components/legacyRoute/index.js b/www/front_src/src/route-components/legacyRoute/index.js index 2898b0f7554..55f24aad021 100644 --- a/www/front_src/src/route-components/legacyRoute/index.js +++ b/www/front_src/src/route-components/legacyRoute/index.js @@ -38,6 +38,7 @@ class LegacyRoute extends Component { handleHref = event => { let href = event.detail.href; + // update route window.history.pushState(null, null, href); } @@ -49,10 +50,10 @@ class LegacyRoute extends Component { } componentDidMount() { - this.mainContainer = window.parent.document.getElementById('fullscreen-wrapper'); + this.mainContainer = window.document.getElementById('fullscreen-wrapper'); // add a listener on global page size - window.parent.addEventListener( + window.addEventListener( "resize", this.handleResize ); @@ -74,17 +75,17 @@ class LegacyRoute extends Component { componentWillUnmount() { clearTimeout(this.resizeTimeout); - window.parent.removeEventListener( + window.removeEventListener( "resize", this.handleResize ); - window.parent.removeEventListener( + window.removeEventListener( "react.href.update", this.handleHref ); - window.parent.removeEventListener( + window.removeEventListener( "react.href.disconnect", this.handleDisconnect ); @@ -92,14 +93,15 @@ class LegacyRoute extends Component { render() { const { contentHeight, loading } = this.state; - const { history } = this.props, - { search, hash } = history.location; + const { history: { location: { search, hash } } } = this.props; + let params; if (window['fullscreenSearch']) { params = window['fullscreenSearch'] + window['fullscreenHash'] } else { params = (search || '') + (hash || ''); } + return ( <> {loading && diff --git a/www/front_src/src/route-components/module/index.js b/www/front_src/src/route-components/module/index.js deleted file mode 100755 index 1fcef239bce..00000000000 --- a/www/front_src/src/route-components/module/index.js +++ /dev/null @@ -1,126 +0,0 @@ -import React, { Component } from "react"; -import classnames from 'classnames'; -import styles from '../../components/header/header.scss'; -import loaderStyles from '../../components/loader/loader.scss'; -import Loader from "../../components/loader"; - - -class ModuleRoute extends Component { - - constructor(props) { - super(props); - - this.mainContainer = null; - this.resizeTimeout = null; - - this.state = { - contentHeight: 0, - loading: true - } - } - - handleResize = () => { - // wait size is the same during 200ms to handle it - clearTimeout(this.resizeTimeout); - - if (this.mainContainer) { - this.resizeTimeout = setTimeout(() => { - const { clientHeight } = this.mainContainer; - const { contentHeight } = this.state; - if (clientHeight != contentHeight) { - this.setState({ - loading: false, - contentHeight: clientHeight - 30 - }); - } - }, 200); - } - } - - handleHref = event => { - let href = event.detail.href; - // update route - window.history.pushState(null, null, href); - } - - // handle disconnect event sent by iframe - handleDisconnect = event => { - // update current url to redirect to login page - window.location.href = event.detail.href; - } - - componentDidMount() { - this.mainContainer = window.parent.document.getElementById('fullscreen-wrapper'); - - // add a listener on global page size - window.parent.addEventListener( - "resize", - this.handleResize - ); - - // add event listener to update page url - window.addEventListener( - "react.href.update", - this.handleHref, - false - ); - - // add event listener to check if iframe is redirected to login page - window.addEventListener( - "react.href.disconnect", - this.handleDisconnect, - false - ); - }; - - componentWillUnmount() { - clearTimeout(this.resizeTimeout); - window.parent.removeEventListener( - "resize", - this.handleResize - ); - - window.parent.removeEventListener( - "react.href.update", - this.handleHref - ); - - window.parent.removeEventListener( - "react.href.disconnect", - this.handleDisconnect - ); - } - - render() { - const { contentHeight, loading } = this.state; - const { history } = this.props, - { search, hash } = history.location; - let params; - if (window['fullscreenSearch']) { - params = window['fullscreenSearch'] + window['fullscreenHash'] - } else { - params = (search || '') + (hash || ''); - } - return ( - <> - {loading && - - - - } -