Ampers: Kaitlin

package.json

@@ -20,7 +20,13 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "gh-pages": "^1.2.0"
   },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  },
   "homepage": "http://adagold.github.io/inspiration-board"
 }

src/App.js

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

src/components/Board.css

@@ -1,6 +1,7 @@
 .board {
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-around;
 }
 
 .validation-errors-display {

src/components/Board.js

@@ -5,7 +5,6 @@ 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() {
@@ -16,18 +15,85 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+      .then((response) => {
+        const cards = this.state.cards;
+        response.data.forEach((card) => {
+          const newCard = {};
+          newCard.id = card.card.id;
+          newCard.text = card.card.text;
+          newCard.emoji = card.card.emoji;
+          cards.push(newCard);
+        })
+
+        this.setState({ cards })
+      })
+      .catch((error) => {
+        this.setState({ message: error.message})
+      });
+  }
+
+  createNewCard = (newCardData) => {
+    const cards = this.state.cards
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, newCardData)
+      .then((response) => {
+        console.log(response.data.card);
+        cards.push(response.data.card);
+        this.setState({
+          cards,
+          message: `Sucessfully created Card ${response.data.card.id}`
+        })
+      })
+      .catch((error) => {
+        this.setState({ message: error.message})
+      });
+  };
+
+  deleteCard = (id, index) => {
+    const cards = this.state.cards
+    axios.delete(`${this.props.url}${this.props.boardName}/cards/${id}`)
+      .then((response) => {
+        cards.splice(index, 1)
+        this.setState({
+          cards,
+          message: `Sucessfully deleted Card ${response.data.card.id}`
+        })
+      })
+      .catch((error) => {
+        this.setState({ message: error.message})
+      });
+  };
+
   render() {
+    const cardComponents = this.state.cards.map((card, index) => {
+      return<Card
+        key={index}
+        index={index}
+        id={card.id}
+        text={card.text}
+        emoji={card.emoji}
+        deleteCard={ this.deleteCard }
+      />;
+    });
+
     return (
       <div>
-        Board
+        <div>
+          <NewCardForm submitNewCard={ this.createNewCard }/>
+        </div>
+        <div className="board">
+          { cardComponents }
+        </div>
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import Board from './Board.js';
+
+describe('Board', () => {
+  test('that it renders Board with shallow rendering', () => {
+    const wrapper = shallow(<Board />);
+
+    expect(wrapper).toMatchSnapshot();
+
+    // wrapper.unmount();
+  });
+
+});

src/components/Card.css

@@ -4,14 +4,14 @@
   padding: 1em 0;
   margin: 0.5rem;
 
-  min-height: 250px;
+  min-height: 225px;
   min-width: 225px;
   flex-basis: 18%;
 
   border-radius: 5px;
 
   display: grid;
-  grid-template-columns: 1fr 5fr 1fr;
+  grid-template: 1fr 5fr 1fr / 1fr 5fr;
   align-items: center;
 }
 
@@ -24,12 +24,12 @@
 
   text-align: center;
   font-weight: 100;
-  overflow: hidden;
+  max-height: 150px;
 }
 
 .card__content-text {
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow: scroll;
 }
 
 .card__content-emoji {
@@ -42,6 +42,9 @@
 }
 
 .card__delete {
+  grid-column-start: 3;
+  justify-content: left;
+  margin: 0 5px 0;
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }

src/components/Card.js

@@ -5,17 +5,45 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  renderText = () => {
+    if (this.props.text) {
+      return(
+        <p className="card__content-text">{ this.props.text }</p>
+      )
+    }
+  }
+
+  renderEmoji = () => {
+    if (this.props.emoji) {
+      return(
+        <p className="card__content-emoji">{ emoji.getUnicode(this.props.emoji) }</p>
+      )
+    }
+  }
+
+  selectDelete = () => {
+    console.log(this.props.id, this.props.index)
+    this.props.deleteCard(this.props.id, this.props.index)
+  }
   render() {
     return (
       <div className="card">
-        Card
+        <button type="button" className="card__delete" onClick={ this.selectDelete }>x</button>
+        <div className="card__content">
+          { this.renderText() }
+          { this.renderEmoji() }
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  index: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
+  deleteCard: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import Card from './Card';
+
+describe('Card', () => {
+  test('that it renders Card with shallow rendering', () => {
+    const wrapper = shallow(<Card />);
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.unmount();
+  });
+
+});

src/components/NewCardForm.css

@@ -2,6 +2,8 @@
 
 .new-card-form {
   width: 50%;
+  max-width: 350px;
+  min-width: 250px;
   margin: auto;
   padding-bottom: 4rem;
 }
@@ -33,6 +35,10 @@
   grid-row: auto;
 }
 
+.new-card-form__form-textarea{
+  height: 50px;
+}
+
 .new-card-form__form-button {
   background-color: inherit;
   border: 1px solid black;

src/components/NewCardForm.js

@@ -4,3 +4,77 @@ 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() {
+    super();
+
+    this.state = {
+      text: '',
+      emoji: ''
+    };
+  }
+
+  static propTypes = {
+    submitNewCard: PropTypes.func.isRequired
+  };
+
+  onFieldChange = (event) => {
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    const updateState = {};
+    updateState[fieldName] = fieldValue;
+    this.setState(updateState);
+  };
+
+  displayEmojiList = () => {
+    const options = EMOJI_LIST.map((keyword, index) => {
+      const unicode = emoji.getUnicode(keyword);
+      return <option key={ index } value={ keyword }>{ unicode }</option>
+    });
+    return options;
+  };
+
+  submitForm = (event) => {
+    event.preventDefault();
+
+    if (this.state.text || this.state.emoji ) {
+      this.props.submitNewCard({
+        text: this.state.text,
+        emoji: this.state.emoji
+      })
+      this.clearForm();
+    }
+  };
+
+  clearForm = () => {
+    this.setState({
+      text: '',
+      emoji: ''
+    })
+  }
+
+  seeState = () => {
+    console.log(this.state.text);
+    console.log(this.state.emoji);
+  }
+
+  render() {
+    return(
+      <section className="new-card-form">
+        <h3 className="new-card-form__header">Create a New Inspiration</h3>
+        <form onSubmit={ this.submitForm } className="new-card-form__form">
+          <label htmlFor="text" className="new-card-form__form-label">Message: </label>
+          <textarea name="text" value={this.state.text} onChange={ this.onFieldChange } className="new-card-form__form-textarea"/>
+          <label htmlFor="emoji" className="new-card-form__form-label">Emoji: </label>
+          <select name="emoji" value={this.state.emoji} onChange={ this.onFieldChange } className="new-card-form__form-select">
+            { this.displayEmojiList()}
+          </select>
+          <input type="submit" value="create card" className="new-card-form__form-button"/>
+        </form>
+      </section>
+    )
+  }
+}
+
+export default NewCardForm;