✨ Implement react suspense and memo

Pushedskydiver · Nov 9, 2018 · 79cd286 · 79cd286
1 parent 89f02f4
commit 79cd286
Show file tree

Hide file tree

Showing 12 changed files with 626 additions and 577 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,5 @@
 {
   "eslint.options": {
     "configFile": "./_config/eslint.json"
-  },
-  "emmet.includeLanguages": {
-    "javascript": "javascriptreact"
   }
 }
diff --git a/package.json b/package.json
@@ -14,14 +14,13 @@
   },
   "dependencies": {
     "chroma-js": "^1.3.7",
-    "ganalytics": "^3.1.1",
     "lodash.round": "^4.0.4",
     "lodash.throttle": "^4.1.1",
-    "react": "^16.5.2",
+    "react": "^16.6.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.6.0",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.0.5",
+    "react-scripts": "2.1.1",
     "styled-components": "^3.4.9",
     "webfontloader": "^1.6.28"
   },

diff --git a/src/components/01-Atoms/Input/Input.js b/src/components/01-Atoms/Input/Input.js
@@ -7,6 +7,10 @@ import Tooltip from '../Tooltip/Tooltip.styles';
 import { BlockDiv } from '../../02-Molecules/Block/Block.styles';
 import { isHex, hexToHsl, hslToHex } from '../../Utils';
 
