Selam - Ampers

src/App.js

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

src/App.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
 import App from './App';
 
 describe('App', () => {

src/components/Board.js

@@ -10,24 +10,95 @@ import CARD_DATA from '../data/card-data.json';
 class Board extends Component {
   constructor() {
     super();
-
     this.state = {
       cards: [],
     };
   }
 
+  addCard = (aCard) => {
+    const cards = this.state.cards;
+    axios.post('https://inspiration-board.herokuapp.com/boards/sainalem/cards',aCard)
+    .then((response) => {
+        cards.push(response.data)
+        this.setState({
+          cards,
+          message: 'New card has been added'
+        });
+    })
+    .catch((error) => {
+      console.log(error)
+      this.setState({
+        message:error.message,
+      });
+    });
+
+  }
+
+  deleteMessage = (messageID) => {
+    console.log(this.state.cards)
+      axios.delete(`https://inspiration-board.herokuapp.com/boards/sainalem/cards/${messageID}`)
+        .then(() => {
+          let counter = 0
+            this.state.cards.forEach((aCard) => {
+              if (aCard.card.id === messageID){
+                this.state.cards.splice(counter,1)
+                    this.setState({
+                      cards:this.state.cards
+                    })
+                }
+            counter = counter + 1;
+            });
+        })
+        .catch((error) => {
+          console.log(messageID)
+            this.setState({
+              error: error.message
+            })
+        });
+  }
+  componentDidMount = () => {
+    console.log('Component did mount');
+    axios.get('https://inspiration-board.herokuapp.com/boards/sainalem/cards')
+      .then((response) => {
+        this.setState({
+          cards:response.data
+        })
+      })
+      .catch((error) => {
+        this.setState({
+          error: error.message
+        })
+      });
+  }
+
+  renderCommentList = () => {
+  const componentList = this.state.cards.map((card,index) => {
+
+    return (
+      <Card
+          key={index}
+          text={card.card.text}
+          emoji={card.card.emoji}
+          deleteCard={this.deleteMessage}
+          id={card.card.id}
+        />
+    );
+  });
+
+  return componentList
+}
+
   render() {
     return (
-      <div>
-        Board
+      <div className="board">
+        <h3 className="warning">{this.state.error}</h3>
+        <NewCardForm addCardcallBack={this.addCard}/>
+        {this.renderCommentList()}
       </div>
     )
   }
 
 }
 
-Board.propTypes = {
-
-};
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Board from './Board';
+import { mount , shallow} from 'enzyme';
+
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+
+    const wrapper = mount(   <Board
+        url="https://inspiration-board.herokuapp.com/boards/"
+        boardName={`Ada-Lovelace`}
+        />)
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+  test('shallow mount', ()=> {
+    const cards = shallow(
+      <Board
+         url="https://inspiration-board.herokuapp.com/boards/"
+         boardName={`Ada-Lovelace`}
+         />
+    );
+    expect(cards).toMatchSnapshot();
+  })
+
+});

src/components/Card.js

@@ -2,20 +2,38 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
+
 import './Card.css';
 
+function convertToemoji(anEmoji){
+  if (anEmoji != null){
+   return emoji.getUnicode(anEmoji)
+  }
+}
+
+
 class Card extends Component {
+   findID = () => {
+     this.props.deleteCard(this.props.id)
+  }
+
   render() {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+        <button className="card__delete" onClick={this.findID}>x</button>
+        <p className="card__content-text">{this.props.text}</p>
+        <p className="card__content-emoji">{convertToemoji(this.props.emoji)}</p>
+        </section>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text:PropTypes.string.isRequired,
+  emoji:PropTypes.string,
+  id:PropTypes.number,
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Card from './Card';
+import { mount , shallow} from 'enzyme';
+
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+
+    const wrapper = mount( <Card
+          text = {"hey, friend"}
+          emoji = {"heart_eyes"}
+          deleteCard ={() => {} }
+          id={1}
+        />)
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+  test('shallow mount', ()=> {
+    const aCard = shallow(
+          <Card
+          text = {"hey, friend"}
+          emoji = {"heart_eyes"}
+          deleteCard ={() => {} }
+          id={1}
+          />
+    );
+    expect(aCard).toMatchSnapshot();
+  })
+
+});

src/components/NewCardForm.js

@@ -1,6 +1,78 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Card from './Card.js'
 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: ''
+    };
+  }
+
+populateDropdown = () =>{
+    const popItems = EMOJI_LIST.map((anEmoji) =>{
+      return(
+      <option key={anEmoji} value={anEmoji}>{emoji.getUnicode(anEmoji)}</option>
+      )
+    })
+    return popItems
+  }
+
+  onFieldChange = (event) =>{
+      const fieldName = event.target.name;
+      const fieldValue = event.target.value;
+      const updateState = {};
+      updateState[fieldName] = fieldValue;
+      this.setState(updateState);
+  }
+
+  clearForm = () => {
+  this.setState({
+    text: '',
+    emoji: '',
+  });
+}
+
+
+onFormSubmit = (event) => {
+  event.preventDefault();
+  this.props.addCardcallBack(this.state)
+  this.clearForm();
+}
+
+
+  render(){
+    return(
+      <form className="new-card-form"  onSubmit={this.onFormSubmit}>
+        <div className ="new-card-form__form">
+          <label className="new-card-form__form-label" htmlFor="text">Text: </label>
+          <input className="new-card-form__form-textarea"
+            name="text"
+            value={this.state.text}
+            onChange={this.onFieldChange}
+            type="text"
+                        />
+        </div>
+        <div className="new-card-form__form">
+        <select name="emoji" value={this.state.emoji} onChange={this.onFieldChange}>
+          {this.populateDropdown()}
+        </select>
+        </div>
+          <input type="submit" value="Add Message" />
+      </form>
+    )
+  }
+
+}
+
+NewCardForm.propTypes = {
+  addCardcallBack: PropTypes.func.isRequired,
+}
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { mount} from 'enzyme';
+
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <NewCardForm addCardcallBack={() => {} } />);
+
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+
+});