diff --git a/src/fireedge/src/client/apps/provision/index.js b/src/fireedge/src/client/apps/provision/index.js index b89b1727d2..449be6f3ce 100644 --- a/src/fireedge/src/client/apps/provision/index.js +++ b/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 = '' }) => ( - {location && context ? ( + {location ? ( // server build - + ) : ( diff --git a/src/fireedge/src/client/apps/sunstone/index.js b/src/fireedge/src/client/apps/sunstone/index.js index c457fec973..c66b1f08c5 100644 --- a/src/fireedge/src/client/apps/sunstone/index.js +++ b/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 = '' }) => ( - {location && context ? ( + {location ? ( // server build - + ) : ( diff --git a/src/fireedge/src/client/components/HOC/AuthLayout.js b/src/fireedge/src/client/components/HOC/AuthLayout.js index 7c585604a7..ebbb6ed0eb 100644 --- a/src/fireedge/src/client/components/HOC/AuthLayout.js +++ b/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]) diff --git a/src/fireedge/src/server/routes/entrypoints/App.js b/src/fireedge/src/server/routes/entrypoints/App.js index f5d6b6fdb9..5f73037ba6 100644 --- a/src/fireedge/src/server/routes/entrypoints/App.js +++ b/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 = `` + // SSR redux store + const store = createStore( + rootReducer, + composeEnhancer(applyMiddleware(thunk)) + ) - component = renderToString( - sheets.collect() - ) + const storeRender = `` - css = `` - } + const App = require(`../../../client/apps/${appName}/index.js`).default + + const rootComponent = renderToString( + sheets.collect() + ) + + const css = `` const html = ` - ${upperCaseFirst(appName ?? defaultTitle)} by OpenNebula + ${upperCaseFirst(appName ?? 'FireEdge')} by OpenNebula @@ -95,14 +84,10 @@ router.get('*', (req, res) => { ${css} -
${component}
+
${rootComponent}
${storeRender} - ${ - isProduction - ? `` - : `` - } + ` diff --git a/src/fireedge/webpack.config.dev.client.js b/src/fireedge/webpack.config.dev.client.js index 99f40376bf..7ce4077eab 100644 --- a/src/fireedge/webpack.config.dev.client.js +++ b/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`, },