Inspiration Board React App - Emilce - Octos

package.json

@@ -20,7 +20,11 @@
   "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

@@ -1,17 +1,44 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+import Status from './components/Status';
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state= {
+      status: {
+        message: 'Loaded the page',
+        type: 'success'
+      }
+    }
+  }
+
+  updateStatus = (message, type) => {
+    this.setState({
+      status: {
+        message: message,
+        type: type
+      }
+    })
+  }
+
   render() {
     return (
       <section>
+        <Status
+        message={this.state.status.message}
+        type={this.state.status.type}
+        />
+
         <header className="header">
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
-        <Board
+
+        <Board updateStatusCallback={this.updateStatus}
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`Emilce`}
           />
       </section>
     );

src/components/Board.css

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

src/components/Board.js

@@ -7,6 +7,12 @@ import Card from './Card';
 import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
+const BOARDS_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards';
+
+const DELETE_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards/';
+
+const CARD_URL = 'https://inspiration-board.herokuapp.com/boards/Emilce/cards';
+
 class Board extends Component {
   constructor() {
     super();
@@ -16,18 +22,97 @@ class Board extends Component {
     };
   }
 
+  deleteCard = (cardId) => {
+    console.log( "This is card:"+ cardId);
+    console.log(`${DELETE_URL}${cardId}`);
+    axios.delete(`${DELETE_URL}${cardId}`)
+    .then((response) => {
+      console.log(response);
+      for (let i = 0; i < this.state.cards.length; i++) {
+        if (this.state.cards[i].card.id === cardId) {
+          this.state.cards.splice(i, 1);
+          this.setState({cards: this.state.cards});
+
+          console.log(`deleting card ${this.state.cards[i].card.id}`);
+          break;
+        }
+      }
+
+    })
+    .catch((error) => {
+      this.setState({ error: error.message })
+    })
+  }
+
+  addCard = (card) => {
+    console.log("adding card");
+    axios.post(CARD_URL, card)
+      .then((response) => {
+        console.log("THIS IS RESPONSE",response);
+
+        let updatedCards = this.state.cards;
+        updatedCards.push(response.data);
+
+        this.setState({ cards: updatedCards });
+      })
+  }
+
+  componentDidMount() {
+    this.props.updateStatusCallback('Loading cards...', 'success');
+
+    axios.get(BOARDS_URL)
+    .then((response)=> {
+      console.log("getting board data");
+      console.log(response);
+
+      this.props.updateStatusCallback('Successfully loaded cards!', 'success');
+
+      const data = response.data.slice(0,100);
+      this.setState({cards: data})
+    })
+    .catch((error) => {
+      console.log(error);
+      // this.setState({ error: error.message})
+      this.props.updateStatusCallback(error.message, 'error');
+    })
+  }
+
+
   render() {
+    const attrCards = this.state.cards
+    console.log("attr cards: ",  attrCards);
+
+    const cards = attrCards.map((cardInfo, index) => {
+      console.log("inside card mapping");
+      return <Card
+      onDeleteCard={this.deleteCard}
+      key={index}
+      id={cardInfo.card.id}
+      text={cardInfo.card.text} emoji={cardInfo.card.emoji} />
+    });
+
     return (
+
+      <section>
+
       <div>
-        Board
+      <NewCardForm addCardCallback={this.addCard}/>
+      </div>
+
+      <div className="board">
+
+      { cards }
       </div>
+
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  deleteCard: PropTypes.func.isRequired,
+  updateStatusCallback: PropTypes.func.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Board from './Board';
+import { mount, shallow } from 'enzyme';
+
+import NewCardForm from './NewCardForm';
+
+describe('Board', () => {
+  test('shallow mount', () => {
+    const board = shallow(
+      <Board updateStatusCallback={()=>{}} />
+    );
+
+    expect(board).toMatchSnapshot();
+
+    board.unmount();
+  });
+
+  test('render a new card form', () =>{
+    const form = shallow(
+      <NewCardForm />
+    );
+    expect(form).toMatchSnapshot();
+  });
+
+  test('render a new card form', () =>{
+    const form = shallow(
+      <NewCardForm addCardCallback={()=>{}} />
+    );
+
+    expect(form).toMatchSnapshot();
+
+    form.unmount();
+  });
+
+});

src/components/Card.js

@@ -5,17 +5,35 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  deleteOnSubmit = (event) => {
+    // console.log(this.props.id);
+    this.props.onDeleteCard(this.props.id);
+  }
+
   render() {
+    const emojis = this.props.emoji
+
     return (
       <div className="card">
-        Card
+      Card
+
+      {this.props.id}
+      {this.props.text}
+      {emoji.getUnicode(`${emojis}`)}
+
+      <button
+      type="submit"
+      onClick={this.deleteOnSubmit}>Delete</button>
+
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from './Card';
+import { mount, shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('onClick handler working', () => {
+    // const textValue =  'Encouraging message';
+    const onClick = jest.fn();
+    const wrapper = shallow(
+      <button type="submit" onClick={onClick}></button>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+
+      wrapper.find('button').simulate('click');
+  })
+})

src/components/NewCardForm.css

@@ -4,6 +4,7 @@
   width: 50%;
   margin: auto;
   padding-bottom: 4rem;
+  background-color: lightblue;
 }
 
 .new-card-form__header {