fix: #568 add more config to scaffolder and fix private route wrapper for check isFetching or not

packages/react-app-scaffolder/app/index.js

@@ -276,7 +276,7 @@ module.exports = class extends Generator {
      * else current path
      */
     if (this.answers.isFoundation) {
-      this.packagePath = path.resolve(__dirname, `../../${this.answers.name}`)
+      this.packagePath = path.resolve(__dirname, '../..', this.answers.name)
       /**
        * create directory if not
        */

packages/react-app-scaffolder/app/templates/_config.example.json

@@ -4,5 +4,6 @@
   "cognitoClientId": "<%= clientId %>",
   "googleAnalyticsKey": "",
   "cognitoOAuthUrl": "https://dev.connect.reapit.cloud",
-  "cognitoUserPoolId": ""
+  "cognitoUserPoolId": "eu-west-2_hbt0B7yys",
+  "platformApiUrl": "https://dev.platform.reapit.cloud"
 }

packages/react-app-scaffolder/app/templates/_config.json

@@ -4,5 +4,6 @@
   "cognitoClientId": "<%= clientId %>",
   "googleAnalyticsKey": "",
   "cognitoOAuthUrl": "https://dev.connect.reapit.cloud",
-  "cognitoUserPoolId": ""
+  "cognitoUserPoolId": "eu-west-2_hbt0B7yys",
+  "platformApiUrl": "https://dev.platform.reapit.cloud"
 }

packages/react-app-scaffolder/app/templates/base-is-not-sass/src/scripts/webpack-dev.js

@@ -7,6 +7,7 @@ const ResolveTSPathsToWebpackAlias = require('ts-paths-to-webpack-alias')
 const {PATHS} = require('./constants')
 
 module.exports = {
+  mode: 'development',
   context: process.cwd(),
   entry: PATHS.entryWeb,
   output: {
@@ -86,6 +87,7 @@ module.exports = {
     open: true,
     clientLogLevel: 'warning',
     historyApiFallback: true,
+    disableHostCheck: true,
     stats: {
       cached: false,
       cachedAssets: false,

packages/react-app-scaffolder/app/templates/base-is-sass/src/scripts/webpack-dev.js

@@ -6,6 +6,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const ResolveTSPathsToWebpackAlias = require('ts-paths-to-webpack-alias')
 
 module.exports = {
+  mode: 'development',
   context: process.cwd(),
   entry: './src/core/index.tsx',
   output: {
@@ -132,6 +133,7 @@ module.exports = {
     open: true,
     clientLogLevel: 'warning',
     historyApiFallback: true,
+    disableHostCheck: true,
     stats: {
       cached: false,
       cachedAssets: false,

packages/react-app-scaffolder/app/templates/base/src/core/app.tsx

@@ -35,21 +35,21 @@ import globalCss from 'raw-loader!sass-loader!@reapit/elements/dist/index.css'
 
 const App = () => {
   <% if (!redux && !graphql) { %>
-    const { loginSession, refreshParams, getLoginSession, ...rest } = useAuth()
-    if (!loginSession && refreshParams) {
+    const { loginSession, refreshParams, getLoginSession, isFetchSession, ...rest } = useAuth()
+    if (!loginSession && refreshParams && !isFetchSession) {
       getLoginSession(refreshParams)
     }
   <% } %>
   <% if (graphql) { %>
-    const { loginSession, refreshParams, getLoginSession, ...rest } = useAuth()
-    if (!loginSession && refreshParams) {
+    const { loginSession, refreshParams, getLoginSession, isFetchSession, ...rest } = useAuth()
+    if (!loginSession && refreshParams && !isFetchSession) {
       getLoginSession(refreshParams)
     }
     const accessToken = loginSession?.accessToken || ''
   <% } %>
   return (
     <% if (!redux) { %>
-    <AuthContext.Provider value={{ loginSession, refreshParams, getLoginSession, ...rest }}>
+    <AuthContext.Provider value={{ loginSession, refreshParams, getLoginSession, isFetchSession, ...rest }}>
     <% } %>
     <% if (graphql) { %>
       <ApolloProvider client={getClient(accessToken, window.reapit.config.graphqlUri)}>

packages/react-app-scaffolder/app/templates/no-redux/src/context/__mocks__/mock-context.tsx

@@ -20,6 +20,7 @@ export const mockContext = {
     cognitoClientId: '123',
     refreshToken: 'mockRefreshToken',
   },
+  isFetchSession: false,
   logout: jest.fn(),
   getLoginSession: jest.fn(),
   refreshParams: null,

packages/react-app-scaffolder/app/templates/no-redux/src/core/private-route-wrapper.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
-import { withRouter, RouteComponentProps, Redirect } from 'react-router-dom'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
 import Menu from '@/components/ui/menu'
 import { Loader, AppNavContainer, Section } from '@reapit/elements'
 import { redirectToOAuth } from '@reapit/cognito-auth'
 import { AuthContext } from '@/context'
-import Routes from '@/constants/routes'
 
 const { Suspense } = React
 
@@ -13,23 +12,27 @@ export type PrivateRouteWrapperProps = RouteComponentProps & {
 }
 
 export const PrivateRouteWrapper: React.FunctionComponent<PrivateRouteWrapperProps> = ({ children }) => {
-  const { loginSession, refreshParams, getLoginSession } = React.useContext(AuthContext)
+  const { loginSession, refreshParams, getLoginSession, isFetchSession } = React.useContext(AuthContext)
 
   if (!loginSession && !refreshParams) {
     redirectToOAuth(window.reapit.config.cognitoClientId)
     return null
   }
 
-  if (!loginSession && refreshParams) {
+  if (!loginSession && refreshParams && !isFetchSession) {
     getLoginSession(refreshParams)
   }
 
   if (!loginSession) {
     return null
   }
 
-  if (location.pathname === '/') {
-    return <Redirect to={Routes.HOME} />
+  if (isFetchSession) {
+    return (
+      <Section>
+        <Loader />
+      </Section>
+    )
   }
 
   return (

packages/react-app-scaffolder/app/templates/no-redux/src/hooks/use-auth.ts

@@ -15,14 +15,15 @@ export type AuthHook = {
   logout: () => void
   getLoginSession: (refreshParams: RefreshParams | null) => Promise<void>
   refreshParams?: RefreshParams | null
+  isFetchSession: boolean
 }
 
 export const useAuth = (): AuthHook => {
   const [isFetchSession, setFetchSession] = React.useState(false)
   const [loginSession, setLoginSession] = React.useState<LoginSession | null>(null)
   const urlParams: RefreshParams | null = getTokenFromQueryString(
     window.location.search,
-    window.reapit.config.cognitoClientId
+    window.reapit.config.cognitoClientId,
   )
   const cookieParams = getSessionCookie(COOKIE_SESSION_KEY)
   const refreshParams = cookieParams ? cookieParams : urlParams
@@ -51,6 +52,7 @@ export const useAuth = (): AuthHook => {
     loginSession,
     logout,
     getLoginSession,
+    isFetchSession,
   }
 }