From 170ea836fd6eb3bc5ad6a714306b930d282c680e Mon Sep 17 00:00:00 2001 From: Gabriel Dayley Date: Thu, 30 Jan 2020 16:49:52 -0700 Subject: [PATCH 1/3] updating --- .../src/components/example/ArtifactsViewer.js | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/react-scripts/template/src/components/example/ArtifactsViewer.js b/packages/react-scripts/template/src/components/example/ArtifactsViewer.js index 7b45c94e11..e7ec9f4366 100644 --- a/packages/react-scripts/template/src/components/example/ArtifactsViewer.js +++ b/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 }) => ( -
- -
-) - -const NotSignedInComponent = () => ( - -) - -export default (props) => ( - -) +export default React.memo(ArtifactsViewer) // Custom hook for fetching artifacts from the the memory service function useArtifacts(cisId) { From 9d0cf02252a2f381df0f166079d7d3646259b6f2 Mon Sep 17 00:00:00 2001 From: Gabriel Dayley Date: Thu, 30 Jan 2020 16:52:37 -0700 Subject: [PATCH 2/3] memo Banner --- .../react-scripts/template/src/components/example/Banner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/components/example/Banner.js b/packages/react-scripts/template/src/components/example/Banner.js index b61d561a4a..a5306dc6d6 100644 --- a/packages/react-scripts/template/src/components/example/Banner.js +++ b/packages/react-scripts/template/src/components/example/Banner.js @@ -13,4 +13,4 @@ const Banner = ({ message, color }) => ( ) -export default Banner +export default React.memo(Banner) From 0eb7a251f36dcebc029cfed5d087d49274b6f491 Mon Sep 17 00:00:00 2001 From: Gabriel Dayley Date: Thu, 30 Jan 2020 17:16:42 -0700 Subject: [PATCH 3/3] optimize --- .../example/PurposeStatementGenerator.js | 89 ++++++++++--------- 1 file changed, 45 insertions(+), 44 deletions(-) diff --git a/packages/react-scripts/template/src/components/example/PurposeStatementGenerator.js b/packages/react-scripts/template/src/components/example/PurposeStatementGenerator.js index f18b5ceca7..fb3b344ffa 100644 --- a/packages/react-scripts/template/src/components/example/PurposeStatementGenerator.js +++ b/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 (