System messages loading fixed.

src/components/layout/Layout/Layout.js

@@ -14,7 +14,9 @@ const title = getConfigVar('TITLE');
 const Layout = ({
   toggleSize,
   toggleVisibility,
-  sidebar,
+  isLoggedIn,
+  sidebarIsCollapsed,
+  sidebarIsOpen,
   pendingFetchOperations,
   children,
   lang,
@@ -26,14 +28,15 @@ const Layout = ({
     className={classnames({
       wrapper: true,
       'sidebar-mini': true,
-      'sidebar-collapse': sidebar.isCollapsed,
-      'sidebar-open': sidebar.isOpen,
+      'sidebar-collapse': sidebarIsCollapsed,
+      'sidebar-open': sidebarIsOpen,
     })}
     style={{
       overflow: 'visible',
     }}>
     <Helmet defaultTitle={`${title}`} titleTemplate={`%s | ${title}`} />
     <Header
+      isLoggedIn={isLoggedIn}
       toggleSidebarSize={toggleSize}
       toggleSidebarVisibility={toggleVisibility}
       availableLangs={availableLangs}
@@ -42,8 +45,8 @@ const Layout = ({
       pendingFetchOperations={pendingFetchOperations}
     />
     <SidebarContainer
-      isCollapsed={sidebar.isCollapsed}
-      small={!sidebar.isOpen && sidebar.isCollapsed} // does not always work, but is good enough
+      isCollapsed={sidebarIsCollapsed}
+      small={!sidebarIsOpen && sidebarIsCollapsed} // does not always work, but is good enough
       currentUrl={currentUrl}
     />
     <div onClick={onCloseSidebar}>
@@ -56,10 +59,9 @@ const Layout = ({
 Layout.propTypes = {
   toggleSize: PropTypes.func,
   toggleVisibility: PropTypes.func,
-  sidebar: PropTypes.shape({
-    isCollapsed: PropTypes.bool,
-    isOpen: PropTypes.bool,
-  }),
+  isLoggedIn: PropTypes.bool,
+  sidebarIsCollapsed: PropTypes.bool,
+  sidebarIsOpen: PropTypes.bool,
   pendingFetchOperations: PropTypes.bool,
   onCloseSidebar: PropTypes.func,
   children: PropTypes.element,

src/components/widgets/Header/Header.js

@@ -24,6 +24,7 @@ class Header extends Component {
 
   render() {
     const {
+      isLoggedIn,
       availableLangs = [],
       currentLang,
       currentUrl = '',
@@ -39,7 +40,7 @@ class Header extends Component {
               <LoadingIcon gapRight />
             ) : (
               <React.Fragment>
-                Re<b>C</b>
+                Re<b>X</b>
               </React.Fragment>
             )}
           </span>
@@ -77,7 +78,7 @@ class Header extends Component {
           </ClientOnly>
           <div className="navbar-custom-menu">
             <ul className="nav navbar-nav">
-              <HeaderSystemMessagesContainer />
+              {isLoggedIn && <HeaderSystemMessagesContainer />}
               <HeaderNotificationsContainer />
               {availableLangs.map(lang => (
                 <HeaderLanguageSwitching lang={lang} active={currentLang === lang} key={lang} currentUrl={currentUrl} />
@@ -91,6 +92,7 @@ class Header extends Component {
 }
 
 Header.propTypes = {
+  isLoggedIn: PropTypes.bool,
   toggleSidebarSize: PropTypes.func.isRequired,
   toggleSidebarVisibility: PropTypes.func.isRequired,
   currentLang: PropTypes.string.isRequired,

src/components/widgets/HeaderNotificationsDropdown/headerNotificationDropdown.less

@@ -1,5 +1,5 @@
 .dropdownMenu {
   width: 42vw !important;
   min-width: 400px !important;
-	box-shadow: 8px 8px 16px #999 !important;
+  box-shadow: 8px 8px 16px #999 !important;
 }

src/components/widgets/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.less

@@ -1,7 +1,7 @@
 .dropdownMenu {
   width: 70vw !important;
 	min-width: 400px !important;
-	box-shadow: 8px 8px 16px #999 !important;
+  box-shadow: 8px 8px 16px #999 !important;
 }
 
 .messageList {

src/containers/App/App.js

@@ -10,6 +10,7 @@ import { fetchUsersInstancesIfNeeded } from '../../redux/modules/instances';
 import { fetchManyUserInstancesStatus } from '../../redux/selectors/instances';
 import { fetchAllGroups } from '../../redux/modules/groups';
 import { fetchManyGroupsStatus } from '../../redux/selectors/groups';
+import { fetchAllUserMessages } from '../../redux/modules/systemMessages';
 import { logout, refresh, selectInstance } from '../../redux/modules/auth';
 import { getJsData, resourceStatus } from '../../redux/helpers/resourceManager';
 
@@ -44,6 +45,7 @@ class App extends Component {
             })
           ),
           dispatch(fetchUsersInstancesIfNeeded(userId)),
+          dispatch(fetchAllUserMessages),
         ])
       : Promise.resolve();
 

src/containers/HeaderSystemMessagesContainer/HeaderSystemMessagesContainer.js

@@ -5,17 +5,13 @@ import { connect } from 'react-redux';
 import HeaderSystemMessagesDropdown from '../../components/widgets/HeaderSystemMessagesDropdown';
 import { readyActiveSystemMessagesSelector, fetchManyUserStatus } from '../../redux/selectors/systemMessages';
 import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';
-import { fetchAllUserMessages } from '../../redux/modules/systemMessages';
 
 class HeaderSystemMessagesContainer extends Component {
   state = { isOpen: false };
 
-  static loadAsync = (params, dispatch) => Promise.all([dispatch(fetchAllUserMessages)]);
-
   // Monitor clicking and hide the notifications panel when the user clicks sideways
 
   componentWillMount = () => {
-    this.props.loadAsync();
     if (canUseDOM) {
       window.addEventListener('mousedown', this.close);
     }
@@ -55,15 +51,9 @@ class HeaderSystemMessagesContainer extends Component {
 HeaderSystemMessagesContainer.propTypes = {
   systemMessages: PropTypes.array.isRequired,
   fetchStatus: PropTypes.string,
-  loadAsync: PropTypes.func.isRequired,
 };
 
-export default connect(
-  state => ({
-    fetchStatus: fetchManyUserStatus(state),
-    systemMessages: readyActiveSystemMessagesSelector(state),
-  }),
-  dispatch => ({
-    loadAsync: () => HeaderSystemMessagesContainer.loadAsync({}, dispatch),
-  })
-)(HeaderSystemMessagesContainer);
+export default connect(state => ({
+  fetchStatus: fetchManyUserStatus(state),
+  systemMessages: readyActiveSystemMessagesSelector(state),
+}))(HeaderSystemMessagesContainer);

src/containers/LayoutContainer/LayoutContainer.js

@@ -8,6 +8,7 @@ import Layout from '../../components/layout/Layout';
 import { anyPendingFetchOperations } from '../../redux/selectors/app';
 import { toggleSize, toggleVisibility, collapse, unroll } from '../../redux/modules/sidebar';
 import { isVisible, isCollapsed } from '../../redux/selectors/sidebar';
+import { isLoggedIn } from '../../redux/selectors/auth';
 import { messages, localeData, defaultLanguage } from '../../locales';
 import { linksFactory, isAbsolute } from '../../links';
 
@@ -89,8 +90,8 @@ class LayoutContainer extends Component {
   });
 
   maybeHideSidebar = e => {
-    const { sidebar, toggleVisibility } = this.props;
-    if (sidebar.isOpen) {
+    const { sidebarIsOpen, toggleVisibility } = this.props;
+    if (sidebarIsOpen) {
       toggleVisibility();
     }
   };
@@ -111,7 +112,9 @@ class LayoutContainer extends Component {
     const {
       children,
       location: { pathname },
-      sidebar,
+      isLoggedIn,
+      sidebarIsCollapsed,
+      sidebarIsOpen,
       toggleSize,
       toggleVisibility,
       pendingFetchOperations,
@@ -124,7 +127,9 @@ class LayoutContainer extends Component {
     return (
       <IntlProvider locale={lang} messages={this.getMessages(lang)} formats={ADDITIONAL_INTL_FORMATS}>
         <Layout
-          sidebar={sidebar}
+          isLoggedIn={isLoggedIn}
+          sidebarIsCollapsed={sidebarIsCollapsed}
+          sidebarIsOpen={sidebarIsOpen}
           toggleSize={toggleSize}
           toggleVisibility={toggleVisibility}
           onCloseSidebar={this.maybeHideSidebar}
@@ -159,18 +164,19 @@ LayoutContainer.propTypes = {
   collapse: PropTypes.func.isRequired,
   unroll: PropTypes.func.isRequired,
   pendingFetchOperations: PropTypes.bool,
-  sidebar: PropTypes.object,
+  isLoggedIn: PropTypes.bool,
+  sidebarIsCollapsed: PropTypes.bool,
+  sidebarIsOpen: PropTypes.bool,
   location: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
   }).isRequired,
   children: PropTypes.element,
 };
 
 const mapStateToProps = (state, props) => ({
-  sidebar: {
-    isOpen: isVisible(state),
-    isCollapsed: isCollapsed(state),
-  },
+  isLoggedIn: isLoggedIn(state),
+  sidebarIsCollapsed: isCollapsed(state),
+  sidebarIsOpen: isVisible(state),
   pendingFetchOperations: anyPendingFetchOperations(state),
 });