Gabe fixes

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

@@ -1,13 +1,14 @@
 import React from 'react'
-import { HeaderBlock, colors } from '@fs/zion-ui'
+import { colors } from '@fs/zion-ui'
 import { css } from '@emotion/core'
 import axios from '@fs/zion-axios'
-import RequireSignedInUser from './RequireSignedInUser'
 import LazyImage from './LazyImage'
+import Banner from './Banner'
 
 const artifactsCss = css`
   margin: 0 -24px;
 `
+
 const ArtifactsViewer = ({ user: { cisId } }) => {
   // Use our custom hook
   const [{ loading, artifacts, photos, error }] = useArtifacts(cisId)
@@ -83,27 +84,7 @@ const PhotoViewer = ({ photos, height = 250 }) => {
   )
 }
 
-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>
-)
-
-const NotSignedInComponent = () => (
-  <Banner
-    color={colors.help.accent2}
-    message="We really want to show you some pictures of your ancestors but you must sign in first"
-  />
-)
-
-export default (props) => (
-  <RequireSignedInUser {...props} Component={ArtifactsViewer} NotSignedInComponent={NotSignedInComponent} />
-)
+export default React.memo(ArtifactsViewer)
 
 // Custom hook for fetching artifacts from the the memory service
 function useArtifacts(cisId) {

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

@@ -13,4 +13,4 @@ const Banner = ({ message, color }) => (
   </div>
 )
 
-export default Banner
+export default React.memo(Banner)

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { css } from '@emotion/core'
+import * as Yup from 'yup'
 import {
   Button,
   TextField,
@@ -14,30 +15,53 @@ import {
   Separator,
   useAtSize,
 } from '@fs/zion-ui'
-import * as Yup from 'yup'
 
-const PurposeStatementGenerator = () => {
-  // Create a list of options for the autosuggest form element
-  const emotions = ['joy', 'surprise', 'glee', 'astonishment', 'thirst', 'excitement']
-  const emotionOptions = emotions.map((emotion, idx) => ({
-    id: idx,
-    key: idx,
-    primaryText: emotion,
-  }))
+// Create a list of options for the autosuggest form element
+const emotions = ['joy', 'surprise', 'glee', 'astonishment', 'thirst', 'excitement']
 
-  const defaultValues = {
-    adjective1: 'inspiring',
-    pluralNoun1: 'experiences',
-    emotion1: emotionOptions[0],
-    pluralNoun2: 'people',
-    pluralNoun3: 'families',
-    verb1: 'discover',
-    verb2: 'gather',
-    verb3: 'connect',
-    timePeriod1: 'future',
-    debug: false,
-  }
+const emotionOptions = emotions.map((emotion, idx) => ({
+  id: idx,
+  key: idx,
+  primaryText: emotion,
+}))
+
+const defaultValues = {
+  adjective1: 'inspiring',
+  pluralNoun1: 'experiences',
+  emotion1: emotionOptions[0],
+  pluralNoun2: 'people',
+  pluralNoun3: 'families',
+  verb1: 'discover',
+  verb2: 'gather',
+  verb3: 'connect',
+  timePeriod1: 'future',
+  debug: false,
+}
 
+// Yup is a 3rd party library for validating
+// objects. It has a similar api to prop-types.
+// Docs here: https://www.npmjs.com/package/yup
+const validationSchema = Yup.object().shape({
+  adjective1: Yup.string()
+    .matches(/ing$/, 'Must end with "ing"')
+    .required('Required'),
+  pluralNoun3: Yup.string()
+    .min(3)
+    .max(10)
+    .required('Required'),
+
+  pluralNoun1: Yup.string().required('Required'),
+  emotion1: Yup.string()
+    .required('Required')
+    .nullable(),
+  pluralNoun2: Yup.string().required('Required'),
+  verb1: Yup.string().required('Required'),
+  verb2: Yup.string().required('Required'),
+  verb3: Yup.string().required('Required'),
+  timePeriod1: Yup.string().required('Required'),
+})
+
+const PurposeStatementGenerator = () => {
   const [data, setData] = React.useState(defaultValues)
   const atSize = useAtSize()
 
@@ -47,29 +71,6 @@ const PurposeStatementGenerator = () => {
 
   const handleStartOver = () => setData(defaultValues)
 
-  // Yup is a 3rd party library for validating
-  // objects. It has a similar api to prop-types.
-  // Docs here: https://www.npmjs.com/package/yup
-  const validationSchema = Yup.object().shape({
-    adjective1: Yup.string()
-      .matches(/ing$/, 'Must end with "ing"')
-      .required('Required'),
-    pluralNoun3: Yup.string()
-      .min(3)
-      .max(10)
-      .required('Required'),
-
-    pluralNoun1: Yup.string().required('Required'),
-    emotion1: Yup.string()
-      .required('Required')
-      .nullable(),
-    pluralNoun2: Yup.string().required('Required'),
-    verb1: Yup.string().required('Required'),
-    verb2: Yup.string().required('Required'),
-    verb3: Yup.string().required('Required'),
-    timePeriod1: Yup.string().required('Required'),
-  })
-
   return (
     <Grid>
       <Cell columns={atSize({ lg: 7, sm: 12 })}>