Wini Irarrazaval - Insparation Board - Octos

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"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "homepage": "http://adagold.github.io/inspiration-board",
+
+  "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
+  }
+
 }

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
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          updateStatusCallback={this.updateStatus}
           />
       </section>
     );

src/components/Board.js

@@ -5,25 +5,159 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
+import ChooseBoardForm from './ChooseBoardForm';
 import CARD_DATA from '../data/card-data.json';
 
+
+
 class Board extends Component {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    //boardName: PropTypes.string.isRequired,
+    updateStatuscallback: PropTypes.func.isRequired
+  }
+
   constructor() {
     super();
 
     this.state = {
+      boards: [],
       cards: [],
+      status: {
+        message: "successfuly loaded",
+        type: "success"
+      },
+      boardName: "dikla"
     };
   }
 
-  render() {
-    return (
-      <div>
-        Board
-      </div>
-    )
+
+  componentDidMount() {
+    const boards_list_url = "https://inspiration-board.herokuapp.com/boards"
+    axios.get(boards_list_url).then((response)=> {
+      const my_boards = response.data.map((board) => {
+        return board.board;
+      })
+
+      this.setState({
+        boards: my_boards,
+      });
+    }
+  )
+}
+
+
+
+getBoardName = (board) => {
+
+  let url_boards = this.props.url;
+  let board_name = board.board;
+
+  console.log(board_name);
+
+  axios.get(`${url_boards}/${board_name}/cards`)
+  .then((response) =>{
+    this.props.updateStatusCallback(`Successfully all cards from ${board_name}!`, 'success');
+    console.log(response);
+    const my_data = response.data.map((card) =>{
+      return {
+        text: card.card.text,
+        emoji: card.card.emoji,
+        id: card.card.id
+      };
+    });
+
+    const my_board = board.board;
+    this.setState({
+      boardName: my_board,
+      cards: my_data
+    });
+    console.log(this.state);
+
+  })
+  .catch((error) => {
+    this.props.updateStatusCallback(error.message, 'error');
+  });
+
+
+
+}
+
+
+deleteFromApi = (id) => {
+  let url_boards = this.props.url;
+  let board_name = this.state.boardName;
+  axios.delete(`${url_boards}/${board_name}/cards/${id}`).then((response) =>{
+    console.log("success");
+    console.log(response);
+    this.props.updateStatusCallback(`Successfully removed card ${id} from ${board_name}´s board!`, 'success')
+    console.log(typeof id);
+
+    let updatedArray = this.state.cards.filter((card)=> {
+      console.log(typeof card.id);
+      return card.id != id});
+      console.log(updatedArray);
+
+      this.setState({cards: updatedArray})
+      console.log(this.state.cards);
+
+    })
+    .catch((error) => {
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+
   }
 
+  addCard = (card) => {
+    let url_boards = this.props.url
+    let board_name = this.state.boardName;
+    let updatedCards = this.state.cards;
+    console.log(`${url_boards}${board_name}/cards`);
+    axios.post(`${url_boards}${board_name}/cards`, card).then((response) =>{
+      console.log(response.data.card.id);
+
+      this.props.updateStatusCallback(`Successfully added a new card to ${board_name}´s board!`, 'success')
+
+      card.id = response.data.card.id
+      updatedCards.push(card);
+      console.log(card);
+
+      this.setState({cards: updatedCards});
+      console.log(this.state.cards);
+    })
+    .catch((error) => {
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+  }
+
+
+  render() {
+    const cards = this.state.cards.map((card, index) => {
+      return <Card key={index}
+      text = {card.text}
+      emoji = {card.emoji}
+      id = {card.id}
+      deleteFromApiCallback = {this.deleteFromApi}
+      />
+    }
+  )
+
+const all_boards = this.state.boards.map((board) => {
+  return board.name});
+
+
+
+  return (
+    <main>
+    <ChooseBoardForm getBoardNameCallback={this.getBoardName} boards={all_boards} />
+    <NewCardForm addCardCallback={this.addCard}/>
+    <div className="board">
+    {cards}
+    </div>
+    </main>
+  )
+}
+
 }
 
 Board.propTypes = {

src/components/Board.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Board from './Board';
+import { mount, shallow } from 'enzyme';
+
+describe('Board', () => {
+  test('deep mount', () => {
+    const board = mount(
+      <Board updateStatusCallback={()=>{}} />
+    );
+
+    expect(board).toMatchSnapshot();
+
+    board.unmount();
+  });
+
+  test('shallow mount', () => {
+    const board = shallow(
+      <Board updateStatusCallback={()=>{}} />
+    );
+
+    expect(board).toMatchSnapshot();
+
+
+  });
+});

src/components/Card.js

@@ -5,17 +5,36 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+static propTypes = {
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string,
+  id: PropTypes.number.isRequired,
+  deleteFromApiCallback: PropTypes.func
+}
+
+onClickRemoveCard = (event) => {
+console.log(event.target.name);
+this.props.deleteFromApiCallback(event.target.name)
+}
+
   render() {
+    let my_emoji = this.props.emoji
+    if (my_emoji === null) {
+      my_emoji = "";
+    }
+
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{this.props.text}</p>
+          <p className="card__content-emoji">{emoji.getUnicode(my_emoji)}</p>
+          <button className="card__delete" name={this.props.id} onClick={this.onClickRemoveCard}>Delete</button>
+        </section>
       </div>
     )
   }
 }
 
-Card.propTypes = {
-
-};
 
 export default Card;