Moves root component inside of Router (#1016)

This commit is contained in:
Mihovil Ilakovac 2023-02-21 11:52:14 +01:00 committed by GitHub
parent 9b2c8ca0a5
commit 9665571c63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 45 additions and 41 deletions

View File

@ -13,9 +13,6 @@ import * as serviceWorker from './serviceWorker'
{=# setupFn.isDefined =}
{=& setupFn.importStatement =}
{=/ setupFn.isDefined =}
{=# rootComponent.isDefined =}
{=& rootComponent.importStatement =}
{=/ rootComponent.isDefined =}
startApp()
@ -37,13 +34,7 @@ async function render() {
const queryClient = await queryClientInitialized
ReactDOM.render(
<QueryClientProvider client={queryClient}>
{=# rootComponent.isDefined =}
<{= rootComponent.importIdentifier =}>
{=/ rootComponent.isDefined =}
{router}
{=# rootComponent.isDefined =}
</{= rootComponent.importIdentifier =}>
{=/ rootComponent.isDefined =}
</QueryClientProvider>,
document.getElementById('root')
)

View File

@ -1,6 +1,9 @@
{{={= =}=}}
import React from 'react'
import { Route, BrowserRouter as Router } from 'react-router-dom'
{=# rootComponent.isDefined =}
{=& rootComponent.importStatement =}
{=/ rootComponent.isDefined =}
{=# isAuthEnabled =}
import createAuthRequiredPage from "./auth/pages/createAuthRequiredPage.js"
@ -16,11 +19,15 @@ import OAuthCodeExchange from "./auth/pages/OAuthCodeExchange"
const router = (
<Router>
<div>
{=# rootComponent.isDefined =}
<{= rootComponent.importIdentifier =}>
{=/ rootComponent.isDefined =}
{=^ rootComponent.isDefined =}
<>
{=/ rootComponent.isDefined =}
{=# routes =}
<Route exact path="{= urlPath =}" component={ {= targetComponent =} }/>
{=/ routes =}
{=# isExternalAuthEnabled =}
{=# externalAuthProviders =}
{=# authProviderEnabled =}
@ -30,7 +37,12 @@ const router = (
{=/ authProviderEnabled =}
{=/ externalAuthProviders =}
{=/ isExternalAuthEnabled =}
</div>
{=# rootComponent.isDefined =}
</{= rootComponent.importIdentifier =}>
{=/ rootComponent.isDefined =}
{=^ rootComponent.isDefined =}
</>
{=/ rootComponent.isDefined =}
</Router>
)

View File

@ -403,7 +403,7 @@
"file",
"web-app/src/router.js"
],
"62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
"70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
],
[
[

View File

@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
const router = (
<Router>
<div>
<>
<Route exact path="/" component={ MainPage }/>
</div>
</>
</Router>
)

View File

@ -403,7 +403,7 @@
"file",
"web-app/src/router.js"
],
"62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
"70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
],
[
[

View File

@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
const router = (
<Router>
<div>
<>
<Route exact path="/" component={ MainPage }/>
</div>
</>
</Router>
)

View File

@ -417,7 +417,7 @@
"file",
"web-app/src/router.js"
],
"62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
"70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
],
[
[

View File

@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
const router = (
<Router>
<div>
<>
<Route exact path="/" component={ MainPage }/>
</div>
</>
</Router>
)

View File

@ -403,7 +403,7 @@
"file",
"web-app/src/router.js"
],
"62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
"70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
],
[
[

View File

@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
const router = (
<Router>
<div>
<>
<Route exact path="/" component={ MainPage }/>
</div>
</>
</Router>
)

View File

@ -1,8 +1,9 @@
import { Link } from 'react-router-dom'
import logout from '@wasp/auth/logout.js'
import useAuth from '@wasp/auth/useAuth.js'
import './Main.css'
export function App({ children }) {
const { data: user } = useAuth()
@ -10,12 +11,12 @@ export function App({ children }) {
<div className="app border-spacing-2 p-4">
<header className="flex justify-between">
<h1 className="font-bold text-3xl mb-5">
<a href="/">ToDo App</a>
<Link to="/">ToDo App</Link>
</h1>
{user && (
<div className="flex gap-3 items-center">
<div>
Hello, <a href="/profile">{user.username}</a>
Hello, <Link to="/profile">{user.username}</Link>
</div>
<div>
<button className="btn btn-primary" onClick={logout}>

View File

@ -245,13 +245,11 @@ genIndexJs spec =
(C.asWebAppFile [relfile|src/index.js|])
( Just $
object
[ "setupFn" .= extImportToImportJson relPathToWebAppSrcDir maybeSetupJsFunction,
"rootComponent" .= extImportToImportJson relPathToWebAppSrcDir maybeRootComponent
[ "setupFn" .= extImportToImportJson relPathToWebAppSrcDir maybeSetupJsFunction
]
)
where
maybeSetupJsFunction = AS.App.Client.setupFn =<< AS.App.client (snd $ getApp spec)
maybeRootComponent = AS.App.Client.rootComponent =<< AS.App.client (snd $ getApp spec)
relPathToWebAppSrcDir :: Path Posix (Rel importLocation) (Dir C.WebAppSrcDir)
relPathToWebAppSrcDir = [reldirP|./|]

View File

@ -6,6 +6,7 @@ module Wasp.Generator.WebAppGenerator.RouterGenerator
where
import Data.Aeson (ToJSON (..), object, (.=))
import qualified Data.Aeson as Aeson
import Data.List (find)
import Data.Maybe (fromMaybe)
import StrongPath (Dir, Path, Rel, reldir, reldirP, relfile, (</>))
@ -14,6 +15,7 @@ import Wasp.AppSpec (AppSpec)
import qualified Wasp.AppSpec as AS
import qualified Wasp.AppSpec.App as AS.App
import qualified Wasp.AppSpec.App.Auth as AS.App.Auth
import qualified Wasp.AppSpec.App.Client as AS.App.Client
import qualified Wasp.AppSpec.ExtImport as AS.ExtImport
import qualified Wasp.AppSpec.Page as AS.Page
import qualified Wasp.AppSpec.Route as AS.Route
@ -23,7 +25,7 @@ import Wasp.Generator.Monad (Generator)
import Wasp.Generator.WebAppGenerator.Common (asTmplFile, asWebAppSrcFile)
import qualified Wasp.Generator.WebAppGenerator.Common as C
import Wasp.Generator.WebAppGenerator.ExternalAuthG (ExternalAuthInfo (..), frontendLoginUrl, gitHubAuthInfo, googleAuthInfo, serverOauthRedirectHandlerUrl)
import Wasp.Generator.WebAppGenerator.JsImport (extImportToJsImport)
import Wasp.Generator.WebAppGenerator.JsImport (extImportToImportJson, extImportToJsImport)
import Wasp.JsImport (applyJsImportAlias, getJsImportStmtAndIdentifier)
data RouterTemplateData = RouterTemplateData
@ -31,7 +33,8 @@ data RouterTemplateData = RouterTemplateData
_pagesToImport :: ![PageTemplateData],
_isAuthEnabled :: Bool,
_isExternalAuthEnabled :: Bool,
_externalAuthProviders :: ![ExternalAuthProviderTemplateData]
_externalAuthProviders :: ![ExternalAuthProviderTemplateData],
_rootComponent :: Aeson.Value
}
instance ToJSON RouterTemplateData where
@ -41,7 +44,8 @@ instance ToJSON RouterTemplateData where
"pagesToImport" .= _pagesToImport routerTD,
"isAuthEnabled" .= _isAuthEnabled routerTD,
"isExternalAuthEnabled" .= _isExternalAuthEnabled routerTD,
"externalAuthProviders" .= _externalAuthProviders routerTD
"externalAuthProviders" .= _externalAuthProviders routerTD,
"rootComponent" .= _rootComponent routerTD
]
data RouteTemplateData = RouteTemplateData
@ -101,7 +105,8 @@ createRouterTemplateData spec =
_pagesToImport = pages,
_isAuthEnabled = isAuthEnabled spec,
_isExternalAuthEnabled = (AS.App.Auth.isExternalAuthEnabled <$> maybeAuth) == Just True,
_externalAuthProviders = externalAuthProviders
_externalAuthProviders = externalAuthProviders,
_rootComponent = extImportToImportJson relPathToWebAppSrcDir maybeRootComponent
}
where
routes = map (createRouteTemplateData spec) $ AS.getRoutes spec
@ -113,6 +118,7 @@ createRouterTemplateData spec =
(AS.App.Auth.isGitHubAuthEnabled, gitHubAuthInfo)
]
maybeAuth = AS.App.auth $ snd $ getApp spec
maybeRootComponent = AS.App.Client.rootComponent =<< AS.App.client (snd $ getApp spec)
createExternalAuthProviderTemplateData ::
Maybe AS.App.Auth.Auth ->
@ -167,11 +173,11 @@ createPageTemplateData page =
importStmt :: String
(importStmt, _) = getJsImportStmtAndIdentifier $ applyJsImportAlias (Just importAlias) $ extImportToJsImport relPathToWebAppSrcDir pageComponent
relPathToWebAppSrcDir :: Path Posix (Rel importLocation) (Dir C.WebAppSrcDir)
relPathToWebAppSrcDir = [reldirP|./|]
pageComponent :: AS.ExtImport.ExtImport
pageComponent = AS.Page.component $ snd page
importAlias :: String
importAlias = fst page
relPathToWebAppSrcDir :: Path Posix (Rel importLocation) (Dir C.WebAppSrcDir)
relPathToWebAppSrcDir = [reldirP|./|]