Naheed Edges

package.json

@@ -18,9 +18,15 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^1.2.0"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "homepage": "http://adagold.github.io/inspiration-board",
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
 }

src/App.js

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

src/components/Board.js

@@ -16,14 +16,56 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    this.getCards()
+  }
+
+  getCards = () => {
+    axios.get('https://inspiration-board.herokuapp.com/boards/Naheed/cards')
+    .then((response) => {
+      this.setState({ cards: response.data });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  addCard = (text, emoji) => {
+    axios.post(`https://inspiration-board.herokuapp.com/boards/Naheed/cards?text=${text}&emoji=${emoji}`)
+    .then((response) => {
+      this.getCards()
+    });
+  }
+
+  deleteCard = (id) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`, id)
+    .then((response) => {
+      this.getCards()
+    });
+  }
+
+
   render() {
+    const allCards = 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.deleteCard}
+        addCardCallback={this.addCard}/>
+    });
+
     return (
-      <div>
-        Board
+      <div >
+        <h3 className="new-card-form__header">Make a new card</h3>
+        <NewCardForm cards={this.state.cards} addCardCallback={this.addCard}/>
+        <div className="board">
+          {allCards}
+        </div>
       </div>
     )
   }
-
 }
 
 Board.propTypes = {

src/components/Card.css

@@ -1,6 +1,5 @@
 .card {
   background-color: #F4FF81;
-
   padding: 1em 0;
   margin: 0.5rem;
 
@@ -34,6 +33,7 @@
 
 .card__content-emoji {
   font-size: 3rem;
+  list-style-type: none;
 }
 
 .card__content-text, .card__content-emoji {

src/components/Card.js

@@ -4,18 +4,28 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
+const Card = (props) => {
+
     return (
       <div className="card">
-        Card
+        <span className="card__content">
+          <div className="card__content-text">{props.text}</div>
+          <div className="card__content-emoji">{emoji.getUnicode(`${props.emoji}`)}</div>
+            <button
+              className="card__delete"
+              onClick={() => props.deleteCardCallback(props.id)}>
+              Delete Card
+            </button>
+        </span>
       </div>
     )
   }
-}
 
 Card.propTypes = {
-
+  id: PropTypes.integer,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.function
 };
 
 export default Card;

src/components/NewCardForm.css

@@ -9,6 +9,7 @@
 .new-card-form__header {
   text-align: center;
   text-transform: uppercase;
+  font-size: 1.5em;
 }
 
 .new-card-form__form {
@@ -17,6 +18,7 @@
   grid-template-columns: [labels] auto [controls] 1fr;
   grid-auto-flow: row;
   grid-gap: .8em;
+  padding: 3px;
 }
 
 .new-card-form__form-label  {
@@ -32,6 +34,10 @@
   grid-column: controls;
   grid-row: auto;
 }
+.new-card-form__form-select {
+  color: grey;
+}
+
 
 .new-card-form__form-button {
   background-color: inherit;

src/components/NewCardForm.js

@@ -4,3 +4,89 @@ 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: ""
+    }
+  }
+
+  onInputChange = (event) => {
+    console.log("on input change")
+    // event.target.className = ' '
+    const field = event.target.name;
+    const value = event.target.value;
+    const newState = {}
+    newState[field] = value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    console.log("form submit")
+    console.log(this.state.emoji)
+
+    this.props.addCardCallback(this.state.text, this.state.emoji);
+
+    this.setState({
+      text: "",
+      emoji: ""
+    });
+  }
+
+  render () {
+
+    const allEmojis = EMOJI_LIST.map((element, i) => {
+      return <option
+        key={i}
+        value={`${element}`}>
+        {emoji.getUnicode(`${element}`)}
+      </option>
+    });
+    //need to use element instead of emoji because wont recognize emoji.getUnicode as function
+
+    return (
+      <div>
+        <form
+          className="new-card-form"
+          onSubmit={this.onFormSubmit}>
+          <div className="new-card-form__form">
+            <label
+              className="new-card-form__form-label"
+              htmlFor="Text">
+            </label>
+            <input
+              placeholder="Inspiration"
+              name="text"
+              value={this.state.text}
+              onChange={this.onInputChange}
+              className="new-card-form__form-textarea"/>
+          </div>
+          <div className="new-card-form__form">
+            <label
+              className="new-card-form__form-label"
+              htmlFor="Emoji">
+            </label>
+            <select onChange={this.onInputChange} name="emoji" className="new-card-form__form-select">
+              <option value="" disabled selected hidden>Emoji</option>
+              {allEmojis}
+            </select>
+          </div>
+          <div className="new-card-form__form">
+            <input type="submit" value="Post" className="new-card-form__form-button" />
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  cards: PropTypes.array,
+};
+
+export default NewCardForm;

src/components/test/Board.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Board from '../Board';
+import { shallow, mount } from 'enzyme';
+
+const CARDS = [
+  {
+    name: "test card 1",
+    emoji: "emoji"
+  },
+  {
+    name: "test card 2",
+    emoji: "emoji"
+  }
+];
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+
+    const cards = CARDS;
+    const wrapper = shallow(
+      <Board
+        cards={cards}
+        />
+    );
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('renders without crashing even with no cards', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+
+    const cards = [];
+    const wrapper = shallow(
+      <Board
+        cards={cards}
+        />
+    );
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('successfully deep mounts', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount(
+      <Board
+        cards={CARDS}
+        />
+    );
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.unmount();
+  });
+});

src/components/test/Card.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow(
+      <Card
+        text="test name"
+        emoji="test emoji"
+        />
+    );
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});