Template tweaks

packages/react-scripts/scripts/utils/frontierInit.js

@@ -68,9 +68,10 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
     ...[
       '@fs/axios',
       '@fs/user',
+      '@fs/router',
+      '@fs/error-boundary',
       'fs-webdev/exo',
       'http-proxy-middleware@0.19.1',
-      '@reach/router@1.2.1',
       '@emotion/core@10.0.9',
     ]
   );

packages/react-scripts/template/src/components/App.js

@@ -1,32 +1,22 @@
 import React from 'react'
-import { css } from '@emotion/core'
+import { Router, Link, NotFound, RequiresAuth } from '@fs/router'
+import Home from './home/Home'
+import UserInfo from './user/UserInfo'
 
-import Logo from './Logo'
-import AppHeader from './AppHeader'
-
-const App = () => (
-  <div
-    css={css`
-      text-align: center;
-    `}
-  >
-    <AppHeader>
-      <Logo />
-      <p>
-        Edit <code>src/components/App.js</code> and save to reload.
-      </p>
-      <a
-        css={css`
-          color: #61dafb;
-        `}
-        href="https://www.familysearch.org/frontier/docs/#/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Learn Frontier
-      </a>
-    </AppHeader>
-  </div>
-)
+function App() {
+  return (
+    <>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="user">User Info</Link>
+      </nav>
 
+      <Router>
+        <Home path="/" />
+        <RequiresAuth path="/user" component={UserInfo} />
+        <NotFound default />
+      </Router>
+    </>
+  )
+}
 export default App

packages/react-scripts/template/src/components/home/Home.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+import Logo from './Logo'
+import HomeHeader from './HomeHeader'
+
+const App = () => (
+  <div
+    css={css`
+      text-align: center;
+    `}
+  >
+    <HomeHeader>
+      <Logo />
+      <p>
+        Edit <code>src/components/App.js</code> and save to reload.
+      </p>
+      <a
+        css={css`
+          color: #61dafb;
+        `}
+        href="https://www.familysearch.org/frontier/docs/#/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn Frontier
+      </a>
+    </HomeHeader>
+  </div>
+)
+
+export default App

packages/react-scripts/template/src/components/user/UserInfo.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { useUser } from '@fs/user'
+
+export default function UserInfo() {
+  const user = useUser()
+  return <div>Hello, {user.displayName}!</div>
+}

packages/react-scripts/template/src/index.js

@@ -1,21 +1,23 @@
-/* eslint-disable react/jsx-filename-extension */
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
-import { Router } from '@reach/router'
-import './index.css'
+import { UserProvider } from '@fs/user'
+import RootErrorBoundary from '@fs/error-boundary'
 import App from './components/App'
 import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(
-  <Router>
-    <App path="/" />
-  </Router>,
-  document.getElementById('root')
+const FrontierRoot = () => (
+  <RootErrorBoundary>
+    <Suspense>
+      <UserProvider>
+        <App />
+      </UserProvider>
+    </Suspense>
+  </RootErrorBoundary>
 )
 
+ReactDOM.render(<FrontierRoot />, document.getElementById('root'))
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister()
-
-/* eslint-enable react/jsx-filename-extension */