+const InputMemo = React.memo(props =>
+  <InputStyles type="text" minLength="7" value={props.hex} id={props.id} spellCheck="false" onChange={props.onChange} />
+);
+
 class Input extends Component {
   state = {
     hex: hslToHex(this.props.value),
@@ -70,7 +74,7 @@ class Input extends Component {
   render() {
     return (
       <BlockDiv noMargin>
-        <InputStyles type="text" minLength="7" value={this.state.hex} id={this.props.id} spellCheck="false" onChange={this.handleHexChange} />
+        <InputMemo hex={this.state.hex} id={this.props.id} onChange={this.handleHexChange} />
 
         <CopyToClipboard text={this.state.hex} onCopy={this.setCopiedState}>
           <CopyButton type="button" aria-labelledby={`${this.props.id}CopiedSate`}>

diff --git a/src/components/01-Atoms/Ratio/Ratio.js b/src/components/01-Atoms/Ratio/Ratio.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import RatioStyles from './Ratio.styles';
+
+const Ratio = React.memo(props =>
+  <RatioStyles id="ratio">{props.contrast.toFixed(2)}</RatioStyles>
+);
+
+export default Ratio;
diff --git a/src/components/01-Atoms/Ratio/Ratio.styles.js b/src/components/01-Atoms/Ratio/Ratio.styles.js
@@ -3,7 +3,7 @@ import { typography } from '../../../styles/settings.typography.styles';
 import { minWidth } from '../../../styles/settings.breakpoints.styles';
 import spacing from '../../../styles/settings.spacing.styles';
 
-const Ratio = styled.span`
+const RatioStyles = styled.span`
   display: inline-block;
   margin-right: ${spacing.margin}px;
   margin-left: ${spacing.margin}px;
@@ -19,4 +19,4 @@ const Ratio = styled.span`
   `)}
 `;
 
-export default Ratio;
+export default RatioStyles;
diff --git a/src/components/01-Atoms/Select/Select.js b/src/components/01-Atoms/Select/Select.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import SelectStyles, { SelectWrapper } from './Select.styles';
+import { Chevron } from '../Icon/Icon';
+
+const Select = props => (
+  <SelectWrapper>
+    <SelectStyles
+      defaultValue="Select font"
+      id="font"
+      onChange={props.onChange}
+    >
+      <option disabled>Select font</option>
+      {props.fonts.map((font, index) => props.renderFontOptions(font, index))}
+    </SelectStyles>
+    <Chevron fill="currentColor" />
+  </SelectWrapper>
+);
+
+export default Select;
diff --git a/src/components/01-Atoms/Select/Select.styles.js b/src/components/01-Atoms/Select/Select.styles.js
@@ -3,7 +3,7 @@ import { typography } from '../../../styles/settings.typography.styles';
 import { minWidth, maxWidth } from '../../../styles/settings.breakpoints.styles';
 import spacing from '../../../styles/settings.spacing.styles';
 
-const Select = styled.select`
+const SelectStyles = styled.select`
   display: block;
   width: 100%;
   padding-right: ${spacing.padding * 3}px;
@@ -25,4 +25,4 @@ export const SelectWrapper = styled.div`
   `)}
 `;
 
-export default Select;
+export default SelectStyles;
diff --git a/src/components/01-Atoms/Swatch/Swatch.js b/src/components/01-Atoms/Swatch/Swatch.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import SwatchStyles from './Swatch.styles';
+
+const Swatch = React.memo(props => (
+  <SwatchStyles
+    key={props.index}
+    background={props.background}
+    foreground={props.foreground}
+    data-background={props.background}
+    data-foreground={props.foreground}
+    onClick={props.onClick}
+    aria-label={`Swatch: Background = ${props.background}. Foreground = ${props.foreground}. Click/Tap to append these colour values.`}
+  >Aa</SwatchStyles>
+));
+
+export default Swatch;
diff --git a/src/components/01-Atoms/Swatch/Swatch.styles.js b/src/components/01-Atoms/Swatch/Swatch.styles.js
@@ -3,7 +3,7 @@ import { typography } from '../../../styles/settings.typography.styles';
 import { minWidth } from '../../../styles/settings.breakpoints.styles';
 import spacing from '../../../styles/settings.spacing.styles';
 
-const Swatch = styled.button`
+const SwatchStyles = styled.button`
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -51,4 +51,4 @@ const Swatch = styled.button`
   `}
 `;
 
-export default Swatch;
+export default SwatchStyles;
diff --git a/src/components/03-Organisms/Wcag/Wcag.js b/src/components/03-Organisms/Wcag/Wcag.js
@@ -4,7 +4,7 @@ import Grade from '../../01-Atoms/Grade/Grade.styles';
 import Result from '../../02-Molecules/Result/Result.styles';
 import WcagStyles from './Wcag.styles';
 
-const Wcag = props => (
+const Wcag = React.memo(props => (
   <WcagStyles {...props}>
     <Result>
       <Badge color={props.colorState}>{props.level.AALarge}</Badge>
@@ -23,6 +23,6 @@ const Wcag = props => (
       <Grade>AAA Normal</Grade>
     </Result>
   </WcagStyles>
-);
+));
 
 export default Wcag;
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,17 +1,14 @@
-import React, { Component } from 'react';
-import GAnalytics from 'ganalytics';
+import React, { Component, lazy, Suspense } from 'react';
 import WebFont from 'webfontloader';
 import { Container } from '../styles/generic.container.styles';
 import { Heading2, Span } from '../components/01-Atoms/Heading/Heading.styles';
 import { Button } from '../components/01-Atoms/Button/Button.styles';
-import { Chevron } from '../components/01-Atoms/Icon/Icon';
-import Ratio from '../components/01-Atoms/Ratio/Ratio.styles';
+import Ratio from '../components/01-Atoms/Ratio/Ratio';
 import Copy from '../components/01-Atoms/Copy/Copy.styles';
 import Label from '../components/01-Atoms/Label/Label.styles';
-import Swatch from '../components/01-Atoms/Swatch/Swatch.styles';
+import Swatch from '../components/01-Atoms/Swatch/Swatch';
 import Divider from '../components/01-Atoms/Divider/Divider.styles';
 import Input from '../components/01-Atoms/Input/Input';
-import Select, { SelectWrapper } from '../components/01-Atoms/Select/Select.styles';
 import Header from '../components/02-Molecules/Header/Header';
 import { BlockSection, BlockDiv } from '../components/02-Molecules/Block/Block.styles';
 import Example from '../components/02-Molecules/Example/Example.styles';
@@ -21,10 +18,9 @@ import Flex from '../components/03-Organisms/Flex/Flex.styles';
 import Wcag from '../components/03-Organisms/Wcag/Wcag';
 import { fetchData, isHsl, isDark, hexToHsl, hslToHex, hexToRgb, getContrast, getLevel, updatePath } from '../components/Utils';
 
-const ga = new GAnalytics('UA-86474726-2', { aid: 1 });
-const defaultText = 'Click/Tap to edit me. That Biff, what a character. Always trying to get away with something. Been on top of Biff ever since high school. Although, if it wasn\'t for him - Yes, yes, I\'m George, George McFly, and I\'m your density. I mean, I\'m your destiny. Right. Alright, take it up, go. Doc. Something wrong with the starter, so I hid it.';
+const Select = lazy(() => import('../components/01-Atoms/Select/Select'));
 
-ga.send('pageview');
+const defaultText = 'Click/Tap to edit me. That Biff, what a character. Always trying to get away with something. Been on top of Biff ever since high school. Although, if it wasn\'t for him - Yes, yes, I\'m George, George McFly, and I\'m your density. I mean, I\'m your destiny. Right. Alright, take it up, go. Doc. Something wrong with the starter, so I hid it.';
 
 class App extends Component {
   state = {
@@ -168,52 +164,36 @@ class App extends Component {
     await this.updateView(background, foreground);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.colors !== nextState.colors) {
-      return true;
-    }
-
-    if (this.state.fonts !== nextState.fonts) {
-      return true;
-    }
-
-    if (this.state.background !== nextState.background) {
-      return true;
-    }
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   if (this.state.colors !== nextState.colors) {
+  //     return true;
+  //   }
 
-    if (this.state.foreground !== nextState.foreground) {
-      return true;
-    }
+  //   if (this.state.fonts !== nextState.fonts) {
+  //     return true;
+  //   }
 
-    if (this.state.contrast !== nextState.contrast) {
-      return true;
-    }
+  //   if (this.state.background !== nextState.background) {
+  //     return true;
+  //   }
 
-    if (this.state.level !== nextState.level) {
-      return true;
-    }
+  //   if (this.state.foreground !== nextState.foreground) {
+  //     return true;
+  //   }
 
-    return false;
-  }
+  //   return false;
+  // }
 
-  renderSwatch = ({ background, foreground } = {}, index) => (
-    <Swatch
-      key={index}
-      background={background}
-      foreground={foreground}
-      data-background={background}
-      data-foreground={foreground}
-      onClick={this.appendColors}
-      aria-label={`Swatch - Background = ${background}. Foreground = ${foreground}. Click/Tap to append these colour values.`}
-    >Aa</Swatch>
+  renderSwatch = ({ background, foreground }, index) => (
+    <Swatch key={index} background={background} foreground={foreground} onClick={this.appendColors} />
   )
 
   renderFontOptions = ({ family, variant }, index) => (
     <option key={index} value={family} data-font-weight={variant}>{family}</option>
   )
 
   render() {
-    const { colors, fonts, background, foreground, contrast, level } = this.state;
+    const { colors, fonts, background, foreground, contrast } = this.state;
     const colorState = contrast < 3 ? isDark(background) ? '#ffffff' : '#222222' : hslToHex(foreground);
 
     return (
@@ -222,9 +202,9 @@ class App extends Component {
 
         <BlockSection flex color={colorState}>
           <Span grade noMargin>Aa</Span>
-          <Ratio id="ratio">{contrast.toFixed(2)}</Ratio>
+          <Ratio contrast={contrast} />
 
-          <Wcag id="grades" colorState={colorState} level={level} />
+          <Wcag id="grades" colorState={colorState} level={this.state.level} />
         </BlockSection>
 
         <Flex justify="between" align="center">
@@ -280,13 +260,10 @@ class App extends Component {
           <Flex justify="between">
             <BlockDiv noMargin select>
               <Label htmlFor="font" select bold>Typeface:</Label>
-              <SelectWrapper>
-                <Select defaultValue="Select font" id="font" onChange={this.changeFont}>
-                  <option disabled>Select font</option>
-                  {fonts.map((font, index) => this.renderFontOptions(font, index))}
-                </Select>
-                <Chevron fill="currentColor" />
-              </SelectWrapper>
+
+              <Suspense fallback={<span>Loading Fonts...</span>}>
+                <Select onChange={this.changeFont} fonts={fonts} renderFontOptions={this.renderFontOptions} />
+              </Suspense>
             </BlockDiv>
           </Flex>
         }