add user-agent info to redux store, to not load some data on mobile b…

…efore as it wont be visible

components/operators/table.js

@@ -50,7 +50,7 @@ class OperatorsTable extends React.Component {
   };
 
   render() {
-    const { operators, operatorsTable, filters, intl } = this.props;
+    const { operators, operatorsTable, isLoading, filters, intl } = this.props;
     const { fmu: fmuSearch } = filters;
     const { sortColumn, sortDirection, expandedOperatorIds } = this.state;
 
@@ -59,6 +59,10 @@ class OperatorsTable extends React.Component {
       (o) => sortDirection * o[sortColumn]
     );
 
+    if (isLoading) {
+      return <Spinner isLoading />;
+    }
+
     if (!operators.loading) {
       return (
         <div className="c-ranking">
@@ -207,6 +211,7 @@ OperatorsTable.propTypes = {
 
 export default connect((state) => ({
   operators: state.operatorsRanking.data,
+  isLoading: state.operatorsRanking.loading,
   operatorsTable: getTable(state),
   filters: state.operatorsRanking.filters.data,
 }))(injectIntl(OperatorsTable));

components/ui/sidebar.js

@@ -6,6 +6,12 @@ import Icon from 'components/ui/icon';
 
 export default function Sidebar(props) {
   const { className, open, name, children, onToggle } = props;
+  const [render, setRender] = React.useState(false);
+
+  // keep rendering content after first open
+  React.useEffect(() => {
+    setRender(true);
+  }, [open]);
 
   const classNames = classnames({
     [props.className]: !!className,
@@ -34,7 +40,7 @@ export default function Sidebar(props) {
       }
 
       <div className="l-sidebar-content">
-        {children}
+        {render && children}
       </div>
     </aside>
   );

modules/index.js

@@ -1,7 +1,6 @@
 export { default as countries } from './countries';
 export { default as countriesDetail } from './countries-detail';
 export { default as database } from './documents-database';
-export { default as home } from './home';
 export { default as language } from './language';
 export { default as modal } from './modal';
 export { default as observations } from './observations';

modules/operators-ranking.js

@@ -59,7 +59,7 @@ const initialState = {
 
   // SIDEBAR
   sidebar: {
-    open: true,
+    open: false,
     width: 600
   },
 

modules/user.js

@@ -7,6 +7,7 @@ import { logEvent } from 'utils/analytics';
 // CONSTANTS
 const SET_USER = 'SET_USER';
 const REMOVE_USER = 'REMOVE_USER';
+const SET_USER_AGENT = 'SET_USER_AGENT';
 
 const GET_USER_PROFILE_SUCCESS = 'GET_USER_PROFILE_SUCCESS';
 const GET_USER_PROFILE_ERROR = 'GET_USER_PROFILE_ERROR';
@@ -22,6 +23,8 @@ export default function User(state = initialState, action) {
   switch (action.type) {
     case SET_USER:
       return Object.assign({}, state, action.payload);
+    case SET_USER_AGENT:
+      return Object.assign({}, state, { userAgent: action.payload });
     case GET_USER_PROFILE_SUCCESS: {
       return {
         ...state,
@@ -96,6 +99,10 @@ export function setUser(user) {
   return { type: SET_USER, payload: user };
 }
 
+export function setUserAgent(userAgent) {
+  return { type: SET_USER_AGENT, payload: userAgent };
+}
+
 /* Action creators */
 export function getUserOperator(id) {
   return (dispatch) => {

next.config.js

@@ -97,10 +97,10 @@ const config = {
         destination: "/api/portal/:path*",
       }
     ];
-   },
-   experimental: {
+  },
+  experimental: {
     optimizePackageImports: ["modules"]
-   }
+  }
 };
 
 const sentryWebpackPluginOptions = {

package.json

@@ -48,6 +48,7 @@
     "reselect": "^4.1.8",
     "slugify": "^1.4.0",
     "spin-delay": "^2.0.1",
+    "ua-parser-js": "^2.0.0",
     "viewport-mercator-project": "6.1.1",
     "vizzuality-components": "^3.0.3"
   },

pages/_app.js

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux';
 import Router from 'next/router';
 import { IntlProvider } from 'react-intl';
 
-import { setUser } from 'modules/user';
+import { setUser, setUserAgent } from 'modules/user';
 import { setLanguage } from 'modules/language';
 import { getCountries } from 'modules/countries';
 import { getOperators } from 'modules/operators';
@@ -119,6 +119,14 @@ MyApp.getInitialProps = wrapper.getInitialAppProps(store => async ({ Component,
   if (isServer) {
     const session = await getSession(req, res);
     user = session.user;
+
+    const UAParser = (await import('ua-parser-js')).UAParser;
+    const { ua, device } = UAParser(req.headers['user-agent']);
+    const userAgent = {
+      ua,
+      isMobile: device.is('mobile')
+    }
+    store.dispatch(setUserAgent(userAgent));
   } else {
     user = state.user;
   }

pages/operators/index.js

@@ -42,12 +42,15 @@ import OperatorsTable from 'components/operators/table';
 
 class OperatorsPage extends React.Component {
   static async getInitialProps({ store }) {
-    const { operatorsRanking } = store.getState();
+    const { operatorsRanking, user } = store.getState();
+    const { userAgent } = user;
+    const isMobile = userAgent.isMobile;
     const requests = [];
 
-    if (!operatorsRanking.data.length) {
+    if (!operatorsRanking.data.length && !isMobile) {
       requests.push(store.dispatch(getOperatorsRanking()));
     }
+    requests.push(store.dispatch(setOperatorsSidebar({ open: !userAgent.isMobile })));
 
     await Promise.all(requests);
 
@@ -56,16 +59,17 @@ class OperatorsPage extends React.Component {
 
   /* Component Lifecycle */
   componentDidMount() {
-    const { router, operatorsRanking, deviceInfo } = this.props;
+    const { router, operatorsRanking, isMobile } = this.props;
 
     // Set location
     this.props.setOperatorsMapLocation(getOperatorsUrl(router));
     if (!operatorsRanking.layersSettings['integrated-alerts']) {
       this.props.getIntegratedAlertsMetadata();
     }
 
-    if (!deviceInfo.isDesktop) {
-      this.props.setOperatorsSidebar({ open: false });
+    // lazy load on mobile
+    if (isMobile) {
+      this.props.getOperatorsRanking();
     }
   }
 
@@ -105,7 +109,6 @@ class OperatorsPage extends React.Component {
 
   render() {
     const {
-      url,
       language,
       operatorsRanking,
       activeLayers,
@@ -221,6 +224,7 @@ OperatorsPage.propTypes = {
 export default withRouter(withDeviceInfo(injectIntl(connect(
   (state, props) => ({
     language: state.language,
+    isMobile: state.user.userAgent.isMobile,
     operatorsRanking: state.operatorsRanking,
     map: state.operatorsRanking.map,
     sidebar: state.operatorsRanking.sidebar,

yarn.lock

@@ -2579,6 +2579,11 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+detect-europe-js@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/detect-europe-js/-/detect-europe-js-0.1.2.tgz#aa76642e05dae786efc2e01a23d4792cd24c7b88"
+  integrity sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==
+
 detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@@ -3771,6 +3776,11 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-standalone-pwa@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-standalone-pwa/-/is-standalone-pwa-0.1.1.tgz#7a1b0459471a95378aa0764d5dc0a9cec95f2871"
+  integrity sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -5608,6 +5618,20 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+ua-is-frozen@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ua-is-frozen/-/ua-is-frozen-0.1.2.tgz#bfbc5f06336e379590e36beca444188c7dc3a7f3"
+  integrity sha512-RwKDW2p3iyWn4UbaxpP2+VxwqXh0jpvdxsYpZ5j/MLLiQOfbsV5shpgQiw93+KMYQPcteeMQ289MaAFzs3G9pw==
+
+ua-parser-js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-2.0.0.tgz#fae88e352510198bd29a6dd41624c7cd0d2c7ade"
+  integrity sha512-SASgD4RlB7+SCMmlVNqrhPw0f/2pGawWBzJ2+LwGTD0GgNnrKGzPJDiraGHJDwW9Zm5DH2lTmUpqDpbZjJY4+Q==
+  dependencies:
+    detect-europe-js "^0.1.2"
+    is-standalone-pwa "^0.1.1"
+    ua-is-frozen "^0.1.2"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"