Merge branch 'develop' into i18n

Author: joeycozza

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

@@ -69,9 +69,10 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
  '@fs/axios',
  '@fs/locale',
  '@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/App.md renamed to packages/react-scripts/template/src/components/home/Home.md

@@ -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>
+}