maryams-inspirationalboard

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
   }
 }

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
   render() {
     return (
       <section>
@@ -11,7 +12,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`maryam`}
           />
       </section>
     );

src/components/Board.js

@@ -2,32 +2,142 @@ 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();
 
     this.state = {
       cards: [],
-    };
+      errors: undefined,
+    }
+  };
+
+  componentDidMount() {
+
+    axios.get(this.props.url+this.props.boardName+'/cards')
+    .then((response) => {
+      const cards = response.data.map((card) => {
+
+        const newCard = {
+          ...card.card
+        };
+        return newCard;
+      });
+
+      this.setState({
+        cards: cards,
+      });
+    })
+
+    .catch((error) => {
+      let { errors } = this.state
+      errors.push(error.message)
+
+      this.setState({
+        errors: errors
+      })
+    })
+  }
+
+  displayCards = () => {
+    return this.state.cards.map((card, i) => {
+      return <Card
+      key={i}
+      id={card.id}
+      text={card.text}
+      emoji={card.emoji}
+      deleteCardCallback={this.removeCard}
+      />
+    });
+  }
+
+  removeCard = (cardId) => {
+    console.log('where deleting happends')
+    let deleteIndex = -1;
+    const { cards } = this.state
+
+    cards.forEach((card, index) => {
+      if (cardId === card.id) {
+        deleteIndex = index;
+      }
+    })
+
+    cards.splice(deleteIndex, 1);
+    this.setState({
+      cards
+    })
+
+
+    const url = 'https://inspiration-board.herokuapp.com/cards/'
+    axios.delete(url + cardId)
+    .then((response) => {
+      // let deletedCard = response.data.card
+
+      this.setState({
+        errorMessage: `Card Deleted`,
+      })
+    })
+    .catch((error) => {
+      let { errors } = this.state
+      errors.push(error.message)
+
+      this.setState({
+        errors: errors
+      })
+    })
+  }
+
+  addCard = (newCard) => {
+
+    const apiPayload = `text=${newCard.text}&emoji=${newCard.emoji}`
+
+    axios.post(this.props.url+this.props.boardName+'/cards?' + apiPayload)
+    .then((response) => {
+
+      let { cards } = this.state;
+      const newCard = response.data.card;
+
+      cards.push(newCard)
+
+      this.setState({
+        cards: cards,
+        errorMessage: `Card Added`
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: `Failure ${error.message}`
+      });
+    })
   }
 
   render() {
+
     return (
-      <div>
-        Board
-      </div>
+      <section className="board">
+      <section className="errorMessages">
+        {this.state.errors ? `${this.state.errors}` : ""}
+      </section>
+      <section>
+      <NewCardForm addCardCallback={this.addCard}/>
+      </section>
+      {this.displayCards()}
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Card.js

@@ -1,21 +1,33 @@
-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() {
+const Card = (props) => {
+
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{props.text}</p>
+
+          {props.emoji && (
+              <p className="card__content-emoji">
+              {emoji.getUnicode(props.emoji)}
+              </p>)}
+
+          <button onClick={() => props.deleteCardCallback(props.id)} type="button" className="card__delete">X</button>
+        </section>
       </div>
     )
   }
-}
 
-Card.propTypes = {
 
+Card.propTypes = {
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func,
 };
 
 export default Card;

src/components/NewCardForm.css

@@ -4,6 +4,8 @@
   width: 50%;
   margin: auto;
   padding-bottom: 4rem;
+  padding-right: 4rem;
+
 }
 
 .new-card-form__header {

src/components/NewCardForm.js

@@ -1,6 +1,75 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+// 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)
+  }
+
+  onNewCardSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  render() {
+
+    const emojiOptions = EMOJI_LIST.map((emoji, index) => {
+        return <option key={index} value={emoji}>{emoji}</option>
+      })
+
+    return (
+      <form className="" onSubmit={this.onNewCardSubmit}>
+      <header className="form-header">Add Inspiration Card</header>
+
+      <div>
+      <label className="" htmlFor="text">Text</label>
+      </div>
+      <textarea className="" placeholder="Text" name="text" onChange={this.onFormChange} value={this.state.text}></textarea>
+
+      <div>
+      <label className="">Emoji</label>
+      </div>
+      <select name="emoji" onChange={this.onFormChange} className="">
+         {emojiOptions}
+      </select>
+
+      <section>
+        <input className="form-button" type="submit" value="Add Card"/>
+      </section>
+      </form>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

src/components/test/Board.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Board from '../Board';
+import { shallow } from 'enzyme';
+
+
+describe('Board', () => {
+  it('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <Board
+        url="https://inspiration-board.herokuapp.com/boards/"
+        boardName={"maryam"}
+      />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});

src/components/test/Card.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+
+describe('Card', () => {
+  it ('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <Card
+        id={1}
+        text="hello there"
+        emoji="heart_eyes"
+        deleteCardCallback={() => {}}
+      />);
+
+      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', () => {
+  it('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <NewCardForm
+        addCardCallback={() => {}}
+      />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});