Ada-C10 · JaneEdwMcN · Dec 13, 2018 · Dec 13, 2018 · Dec 14, 2018 · Dec 14, 2018
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,38 @@
 {
-  "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"
   },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "devDependencies": {
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "gh-pages": "^1.2.0"
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "gh-pages": "^2.0.1",
+    "enzyme-to-json": "^3.3.5"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
 }
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.
@@ -21,7 +21,7 @@
     -->
     <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" />
+    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
   </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
@@ -6,13 +6,13 @@ class App extends Component {
   render() {
     return (
       <section>
-        <header className="header">
-          <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
-        </header>
-        <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
-          />
+      <header className="header">
+      <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+      </header>
+      <Board
+      url="https://inspiration-board.herokuapp.com/boards/"
+      boardName={`JEM`}
+      />
       </section>
     );
   }

diff --git a/src/components/Board.js b/src/components/Board.js
@@ -5,29 +5,101 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
+      errorMessage: ""
     };
   }
 
+  componentDidMount() {
+    axios.get(this.props.url + this.props.boardName + "/cards")
+    .then((response) => {
+
+      const cards = response.data.map((card) => {
+        const newCard = {
+          ...card.card
+        }
+        return newCard
+      })
+
+      cards.sort(function(a, b){
+        return a.id-b.id
+      })
+
+      this.setState({
+        cards: cards
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: error.message
+      })
+    });
+  }
+
+  deleteCard = (id) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+    let updatedCards = this.state.cards
+
+    updatedCards.forEach((card, index) => {
+      if (id === card.id) {
+        updatedCards.splice(index, 1);
+      }
+    });
+
+    this.setState({
+      cards: updatedCards,
+    })
+  }
+
+  makeCardList = (cards) => {
+    const cardList = cards.map((card) => {
+      return <div key={card.id} className="card">
+      <Card
+      id={card.id}
+      text={card.text}
+      emoji={card.emoji}
+      deleteCardCallback={this.deleteCard}/>
+      </div>
+    });
+    return cardList
+  }
+
+  addCard = (newCard) => {
+    const addCardUrl = `https://inspiration-board.herokuapp.com/boards/${this.props.boardName}/cards?text=${newCard.text}&emoji=${newCard.emoji}`
+    axios.post(addCardUrl)
+    .then((response) => {
+      const newCardFromAPI = response.data.card
+      const { cards } = this.state
+      cards.push(newCardFromAPI)
+      this.setState({
+        cards: cards
+      })
+    })
+
+  }
+
   render() {
     return (
-      <div>
-        Board
+      <div className="board">
+      { this.state.cards !== [] && this.makeCardList(this.state.cards)}
+      <section className="new-card-form">
+      <NewCardForm addCardCallback={this.addCard}/>
+      </section>
       </div>
     )
   }
-
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -5,17 +5,29 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  onClickDeleteCard = (event) => {
+    this.props.deleteCardCallback(this.props.id);
+  }
+
   render() {
+
     return (
-      <div className="card">
-        Card
+      <div className="card__content">
+      <p className="card__content-text">
+      {this.props.text}
+      { this.props.emoji && <span className="card__content-emoji">  { emoji.getUnicode(this.props.emoji) }</span>}
+      </p>
+      <button className="card__delete" onClick={this.onClickDeleteCard}>Delete</button>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  deleteCardCallback: PropTypes.func.isRequired,
+  id: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string.isRequired
 };
 
 export default Card;
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
@@ -4,3 +4,76 @@ 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 } = this.state;
+
+    if (text === '') return;
+
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  generateSelectEmojis = () => {
+    const emojiOptions = EMOJI_LIST.map((thisEmoji, index) => {
+      return <option key={index} value={thisEmoji}>{emoji.getUnicode(thisEmoji)}</option>
+    });
+    return <select className="new-card-form__form-select" name="emoji" value={this.state.emoji} onChange={this.onFormChange}>
+    {emojiOptions}
+    </select>
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.onSubmit} name="new-card-form__form" id="new-card-form" className="new-card-form">
+      <div className="new-card-form__header">Add a new Card</div>
+      <div>
+      <label className="new-card-form__form-label" htmlFor="text">Text</label>
+      <input className="new-card-form__form-textarea" name="text" placeholder="text" onChange={this.onFormChange} value={this.state.text}/>
+      </div>
+      <div>
+      <label>
+      Select an Emoji:
+      {this.generateSelectEmojis()}
+      </label>
+      </div>
+      <input className="new-card-form__form-button" type="submit" name="submit" value="Add a Card" />
+      </form>
+    );
+  }
+
+
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired
+};
+
+export default NewCardForm;
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+describe('card', () => {
+  test('that it matches an existing snapshot', () => {
+
+    const wrapper = shallow( <Card
+      id={1}
+      text="Doggo"
+      emoji={"heart"}
+      />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js
@@ -0,0 +1,16 @@
+// import React from 'react';
+// import NewCardForm from '../NewCardForm';
+// import { shallow } from 'enzyme';
+// 
+// describe('card', () => {
+//   test('that it matches an existing snapshot', () => {
+//
+//     const wrapper = shallow( <NewCardForm
+//       id={1}
+//       text="Doggo"
+//       emoji={"heart"}
+//       />);
+//
+//       expect(wrapper).toMatchSnapshot();
+//     });
+//   });