Feature: Add cache control and critical request chain corretions

Add cache control and critical request chain corrections

Resolves: N/a
See also: N/a

README.md

@@ -38,7 +38,11 @@ goal.
 - `gh-pages` - The host used for testing. At any step in the development and
 performance tuning cycle changes made to any branch can be deployed here for
 testing and measurement.
-- `feature/01-initial-app` - The initial untunded application.
+- `feature/01-initial-app` - The initial untuned application.
+- `feature/02-service-worker` - Addition of a service worker for offline caching
+- `feature/03-pagination` - Addition of pagination to the Meteorite Landing table
+- `feature/04-debounce` - Reduction of the wait time in the call to Lodash `debounce`
+
 
 
 ## Usage

public/index.html

@@ -5,6 +5,8 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <meta http-equiv="Cache-Control" content="must_revalidate, public, max-age=86400">
+
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -19,12 +19,17 @@ class App extends Component {
     this.publishSearchTerms = this.publishSearchTerms.bind(this);
   }
 
-  async componentDidMount() {
-    const response = await fetch(process.env.REACT_APP_METEORITE_STRIKE_DATASET);
-    const json = await response.json();
-    this.setState({ meteoriteStrikes: json });
-    this.setState({ isDataLoaded: true});
-    console.log('App.js - componentDidMount - meteoriteStrikes json: ', this.state.meteoriteStrikes);
+  componentDidMount() {
+    // const response = await fetch(process.env.REACT_APP_METEORITE_STRIKE_DATASET);
+    // const json = await response.json();
+    fetch(process.env.REACT_APP_METEORITE_STRIKE_DATASET)
+    .then((response) => {
+      return response.json();
+    })
+    .then((strikesJSON) => {
+      this.setState({ meteoriteStrikes: strikesJSON });
+      this.setState({ isDataLoaded: true});
+    });
   }
 
   publishSearchTerms(searchTerms) {

src/components/MeteoriteTable.js

@@ -92,11 +92,11 @@ class  MeteoriteTable extends React.Component {
             </TableHead>
             <TableBody>
               {meteoriteStrikes
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .filter(strike => {
                   return searchTerms === '' ||
                         (strike.name).toLowerCase().includes(searchTerms.toLowerCase())
                 })
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map(strike => {
                   return (
                     <Meteorite className={classes.row} key={strike.id} strike={strike} />