From 291a00346a5263564043c603e2e7248d1e477fc2 Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 07:20:05 -0700
Subject: [PATCH 1/8] functionality largely implemented, missing termcontainer
 component

---
 README.md                |  56 ++++++++++++++++++-
 data/db.json             | 118 ++++++++++++++++++++++++++++++++++-----
 public/avatars/pam.png   | Bin 0 -> 5361 bytes
 public/avatars/penny.png | Bin 0 -> 5667 bytes
 public/index.html        |   2 +-
 src/AddDefinition.js     |  63 ++++++++++++++++++---
 src/AddTerm.js           |  38 +++++++++++--
 src/App.js               |  44 +++++++++++++--
 src/Definition.js        |  30 +++++++++-
 src/Dictionary.js        |  37 ++++++------
 src/Layout.js            |   7 ++-
 src/Login.js             |   7 ++-
 src/Navigation.js        |  12 +++-
 src/Term.js              |  31 ++++++++--
 src/TermContainer.js     |  35 ++++++++++--
 src/{ => css}/App.css    |   0
 src/{ => css}/index.css  |  34 +++++++++++
 src/index.js             |   2 +-
 src/{ => svg}/logo.svg   |   0
 19 files changed, 445 insertions(+), 71 deletions(-)
 create mode 100644 public/avatars/pam.png
 create mode 100644 public/avatars/penny.png
 rename src/{ => css}/App.css (100%)
 rename src/{ => css}/index.css (58%)
 rename src/{ => svg}/logo.svg (100%)

diff --git a/README.md b/README.md
index f3c2491..d9bb2ae 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,11 @@
 # Dev Dictionary
 
+# After Installation QuickStart
+npm run json-server // starts API server
+PORT=4500 npm start // starts front-end server
+
+
+
 ## TL;DR
 
 If you are considering taking on this challenge, you'll be writing some code to fetch data and feeding it to pre-built components.
@@ -30,7 +36,7 @@ Expected time: 2-8 hours
 
     This spins up a simple API server, using [json-server](https://github.com/typicode/json-server). It serves the data from `data/db.json`. It runs on port 4501, but you can change that in `package.json`.
 
-1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_expand=definitions`.
+1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_embed=definitions`.
 1. Start the frontend dev server.
 
         $ PORT=4500 npm start
@@ -77,6 +83,9 @@ The point of the project is for us to have a well known app idea at the start, s
 
 Implement edit and delete for terms and definitions.
 
+Add Giphy to definitions:
+'http://api.giphy.com/v1/gifs/search?q=' + searchPhrase + '&rating=g&api_key=dc6zaTOxFJmzC'
+
 # Need more control?
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app), which doesn't allow configuration by design. But you can provide configuration by first "ejecting" from create-react-app. Search Google for "create-react-app eject".
@@ -92,4 +101,47 @@ The idea for the site came from Jess in Eric McKay's Learn Web Development meetu
 I like the light-hearted definitions too. Here are a few responses to "What does full stack mean to you?" from @samrocksc on azwebdevs slack #random on 2017-01-12:
 - Full stack means not having to get your changes past the Java team (Joe Fleming)
 - Full stack means your cheapass boss won't pay a proper devops person and makes you do that part too (Luis Montes)
-- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
\ No newline at end of file
+- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
+
+# Sample API Calls
+
+NOTE: <values> are in plain text, no quotes
+
+All terms:
+http://localhost:4501/terms
+
+All definitions: 
+http://localhost:4501/definitions
+
+All users:
+http://localhost:4501/users
+
+
+All terms and definitions:
+http://localhost:4501/terms?_embed=definitions
+
+All users and definitions:
+http://localhost:4501/users?_embed=definitions
+
+All users and terms:
+http://localhost:4501/users?_embed=terms
+
+
+Seerch for a specific term:
+http://localhost:4501/terms?q=<value>
+
+Search for a specific term and get all matching and their definitions:
+http://localhost:4501/terms?q=<term-value>&_embed=definitions
+
+Search for a specific definition:
+http://localhost:4501/definitions?q=<value>
+
+Search for a specific user:
+http://localhost:4501/users?q=<value>
+
+Search for a specific user and get all matching and their definitions:
+http://localhost:4501/users?q=<user-value>&_embed=definitions
+
+Search for a specific user and get all matching and their terms:
+http://localhost:4501/users?q=<user-value>&_embed=terms
+
diff --git a/data/db.json b/data/db.json
index 1346f8b..a156940 100644
--- a/data/db.json
+++ b/data/db.json
@@ -1,17 +1,105 @@
 {
-	"terms": [
-		{ "id": 1, "name": "Full stack", "userId": 1 },
-		{ "id": 2, "name": "Design pattern", "userId": 2 }
-	],
-	"definitions": [
-		{ "id": 1, "content": "Able to wear a stack of responsibility hats", "termId": 1, "userId": 1 },
-		{ "id": 2, "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't", "termId": 1, "userId": 2 },
-		{ "id": 3, "content": "3rd definition", "termId": 2, "userId": 1 },
-		{ "id": 4, "content": "4th definition", "termId": 2, "userId": 2 }
-	],
-	"users": [
-		{ "id": 1, "name": "Alice",  "avatarUrl": "alice.png" },
-		{ "id": 2, "name": "Dilbert",  "avatarUrl": "dilbert.png" },
-		{ "id": 3, "name": "Wally",  "avatarUrl": "wally.png" }
-	]
+  "terms": [
+    {
+      "id": 1,
+      "name": "Full stack",
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "name": "Design pattern",
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "name": "Smoke test",
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "name": "Unit test",
+      "userId": 4
+    },
+    {
+      "name": "Tech debt",
+      "userId": 4,
+      "id": 5
+    },
+    {
+      "name": "Waterfall",
+      "userId": 4,
+      "id": 6
+    },
+    {
+      "name": "UX",
+      "userId": 3,
+      "id": 7
+    }
+  ],
+  "definitions": [
+    {
+      "id": 1,
+      "content": "Able to wear a stack of responsibility hats",
+      "termId": 1,
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't",
+      "termId": 1,
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "content": "3rd definition",
+      "termId": 2,
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "content": "4th definition",
+      "termId": 2,
+      "userId": 2
+    },
+    {
+      "id": 5,
+      "content": "A quick manual test done immediately after pushing a change to the live site to check for any obvious problems. Often followed up with formal QA.",
+      "termId": 3,
+      "userId": 4
+    },
+    {
+      "id": 6,
+      "content": "Testing set up to check for proper output throughout an application to catch accidental errors as soon as they are introduced.",
+      "termId": 4,
+      "userId": 4
+    },
+    {
+      "id": 7,
+      "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
+      "termId": 4,
+      "userId": 4
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "name": "Alice",
+      "avatarUrl": "alice.png"
+    },
+    {
+      "id": 2,
+      "name": "Dilbert",
+      "avatarUrl": "dilbert.png"
+    },
+    {
+      "id": 3,
+      "name": "Wally",
+      "avatarUrl": "wally.png"
+    },
+    {
+      "id": 4,
+      "name": "Penny",
+      "avatarUrl": "penny.png"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/public/avatars/pam.png b/public/avatars/pam.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2011a9cc4acddd088c368e77d9b51477a76c54f
GIT binary patch
literal 5361
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
X4}&(#OSo!&|Af?1(}S0(*oOZP!fLw_

literal 0
HcmV?d00001

diff --git a/public/avatars/penny.png b/public/avatars/penny.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a2c77cdca19a8b46e0de9d6f0fa4a63e3d3ff8c
GIT binary patch
literal 5667
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
ShCzS-wpCHkkbfs@7Vtk5M_}Cm

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index aab5e3b..5276986 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/AddDefinition.js b/src/AddDefinition.js
index 986a524..b825843 100644
--- a/src/AddDefinition.js
+++ b/src/AddDefinition.js
@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
 import { Button, Col, ControlLabel, Form, FormControl, FormGroup, HelpBlock, Image, Well } from 'react-bootstrap';
 import Select from 'react-select';
-import jsonData from '../data/db';
 import 'react-select/dist/react-select.css';
-
-// TODO: Fetch list of users from server via API.
-const options = jsonData.users;
+import commonActions from './commonActions';
 
 const userComponent = props => {
   const value = props.value ? props.value : props.option
@@ -21,16 +18,58 @@ const userComponent = props => {
 class AddDefinition extends Component {
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
+    termId: React.PropTypes.number.isRequired
+  };
+
+  static contextTypes = {
+    loggedInUser: React.PropTypes.object,
   };
 
   state = {
     who: null,
+    fetchError: null,
+    isFetching: false,
+    options: null,
+    value: ''
   };
 
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/users')
+      .then(response => {
+        this.setState({ options: response });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   createDefinition = () => {
-    // POST the definition to the server.
+    var definer;
+    if(this.state.who) {
+      definer = this.state.who.id;
+    } else {
+      definer = this.context.loggedInUser.id;
+    }
+    var newDef = {
+      userId: definer,
+      content: this.state.value,
+      termId: this.props.termId
+    };
+    commonActions.fetchJson('/definitions', {
+      method: 'POST', 
+      body: newDef})
+      .then(response => {
+        this.props.incrDefCount();
+        //console.log(response)
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
   }
 
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  };
+
   selectWho = user => this.setState({ who: user });
 
   render() {
@@ -38,14 +77,20 @@ class AddDefinition extends Component {
     const { who } = this.state;
 
     return (
-      <Well className="add-term">
+      <Well className="add-definition">
         <Form horizontal>
-          <FormGroup controlId="formHorizontalEmail">
+          <FormGroup controlId="defInput">
             <Col componentClass={ControlLabel} sm={2}>
               Definition
             </Col>
             <Col sm={10}>
-              <FormControl componentClass="textarea" placeholder="Add your definition"/>
+              <FormControl 
+                type="text"
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+                componentClass="textarea" 
+                placeholder="Add your definition"
+              />
             </Col>
           </FormGroup>
 
@@ -55,7 +100,7 @@ class AddDefinition extends Component {
             </Col>
             <Col sm={10}>
               <Select
-                options={options}
+                options={this.state.options}
                 optionComponent={userComponent}
                 ignoreCase
                 onChange={this.selectWho}
diff --git a/src/AddTerm.js b/src/AddTerm.js
index 17706dd..65b704e 100644
--- a/src/AddTerm.js
+++ b/src/AddTerm.js
@@ -1,34 +1,60 @@
 import React, { Component } from 'react';
 import { Button, ControlLabel, Form, FormControl, FormGroup, Col, Well } from 'react-bootstrap';
+import commonActions from './commonActions';
 
 class AddTerm extends Component {
+  static contextTypes = {
+    loggedInUser: React.PropTypes.object,
+  };
+
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
   };
 
   createTerm = () => {
-    // POST the term to the server.
-  }
+    var newWord = {name: this.state.value, userId: this.context.loggedInUser.id};
+    commonActions.fetchJson('/terms', {
+      method: 'POST', 
+      body: newWord})
+      .then(response => {
+        //console.log(response)
+        this.props.incrWordCount();
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  };
+
+  state = {
+      value: ''
+  };
+
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  };
 
   render() {
     const { hide } = this.props;
-
     return (
       <Well className="add-term">
         <Form horizontal>
-          <FormGroup controlId="formHorizontalEmail">
+          <FormGroup controlId="termInput">
             <Col componentClass={ControlLabel} sm={2}>
               Term
             </Col>
             <Col sm={10}>
-              <FormControl />
+              <FormControl 
+                type="text"
+                value={this.state.value}
+                placeholder="Enter new term"
+                onChange={this.handleChange.bind(this)}
+              />
             </Col>
           </FormGroup>
 
           <FormGroup>
             <Col smOffset={2} sm={10}>
               <Button bsStyle="primary" type="submit" onClick={this.createTerm}>
-                Submit the term
+                Submit new term
               </Button>
               <Button bsStyle="link" onClick={hide}>Cancel</Button>
             </Col>
diff --git a/src/App.js b/src/App.js
index 464c824..7a2ff87 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,8 @@ import Login from './Login';
 import Welcome from './Welcome';
 import Dictionary from './Dictionary';
 import TermContainer from './TermContainer';
-import './App.css';
+import commonActions from './commonActions';
+import './css/App.css';
 
 class App extends Component {
   static childContextTypes = {
@@ -19,6 +20,9 @@ class App extends Component {
     const loggedInUser = loggedInUserJson ? JSON.parse(loggedInUserJson) : null;
     this.state = {
       loggedInUser,
+      defCount: null,
+      wordCount: null,
+      userId: null
     };
   }
 
@@ -28,8 +32,15 @@ class App extends Component {
     };
   }
 
+  incrWordCount = () => {
+    var count = this.state.wordCount;
+    count++;
+    this.setState({ wordCount: count });
+  };
+
   markUserLoggedIn = user => {
     this.setState({ loggedInUser: user });
+    this.getCount(user.id);
     localStorage.setItem('loggedInUser', JSON.stringify(user));
   };
 
@@ -38,15 +49,40 @@ class App extends Component {
     localStorage.setItem('loggedInUser', null);
   };
 
+  getCount(user) {
+    var data = '/users?q='+ user +'&_embed=definitions';
+    commonActions.fetchJson(data)
+      .then(response => { 
+        this.setState({ 
+          defCount: response[0]['definitions'].length })
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false })); 
+
+    data = '/users?q='+ user +'&_embed=terms';
+    commonActions.fetchJson(data)
+      .then(response => { 
+        this.setState({ 
+          wordCount: response[0]['terms'].length })
+        })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false })); 
+  };
+
+  componentDidMount() {
+    var userId = JSON.parse(localStorage.loggedInUser).id;
+    this.getCount(userId)
+  }
+
   render() {
     return (
       <Router history={browserHistory}>
-        <Route path="/" component={Layout}>
+        <Route path="/" component={props => <Layout { ...props} defCount={this.state.defCount} wordCount={this.state.wordCount} />} >
           <IndexRoute component={Welcome} />
           <Route path="login" component={props => <Login { ...props} markUserLoggedIn={this.markUserLoggedIn} />} />
           <Route path="logout" component={props => <Logout { ...props} markUserLoggedOut={this.markUserLoggedOut} />} />
-          <Route path="terms">
-            <IndexRoute component={Dictionary} />
+          <Route path="terms" >
+            <IndexRoute component={props => <Dictionary { ...props} incrWordCount={this.incrWordCount} incrDefCount={this.incrDefCount} />} />
             <Route path=":termName" component={TermContainer} />
           </Route>
         </Route>
diff --git a/src/Definition.js b/src/Definition.js
index 5b57900..9394781 100644
--- a/src/Definition.js
+++ b/src/Definition.js
@@ -1,21 +1,49 @@
 import React, { Component } from 'react';
+import { Image } from 'react-bootstrap';
+import commonActions from './commonActions';
 
 class Definition extends Component {
   static propTypes = {
     definition: React.PropTypes.object.isRequired,
-    index: React.PropTypes.number.isRequired,
+    index: React.PropTypes.number.isRequired
   };
 
+  state = {
+    showAddDefinition: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userName: null,
+    avatarUrl: null
+  };
+
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    var url = "/users?q=" + this.props.author + "&_limit=1";
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ userName: response[0].name, avatarUrl: response[0].avatarUrl });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   render() {
     const { definition, index } = this.props;
 
     return (
+      <div>
       <div className="definition">
         <div className="definition-index">{index}.</div>
         <div className="definition-content">{definition.content}</div>
       </div>
+      <div className="def-byline">
+        Definition provided by <Image src={'/avatars/' + this.state.avatarUrl} circle />  {this.state.userName}
+      </div>
+      </div>
     );
   }
 }
 
 export default Definition;
+
diff --git a/src/Dictionary.js b/src/Dictionary.js
index 9fe890c..9dabf9b 100644
--- a/src/Dictionary.js
+++ b/src/Dictionary.js
@@ -2,23 +2,30 @@ import React, { Component } from 'react';
 import { Button, Glyphicon } from 'react-bootstrap';
 import Term from './Term';
 import AddTerm from './AddTerm';
-import jsonData from '../data/db';
-import filter from 'lodash/filter'
-
-// Don't do this. You need to actually fetch the data from the server using
-// the API. This is a cheater way just to provide a visual example of what you
-// should see when you're done.
-const terms = jsonData.terms.map(term => ({
-  ...term,
-  definitions: filter(jsonData.definitions, { termId: term.id })
-}))
-
+import commonActions from './commonActions';
 
 class Dictionary extends Component {
   state = {
-    showAddTerm: false
+    showAddTerm: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userList: null,
   };
 
+  componentDidMount() {
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/terms?_embed=definitions')
+      .then(response => {
+        var terms = response.map(term => {
+            return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
+          });
+        this.setState({ itemList: terms });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   toggleAdd = () => this.setState({ showAddTerm: !this.state.showAddTerm })
 
   render() {
@@ -30,11 +37,9 @@ class Dictionary extends Component {
         <Button bsStyle="success" onClick={this.toggleAdd}>
           <Glyphicon glyph="plus-sign" /> Add term
         </Button>
-        {showAddTerm && <AddTerm hide={this.toggleAdd} />}
+        {showAddTerm && <AddTerm hide={this.toggleAdd} incrWordCount={this.props.incrWordCount} />}
         <div className="terms">
-          {terms.map(term => {
-            return <Term key={term.id} term={term} />;
-          })}
+          {this.state.itemList}
         </div>
       </div>
     );
diff --git a/src/Layout.js b/src/Layout.js
index af37c46..0e806c7 100644
--- a/src/Layout.js
+++ b/src/Layout.js
@@ -3,10 +3,15 @@ import Navigation from './Navigation';
 import { Grid, Row, Col } from 'react-bootstrap';
 
 class Layout extends Component {
+  
+  state = {
+    wordCount: this.props.wordCount,
+    defCount: this.props.defCount
+  }
   render() {
     return (
       <div>
-        <Navigation />
+        <Navigation wordCount={this.props.wordCount} defCount={this.props.defCount}/>
         <Grid>
           <Row>
             <Col>
diff --git a/src/Login.js b/src/Login.js
index 6546c3a..cf7e1b2 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -15,7 +15,7 @@ class Login extends Component {
   state = {
     fetchError: null,
     isFetching: false,
-    users: null,
+    users: null
   };
 
   componentWillMount() {
@@ -29,9 +29,12 @@ class Login extends Component {
         this.setState({ users: response })
       })
       .catch(error => this.setState({ fetchError: error.message }))
-      .then(() => this.setState({ isFetching: false }));
+      .then(() => {
+        this.setState({ isFetching: false });
+      });
   }
 
+
   render() {
     const { loggedInUser } = this.context;
     const { markUserLoggedIn } = this.props;
diff --git a/src/Navigation.js b/src/Navigation.js
index 2a61940..cd3c163 100644
--- a/src/Navigation.js
+++ b/src/Navigation.js
@@ -8,6 +8,11 @@ class Navigation extends Component {
     loggedInUser: React.PropTypes.object,
   }
 
+  state = {
+    wordCount: this.props.wordCount,
+    defCount: this.props.defCount
+  }
+  
   render() {
     const { loggedInUser } = this.context;
 
@@ -20,14 +25,17 @@ class Navigation extends Component {
           <Navbar.Toggle />
         </Navbar.Header>
         <Navbar.Collapse>
+          <Navbar.Text>
+            <Link to="/terms">Terms</Link>
+          </Navbar.Text>
           <Nav pullRight>
             {loggedInUser && <Navbar.Text>
-              You are currently logged in as <Image className="nav-avatar" src={'/avatars/' + loggedInUser.avatarUrl} />
+               <Image className="nav-avatar" src={'/avatars/' + loggedInUser.avatarUrl} />
               {' '}
               <strong>{loggedInUser.name}</strong>
             </Navbar.Text>}
             {loggedInUser && <Navbar.Text>
-              {'{3}'} definitions
+              You've created {this.props.wordCount} words and {this.props.defCount} definitions!
             </Navbar.Text>}
             {loggedInUser && <LinkContainer to="/logout"><NavItem eventKey={2}>Logout</NavItem></LinkContainer>}
             {!loggedInUser && <LinkContainer to="/login"><NavItem eventKey={2}>Login</NavItem></LinkContainer>}
diff --git a/src/Term.js b/src/Term.js
index 7fc8f83..d17a43b 100644
--- a/src/Term.js
+++ b/src/Term.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Button, Glyphicon } from 'react-bootstrap';
+import { Button, Glyphicon, Image } from 'react-bootstrap';
 import Definition from './Definition';
 import AddDefinition from './AddDefinition';
 import { Link } from 'react-router';
+import commonActions from './commonActions';
 
 class Term extends Component {
   static propTypes = {
@@ -10,26 +11,46 @@ class Term extends Component {
   };
 
   state = {
-    showAddDefinition: false
+    showAddDefinition: false,
+    fetchError: null,
+    isFetching: false,
+    termList: null,
+    userName: null,
+    avatarUrl: null
   };
 
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    var url = "/users?q=" + this.props.author + "&_limit=1";
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ userName: response[0].name, avatarUrl: response[0].avatarUrl });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
+  }
+
   toggleAdd = () => this.setState({ showAddDefinition: !this.state.showAddDefinition })
 
   render() {
     const { term } = this.props;
     const { showAddDefinition } = this.state;
-
     return (
       <div className="term">
+        <hr/>
         <h3><Link to={`/terms/${term.name}`}>{term.name}</Link></h3>
+        <div className="small-byline">
+          Term suggested by <Image src={'/avatars/' + this.state.avatarUrl} circle /> {this.state.userName}
+        </div>
         {term.definitions.map((definition, index) => {
-          return <Definition key={definition.id} definition={definition} index={index + 1} />
+          return <Definition key={definition.id} definition={definition} index={index + 1} author={definition.userId}/>
         })}
+        
         <div className="add-definition-section">
           <Button bsStyle="info" bsSize="xsmall" onClick={this.toggleAdd}>
             <Glyphicon glyph="plus-sign" /> Add definition
           </Button>
-          {showAddDefinition && <AddDefinition hide={this.toggleAdd} />}
+          {showAddDefinition && <AddDefinition hide={this.toggleAdd} termId={term.id} incrDefCount={this.props.incrDefCount}/>}
         </div>
       </div>
     );
diff --git a/src/TermContainer.js b/src/TermContainer.js
index f6f4cfc..3ff0a3b 100644
--- a/src/TermContainer.js
+++ b/src/TermContainer.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Glyphicon } from 'react-bootstrap';
 import { Link } from 'react-router';
+import commonActions from './commonActions';
 
 class Term extends Component {
   static propTypes = {
@@ -9,18 +10,40 @@ class Term extends Component {
     })
   };
 
+  state = {
+    showAddTerm: false,
+    fetchError: null,
+    isFetching: false,
+    termId: 0,
+    termName: "Loading...",
+    termAuthorId: 0
+  };
+
+  componentWillMount() {
+    this.setState({ isFetching: true })
+    var url = '/terms?q=' + this.props.params.termName + '&_limit=1';
+    commonActions.fetchJson(url)
+      .then(response => {
+        this.setState({ 
+          termId: response[0].id,
+          termName: response[0].name,
+          termAuthorId: response[0].userId
+        });        
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => {this.setState({ isFetching: false })}
+      );
+  }
+
   render() {
     return (
       <div className="term">
         <Link to="/terms">
           <Glyphicon glyph="chevron-left" /> Back to terms
         </Link>
-        <h1>[Term name goes here]</h1>
-        <p>Your job here is to fetch the term and show its definitions. Use the <code>{'<Term>'}</code> component.</p>
-        <p>Reminder: to fetch the term from the server by name, you can use the full text search capability with a limit of 1. For example, if the term in the URL is <strong>Full%20Stack</strong>, then you can use the URL</p>
-        <code>
-          /terms?q=Full%20Stack&_limit=1
-        </code>
+        <h1>    
+          <Term key={this.state.termId} term={this.state.termName} author={this.state.termAuthorId}/>
+        </h1>
       </div>
     );
   }
diff --git a/src/App.css b/src/css/App.css
similarity index 100%
rename from src/App.css
rename to src/css/App.css
diff --git a/src/index.css b/src/css/index.css
similarity index 58%
rename from src/index.css
rename to src/css/index.css
index 05dea7d..15d9b7b 100644
--- a/src/index.css
+++ b/src/css/index.css
@@ -1,3 +1,25 @@
+* {
+    font-family: 'Titillium Web', sans-serif;
+}
+
+p, div, li {
+  font-size: 16px;
+}
+
+h3 {
+  font-weight: 700;
+}
+
+.navbar-brand {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.row {
+  margin-bottom: 100px;
+}
+/* Default CSS */
+
 .login-screen .users .user {
   margin: 10px 0;
 }
@@ -40,4 +62,16 @@
 .user-select-component {
   cursor: pointer;
   padding: 5px;
+}
+.small-byline, .def-byline {
+  color: gray;
+  font-weight: 200;
+  font-size: 14px;
+}
+
+.def-byline {
+  margin-left: 58px;
+}
+.small-byline img, .def-byline img {
+  width: 25px;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1ee3e20..b208bb8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/css/bootstrap-theme.css';
-import './index.css';
+import './css/index.css';
 
 ReactDOM.render(
   <App />,
diff --git a/src/logo.svg b/src/svg/logo.svg
similarity index 100%
rename from src/logo.svg
rename to src/svg/logo.svg

From 174443f992da979c9cd210f4215790de16a3ce85 Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 09:06:17 -0700
Subject: [PATCH 2/8] basically functional, stretch goals not completed

---
 README.md            | 12 ++++++++++++
 data/db.json         |  6 ++++++
 src/Dictionary.js    |  5 +++++
 src/TermContainer.js | 41 +++++++++++++++++++++++++++--------------
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index d9bb2ae..48b771f 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,18 @@
 npm run json-server // starts API server
 PORT=4500 npm start // starts front-end server
 
+# Dev Notes - TO DO
+
+Consider the real-world issues. 
+    What happens when a fetch or POST fails? 
+    What if the fetch takes a while? Show the user some type of spinner. 
+    Determine how to force errors or slow-loading during presentation.
+
+Stretch Goals
+    Implement edit and delete for terms .
+    Implement edit and delete for definitions.
+    Implement edit and delete for users.
+
 
 
 ## TL;DR
diff --git a/data/db.json b/data/db.json
index a156940..1bef91c 100644
--- a/data/db.json
+++ b/data/db.json
@@ -78,6 +78,12 @@
       "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
       "termId": 4,
       "userId": 4
+    },
+    {
+      "userId": 4,
+      "content": "Definition!!!!!",
+      "termId": 1,
+      "id": 8
     }
   ],
   "users": [
diff --git a/src/Dictionary.js b/src/Dictionary.js
index 9dabf9b..60b0e2e 100644
--- a/src/Dictionary.js
+++ b/src/Dictionary.js
@@ -18,6 +18,11 @@ class Dictionary extends Component {
     commonActions.fetchJson('/terms?_embed=definitions')
       .then(response => {
         var terms = response.map(term => {
+          console.log("responseresponseresponse response response response response ")
+          console.log(response)
+          console.log(term.id)
+          console.log(term)
+          console.log(term.userId)
             return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
           });
         this.setState({ itemList: terms });
diff --git a/src/TermContainer.js b/src/TermContainer.js
index 3ff0a3b..4b73f33 100644
--- a/src/TermContainer.js
+++ b/src/TermContainer.js
@@ -2,8 +2,10 @@ import React, { Component } from 'react';
 import { Glyphicon } from 'react-bootstrap';
 import { Link } from 'react-router';
 import commonActions from './commonActions';
+import Term from './Term'; 
 
-class Term extends Component {
+
+class TermContainer extends Component {
   static propTypes = {
     params: React.PropTypes.shape({
       termName: React.PropTypes.string.isRequired,
@@ -14,39 +16,50 @@ class Term extends Component {
     showAddTerm: false,
     fetchError: null,
     isFetching: false,
-    termId: 0,
-    termName: "Loading...",
-    termAuthorId: 0
+    termId: null,
+    userId: null,
+    termName: null,
+    term: null
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.setState({ isFetching: true })
-    var url = '/terms?q=' + this.props.params.termName + '&_limit=1';
+    var url = '/terms?q=' + this.props.params.termName + '&_embed=definitions'
     commonActions.fetchJson(url)
       .then(response => {
         this.setState({ 
           termId: response[0].id,
+          userId: response[0].userId,
           termName: response[0].name,
-          termAuthorId: response[0].userId
-        });        
+          term: <Term key={response[0].id} term={response[0]} author={response[0].userId}/>
+        });
       })
       .catch(error => this.setState({ fetchError: error.message }))
-      .then(() => {this.setState({ isFetching: false })}
-      );
+      .then(() => this.setState({ isFetching: false }));
+
+    this.setState({ isFetching: true })
+    commonActions.fetchJson('/terms?_embed=definitions')
+      .then(response => {
+        var terms = response.map(term => {
+            return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
+          });
+        this.setState({ itemList: terms });
+      })
+      .catch(error => this.setState({ fetchError: error.message }))
+      .then(() => this.setState({ isFetching: false }));
   }
 
+
   render() {
     return (
       <div className="term">
         <Link to="/terms">
           <Glyphicon glyph="chevron-left" /> Back to terms
         </Link>
-        <h1>    
-          <Term key={this.state.termId} term={this.state.termName} author={this.state.termAuthorId}/>
-        </h1>
+        {this.state.term}
       </div>
     );
   }
 }
 
-export default Term;
+export default TermContainer;

From dc2952f3c07df691587a443e0b2b64f52e10ed55 Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 09:13:01 -0700
Subject: [PATCH 3/8] remove redundancy from readme

---
 README.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/README.md b/README.md
index 48b771f..c725b04 100644
--- a/README.md
+++ b/README.md
@@ -95,9 +95,6 @@ The point of the project is for us to have a well known app idea at the start, s
 
 Implement edit and delete for terms and definitions.
 
-Add Giphy to definitions:
-'http://api.giphy.com/v1/gifs/search?q=' + searchPhrase + '&rating=g&api_key=dc6zaTOxFJmzC'
-
 # Need more control?
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app), which doesn't allow configuration by design. But you can provide configuration by first "ejecting" from create-react-app. Search Google for "create-react-app eject".

From 63980b9cc95d631d00737ee26f5c15453a1dc20b Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 09:16:03 -0700
Subject: [PATCH 4/8] add user

---
 data/db.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/data/db.json b/data/db.json
index 1bef91c..bf74c73 100644
--- a/data/db.json
+++ b/data/db.json
@@ -106,6 +106,11 @@
       "id": 4,
       "name": "Penny",
       "avatarUrl": "penny.png"
+    },
+    {
+      "id": 5,
+      "name": "Pam",
+      "avatarUrl": "pam.png"
     }
   ]
 }
\ No newline at end of file

From 22eec749bc38472c49344af545de8bdc378687b6 Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 09:18:22 -0700
Subject: [PATCH 5/8] remove extra font weights

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 5276986..f3f4954 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet"> 
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,700" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

From 22bac8009d37f6652b148f08d9571bad8a4e44aa Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 16:22:26 -0700
Subject: [PATCH 6/8] polishing

---
 README.md            |  2 +-
 data/db.json         | 11 -----------
 src/AddDefinition.js |  7 ++-----
 src/AddTerm.js       |  1 +
 src/Definition.js    |  1 +
 src/Dictionary.js    |  5 -----
 src/Navigation.js    |  2 +-
 src/Term.js          |  1 +
 src/commonActions.js |  1 +
 src/css/index.css    |  5 +++++
 10 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index c725b04..574240b 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Consider the real-world issues.
     Determine how to force errors or slow-loading during presentation.
 
 Stretch Goals
-    Implement edit and delete for terms .
+    Implement edit and delete for terms.
     Implement edit and delete for definitions.
     Implement edit and delete for users.
 
diff --git a/data/db.json b/data/db.json
index bf74c73..a156940 100644
--- a/data/db.json
+++ b/data/db.json
@@ -78,12 +78,6 @@
       "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
       "termId": 4,
       "userId": 4
-    },
-    {
-      "userId": 4,
-      "content": "Definition!!!!!",
-      "termId": 1,
-      "id": 8
     }
   ],
   "users": [
@@ -106,11 +100,6 @@
       "id": 4,
       "name": "Penny",
       "avatarUrl": "penny.png"
-    },
-    {
-      "id": 5,
-      "name": "Pam",
-      "avatarUrl": "pam.png"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/AddDefinition.js b/src/AddDefinition.js
index b825843..5817182 100644
--- a/src/AddDefinition.js
+++ b/src/AddDefinition.js
@@ -18,6 +18,7 @@ const userComponent = props => {
 class AddDefinition extends Component {
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
+    incrDefCount: React.PropTypes.func.isRequired,
     termId: React.PropTypes.number.isRequired
   };
 
@@ -45,11 +46,7 @@ class AddDefinition extends Component {
 
   createDefinition = () => {
     var definer;
-    if(this.state.who) {
-      definer = this.state.who.id;
-    } else {
-      definer = this.context.loggedInUser.id;
-    }
+    definer = this.state.who ? this.state.who.id : this.context.loggedInUser.id;
     var newDef = {
       userId: definer,
       content: this.state.value,
diff --git a/src/AddTerm.js b/src/AddTerm.js
index 65b704e..964b70a 100644
--- a/src/AddTerm.js
+++ b/src/AddTerm.js
@@ -9,6 +9,7 @@ class AddTerm extends Component {
 
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
+    incrWordCount: React.PropTypes.func.isRequired,
   };
 
   createTerm = () => {
diff --git a/src/Definition.js b/src/Definition.js
index 9394781..7bfb3d5 100644
--- a/src/Definition.js
+++ b/src/Definition.js
@@ -40,6 +40,7 @@ class Definition extends Component {
       <div className="def-byline">
         Definition provided by <Image src={'/avatars/' + this.state.avatarUrl} circle />  {this.state.userName}
       </div>
+      
       </div>
     );
   }
diff --git a/src/Dictionary.js b/src/Dictionary.js
index 60b0e2e..9dabf9b 100644
--- a/src/Dictionary.js
+++ b/src/Dictionary.js
@@ -18,11 +18,6 @@ class Dictionary extends Component {
     commonActions.fetchJson('/terms?_embed=definitions')
       .then(response => {
         var terms = response.map(term => {
-          console.log("responseresponseresponse response response response response ")
-          console.log(response)
-          console.log(term.id)
-          console.log(term)
-          console.log(term.userId)
             return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
           });
         this.setState({ itemList: terms });
diff --git a/src/Navigation.js b/src/Navigation.js
index cd3c163..ee7af74 100644
--- a/src/Navigation.js
+++ b/src/Navigation.js
@@ -35,7 +35,7 @@ class Navigation extends Component {
               <strong>{loggedInUser.name}</strong>
             </Navbar.Text>}
             {loggedInUser && <Navbar.Text>
-              You've created {this.props.wordCount} words and {this.props.defCount} definitions!
+              You've created {this.props.wordCount + (this.props.wordCount === 1 ? " word" : " words")} and {this.props.defCount + (this.props.defCount === 1 ? " definition" : " definitions")}!
             </Navbar.Text>}
             {loggedInUser && <LinkContainer to="/logout"><NavItem eventKey={2}>Logout</NavItem></LinkContainer>}
             {!loggedInUser && <LinkContainer to="/login"><NavItem eventKey={2}>Login</NavItem></LinkContainer>}
diff --git a/src/Term.js b/src/Term.js
index d17a43b..9126025 100644
--- a/src/Term.js
+++ b/src/Term.js
@@ -42,6 +42,7 @@ class Term extends Component {
         <div className="small-byline">
           Term suggested by <Image src={'/avatars/' + this.state.avatarUrl} circle /> {this.state.userName}
         </div>
+        <small className="remove-btn">remove term</small>
         {term.definitions.map((definition, index) => {
           return <Definition key={definition.id} definition={definition} index={index + 1} author={definition.userId}/>
         })}
diff --git a/src/commonActions.js b/src/commonActions.js
index 1c3a869..16c4b62 100644
--- a/src/commonActions.js
+++ b/src/commonActions.js
@@ -51,6 +51,7 @@ class CommonActions {
       .then(this.checkStatus)
       .then(this.parseJson);
   }
+
 }
 
 export default new CommonActions()
diff --git a/src/css/index.css b/src/css/index.css
index 15d9b7b..f0ef71f 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -74,4 +74,9 @@ h3 {
 }
 .small-byline img, .def-byline img {
   width: 25px;
+}
+
+.remove-btn {
+  text-transform: uppercase;
+  font-weight: 700;
 }
\ No newline at end of file

From 100ef37432fe6211718e75af5bf7ac02128549ad Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 17:10:01 -0700
Subject: [PATCH 7/8] removed extra functions

---
 NOTES.md             |  0
 data/db.json         | 40 ++++++++++++++++++++++++++++++++++++++++
 src/AddDefinition.js |  2 --
 src/AddTerm.js       |  2 --
 src/App.js           |  9 ++-------
 src/Dictionary.js    |  4 ++--
 src/Term.js          |  3 +--
 src/TermContainer.js |  3 +--
 8 files changed, 46 insertions(+), 17 deletions(-)
 create mode 100644 NOTES.md

diff --git a/NOTES.md b/NOTES.md
new file mode 100644
index 0000000..e69de29
diff --git a/data/db.json b/data/db.json
index a156940..e45462f 100644
--- a/data/db.json
+++ b/data/db.json
@@ -34,6 +34,16 @@
       "name": "UX",
       "userId": 3,
       "id": 7
+    },
+    {
+      "name": "asdfasdfa",
+      "userId": 4,
+      "id": 8
+    },
+    {
+      "name": "54wy4hrth",
+      "userId": 4,
+      "id": 9
     }
   ],
   "definitions": [
@@ -78,6 +88,36 @@
       "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
       "termId": 4,
       "userId": 4
+    },
+    {
+      "userId": 4,
+      "content": "A general solution to a common problem; applicable to many situations.",
+      "termId": 2,
+      "id": 8
+    },
+    {
+      "userId": 4,
+      "content": "asdf",
+      "termId": 8,
+      "id": 9
+    },
+    {
+      "userId": 4,
+      "content": "asdfasdf",
+      "termId": 8,
+      "id": 10
+    },
+    {
+      "userId": 1,
+      "content": "asdfasdf",
+      "termId": 8,
+      "id": 11
+    },
+    {
+      "userId": 4,
+      "content": "asdfasd",
+      "termId": 8,
+      "id": 12
     }
   ],
   "users": [
diff --git a/src/AddDefinition.js b/src/AddDefinition.js
index 5817182..b131fa5 100644
--- a/src/AddDefinition.js
+++ b/src/AddDefinition.js
@@ -18,7 +18,6 @@ const userComponent = props => {
 class AddDefinition extends Component {
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
-    incrDefCount: React.PropTypes.func.isRequired,
     termId: React.PropTypes.number.isRequired
   };
 
@@ -56,7 +55,6 @@ class AddDefinition extends Component {
       method: 'POST', 
       body: newDef})
       .then(response => {
-        this.props.incrDefCount();
         //console.log(response)
       })
       .catch(error => this.setState({ fetchError: error.message }))
diff --git a/src/AddTerm.js b/src/AddTerm.js
index 964b70a..f3c06da 100644
--- a/src/AddTerm.js
+++ b/src/AddTerm.js
@@ -9,7 +9,6 @@ class AddTerm extends Component {
 
   static propTypes = {
     hide: React.PropTypes.func.isRequired,
-    incrWordCount: React.PropTypes.func.isRequired,
   };
 
   createTerm = () => {
@@ -19,7 +18,6 @@ class AddTerm extends Component {
       body: newWord})
       .then(response => {
         //console.log(response)
-        this.props.incrWordCount();
       })
       .catch(error => this.setState({ fetchError: error.message }))
       .then(() => this.setState({ isFetching: false }));
diff --git a/src/App.js b/src/App.js
index 7a2ff87..d5edf07 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,12 +32,6 @@ class App extends Component {
     };
   }
 
-  incrWordCount = () => {
-    var count = this.state.wordCount;
-    count++;
-    this.setState({ wordCount: count });
-  };
-
   markUserLoggedIn = user => {
     this.setState({ loggedInUser: user });
     this.getCount(user.id);
@@ -49,6 +43,7 @@ class App extends Component {
     localStorage.setItem('loggedInUser', null);
   };
 
+  // gets the counts for definitions and words creatd by the logged in user
   getCount(user) {
     var data = '/users?q='+ user +'&_embed=definitions';
     commonActions.fetchJson(data)
@@ -82,7 +77,7 @@ class App extends Component {
           <Route path="login" component={props => <Login { ...props} markUserLoggedIn={this.markUserLoggedIn} />} />
           <Route path="logout" component={props => <Logout { ...props} markUserLoggedOut={this.markUserLoggedOut} />} />
           <Route path="terms" >
-            <IndexRoute component={props => <Dictionary { ...props} incrWordCount={this.incrWordCount} incrDefCount={this.incrDefCount} />} />
+            <IndexRoute component={Dictionary} />
             <Route path=":termName" component={TermContainer} />
           </Route>
         </Route>
diff --git a/src/Dictionary.js b/src/Dictionary.js
index 9dabf9b..63587ff 100644
--- a/src/Dictionary.js
+++ b/src/Dictionary.js
@@ -18,7 +18,7 @@ class Dictionary extends Component {
     commonActions.fetchJson('/terms?_embed=definitions')
       .then(response => {
         var terms = response.map(term => {
-            return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
+            return <Term key={term.id} term={term} author={term.userId} />;
           });
         this.setState({ itemList: terms });
       })
@@ -37,7 +37,7 @@ class Dictionary extends Component {
         <Button bsStyle="success" onClick={this.toggleAdd}>
           <Glyphicon glyph="plus-sign" /> Add term
         </Button>
-        {showAddTerm && <AddTerm hide={this.toggleAdd} incrWordCount={this.props.incrWordCount} />}
+        {showAddTerm && <AddTerm hide={this.toggleAdd} />}
         <div className="terms">
           {this.state.itemList}
         </div>
diff --git a/src/Term.js b/src/Term.js
index 9126025..666d1f0 100644
--- a/src/Term.js
+++ b/src/Term.js
@@ -42,7 +42,6 @@ class Term extends Component {
         <div className="small-byline">
           Term suggested by <Image src={'/avatars/' + this.state.avatarUrl} circle /> {this.state.userName}
         </div>
-        <small className="remove-btn">remove term</small>
         {term.definitions.map((definition, index) => {
           return <Definition key={definition.id} definition={definition} index={index + 1} author={definition.userId}/>
         })}
@@ -51,7 +50,7 @@ class Term extends Component {
           <Button bsStyle="info" bsSize="xsmall" onClick={this.toggleAdd}>
             <Glyphicon glyph="plus-sign" /> Add definition
           </Button>
-          {showAddDefinition && <AddDefinition hide={this.toggleAdd} termId={term.id} incrDefCount={this.props.incrDefCount}/>}
+          {showAddDefinition && <AddDefinition hide={this.toggleAdd} termId={term.id} />}
         </div>
       </div>
     );
diff --git a/src/TermContainer.js b/src/TermContainer.js
index 4b73f33..5dace4e 100644
--- a/src/TermContainer.js
+++ b/src/TermContainer.js
@@ -41,7 +41,7 @@ class TermContainer extends Component {
     commonActions.fetchJson('/terms?_embed=definitions')
       .then(response => {
         var terms = response.map(term => {
-            return <Term key={term.id} term={term} author={term.userId} incrDefCount={this.props.incrDefCount}/>;
+            return <Term key={term.id} term={term} author={term.userId} />;
           });
         this.setState({ itemList: terms });
       })
@@ -49,7 +49,6 @@ class TermContainer extends Component {
       .then(() => this.setState({ isFetching: false }));
   }
 
-
   render() {
     return (
       <div className="term">

From 890aa8fb6a97f88c8b469d7b819e83ba084a950d Mon Sep 17 00:00:00 2001
From: Jess Mear <jessica.mear@endurance.com>
Date: Wed, 8 Mar 2017 19:40:06 -0700
Subject: [PATCH 8/8] presentation

---
 NOTES.md       | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++
 data/db.json   | 31 +++++++-----------------
 src/App.js     |  2 +-
 src/Welcome.js |  2 +-
 4 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/NOTES.md b/NOTES.md
index e69de29..c76bcfb 100644
--- a/NOTES.md
+++ b/NOTES.md
@@ -0,0 +1,64 @@
+Hi, I'm Jess
+    degree in graphic design 
+    completed a front end dev bootcamp last summer
+    great meetup
+    thanks Tyler for the opportunity to work on a project and present
+
+
+-- Structure --
+changed the directory structure to isolate the non-js files
+
+- Components - 
+index
+App - routes, state for counts for logged in user passed down as props
+    Layout - counts passed down as props
+
+        Navigation - recieves props and displays counts, shows logged in user, link to login/logout, nav (on every page)
+
+        Welcome - informational page
+        Login - shows list of users, click one to login
+        Dictionary - gets all the term components and displays them, functionality to add new terms
+        Term Component - Displays term, author, definition components, functionality to add new definitions
+        Definition Component - Displays definition, author
+        Term Container - Component to display a single term, takes a parameter in the URL and gets the info from the api
+
+-- Approach/Process --
+First
+    Read documentation
+    Added notes at the top about how to get started quickly 
+    tested the api with direct calls in the browser
+    created a list of calls and put them in the ReadMe for reference
+
+Re-usability, one of the cool things about react
+    A few flexible components are used again and again
+
+-- Problem/Solution --
+
+Steady progress on app until I noticed the counts in the nav were not updating 
+Stuck there for a long time
+    tried a lot of different ways of passing the data around
+
+wanted to avoid hitting the api too often
+    can slow down the app
+    ended up making a call to the API every time app mounted to keep the counts constantly updated
+
+re-factoring counts
+    get the counts on login
+    update them with state
+    avoid hitting the api for that purpose again until a refresh or a new login
+
+other refactoring
+    chunk of code that is repeated and very nearly the same
+        make into a tidy function
+        takes parameters  
+    add loading animations 
+    add error messages for various problems
+    add field validation
+    add more functionality
+
+-- Learned -- 
+have not used context or react-bootstrap before
+    not sure about context - I was liking it then it wasn't behaving as gracefully as state
+    really like react bootstrap
+learned I could pass props down routes
+    made it possible to pass the counts to the navigation bar
diff --git a/data/db.json b/data/db.json
index e45462f..e59c0b9 100644
--- a/data/db.json
+++ b/data/db.json
@@ -36,14 +36,19 @@
       "id": 7
     },
     {
-      "name": "asdfasdfa",
-      "userId": 4,
+      "name": "DRY",
+      "userId": 2,
       "id": 8
     },
     {
-      "name": "54wy4hrth",
+      "name": "hi",
       "userId": 4,
       "id": 9
+    },
+    {
+      "name": "asdfg",
+      "userId": 4,
+      "id": 10
     }
   ],
   "definitions": [
@@ -97,27 +102,9 @@
     },
     {
       "userId": 4,
-      "content": "asdf",
+      "content": "Don't Repeat Yourself",
       "termId": 8,
       "id": 9
-    },
-    {
-      "userId": 4,
-      "content": "asdfasdf",
-      "termId": 8,
-      "id": 10
-    },
-    {
-      "userId": 1,
-      "content": "asdfasdf",
-      "termId": 8,
-      "id": 11
-    },
-    {
-      "userId": 4,
-      "content": "asdfasd",
-      "termId": 8,
-      "id": 12
     }
   ],
   "users": [
diff --git a/src/App.js b/src/App.js
index d5edf07..7579388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,7 +43,7 @@ class App extends Component {
     localStorage.setItem('loggedInUser', null);
   };
 
-  // gets the counts for definitions and words creatd by the logged in user
+  // gets the counts for definitions and words created by the logged in user
   getCount(user) {
     var data = '/users?q='+ user +'&_embed=definitions';
     commonActions.fetchJson(data)
diff --git a/src/Welcome.js b/src/Welcome.js
index 1955345..eede335 100644
--- a/src/Welcome.js
+++ b/src/Welcome.js
@@ -5,7 +5,7 @@ class Welcome extends Component {
   render() {
     return (
       <div>
-        <h1>Dev Dictionary</h1>
+        <h1>Dev Dictionary - Implementation By Jess</h1>
         <p>Instructions are in the README doc</p>
         <p>View <Link to="/terms">list of terms</Link></p>
       </div>