Ports - Laneia

src/App.js

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

src/App.test.js

@@ -10,5 +10,9 @@ describe('App', () => {
     ReactDOM.render(<App />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
-
 });
+
+it('matches the snapshot', ()=>{
+  const wrapper = shallow(<App />);
+  expect(wrapper).toMatchSnapshot();
+});

src/__snapshots__/App.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches the snapshot 1`] = `ShallowWrapper {}`;

src/components/Board.js

@@ -14,20 +14,108 @@ class Board extends Component {
     this.state = {
       cards: [],
     };
-  }
+  };
+
+  componentDidMount(){
+     axios.get(`${this.props.url}${this.props.boardName}`+"/cards")
+     .then((response)=>{
+       const cards = response.data.map((cardObj)=>{
+         const newCard = {
+           ...cardObj.card,
+         };
+         return newCard;
+       });
+       this.setState({
+         cards:cards,
+       });
+     })
+     .catch((error)=>{
+       this.setState({
+         errorMessage: error.message,
+       });
+     });
+  };
+
+  deleteCard = (cardId) => {
+    axios.delete("https://inspiration-board.herokuapp.com/cards/"+`${cardId}`)
+    .then(response =>{
+      const cardList =[...this.state.cards];
+      let deleteIndex = undefined;
+
+       cardList.forEach((card, index) => {
+        if (cardId === card.id) {
+          deleteIndex = index;
+        }
+      });
+
+       cardList.splice(deleteIndex, 1);
+
+       this.setState({
+        cards: cardList,
+
+       });
+    }).catch(error => {
+      console.log(error.message);
+      this.setState({
+        errorMessage: error.message
+      });
+    });
+   };
+
+  addCard = (newCard) => {
+    console.log("add card method");
+    const url = 'https://inspiration-board.herokuapp.com/boards/laneia/cards';
+    axios.post(url, newCard)
+    .then((response)=>{
+      console.log("added");
+      const {cards} =this.state;
+
+       cards.push(newCard);
+
+       this.setState({
+        cards: cards,
+
+       });
+    })
+    .catch((error)=>{
+      this.setState({
+        errorMessage:`Failure ${error.message}`,
+      })
+      console.log(error)
+    });
+
+   };
 
   render() {
+    const cardList = this.state.cards.map((card)=>{
+      return <Card
+        key={card.id}
+        id={card.id}
+        text={card.text}
+        emoji={card.emoji}
+        deleteCardCallback={this.deleteCard}
+      />
+    });
+
     return (
       <div>
-        Board
+        <section>
+          {this.state.errorMessage}
+        </section>
+        <section className="board">
+               <span className="card">
+                 <NewCardForm addCardCallback={this.addCard}/>
+               </span>
+             {cardList}
+        </section>
       </div>
-    )
+    );
   }
-
-}
+};
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired,
 };
 
 export default Board;

src/components/Card.js

@@ -8,14 +8,30 @@ class Card extends Component {
   render() {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{this.props.text}</p>
+          {this.props.emoji && (
+           <p className="card__content-emoji"> {emoji.getUnicode(this.props.emoji) ? emoji.getUnicode(this.props.emoji) : this.props.emoji}</p>
+          )}
+          <button
+           onClick={() => this.props.deleteCardCallback(this.props.id)}
+           type="button"
+           className="card__content-delete-btn"
+           aria-label="Close"
+         >
+         Delete
+         </button>
+        </section>
       </div>
-    )
+    );
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string.isRequired,
+  emoji1: PropTypes.string,
+  id: PropTypes.number,
+  deleteCardCallback: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,66 @@ 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);
+  }
+
+   onSubmit = (event) => {
+    console.log(event);
+    event.preventDefault();
+    const {text, emoji} = this.state;
+
+     if (text === '') return;
+
+     console.log(event);
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+   render() {
+    return (
+      <form onSubmit={this.onSubmit} name="new-card-form" id="new-card-form" className="new-card-form">
+        <div>
+          <label className="new-card-form__form-label" htmlFor="text">Text</label>
+          <input name="text" onChange={this.onFormChange} value={this.state.text} />
+        </div>
+        <div>
+          <label className="new-card-form__form-label " htmlFor="emoji">Emoji</label>
+          <input name="emoji"  onChange={this.onFormChange} value={this.state.emoji} />
+        </div>
+
+         <input className="new-card-form__form-button " type="submit" name="submit" value="Add a Card" />
+      </form>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

src/components/test/Board.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Board from '../Board';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow( <Board deleteButtonCallback={() => {}  } url="" boardName=""/>);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import {shallow} from 'enzyme';
+
+
+describe('newcardform',()=>{
+  it('will match the newcardform Snapshot', ()=>{
+    const wrapper = shallow(<NewCardForm
+      addCardCallback={()=>{}}
+
+       />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/__snapshots__/Board.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `ShallowWrapper {}`;

src/components/test/__snapshots__/NewCardForm.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`newcardform will match the newcardform Snapshot 1`] = `ShallowWrapper {}`;

src/data/card-data.json

@@ -6,7 +6,7 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"