From 9665571c63a5915db3367252ac4fff737b892caf Mon Sep 17 00:00:00 2001
From: Mihovil Ilakovac <mihovil@ilakovac.com>
Date: Tue, 21 Feb 2023 11:52:14 +0100
Subject: [PATCH] Moves root component inside of `Router` (#1016)

---
 .../templates/react-app/src/index.js          |  9 ---------
 .../templates/react-app/src/router.js         | 18 ++++++++++++++---
 .../waspBuild/.wasp/build/.waspchecksums      |  2 +-
 .../.wasp/build/web-app/src/router.js         |  5 ++---
 .../waspCompile/.wasp/out/.waspchecksums      |  2 +-
 .../.wasp/out/web-app/src/router.js           |  5 ++---
 .../waspJob/.wasp/out/.waspchecksums          |  2 +-
 .../waspJob/.wasp/out/web-app/src/router.js   |  5 ++---
 .../waspMigrate/.wasp/out/.waspchecksums      |  2 +-
 .../.wasp/out/web-app/src/router.js           |  5 ++---
 waspc/examples/todoApp/src/client/App.jsx     |  7 ++++---
 waspc/src/Wasp/Generator/WebAppGenerator.hs   |  4 +---
 .../WebAppGenerator/RouterGenerator.hs        | 20 ++++++++++++-------
 13 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/waspc/data/Generator/templates/react-app/src/index.js b/waspc/data/Generator/templates/react-app/src/index.js
index f3c69fd0c..03c6e1136 100644
--- a/waspc/data/Generator/templates/react-app/src/index.js
+++ b/waspc/data/Generator/templates/react-app/src/index.js
@@ -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')
   )
diff --git a/waspc/data/Generator/templates/react-app/src/router.js b/waspc/data/Generator/templates/react-app/src/router.js
index 896e3031a..ae2db5552 100644
--- a/waspc/data/Generator/templates/react-app/src/router.js
+++ b/waspc/data/Generator/templates/react-app/src/router.js
@@ -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>
 )
 
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
index e52682c81..c9b2c49ae 100644
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums
@@ -403,7 +403,7 @@
             "file",
             "web-app/src/router.js"
         ],
-        "62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
+        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.js b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.js
index 695fa47e8..6d193e35e 100644
--- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.js
+++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/router.js
@@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
 
 const router = (
   <Router>
-    <div>
+    <>
       <Route exact path="/" component={ MainPage }/>
-
-    </div>
+    </>
   </Router>
 )
 
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
index c58f9d854..702ea48dc 100644
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums
@@ -403,7 +403,7 @@
             "file",
             "web-app/src/router.js"
         ],
-        "62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
+        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.js b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.js
index 695fa47e8..6d193e35e 100644
--- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.js
+++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/router.js
@@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
 
 const router = (
   <Router>
-    <div>
+    <>
       <Route exact path="/" component={ MainPage }/>
-
-    </div>
+    </>
   </Router>
 )
 
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
index 4f23fa1f3..b8c52767c 100644
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums
@@ -417,7 +417,7 @@
             "file",
             "web-app/src/router.js"
         ],
-        "62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
+        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.js b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.js
index 695fa47e8..6d193e35e 100644
--- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.js
+++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/router.js
@@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
 
 const router = (
   <Router>
-    <div>
+    <>
       <Route exact path="/" component={ MainPage }/>
-
-    </div>
+    </>
   </Router>
 )
 
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
index 3719b0fdc..6d66776fc 100644
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums
@@ -403,7 +403,7 @@
             "file",
             "web-app/src/router.js"
         ],
-        "62928b69543a870338ab09c2f7493ec7594993bc4f2922052da3c3a9d804e0cd"
+        "70c9237cf961320f04d9736007a8ec3fbc1cd1adfe2cfbc5214cb2d91d57d503"
     ],
     [
         [
diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.js b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.js
index 695fa47e8..6d193e35e 100644
--- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.js
+++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/router.js
@@ -7,10 +7,9 @@ import MainPage from './ext-src/MainPage'
 
 const router = (
   <Router>
-    <div>
+    <>
       <Route exact path="/" component={ MainPage }/>
-
-    </div>
+    </>
   </Router>
 )
 
diff --git a/waspc/examples/todoApp/src/client/App.jsx b/waspc/examples/todoApp/src/client/App.jsx
index 319cb6e7a..3fd7c7d63 100644
--- a/waspc/examples/todoApp/src/client/App.jsx
+++ b/waspc/examples/todoApp/src/client/App.jsx
@@ -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}>
diff --git a/waspc/src/Wasp/Generator/WebAppGenerator.hs b/waspc/src/Wasp/Generator/WebAppGenerator.hs
index 945c27ade..61c9ab4d5 100644
--- a/waspc/src/Wasp/Generator/WebAppGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator.hs
@@ -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|./|]
diff --git a/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs b/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs
index 0f6aac7f7..ab0bf044c 100644
--- a/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs
+++ b/waspc/src/Wasp/Generator/WebAppGenerator/RouterGenerator.hs
@@ -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|./|]