Ada-C10 · danimetz · Dec 13, 2018 · Dec 17, 2018 · Dec 17, 2018 · Dec 17, 2018
diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,26 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/images/board.jpg b/images/board.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,26 +1,32 @@
 {
-  "name": "adas-inspiring-board",
+  "name": "inspiration-board",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
     "emoji-dictionary": "^1.0.9",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
-    "react-scripts": "1.1.4"
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-scripts": "2.1.1"
   },
   "scripts": {
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "start": "PORT=3001 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "devDependencies": {
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "gh-pages": "^1.2.0"
+  "eslintConfig": {
+    "extends": "react-app"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "gh-pages": "^2.0.1"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-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">
     <!--
       manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,9 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Inspiration Board</title>
-    <link href="https://fonts.googleapis.com/css?family=Raleway|Permanent+Marker" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
+    <title>React App</title>
   </head>
   <body>
     <noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -8,7 +8,7 @@
       "type": "image/x-icon"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

diff --git a/src/App.js b/src/App.js
@@ -11,7 +11,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`danielle`}
           />
       </section>
     );

diff --git a/src/components/Board.js b/src/components/Board.js
@@ -5,29 +5,119 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
-    };
+    }
   }
 
+  componentDidMount(props) {
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+   .then((response) => {
+     const newCards = response.data.map((card) => {
+       const newCard = {
+         ...card,
+       }
+       return newCard;
+     }); // end of map
+     this.setState({
+       cards: newCards,
+     });
+     console.log(this.state.cards)
+   })
+   .catch((error) => {
+     console.log(error.message);
+     this.setState({
+       errorMessage: error.message
+     })
+   });
+  }
+
+  removeCard = (cardId) => {
+    console.log(cardId)
+    let deleteIndex = -1;
+    const cardList = [...this.state.cards];
+    cardList.forEach((card, index) => {
+      if (cardId === card.id) {
+        deleteIndex = index;
+      }
+    });
+
+    cardList.splice(deleteIndex, 1);
+
+    this.setState({
+      cards: cardList,
+    })
+
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`)
+
+
+  }
+
+  addCard = (newCard) => {
+
+    const apiPayload = {
+      ...newCard,
+    }
+    console.log(apiPayload);
+
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, apiPayload)
+
+      .then((response) => {
+        // What should we do when we know the post request worked?
+        console.log('API RESPONSE SUCCESS')
+
+        const {cards} = this.state;
+
+
+        cards.push(response.data)
+
+        this.setState({
+          cards: cards,
+        });
+
+
+      })
+      .catch((error) => {
+        // What should we do when we know the post request failed?
+        // this.setState({
+        //
+        // });
+      });
+
+  }
+
+
   render() {
+        const getCards = this.state.cards.map((card) => {
+            return <Card
+              key = {card.card.id}
+              id = {card.card.id}
+              text = {card.card.text}
+              emoji = {card.card.emoji}
+              deleteCardCallback={this.removeCard}
+              />
+          })
+
+
     return (
-      <div>
-        Board
+      <div className="board">
+        {getCards}
+        <NewCardForm addCardCallback={this.addCard}/>
       </div>
+
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.istRequired,
 };
 
 export default Board;
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -4,18 +4,30 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
+  const Card  = (props) => {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{props.text}</p>
+          {props.emoji && <p className="card__content-emoji">{emoji.getUnicode(`${props.emoji}`)}</p>}
+        </section>
+        <button
+          type="button"
+          className="card__delete"
+          aria-label="delete card"
+          onClick={() => {props.deleteCardCallback(props.id)}}
+        >
+          x
+        </button>
       </div>
     )
   }
-}
 
 Card.propTypes = {
-
+  id: PropTypes.integer,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func.isRequired,
 };
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
@@ -4,3 +4,71 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: '',
+      emoji: '',
+    };
+  }
+
+  resetState = () => {
+    this.setState({
+      text: '',
+      emoji: '',
+    });
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const { text, emoji } = this.state;
+
+    console.log(event);
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  render() {
+    const getEmojis = EMOJI_LIST.map((emojiText) => {
+        return <option value={emojiText}> {emoji.getUnicode(emojiText)}</option>
+      })
+    return (
+      <form onSubmit={this.onSubmit} className="new-card-form">
+        <section className="card__content">
+          <header className="new-card-form__header">
+            Add more inspiration
+          </header>
+          <div>
+            <label className="new-card-form__form-label" htmlFor="text">Text</label>
+            <textarea className="new-card-form__form-textarea" name="text" placeholder="Write something inspirational here!" onChange={this.onFormChange} value={this.state.text}></textarea>
+          </div>
+          <div>
+            <label className="new-card-form__form-label" htmlFor="emoji">Emoji</label>
+            <select className="new-card-form__form-select" name="emoji" value={this.state.emoji} onChange={this.onFormChange} >
+              {getEmojis}
+            </select>
+          </div>
+          <input className="new-card-form__form-button" type="submit" name="submit" value="Inspire!" />
+        </section>
+      </form>
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+}
+
+export default NewCardForm;
diff --git a/src/data/card-data.json b/src/data/card-data.json
@@ -6,7 +6,7 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"