Use arrow functions

moroshko · Oct 19, 2016 · 3d0faa4 · 3d0faa4
1 parent 60b569a
commit 3d0faa4
Show file tree

Hide file tree

Showing 22 changed files with 250 additions and 283 deletions.
diff --git a/demo/src/components/App/App.js b/demo/src/components/App/App.js
@@ -6,13 +6,13 @@ import Features from 'Features/Features';
 import Examples from 'Examples/Examples';
 import Footer from 'Footer/Footer';
 
-export default function App() {
-  return (
-    <div className={styles.container}>
-      <Header />
-      <Features />
-      <Examples />
-      <Footer />
-    </div>
-  );
-}
+const App = () => (
+  <div className={styles.container}>
+    <Header />
+    <Features />
+    <Examples />
+    <Footer />
+  </div>
+);
+
+export default App;
diff --git a/demo/src/components/App/components/Examples/Examples.js b/demo/src/components/App/components/Examples/Examples.js
@@ -6,16 +6,16 @@ import MultipleSections from 'MultipleSections/MultipleSections';
 import CustomRender from 'CustomRender/CustomRender';
 import ScrollableContainer from 'ScrollableContainer/ScrollableContainer';
 
-export default function Examples() {
-  return (
-    <div className={styles.container}>
-      <h2 className={styles.header}>
-        Examples
-      </h2>
-      <Basic />
-      <MultipleSections />
-      <CustomRender />
-      <ScrollableContainer />
-    </div>
-  );
-}
+const Examples = () => (
+  <div className={styles.container}>
+    <h2 className={styles.header}>
+      Examples
+    </h2>
+    <Basic />
+    <MultipleSections />
+    <CustomRender />
+    <ScrollableContainer />
+  </div>
+);
+
+export default Examples;
diff --git a/demo/src/components/App/components/Examples/components/Basic/Basic.js b/demo/src/components/App/components/Examples/components/Basic/Basic.js
@@ -9,7 +9,7 @@ import { escapeRegexCharacters } from 'utils/utils';
 
 const focusInputOnSuggestionClick = !isMobile.any;
 
