working version of coding exercise

routes.js

@@ -1,12 +1,11 @@
 import React         from 'react';
 import { Route }     from 'react-router';
 import HomeView  from './views/RootView';
-import FishView  from './views/FishView';
-import 'bootstrap/dist/css/bootstrap.min.css';
+var styles = require('./stylesheet.css');
+var bootstrap = require('./node_modules/bootstrap/dist/css/bootstrap.css');
 
 const routes = (
-  <Route path="/" component={HomeView} >
-    <Route path='fish' component={FishView} />
+  <Route path="/" component={HomeView}>
   </Route>
 );
 

styles.scss

@@ -0,0 +1,147 @@
+$min-width       :1100px;
+$super-light-grey:#f5f5f5;
+$light-grey      :#e5e5e5;
+
+@mixin flex-centered() {
+  display : flex;
+  justify-content : center;
+} 
+
+
+body {
+  display: flex;
+  justify-content: center;
+}
+
+
+.search-container, .title-container {
+  @include flex-centered;
+  min-width: $min-width; 
+  #search-box {
+    width: 300px;
+  }
+}
+
+.search-results-container {
+  position: absolute;
+  left: 400px;
+  top: 37px;
+  z-index: 1;
+  padding: 0;
+}
+
+.results-display-container {
+  @include flex-centered;
+  flex-direction: column;
+  background-color: $super-light-grey;
+  border: 1px solid $light-grey;
+  padding: 30px;
+  height: 172px;
+  min-width: $min-width;
+  .search-container {
+    position: relative;
+  }
+}
+
+.person-entry-view-holder {
+  @include flex-centered;
+  background-color: white;
+  .person-entry-view {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+    border: 1px solid $light-grey;
+    width: 300px;
+    .person-entry-view-image, .person-entry-view-spacer {
+      height: 50px;
+      width: 50px;
+    }
+  }
+}
+
+.person-entry-view-holder:hover {
+  cursor: pointer;
+  background-color: $super-light-grey;
+}
+
+.person-entry-view-no-results {
+  @include flex-centered;
+}
+
+
+/*profile partial css below*/
+.profile-container {
+  min-width: $min-width;
+}
+
+.profile-left-section, .profile-center-section, .profile-right-section {
+  padding: 20px;
+}
+
+/*profile left section*/
+.profile-left-container {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  border: 1px solid $light-grey;
+  border-radius: 0.7em;
+  padding: 25px 20px;
+  height: 450px;
+}
+
+.profile-left-section-picture {
+  height: 150px;
+  width: 150px;
+  align-self: center;
+  margin: 20px;
+}
+
+/*profile center section*/
+.followers-list-container {
+  max-height: 400px;
+  overflow: scroll;
+}
+
+#follower-entry-container {
+  padding: 0;
+}
+
+.followers-list-entry {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 10px;
+  h6 {
+    overflow: scroll;
+  }
+}
+
+.followers-list-entry:hover {
+  cursor: pointer;
+  background-color: $super-light-grey;
+}
+
+.followers-list-image {
+  height: 40px;
+  width: 40px;
+}
+
+/*profile right section*/ 
+.repo-container {
+  max-height: 400px;
+  overflow: scroll;
+}
+
+.repo-entry {
+  div {
+    display : flex;
+    justify-content: space-between;
+    span {
+      border-radius: 0.7em;
+      height: 24px;
+    }
+    h6 {
+      overflow: scroll;
+    }
+  }
+}
+

utils/utils.js

@@ -0,0 +1,96 @@
+export function debounce (func, wait, immediate) {
+  let timeout;
+  return function() {
+    let context = this, args = arguments;
+    let later = () => {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+};
+
+export function fetchData (query, context) {
+  const request_url = 'https://api.github.com/search/users?q=' + query;
+  fetch(request_url)
+    .then((response) => {
+      return response.json();
+    })
+    .then((responseData) => {
+      context.setState({
+        searchResults : responseData.items,
+        dirtySearch : true
+      });
+    })
+    .catch((err) => {
+      throw new Error(err);
+    })
+};
+
+export function fetchUserData (query, context) {
+  const request_url = 'https://api.github.com/users/' + query;
+  fetch(request_url)
+    .then((response) => {
+      return response.json();
+    })
+    .then((responseData) => {
+      context.setState({
+        currentFocus : responseData
+      });
+      fetchUserFollowersRepos(context.state.currentFocus.repos_url, context, 'repos');
+      fetchUserFollowersRepos(context.state.currentFocus.followers_url, context, 'followers');
+    })
+    .catch((err) => {
+      throw new Error(err);
+    })
+};
+
+const fetchUserFollowersRepos = (query, context, update) => {
+  fetch(query)
+    .then((response) => {
+      return response.json();
+    })
+    .then((responseData) => {
+      if (update === 'repos') {
+        context.setState({
+          currentFocusRepos : responseData
+        });
+      } if (update === 'followers') {
+        context.setState({
+          currentFocusFollowers : responseData
+        });
+      }
+    })
+    .catch((err) => {
+      throw new Error(err);
+    })
+};
+
+export function stringifyDate (stringDate) {
+  const months = {
+    '01' : 'Jan',
+    '02' : 'Feb',
+    '03' : 'Mar',
+    '04' : 'Apr',
+    '05' : 'May',
+    '06' : 'Jun',
+    '07' : 'July',
+    '08' : 'Aug',
+    '09' : 'Sept',
+    '10' : 'Oct',
+    '11' : 'Nov',
+    '12' : 'Dec'
+  }
+
+  let formattedDate = stringDate.substr(0, 10).split('-');
+  formattedDate = months[formattedDate[1]]+' '+formattedDate[2]+' '+formattedDate[0]; 
+
+  return formattedDate;
+};