Merge pull request #35 from ModusCreateOrg/react-data-2

react-data synced examples and code

Author: mschwartz

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 />;

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>;
   }
 }
 

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 />;

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>;
   }
 }
 

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 };

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 />;