Feature: Add skeleton search logic

Add skeleton search logic
- Note that this remains to be completed

Resolves: N/a
See also: N/a

package.json

@@ -7,6 +7,7 @@
     "@material-ui/core": "^3.5.1",
     "@material-ui/icons": "^3.0.1",
     "gh-pages": "^2.0.1",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

src/components/BottomBar.js

@@ -24,7 +24,7 @@ const BottomBar = (props) => {
   return (
     <AppBar position="static">
       <Toolbar>
-        <Typography variant="h6" color="inherit" className={classes.grow}>
+        <Typography variant="subtitle1" color="inherit" className={classes.grow}>
           <a href={href} target="_blank" rel="noopener noreferrer">
           {title}
           </a>

src/components/Meteorite.js

@@ -10,7 +10,7 @@ const CustomTableCell = withStyles(theme => ({
     color: theme.palette.common.white,
   },
   body: {
-    fontSize: 14,
+    fontSize: 16,
   },
 }))(TableCell);
 

src/components/MeteoriteTable.js

@@ -13,7 +13,7 @@ const CustomTableCell = withStyles(theme => ({
   head: {
     backgroundColor: "#FFB564",
     color: "#3B3939",
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: 600,
   },
   body: {

src/components/SearchButton.js

@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   button: {
-    backgroundColor: theme.palette.secondary.light,
+    backgroundColor: theme.palette.primary.light,
     fontWeight: 600,
     margin: theme.spacing.unit,
   },

src/components/SearchTerms.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import debounce from "lodash.debounce";
 import { withStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 
@@ -13,22 +14,51 @@ const styles = theme => ({
     margin: theme.spacing.unit,  },
 });
 
-const Search = (props) => {
-  const { classes } = props;
-  return (
-    <Input
-      placeholder="Enter search terms"
-      className={classes.input}
-      variant="outlined"
-      inputProps={{
-        'aria-label': 'Description',
-      }}
-    />
-  );
-}
+class Search extends React.Component {
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    // SearchPage state
+    this.state = {
+      searchTerms: "",
+    };
+
+    // Bind 'this' to the event handlers so they'll have the proper context
+    this.handleChange = this.handleChange.bind(this);
+    this.emitChangeDebounce = debounce(this.queryName, 150);
 
-Search.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+    this.classes = props.classes;
+  }
+
+
+  handleChange(event) {
+    // Add input entered by the user to the searchText element in
+    // our state. Keystrokes are debounced to prevend the queryLocation function
+    // from being called too many times in succession to reduce overhead.
+    this.emitChangeDebounce(event.target.value);
+  }
+
+  queryName(enteredText) {
+    this.setState({ searchTerms: enteredText });
+  }
+
+  render() {
+    return (
+      <Input
+        placeholder="Enter search terms"
+        className={this.classes.input}
+        variant="outlined"
+        inputProps={{
+          'aria-label': 'Description',
+        }}
+      />
+    );
+  }
+}
 
 export default withStyles(styles)(Search);