Fixes

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

@@ -1,29 +1,33 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { Tab, Tabs } from '@fs/zion-ui'
 import { Switch, Route, AuthRoute, NotFound } from '@fs/zion-router'
 import ErrorBoundary from '@fs/zion-error-boundary'
+import NoticeLoading from '@fs/zion-icon'
 
 // Dynamically load components to reduce bundle size
 // https://reactjs.org/docs/react-api.html#reactlazy
+
 const HomePage = React.lazy(() => import('./components/example/HomePage'))
 const UserInfoPage = React.lazy(() => import('./components/example/UserInfoPage'))
 const I18nPage = React.lazy(() => import('./components/example/I18nPage'))
 
 function App() {
   return (
     <ErrorBoundary>
-      <Tabs>
-        <Tab title="Home" to="./" />
-        <Tab title="User Info" to="/user" />
-        <Tab title="I18n" to="/i18n" />
-      </Tabs>
+      <Suspense fallback={<NoticeLoading />}>
+        <Tabs>
+          <Tab title="Home" to="./" />
+          <Tab title="User Info" to="/user" />
+          <Tab title="I18n" to="/i18n" />
+        </Tabs>
 
-      <Switch>
-        <Route exact path="/" component={HomePage} />
-        <AuthRoute path="/user" component={UserInfoPage} />
-        <Route path="/i18n" component={I18nPage} />
-        <Route component={NotFound} />
-      </Switch>
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <AuthRoute path="/user" component={UserInfoPage} />
+          <Route path="/i18n" component={I18nPage} />
+          <Route component={NotFound} />
+        </Switch>
+      </Suspense>
     </ErrorBoundary>
   )
 }

packages/react-scripts/template/src/components/example/Banner.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { css } from '@emotion/core'
+import { colors, HeaderBlock } from '@fs/zion-ui'
+
+const bannerCss = css`
+  padding: 25px;
+  text-align: center;
+  color: ${colors.text.primary};
+`
+const Banner = ({ message, color }) => (
+  <div css={bannerCss} style={{ backgroundColor: color }}>
+    <HeaderBlock size="sm" heading={message} />
+  </div>
+)
+
+export default Banner

packages/react-scripts/template/src/components/example/HomePage.js

