Remove 'observer' from the global App component (#221)

Fixes the bug with infinite redirect loop in 'back' button press. Inside the Application component creates LoadingBar component connected to the store.
oacore · Mar 31, 2020 · d6b495d · d6b495d · vercel · Mar 31, 2020
1 parent a8080fa
commit d6b495d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/components/application/index.jsx b/components/application/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Container, AppBar, SideBar, Main } from '../layout'
-import LoadingBar from '../loading-bar'
+import LoadingBar from './loading-bar'
 import RepositorySelect from './repository-select'
 import ActivitySelect from './activity-select'
 import Head from './head'
@@ -15,13 +15,12 @@ const Application = ({
   dataProvider,
   activity,
   isAuthenticated = false,
-  isLoading = false,
   ...restProps
 }) => (
   <>
     <Head />
     <Container {...restProps}>
-      {isLoading && <LoadingBar className={styles.loadingBar} />}
+      <LoadingBar className={styles.loadingBar} />
       <AppBar variant={isAuthenticated ? 'internal' : 'public'}>
         {isAuthenticated ? (
           <>

diff --git a/components/application/loading-bar.jsx b/components/application/loading-bar.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { withGlobalStore } from 'store'
+import LoadingBar from 'components/loading-bar'
+
+const LoadingBarController = ({ store, ...passProps }) =>
+  store.isLoading ? <LoadingBar {...passProps} /> : null
+
+export default withGlobalStore(LoadingBarController)
diff --git a/pages/_app/index.jsx b/pages/_app/index.jsx
@@ -2,7 +2,6 @@ import React from 'react'
 import NextApp from 'next/app'
 import { withRouter } from 'next/router'
 import { autorun } from 'mobx'
-import { observer } from 'mobx-react'
 
 import '@oacore/design/lib/index.css'
 
@@ -26,7 +25,6 @@ process.on('uncaughtException', err => {
   Sentry.captureException(err)
 })
 
-@observer
 class App extends NextApp {
   state = {
     isAuthorized: false,
@@ -265,7 +263,6 @@ class App extends NextApp {
           dataProvider={store.dataProvider}
           activity={store.activity.id}
           onClick={this.handleNavigation}
-          isLoading={store.isLoading}
           isAuthenticated
         >
           <Component {...pageProps} />