Chantelle | Edges | Inspiration Board

src/App.js

@@ -10,8 +10,8 @@ class App extends Component {
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          url="https://inspiration-board.herokuapp.com/"
+          boardName={`Chantelletubbie/`}
           />
       </section>
     );

src/components/Board.js

@@ -1,33 +1,108 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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: [],
+      url: this.props.url,
+      boardName: this.props.boardName,
+      error: undefined
     };
   }
+  componentDidMount( ) {
+    const allCardsURL = this.state.url + 'boards/' + this.state.boardName + 'cards/';
 
-  render() {
-    return (
-      <div>
-        Board
-      </div>
-    )
+    axios.get(allCardsURL)
+    .then((response) => {
+
+      this.setState({
+        cards: response.data
+      })
+    })
+    .catch((error)=> {
+      const errorStr = `Got an error with status ${error.response.status} and message ${error.response.statusText}`
+
+      this.setState({
+        error: errorStr
+      })
+    });
+  }
+
+  deleteCard = (id) => {
+
+    const deleteURL = `${this.state.url}cards/${id}`
+    axios.delete(deleteURL)
+    .then((response) => {
+      const card = response.data.card;
+      alert(`Successfully deleted card with id ${card.id} and message ${card.text}.`)
+
+      const updatedCards = this.state.cards.filter((card) => {
+        return card.card.id !== id
+      })
+
+      this.setState({
+        cards: updatedCards
+      })
+    })
+    .catch((error) => {
+      const errorStr = `Got an error with status ${error.response.status} and message ${error.response.statusText}`
+      this.setState({
+        error: errorStr
+      })
+    })
   }
 
-}
+  addCard = (cardObj) => {
 
-Board.propTypes = {
+    let URL = `${this.state.url}boards/${this.state.boardName}cards`;
+
+    axios.post(URL, cardObj)
+    .then((response) => {
+      const updatedCards = this.state.cards;
+      updatedCards.push({card: response.data.card});
+      console.log(updatedCards, "response", response.data)
+      this.setState({
+        cards: updatedCards
+      })
+    })
+    .catch((error) => {
+      const errorStr = `Got an error with status ${error.response.status} and message ${error.response.statusText}`
+      this.setState({
+        error: errorStr
+      })
+    })
+  }
+
+  render() {
+
+    const cards = this.state.cards.map((card) => {
+      return (<Card key={`${card.card.id}${card.card.text}${card.card.emoji}`}
+        text={card.card.text} emoji={card.card.emoji} id={card.card.id} deleteCardCallback={this.deleteCard}/>)
+      })
+
+      const display = (this.state.cards.length !== 0) ? (<section>{cards}</section>)
+      : (<p>{this.state.error}</p>) ;
+
+      return (
+        <div>
+          <NewCardForm addCardCallback={this.addCard}/>
+          {display}
+        </div>
+      )
+    }
+  }
 
-};
+  Board.propTypes = {
+    url: PropTypes.string.isRequired,
+    boardName: PropTypes.string.isRequired
+  };
 
-export default Board;
+  export default Board;

src/components/Card.js

@@ -1,21 +1,35 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
-    return (
-      <div className="card">
-        Card
-      </div>
-    )
+
+const Card = (props) => {
+
+  const { text, emoji, id, deleteCardCallback} = props;
+
+  const onDelete = () => {
+    deleteCardCallback(id);
   }
+
+  return (
+    <div className="card">
+      <ul>
+        <li> {text} </li>
+        <li> {emoji} </li>
+        <li><button onClick={onDelete}>Uninspired...</button></li>
+      </ul>
+    </div>
+  )
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string,
+  id: PropTypes.number,
+  deleteCardCallback: PropTypes.func
 };
 
+
 export default Card;

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"]
+
+//text/quote, emoji
+
+class NewCardForm extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      text: "",
+      emoji: ""
+    }
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    this.props.addCardCallback(this.state);
+
+    this.setState({
+      text: "",
+      emoji: ""
+    })
+  }
+
+  onFormChange = (event) => {
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  emojiSelect = () => {
+    const emojis = EMOJI_LIST.map((emoji, index) => {
+      return <option key={index} value={emoji}>{emoji}</option>
+    });
+    return emojis;
+  };
+
+  render() {
+
+    return(
+      <div className="form">
+        <form onSubmit={this.onSubmit}>
+          <div>
+            <label className="" htmlFor="Quote">Quote</label>
+            <input name="text" placeholder="quote" onChange={this.onFormChange} value={this.state.text} />
+          </div>
+          <div>
+            <label className="" htmlFor="Emoji">Emoji</label>
+            <select name="emoji" value={this.state.emoji}
+              onChange={this.onFormChange}>
+              {this.emojiSelect()}
+            </select>
+          </div>
+          <input type="submit" name="submit" value="Add a Card" />
+        </form>
+      </div>
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func
+};
+
+export default NewCardForm;

src/components/test/Card.test.js

@@ -0,0 +1,18 @@
+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="text"
+      emoji="emoji"
+      id={0}
+      deleteCardCallback={() => {} }/>);
+
+      // Assert that it looks like the last snapshot
+      expect(wrapper).toMatchSnapshot();
+    });
+  });

src/components/test/NewCardForm.test.js

@@ -0,0 +1,16 @@
+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();
+  });
+});