From e8c1df913fc76b1d1db38f3ab8a81c6c30fdf8e0 Mon Sep 17 00:00:00 2001
From: Seth Lemmons <seth.lemmons@moduscreate.com>
Date: Mon, 5 Feb 2018 13:51:29 -0700
Subject: [PATCH] react-data synced examples and code

---
 25-react-data/a-remote-loading/src/App.js    | 23 +-------
 25-react-data/a-remote-loading/src/List.js   | 36 ++++++------
 25-react-data/b-sorting/src/App.js           | 23 +-------
 25-react-data/b-sorting/src/List.js          | 58 +++++++++-----------
 25-react-data/b-sorting/src/util/Sort.js     | 30 +++++-----
 25-react-data/c-filtering/src/App.js         | 23 +-------
 25-react-data/c-filtering/src/List.js        | 51 ++++++++---------
 25-react-data/c-filtering/src/util/Filter.js | 14 ++---
 8 files changed, 91 insertions(+), 167 deletions(-)

diff --git a/25-react-data/a-remote-loading/src/App.js b/25-react-data/a-remote-loading/src/App.js
index 310f8a7..e45ad85 100644
--- a/25-react-data/a-remote-loading/src/App.js
+++ b/25-react-data/a-remote-loading/src/App.js
@@ -1,23 +1,4 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
 import List from './List'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-        <List />
