checking out starter-files-added

README.md

@@ -6,11 +6,19 @@ Most of the commits in this repository correspond to videos in the program.
 
 ## Project Setup
 
-* clone the Project - `git clone https://github.com/udacity/reactnd-contacts-complete.git`
-* install the dependencies - `npm install`
+- Clone the project - `git clone https://github.com/udacity/reactnd-contacts-complete.git`
+- Install the dependencies - `npm install`
+
+## Backend Server
+
+The backend server for this in-class project can be found [here](https://github.com/udacity/reactnd-contacts-server).
 
 ## Contributing
 
 Because this is a code-along project and the commits correspond to specific videos in the program, we will not be accepting pull requests.
 
 If you feel like there's a major problem, please open an issue to discuss the problem and potential resolution.
+
+## License
+
+MIT

package.json

@@ -3,14 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "form-serialize": "^0.7.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
-  }
-}
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

src/App.js

@@ -1,13 +1,59 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import ListContacts from './ListContacts'
+import * as ContactsAPI from './utils/ContactsAPI'
+import CreateContact from './CreateContact'
+import { Route } from 'react-router-dom'
 
+// testing a little comment to change file.
 class App extends Component {
+  state = {
+    contacts: []
+  }
+  componentDidMount() {
+    ContactsAPI.getAll()
+      .then((contacts) => {
+        this.setState(() => ({
+          contacts
+        }))
+      })
+  }
+  removeContact = (contact) => {
+    this.setState((currentState) => ({
+      contacts: currentState.contacts.filter((c) => {
+        return c.id !== contact.id
+      })
+    }))
+
+    ContactsAPI.remove(contact)
+  }
+  createContact = (contact) => {
+    ContactsAPI.create(contact)
+      .then((contact) => {
+        this.setState((currentState) => ({
+          contacts: currentState.contacts.concat([contact])
+        }))
+      })
+  }
   render() {
     return (
       <div>
-        Hello World
+        <Route exact path='/' render={() => (
+          <ListContacts
+            contacts={this.state.contacts}
+            onDeleteContact={this.removeContact}
+          />
+        )} />
+        <Route path='/create' render={({ history }) => (
+          <CreateContact
+            onCreateContact={(contact) => {
+              this.createContact(contact)
+              history.push('/')
+            }}
+          />
+        )} />
       </div>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/CreateContact.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import ImageInput from './ImageInput'
+import serializeForm from 'form-serialize'
+
+class CreateContact extends Component {
+  handleSubmit = (e) => {
+    e.preventDefault()
+    const values = serializeForm(e.target, { hash: true })
+
+    if (this.props.onCreateContact) {
+      this.props.onCreateContact(values)
+    }
+  }
+  render() {
+    return (
+      <div>
+        <Link
+          className='close-create-contact'
+          to='/'>
+            Close
+        </Link>
+        <form onSubmit={this.handleSubmit} className='create-contact-form'>
+          <ImageInput
+            className='create-contact-avatar-input'
+            name='avatarURL'
+            maxHeight={64}
+          />
+          <div className='create-contact-details'>
+            <input type='text' name='name' placeholder='Name' />
+            <input type='text' name='handle' placeholder='Handle' />
+            <button>Add Contact</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default CreateContact

src/ImageInput.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+//added a little comment to test my version control
 const readFileAsDataURL = (file) =>
   new Promise(resolve => {
     const reader = new FileReader()

src/ListContacts.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+class ListContacts extends Component {
+  static propTypes = {
+    contacts: PropTypes.array.isRequired,
+    onDeleteContact: PropTypes.func.isRequired,
+  }
+  state = {
+    query: ''
+  }
+  updateQuery = (query) => {
+    this.setState(() => ({
+      query: query.trim()
+    }))
+  }
+  clearQuery = () => {
+    this.updateQuery('')
+  }
+  render() {
+    const { query } = this.state
+    const { contacts, onDeleteContact } = this.props
+
+    const showingContacts = query === ''
+      ? contacts
+      : contacts.filter((c) => (
+          c.name.toLowerCase().includes(query.toLowerCase())
+        ))
+
+    return (
+      <div className='list-contacts'>
+        <div className='list-contacts-top'>
+          <input
+            className='search-contacts'
+            type='text'
+            placeholder='Search Contacts'
+            value={query}
+            onChange={(event) => this.updateQuery(event.target.value)}
+          />
+          <Link
+            to='/create'
+            className='add-contact'
+          >Add Contact</Link>
+        </div>
+
+        {showingContacts.length !== contacts.length && (
+          <div className='showing-contacts'>
+            <span>Now showing {showingContacts.length} of {contacts.length}</span>
+            <button onClick={this.clearQuery}>Show all</button>
+          </div>
+        )}
+
+        <ol className='contact-list'>
+          {showingContacts.map((contact) => (
+            <li key={contact.id} className='contact-list-item'>
+              <div
+                className='contact-avatar'
+                style={{
+                  backgroundImage: `url(${contact.avatarURL})`
+                }}
+              ></div>
+              <div className='contact-details'>
+                <p>{contact.name}</p>
+                <p>{contact.handle}</p>
+              </div>
+              <button
+                onClick={() => onDeleteContact(contact)}
+                className='contact-remove'>
+                  Remove
+              </button>
+            </li>
+          ))}
+        </ol>
+      </div>
+    )
+  }
+}
+
+export default ListContacts

src/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom'
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();

src/utils/ContactsAPI.js

@@ -0,0 +1,31 @@
+const api = process.env.REACT_APP_CONTACTS_API_URL || 'http://localhost:5001'
+
+let token = localStorage.token
+
+if (!token)
+  token = localStorage.token = Math.random().toString(36).substr(-8)
+
+const headers = {
+  'Accept': 'application/json',
+  'Authorization': token
+}
+
+export const getAll = () =>
+  fetch(`${api}/contacts`, { headers })
+    .then(res => res.json())
+    .then(data => data.contacts)
+
+export const remove = (contact) =>
+  fetch(`${api}/contacts/${contact.id}`, { method: 'DELETE', headers })
+    .then(res => res.json())
+    .then(data => data.contact)
+
+export const create = (body) =>
+  fetch(`${api}/contacts`, {
+    method: 'POST',
+    headers: {
+      ...headers,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body)
+  }).then(res => res.json())