B #5695: Add abort to subscription when not logged in (#1843)

(cherry picked from commit eb2790b3686d77828e4eb4ce7be5fef932ce6e82)

src/fireedge/src/client/apps/provision/index.js

@@ -36,17 +36,16 @@ buildTranslationLocale()
  * @param {object} props - Props
  * @param {Store} props.store - Redux store
  * @param {string|object} props.location - The URL the server received
- * @param {object} props.context - Context object contains the results of the render
  * @returns {JSXElementConstructor} Provision App
  */
-const Provision = ({ store = {}, location = '', context = {} }) => (
+const Provision = ({ store = {}, location = '' }) => (
   <ReduxProvider store={store}>
     <TranslateProvider>
       <MuiProvider theme={theme}>
         <NotistackProvider>
-          {location && context ? (
+          {location ? (
             // server build
-            <StaticRouter location={location} context={context}>
+            <StaticRouter location={location}>
               <App />
             </StaticRouter>
           ) : (

src/fireedge/src/client/apps/sunstone/index.js

@@ -36,17 +36,16 @@ buildTranslationLocale()
  * @param {object} props - Props
  * @param {Store} props.store - Redux store
  * @param {string|object} props.location - The URL the server received
- * @param {object} props.context - Context object contains the results of the render
  * @returns {JSXElementConstructor} Sunstone App
  */
-const Sunstone = ({ store = {}, location = '', context = {} }) => (
+const Sunstone = ({ store = {}, location = '' }) => (
   <ReduxProvider store={store}>
     <TranslateProvider>
       <MuiProvider theme={theme}>
         <NotistackProvider>
-          {location && context ? (
+          {location ? (
             // server build
-            <StaticRouter location={location} context={context}>
+            <StaticRouter location={location}>
               <App />
             </StaticRouter>
           ) : (

src/fireedge/src/client/components/HOC/AuthLayout.js

@@ -44,7 +44,9 @@ const AuthLayout = ({ subscriptions = [], children }) => {
       authApi.endpoints.getAuthUser.initiate(undefined, { forceRefetch: true })
     )
 
-    return authSubscription.unsubscribe
+    return () => {
+      authSubscription.unsubscribe()
+    }
   }, [dispatch, jwt])
 
   useEffect(() => {
@@ -58,6 +60,7 @@ const AuthLayout = ({ subscriptions = [], children }) => {
     return () => {
       endpoints.forEach((endpoint) => {
         endpoint.unsubscribe()
+        endpoint.abort()
       })
     }
   }, [dispatch, jwt, user?.NAME])

src/fireedge/src/server/routes/entrypoints/App.js

@@ -14,7 +14,6 @@
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
 const { Router } = require('express')
-const { env } = require('process')
 const { renderToString } = require('react-dom/server')
 const root = require('window-or-global')
 const { createStore, compose, applyMiddleware } = require('redux')
@@ -24,7 +23,6 @@ const rootReducer = require('client/store/reducers')
 const { getFireedgeConfig } = require('server/utils/yml')
 const {
   availableLanguages,
-  defaultWebpackMode,
   defaultApps,
 } = require('server/utils/constants/defaults')
 const { APP_URL, STATIC_FILES_URL } = require('client/constants')
@@ -33,58 +31,49 @@ const { upperCaseFirst } = require('client/utils')
 // settings
 const appConfig = getFireedgeConfig()
 const langs = appConfig.langs || availableLanguages
-const scriptLanguages = []
+
 const languages = Object.keys(langs)
-languages.map((language) =>
-  scriptLanguages.push({
-    key: language,
-    value: `${langs[language]}`,
-  })
-)
+const scriptLanguages = languages.map((language) => ({
+  key: language,
+  value: `${langs[language]}`,
+}))
 
 const router = Router()
 
 router.get('*', (req, res) => {
-  const defaultTitle = 'FireEdge'
-  const context = {}
-  let store = ''
-  let component = ''
-  let css = ''
-  let storeRender = ''
-
-  const isProduction =
-    !env?.NODE_ENV || (env?.NODE_ENV && env?.NODE_ENV !== defaultWebpackMode)
-
   const apps = Object.keys(defaultApps)
   const appName = req.url
     .split(/\//gi)
     .filter((sub) => sub?.length > 0)
     .find((resource) => apps.includes(resource))
 
-  if (isProduction) {
-    const App = require(`../../../client/apps/${appName}/index.js`).default
-    const sheets = new ServerStyleSheets()
-    const composeEnhancer =
-      (root && root.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
+  const sheets = new ServerStyleSheets()
+  const composeEnhancer =
+    (root && root.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
 
-    // SSR redux store
-    store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))
-    storeRender = `<script id="preloadState">window.__PRELOADED_STATE__ = ${JSON.stringify(
-      store.getState()
-    ).replace(/</g, '\\u003c')}</script>`
+  // SSR redux store
+  const store = createStore(
+    rootReducer,
+    composeEnhancer(applyMiddleware(thunk))
+  )
 
-    component = renderToString(
-      sheets.collect(<App location={req.url} context={context} store={store} />)
-    )
+  const storeRender = `<script id="preloadState">window.__PRELOADED_STATE__ = ${JSON.stringify(
+    store.getState()
+  ).replace(/</g, '\\u003c')}</script>`
 
-    css = `<style id="jss-server-side">${sheets.toString()}</style>`
-  }
+  const App = require(`../../../client/apps/${appName}/index.js`).default
+
+  const rootComponent = renderToString(
+    sheets.collect(<App location={req.url} store={store} />)
+  )
+
+  const css = `<style id="jss-server-side">${sheets.toString()}</style>`
 
   const html = `
     <!DOCTYPE html>
     <html lang="en">
     <head>
-      <title>${upperCaseFirst(appName ?? defaultTitle)} by OpenNebula</title>
+      <title>${upperCaseFirst(appName ?? 'FireEdge')} by OpenNebula</title>
       <link rel="icon" type="image/png" href="${STATIC_FILES_URL}/favicon/${appName}/favicon.ico">
       <link rel="apple-touch-icon" sizes="180x180" href="${STATIC_FILES_URL}/favicon/${appName}/apple-touch-icon.png">
       <link rel="icon" type="image/png" sizes="32x32" href="${STATIC_FILES_URL}/favicon/${appName}/favicon-32x32.png">
@@ -95,14 +84,10 @@ router.get('*', (req, res) => {
       ${css}
     </head>
     <body>
-      <div id="root">${component}</div>
+      <div id="root">${rootComponent}</div>
       ${storeRender}
       <script>${`langs = ${JSON.stringify(scriptLanguages)}`}</script>
-      ${
-        isProduction
-          ? `<script src='${APP_URL}/client/bundle.${appName}.js'></script>`
-          : `<script src='${APP_URL}/client/bundle.dev.js'></script>`
-      }
+      <script src='${APP_URL}/client/bundle.${appName}.js'></script>
     </body>
     </html>
   `

src/fireedge/webpack.config.dev.client.js

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+const path = require('path')
+const webpack = require('webpack')
 
 const {
   defaultWebpackMode,
@@ -20,10 +22,16 @@ const {
   defaultAppName,
 } = require('./src/server/utils/constants/defaults')
 
+const APP_ENTRIES = Object.keys(defaultApps).reduce(
+  (entries, app) => ({
+    ...entries,
+    [app]: path.resolve(__dirname, `src/client/${app}.js`),
+  }),
+  {}
+)
+
 const getDevConfiguration = () => {
   try {
-    const path = require('path')
-    const webpack = require('webpack')
     const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
     const TimeFixPlugin = require('time-fix-plugin')
 
@@ -32,14 +40,9 @@ const getDevConfiguration = () => {
     /** @type {webpack.Configuration} */
     return {
       mode: defaultWebpackMode,
-      entry: [
-        'webpack-hot-middleware/client',
-        ...Object.keys(defaultApps).map((app) =>
-          path.resolve(__dirname, `src/client/${app}.js`)
-        ),
-      ],
+      entry: { ...APP_ENTRIES },
       output: {
-        filename: 'bundle.dev.js',
+        filename: 'bundle.[name].js',
         path: path.resolve(__dirname, 'dist'),
         publicPath: `${appName}/client`,
       },