-function getSuggestions(value) {
+const getSuggestions = value => {
   const escapedValue = escapeRegexCharacters(value.trim());
 
   if (escapedValue === '') {
@@ -19,17 +19,13 @@ function getSuggestions(value) {
   const regex = new RegExp('^' + escapedValue, 'i');
 
   return languages.filter(language => regex.test(language.name));
-}
+};
 
-function getSuggestionValue(suggestion) {
-  return suggestion.name;
-}
+const getSuggestionValue = suggestion => suggestion.name;
 
-function renderSuggestion(suggestion) {
-  return (
-    <span>{suggestion.name}</span>
-  );
-}
+const renderSuggestion = suggestion => (
+  <span>{suggestion.name}</span>
+);
 
 export default class Basic extends Component {
   constructor() {

diff --git a/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js b/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js
@@ -12,7 +12,7 @@ import { escapeRegexCharacters } from 'utils/utils';
 
 const focusInputOnSuggestionClick = !isMobile.any;
 
-function getSuggestions(value) {
+const getSuggestions = value => {
   const escapedValue = escapeRegexCharacters(value.trim());
 
   if (escapedValue === '') {
@@ -22,13 +22,11 @@ function getSuggestions(value) {
   const regex = new RegExp('\\b' + escapedValue, 'i');
 
   return people.filter(person => regex.test(getSuggestionValue(person)));
-}
+};
 
-function getSuggestionValue(suggestion) {
-  return `${suggestion.first} ${suggestion.last}`;
-}
+const getSuggestionValue = suggestion => `${suggestion.first} ${suggestion.last}`;
 
-function renderSuggestion(suggestion, { query }) {
+const renderSuggestion = (suggestion, { query }) => {
   const suggestionText = `${suggestion.first} ${suggestion.last}`;
   const matches = match(suggestionText, query);
   const parts = parse(suggestionText, matches);
@@ -48,7 +46,7 @@ function renderSuggestion(suggestion, { query }) {
       </span>
     </span>
   );
-}
+};
 
 export default class CustomRender extends Component {
   constructor() {

diff --git a/demo/src/components/App/components/Examples/components/MultipleSections/MultipleSections.js b/demo/src/components/App/components/Examples/components/MultipleSections/MultipleSections.js
@@ -10,7 +10,7 @@ import { escapeRegexCharacters } from 'utils/utils';
 
 const focusInputOnSuggestionClick = !isMobile.any;
 
-function getSuggestions(value) {
+const getSuggestions = value => {
   const escapedValue = escapeRegexCharacters(value.trim());
 
   if (escapedValue === '') {
@@ -27,27 +27,19 @@ function getSuggestions(value) {
       };
     })
     .filter(section => section.languages.length > 0);
-}
+};
 
-function getSuggestionValue(suggestion) {
-  return suggestion.name;
-}
+const getSuggestionValue = suggestion => suggestion.name;
 
-function renderSuggestion(suggestion) {
-  return (
-    <span>{suggestion.name}</span>
-  );
-}
+const renderSuggestion = suggestion => (
+  <span>{suggestion.name}</span>
+);
 
-function renderSectionTitle(section) {
-  return (
-    <strong>{section.title}</strong>
-  );
-}
+const renderSectionTitle = section => (
+  <strong>{section.title}</strong>
+);
 
-function getSectionSuggestions(section) {
-  return section.languages;
-}
+const getSectionSuggestions = section => section.languages;
 
 export default class MultipleSections extends Component {
   constructor() {

diff --git a/demo/src/components/App/components/Features/Features.js b/demo/src/components/App/components/Features/Features.js
@@ -3,57 +3,57 @@ import styles from './Features.less';
 import React from 'react';
 import Link from 'Link/Link';
 
-export default function Features() {
-  return (
-    <div className={styles.container}>
-      <h2 className={styles.header}>
-        Features
-      </h2>
-      <div className={styles.content}>
-        <div className={styles.feature}>
-          <div className={styles.accessibleIcon} />
-          <div className={styles.featureName}>
-            Accessible
-          </div>
-          <div className={styles.featureDescription}>
-            <Link
-              className={styles.link}
-              href="http://www.w3.org/TR/wai-aria-practices/#autocomplete"
-            >
-              WAI-ARIA compliant
-            </Link>
-            , with support for ARIA attributes and keyboard interactions.
-          </div>
+const Features = () => (
+  <div className={styles.container}>
+    <h2 className={styles.header}>
+      Features
+    </h2>
+    <div className={styles.content}>
+      <div className={styles.feature}>
+        <div className={styles.accessibleIcon} />
+        <div className={styles.featureName}>
+          Accessible
         </div>
-        <div className={styles.feature}>
-          <div className={styles.mobileFriendlyIcon} />
-          <div className={styles.featureName}>
-            Mobile friendly
-          </div>
-          <div className={styles.featureDescription}>
-            Works well on those little devices you carry around in your hands.
-          </div>
+        <div className={styles.featureDescription}>
+          <Link
+            className={styles.link}
+            href="http://www.w3.org/TR/wai-aria-practices/#autocomplete"
+          >
+            WAI-ARIA compliant
+          </Link>
+          , with support for ARIA attributes and keyboard interactions.
         </div>
-        <div className={styles.feature}>
-          <div className={styles.customizableIcon} />
-          <div className={styles.featureName}>
-            Customizable
-          </div>
-          <div className={styles.featureDescription}>
-            Supports custom suggestion rendering, multiple sections, and more.
-          </div>
+      </div>
+      <div className={styles.feature}>
+        <div className={styles.mobileFriendlyIcon} />
+        <div className={styles.featureName}>
+          Mobile friendly
+        </div>
+        <div className={styles.featureDescription}>
+          Works well on those little devices you carry around in your hands.
         </div>
       </div>
-      <div className={styles.footer}>
-        {'Check out the '}
-        <Link
-          className={styles.link}
-          href="https://github.com/moroshko/react-autosuggest#features"
-        >
-          GitHub page
-        </Link>
-        {' for a full list of features.'}
+      <div className={styles.feature}>
+        <div className={styles.customizableIcon} />
+        <div className={styles.featureName}>
+          Customizable
+        </div>
+        <div className={styles.featureDescription}>
+          Supports custom suggestion rendering, multiple sections, and more.
+        </div>
       </div>
     </div>
-  );
-}
+    <div className={styles.footer}>
+      {'Check out the '}
+      <Link
+        className={styles.link}
+        href="https://github.com/moroshko/react-autosuggest#features"
+      >
+        GitHub page
+      </Link>
+      {' for a full list of features.'}
+    </div>
+  </div>
+);
+
+export default Features;
diff --git a/demo/src/components/App/components/Footer/Footer.js b/demo/src/components/App/components/Footer/Footer.js
@@ -3,39 +3,39 @@ import styles from './Footer.less';
 import React from 'react';
 import Link from 'Link/Link';
 
-export default function Footer() {
-  return (
-    <div className={styles.container}>
-      <div>
-        {'Crafted with love by '}
-        <Link
-          className={styles.link}
-          href="https://twitter.com/moroshko"
-          underline={false}
-        >
-          @moroshko
-        </Link>
-      </div>
-      <div className={styles.pageDesign}>
-        {'Page design by '}
-        <Link
-          className={styles.link}
-          href="https://twitter.com/ThatBaldUXGuy"
-          underline={false}
-        >
-          @thatbalduxguy
-        </Link>
-      </div>
-      <div className={styles.licensed}>
-        {'Licensed under '}
-        <Link
-          className={styles.link}
-          href="http://moroshko.mit-license.org/"
-          underline={false}
-        >
-          MIT license
-        </Link>
-      </div>
+const Footer = () => (
+  <div className={styles.container}>
+    <div>
+      {'Crafted with love by '}
+      <Link
+        className={styles.link}
+        href="https://twitter.com/moroshko"
+        underline={false}
+      >
+        @moroshko
+      </Link>
     </div>
-  );
-}
+    <div className={styles.pageDesign}>
+      {'Page design by '}
+      <Link
+        className={styles.link}
+        href="https://twitter.com/ThatBaldUXGuy"
+        underline={false}
+      >
+        @thatbalduxguy
+      </Link>
+    </div>
+    <div className={styles.licensed}>
+      {'Licensed under '}
+      <Link
+        className={styles.link}
+        href="http://moroshko.mit-license.org/"
+        underline={false}
+      >
+        MIT license
+      </Link>
+    </div>
+  </div>
+);
+
+export default Footer;
diff --git a/demo/src/components/App/components/GitHub/GitHub.js b/demo/src/components/App/components/GitHub/GitHub.js
@@ -2,7 +2,7 @@ import styles from './GitHub.less';
 
 import React, { PropTypes } from 'react';
 
-export default function GitHub(props) {
+const GitHub = props => {
   const { user, repo } = props;
 
   return (
@@ -14,11 +14,13 @@ export default function GitHub(props) {
       </svg>
     </a>
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   GitHub.propTypes = {
     user: PropTypes.string.isRequired,
     repo: PropTypes.string.isRequired
   };
 }
+
+export default GitHub;
diff --git a/demo/src/components/App/components/Header/Header.js b/demo/src/components/App/components/Header/Header.js
@@ -6,11 +6,9 @@ import Link from 'Link/Link';
 import GitHub from 'GitHub/GitHub';
 import { loadStargazers } from './redux';
 
-function mapStateToProps({ header }) {
-  return {
-    stargazers: header.stargazers
-  };
-}
+const mapStateToProps = ({ header }) => ({
+  stargazers: header.stargazers
+});
 
 class Header extends Component {
   componentDidMount() {