Hayden - Edges (C10) - Inspo Board

src/components/Board.js

@@ -16,10 +16,71 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    axios.get('https://inspiration-board.herokuapp.com/boards/ultra_princess/cards')
+      .then((res) => {
+        this.setState({ cards: res.data })
+      })
+      .catch((error) => {
+        alert('hm ur cards didnt load maybe u should refresh lol');
+      });
+  }
+
+  delCard = (id) => {
+    const url = 'https://inspiration-board.herokuapp.com/cards/' + id.toString();
+
+    axios.delete(url)
+      .then(() => {
+        let index;
+        let newState = this.state;
+
+        newState.cards.forEach((card, i) => {
+          if (card.card.id === id) {
+            index = i;
+          }
+        });
+
+        newState.cards.splice(index, 1);
+
+        this.setState(newState);
+      })
+      .catch((e) => {
+        alert('sry could not delete ?? idk tbh..');
+        console.log(e);
+      });
+  }
+
+  addCard = (newCard) => {
+    const url = `https://inspiration-board.herokuapp.com/boards/ultra_princess/cards?text=${newCard.text}&emoji=${newCard.emoji}`;
+
+    axios.post(url)
+      .then((res) => {
+        let newState = this.state;
+        newState.cards.push(res.data);
+
+        this.setState(newState);
+      })
+      .catch((e) => {
+        alert('sry could not add card ?? idk tbh..');
+        console.log(e);
+      });
+  }
+
   render() {
+    const cards = this.state.cards.map((e, i) => {
+      return (
+        <Card key={ e.card.id }
+          id={ e.card.id }
+          text={ e.card.text }
+          emoji={ e.card.emoji }
+          delCB={ this.delCard } />
+      )
+    });
+
     return (
-      <div>
-        Board
+      <div className="board">
+        { cards }
+        <NewCardForm addCB={ this.addCard } />
       </div>
     )
   }

src/components/Card.js

@@ -8,7 +8,11 @@ class Card extends Component {
   render() {
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <p className="card__content-text">{ this.props.text }</p>
+          <p className="card__content-emoji">{ this.props.emoji ? emoji.getUnicode(this.props.emoji) : "" }</p>
+          <button onClick={() => {this.props.delCB(this.props.id)} } >del mee</button>
+        </div>
       </div>
     )
   }

src/components/NewCardForm.js

@@ -4,3 +4,69 @@ 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;
+    const newCard = { text: text, emoji: emoji };
+
+    this.props.addCB(newCard);
+  }
+
+  render() {
+    return(
+      <div className="new-card-form">
+        <h2 className="new-card-form__header">
+          Add a Card!
+        </h2>
+        <form onSubmit={this.onSubmit} name="new-card-form__form" className="new-card-form__form">
+          <label className="new-card-form__form-label" htmlFor="text">
+            Text
+          </label>
+          <textarea className="new-card-form__form-textarea" name="text" placeholder="text goes here"  onChange={this.onFormChange} value={this.state.text} />
+          <label className="new-card-form__form-label" htmlFor="emoji">
+            Emoji
+          </label>
+          <select className="new-card-form__form-select" name="emoji" onChange={this.onFormChange}>
+            <option value=""></option>
+            <option value="heart_eyes">😍</option>
+            <option value="beer">🍺</option>
+            <option value="clap">👏</option>
+            <option value="sparkling_heart">💖</option>
+            <option value="heart_eyes_cat">😻</option>
+            <option value="dog">🐶</option>
+          </select>
+          <input className="new-card-form__form-button" type="submit" name="submit" value="add it" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default NewCardForm;

src/components/test/Card.test.js

@@ -0,0 +1,13 @@
+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 delCB={() => {}} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow(
+      <NewCardForm addCB={() => {}} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});