@@ -1,7 +1,6 @@
 import React, { Suspense } from 'react'
 import {
   Body1,
-  Button,
   colors,
   Cell,
   DialogOverlay,
@@ -12,15 +11,21 @@ import {
   useOverlay,
   DialogOverlayContent,
 } from '@fs/zion-ui'
+
 import { css } from '@emotion/core'
 import { NoticeLoading } from '@fs/zion-icon'
+import zionDebug from '@fs/zion-debug'
 import ZionDesignCard from './ZionDesignCard'
-import ArtifactsViewer from './ArtifactsViewer'
 import LearnReactCard from './LearnReactCard'
 import PurposeStatementGenerator from './PurposeStatementGenerator'
 import WagonWheel from './WagonWheel'
-import WagonWheelControl from './WagonWheelControl'
 import ResponsiveDebug from './ResponsiveDebug'
+import RequireSignedInUser from './RequireSignedInUser'
+import Banner from './Banner'
+
+const debug = zionDebug('frontier:cra:example')
+const WagonWheelControl = React.lazy(() => import('./WagonWheelControl'))
+const ArtifactsViewer = React.lazy(() => import('./ArtifactsViewer'))
 
 // Custom CSS
 const gettingStartedCss = css`
@@ -34,17 +39,24 @@ const HomePage = () => {
   // Initiate state variables and hooks
   const atSize = useAtSize()
   const overlay = useOverlay({})
-  const [logoColor, setLogoColor] = React.useState(colors.text.primary)
-  const [logoAnimationDuration, setLogoAnimationDuration] = React.useState('0s')
+  const [wheelColor, setWheelColor] = React.useState(colors.text.primary)
+  const [wheelSpeed, setWheelSpeed] = React.useState('0s')
 
-  // Event handlers
-  function handleLogoColorChange(color) {
-    setLogoColor(color)
-  }
+  const handleWheelSpeedChange = React.useCallback(
+    (speed) => {
+      debug(`changing wheel animation speed: ${speed}`)
+      setWheelSpeed(speed)
+    },
+    [setWheelSpeed]
+  )
 
-  function handleLogoChangeAnimationDuration(duration) {
-    setLogoAnimationDuration(duration)
-  }
+  const handleWheelColorChange = React.useCallback(
+    (color) => {
+      debug(`changing wheel color: ${color}`)
+      setWheelColor(color)
+    },
+    [setWheelColor]
+  )
 
   return (
     <>
@@ -61,8 +73,8 @@ const HomePage = () => {
         <Cell columns={atSize({ sm: 4 })}>
           <WagonWheel
             alt="Wagon Wheel"
-            color={logoColor}
-            animationDuration={logoAnimationDuration}
+            color={wheelColor}
+            animationDuration={wheelSpeed}
             handleClick={overlay.handleOpen}
           />
         </Cell>
@@ -95,19 +107,27 @@ const HomePage = () => {
         </Cell>
 
         <Cell>
-          <ArtifactsViewer />
+          <RequireSignedInUser
+            Component={ArtifactsViewer}
+            fallback={
+              <Banner
+                color={colors.help.accent2}
+                message="We really want to show you some pictures of your ancestors but you must sign in first"
+              />
+            }
+          />
         </Cell>
       </Grid>
 
       {/* Overlay */}
-      <Suspense fallback={<Button Icon={NoticeLoading}>Wagon Wheel Controls</Button>}>
+      <Suspense fallback={<NoticeLoading />}>
         <DialogOverlay headingText="Wagon Wheel Controls" {...overlay}>
           <DialogOverlayContent>
             <WagonWheelControl
-              color={logoColor}
-              animationDuration={logoAnimationDuration}
-              handleColorChange={handleLogoColorChange}
-              handleAnimationDurationChange={handleLogoChangeAnimationDuration}
+              color={wheelColor}
+              animationDuration={wheelSpeed}
+              handleColorChange={handleWheelColorChange}
+              handleAnimationDurationChange={handleWheelSpeedChange}
             />
           </DialogOverlayContent>
         </DialogOverlay>

packages/react-scripts/template/src/components/example/RequireSignedInUser.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { useUser } from '@fs/zion-user'
 
-const RequireSignedInUser = ({ Component, NotSignedInComponent, ...props }) => {
+const RequireSignedInUser = ({ Component, fallback, ...props }) => {
   const user = useUser()
-  return user.signedIn ? <Component user={user} {...props} /> : <NotSignedInComponent />
+  return user.signedIn ? <Component user={user} {...props} /> : fallback
 }
 
 export default RequireSignedInUser

packages/react-scripts/template/src/components/example/RequireSignedInUser.stories.js

@@ -9,5 +9,5 @@ export const RequireSignedInUserStory = () => {
   const SignedInComponent = ({ user }) => <div>Hello {user.displayName}!!</div>
   const NotSignedInComponent = () => <div>You are not signed in</div>
 
-  return <RequireSignedInUser Component={SignedInComponent} NotSignedInComponent={NotSignedInComponent} />
+  return <RequireSignedInUser Component={SignedInComponent} fallback={<NotSignedInComponent />} />
 }

packages/react-scripts/template/src/components/example/UserInfoPage.js

@@ -62,7 +62,7 @@ const UserInfo = React.memo(({ user }) => {
             <ListItem primaryText="CIS" metaText={user.cisId} />
             <ListItem primaryText="PID" metaText={user.personId} />
             <ListItem primaryText="Family Name" metaText={details.familyName} />
-            <ListItem primaryText="Full Bame" metaText={details.fullName} />
+            <ListItem primaryText="Full Name" metaText={details.fullName} />
             <ListItem primaryText="Display Name" metaText={user.displayName} />
             <ListItem primaryText="Contact Name" metaText={user.contactName} />
             <ListItem primaryText="Gender" metaText={user.gender} />

packages/react-scripts/template/src/components/example/WagonWheelControl.js

@@ -87,4 +87,4 @@ const WagonWheelControl = ({ animationDuration, color, handleColorChange, handle
   )
 }
 
-export default WagonWheelControl
+export default React.memo(WagonWheelControl)