Sockets - Evelynn

src/App.js

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

src/components/Board.js

@@ -5,29 +5,86 @@ 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: [],
+      name: props.boardName,
+      url: props.url,
+      error: false,
     };
   }
 
+  componentDidMount() {
+    const boardPath = this.state.url + `/${this.state.name}/cards`;
+    axios.get(boardPath)
+      .then((response) => {
+        this.setState({ cards: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  };
+
+  deleteCard = (id) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+
+    const afterDelete = this.state.cards.filter(
+      card => card.id !== id
+    );
+
+    this.setState({ cards: afterDelete });
+  }
+
+  getUpdatedCards = () => {
+    const allCards = this.state.cards.map((cardObj, i) => {
+      return <Card key={i} text={cardObj.card.text} emoji={cardObj.card.emoji} id={cardObj.card.id} deleteHandler={this.deleteCard} />
+    });
+    return allCards;
+  };
+
+
   render() {
+
+    const addCard = (cardContent) => {
+      axios.post(`https://inspiration-board.herokuapp.com/boards/${this.state.name}/cards`, cardContent)
+      .then((response) => {
+        let cardList = this.state.cards;
+        cardList.push({card: response.data.card});
+        this.setState({cards: cardList});
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+    };
+
     return (
-      <div>
-        Board
-      </div>
+      <section>
+        <section className="validation-errors-display">
+          <ul className="validation-errors-display__list">
+            <li>{this.state.error}</li>
+          </ul>
+        </section>
+        <section className="board">
+          {this.state.error ? ("") : (this.getUpdatedCards())}
+        </section>
+        <section>
+          <NewCardForm addCardCallback={addCard}/>
+        </section>
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  name: PropTypes.string,
 };
 
 export default Board;

src/components/Board.test.js

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

src/components/Card.js

@@ -5,17 +5,54 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: props.text,
+      emoji: props.emoji,
+      id: props.id,
+      deleteClickEvent: props.deleteHandler,
+      showSelf: true,
+    }
+
+    this.clickHandler = this.clickHandler.bind(this)
+  }
+
+  clickHandler = () => {
+    this.state.deleteClickEvent(this.state.id);
+    this.setState({ showSelf: false });
+  }
+
+
   render() {
     return (
-      <div className="card">
-        Card
-      </div>
-    )
-  }
-}
+      <section>
+      {this.state.showSelf ? (
+      <section className="card">
+          <section className="card__content">
+            <p className="card__content-text">
+              {this.state.text}
+            </p>
+            <span className="card__content-emoji">
+              {emoji.getUnicode(`${this.state.emoji}`)}
+            </span>
+            <br />
+            <br />
+            <button className="card__delete" onClick={this.clickHandler}>Delete</button>
+          </section>
+          </section>
+        ) : ("")};
+    </section>
+    )};
 
-Card.propTypes = {
+ };
 
-};
+  Card.propTypes = {
+    text: PropTypes.string,
+    emoji: PropTypes.string,
+    id: PropTypes.number.isRequired,
+    deleteHandler: PropTypes.func.isRequired,
+  };
 
-export default Card;
+  export default Card;

src/components/Card.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Card from './Card.js';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow(<Card text="" emoji="heart_eyes" id="1" deleteHandler={() => {}} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+
+});

src/components/NewCardForm.js

@@ -4,3 +4,81 @@ 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 = {
+      addCard: this.props.addCardCallback,
+      cardContents: {
+        text: "",
+        emoji: ""
+      }
+    };
+
+  };
+
+  submitHandler = (event) => {
+    event.preventDefault();
+
+    const cardContents = this.state.cardContents;
+
+    this.state.addCard(cardContents);
+
+    this.setState({cardContents: {
+      text: "",
+      emoji: ""
+    }})
+  };
+
+  onInputChange = (event) => {
+    const updatedState = this.state.cardContents;
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updatedState[field] = value;
+    this.setState({cardContents: updatedState});
+  }
+
+  // onInputChange() and submitHandler comes from the Ada Developers' Academy instructors
+  // https://github.com/Ada-C11/ada-pets-react/blob/sockets-axios/src/components/NewPetForm.js
+
+  render () {
+    const emojiOptions = EMOJI_LIST.map((icon, i) => {
+      if (icon === "") {
+        return <option value={icon} key={i}></option>
+        } else {
+        return <option value={icon} key={i}>{emoji.getUnicode(`${icon}`)}</option>
+        };
+    })
+
+    return (
+      <section className="new-card-form">
+        <h3 className="new-card-form__header">
+          Add a Card
+        </h3>
+        <form className="new-card-form__form" onSubmit={this.submitHandler}>
+          <label className="new-card-form__form-label">
+          Text (optional)
+          </label>
+          <textarea name="text" value={this.state.cardContents.text} className="new-card-form__form-textarea" onChange={this.onInputChange}/>
+          <label className="new-card-form__form-label">
+          Emoji (optional)
+          </label>
+          <select name="emoji" className="new-card-form__form-select" value={this.state.cardContents.emoji} onChange={this.onInputChange} >
+            {emojiOptions}
+          </select>  
+          <input type="submit" value="Add Card to Board" className="new-card-form__form-button" />
+        </form>
+      </section>
+    )
+  }
+
+};
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func,
+};
+
+export default NewCardForm;

src/components/NewCardForm.test.js

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

src/components/__snapshots__/Board.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches an existing snapshot 1`] = `ShallowWrapper {}`;

src/components/__snapshots__/Card.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `ShallowWrapper {}`;

src/components/__snapshots__/NewCardForm.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches an existing snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `ShallowWrapper {}`;