-      </div>
-    );
-  }
-}
-
-export default App;
+export default () => <List />;
diff --git a/25-react-data/a-remote-loading/src/List.js b/25-react-data/a-remote-loading/src/List.js
index cac6d87..6f477d3 100644
--- a/25-react-data/a-remote-loading/src/List.js
+++ b/25-react-data/a-remote-loading/src/List.js
@@ -1,52 +1,48 @@
 import React, { Component } from 'react';
 
 class List extends Component {
-  state = {}
+  state = {};
 
-  componentDidMount () {
+  componentDidMount() {
     fetch('/data.json')
       .then(res => res.json())
       .then(this.onLoad);
   }
 
-  parseData (data) {
+  parseData(data) {
     return data;
   }
 
-  onLoad = (data) => {
+  onLoad = data => {
     this.setState({
       data: this.parseData(data)
     });
-  }
+  };
 
-  render () {
+  render() {
     const { data } = this.state;
 
-    return data ?
-      this.renderData(data) :
-      this.renderLoading()
+    return data ? this.renderData(data) : this.renderLoading();
   }
 
-  renderData (data) {
+  renderData(data) {
     if (data && data.length > 0) {
       return (
         <div>
-          {
-            data.map(item => (
-              <div key={item.id}>
-                <a href={`mailto:${item.email}`}>{item.name}</a> {item.company}
-              </div>
-            ))
-          }
+          {data.map(item => (
+            <div key={item.id}>
+              <a href={`mailto:${item.email}`}>{item.name}</a> {item.company}
+            </div>
+          ))}
         </div>
       );
     } else {
-      return <div>No items found</div>
+      return <div>No items found</div>;
     }
   }
 
-  renderLoading () {
-    return <div>Loading...</div>
+  renderLoading() {
+    return <div>Loading...</div>;
   }
 }
 
diff --git a/25-react-data/b-sorting/src/App.js b/25-react-data/b-sorting/src/App.js
index 310f8a7..e45ad85 100644
--- a/25-react-data/b-sorting/src/App.js
+++ b/25-react-data/b-sorting/src/App.js
@@ -1,23 +1,4 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
 import List from './List'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-        <List />
-      </div>
-    );
-  }
-}
-
-export default App;
+export default () => <List />;
diff --git a/25-react-data/b-sorting/src/List.js b/25-react-data/b-sorting/src/List.js
index cb152b6..44c7d08 100644
--- a/25-react-data/b-sorting/src/List.js
+++ b/25-react-data/b-sorting/src/List.js
@@ -1,75 +1,67 @@
 import React, { Component } from 'react';
-
-import { createSorter } from './util/Sort'
+import { createSorter } from './util/Sort';
 
 class List extends Component {
   state = {
     sorters: this.props.sorters
-  }
+  };
 
   static defaultProps = {
-    sorters: [
-      {
-        property: 'name'
-      },
-      {
-        property: 'company'
-      }
-    ]
-  }
+    sorters: [{
+      property: 'name'
+    }, {
+      property: 'company'
+    }]
+  };
 
-  componentDidMount () {
+  componentDidMount() {
     fetch('/data.json')
       .then(res => res.json())
       .then(this.onLoad);
   }
 
-  parseData (data) {
-    const { sorters } = this.state
+  parseData(data) {
+    const { sorters } = this.state;
 
     if (data && data.length) {
       if (Array.isArray(sorters) && sorters.length) {
-        data.sort(createSorter(...sorters))
+        data.sort(createSorter(...sorters));
       }
     }
 
     return data;
   }
 
-  onLoad = (data) => {
+  onLoad = data => {
     this.setState({
       data: this.parseData(data)
     });
-  }
+  };
 
-  render () {
+  render() {
     const { data } = this.state;
 
-    return data ?
-      this.renderData(data) :
-      this.renderLoading()
+    return data ? this.renderData(data) : this.renderLoading();
   }
 
-  renderData (data) {
+  renderData(data) {
     if (data && data.length > 0) {
       return (
         <div>
-          {
-            data.map(item => (
-              <div key={item.id}>
-                <a href={`mailto:${item.email}`}>{item.name}</a> {item.company}
-              </div>
-            ))
-          }
+          {data.map(item => (
+            <div key={item.id}>
+              <a href={`mailto:${item.email}`}>{item.name}</a> {item.company}
+            </div>
+          ))}
         </div>
       );
     } else {
-      return <div>No items found</div>
+      return <div>No items found</div>;
     }
   }
 
-  renderLoading () {
-    return <div>Loading...</div>
+  renderLoading() {
+    return <div>Loading...</div>;
   }
 }
 
diff --git a/25-react-data/b-sorting/src/util/Sort.js b/25-react-data/b-sorting/src/util/Sort.js
index 2b0cd90..9f637c8 100644
--- a/25-react-data/b-sorting/src/util/Sort.js
+++ b/25-react-data/b-sorting/src/util/Sort.js
@@ -3,19 +3,19 @@ const dirMap = {
   gt: { asc: 1, desc: -1 },
   // less-than
   lt: { asc: -1, desc: 1 }
-}
+};
 
 const doSort = (A, B, property, direction = 'ASC') => {
-  const a = A[ property ]
-  const b = B[ property ]
+  const a = A[ property ];
+  const b = B[ property ];
 
   if (a < b) {
-    return dirMap.lt[ direction.toLowerCase() ]
+    return dirMap.lt[ direction.toLowerCase() ];
   }
   if (a > b) {
-    return dirMap.gt[ direction.toLowerCase() ]
+    return dirMap.gt[ direction.toLowerCase() ];
   }
-  return 0
+  return 0;
 }
 
 const createSorter = (...args) => {
@@ -25,29 +25,29 @@ const createSorter = (...args) => {
         direction: args[1],
         property: args[0]
       }
-    ]
+    ];
   }
 
   return (A, B) => {
-    let ret = 0
+    let ret = 0;
 
     args.some(sorter => {
-      const { property, direction = 'ASC' } = sorter
-      const value = doSort(A, B, property, direction)
+      const { property, direction = 'ASC' } = sorter;
+      const value = doSort(A, B, property, direction);
 
       if (value === 0) {
         // they are equal, continue to next sorter if any
-        return false
+        return false;
       } else {
         // they are different, stop at current sorter
-        ret = value
+        ret = value;
 
-        return true
+        return true;
       }
     })
 
-    return ret
+    return ret;
   }
 }
 
-export { createSorter }
+export { createSorter };
diff --git a/25-react-data/c-filtering/src/App.js b/25-react-data/c-filtering/src/App.js
index 310f8a7..e45ad85 100644
--- a/25-react-data/c-filtering/src/App.js
+++ b/25-react-data/c-filtering/src/App.js
@@ -1,23 +1,4 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
 import List from './List'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-        <List />
-      </div>
-    );
-  }
-}
-
-export default App;
+export default () => <List />;
diff --git a/25-react-data/c-filtering/src/List.js b/25-react-data/c-filtering/src/List.js
index 0479b9d..863c8f2 100644
--- a/25-react-data/c-filtering/src/List.js
+++ b/25-react-data/c-filtering/src/List.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-
-import { createFilter } from './util/Filter'
-import { createSorter } from './util/Sort'
+import { createFilter } from './util/Filter';
+import { createSorter } from './util/Sort';
 
 class List extends Component {
   state = {
@@ -10,25 +9,19 @@ class List extends Component {
   }
 
   static defaultProps = {
-    filters: [
-      {
-        property: 'name',
-        value: 'dori'
-      },
-      {
-        property: 'company',
-        value: 'a'
-      }
-    ],
-
-    sorters: [
-      {
-        property: 'name'
-      },
-      {
-        property: 'company'
-      }
-    ]
+    filters: [{
+      property: 'name',
+      value: 'dori'
+    }, {
+      property: 'company',
+      value: 'a'
+    }],
+
+    sorters: [{
+      property: 'name'
+    }, {
+      property: 'company'
+    }]
   }
 
   componentDidMount () {
@@ -38,11 +31,11 @@ class List extends Component {
   }
 
   parseData (data) {
-    const { sorters } = this.state
+    const { sorters } = this.state;
 
     if (data && data.length) {
       if (Array.isArray(sorters) && sorters.length) {
-        data.sort(createSorter(...sorters))
+        data.sort(createSorter(...sorters));
       }
     }
 
@@ -60,15 +53,15 @@ class List extends Component {
 
     return data ?
       this.renderData(data) :
-      this.renderLoading()
+      this.renderLoading();
   }
 
   renderData (data) {
     if (data && data.length > 0) {
-      const { filters } = this.state
+      const { filters } = this.state;
 
       if (Array.isArray(filters) && filters.length) {
-        data = data.filter(createFilter(...filters))
+        data = data.filter(createFilter(...filters));
       }
 
       return (
@@ -83,12 +76,12 @@ class List extends Component {
         </div>
       );
     } else {
-      return <div>No items found</div>
+      return <div>No items found</div>;
     }
   }
 
   renderLoading () {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 }
 
diff --git a/25-react-data/c-filtering/src/util/Filter.js b/25-react-data/c-filtering/src/util/Filter.js
index fb86437..9c4067e 100644
--- a/25-react-data/c-filtering/src/util/Filter.js
+++ b/25-react-data/c-filtering/src/util/Filter.js
@@ -1,11 +1,11 @@
 const doFilter = (item, filter) => {
-  let { value } = filter
+  let { value } = filter;
 
   if (!(value instanceof RegExp)) {
-    value = filter.value = new RegExp(value, 'i')
+    value = filter.value = new RegExp(value, 'i');
   }
 
-  return value.test(item[ filter.property ])
+  return value.test(item[ filter.property ]);
 }
 
 const createFilter = (...filters) => {
@@ -15,10 +15,10 @@ const createFilter = (...filters) => {
         property: filters[0],
         value: filters[1]
       }
-    ]
+    ];
   }
 
-  return item => filters.every(filter => doFilter(item, filter))
-}
+  return item => filters.every(filter => doFilter(item, filter));
+};
 
-export { createFilter }
+export { createFilter };