Michelle - Edges - Inspiration Board

package.json

@@ -27,6 +27,10 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+  "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   }
 }

src/App.js

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

src/App.test.js

@@ -8,6 +8,7 @@ describe('App', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<App />, div);
+    // console.log(div.innerHTML);
     ReactDOM.unmountComponentAtNode(div);
   });
 

src/components/Board.js

@@ -8,26 +8,123 @@ import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+
+    this.emojiLibrary = require('emoji-dictionary');
+
 
     this.state = {
       cards: [],
     };
   }
 
+  emojify = (emojiTextName) => {
+    let validEmojiCheck = this.emojiLibrary.names.includes(emojiTextName)
+    return validEmojiCheck ? this.emojiLibrary.getUnicode(emojiTextName) : emojiTextName
+  }
+
+  componentDidMount() {
+    const GET_CARDS_URL = 'https://inspiration-board.herokuapp.com/boards/mightymichelle/cards';
+
+    axios.get(GET_CARDS_URL)
+    .then((response) => {
+      this.setState({
+        cards: response.data
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+    //
+    //
+    //
+    // this.setState({
+    //   cards: fetchCardData()
+    // });
+  }
+
+deleteCard = (cardID) => {
+  axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardID}`)
+     .then((response) => {
+       let card = this.state.cards.find((card) => card.id === response.data.card.id);
+       let updatedCardCollection = this.state.cards.filter(element => element !== card);
+
+       this.setState({cards: updatedCardCollection});
+     })
+     .catch((error) => {
+       console.log(error.message);
+     })
+}
+
+
+  // addCard = (newCard) => {
+  //   const cards = this.state.cards;
+  //
+  //   cards.push(newCard)
+  //   this.setState({cards: cards})
+  // }
+
+  // collectCards = () => {
+  //   const cardsToAdd =
+  //
+  //   cardsToAdd.forEach((card) => {
+  //     let cards = this.state.cards;
+  //
+  //     cards.push(card);
+  //   });
+  //   this.setState({cards: cardsToAdd})
+  //
+  // }
+
+
+
+
   render() {
+    let cards = this.state.cards
+
+    let cardCollection = cards.map((card) => {
+
+      // console.log(cards[i])
+
+      // console.log(card.card.id)
+
+
+      let formattedCard = {
+        // key: i,
+        id: card.card.id,
+        text: card.card.text,
+        emoji: this.emojify(card.card.emoji),
+        deleteCardCB: this.deleteCard
+        }
+
+      console.log(formattedCard)
+
+      return <Card card={formattedCard}
+                  />
+
+
+    });
+
+
     return (
       <div>
-        Board
-      </div>
-    )
-  }
-
+        {cardCollection}
+        </div>
+      )
+    }
 }
 
-Board.propTypes = {
+// const fetchCardData = () => {
+//   return [{text: 'u go grl', emoji: 'heart_eyes'},
+//   {text: 'you can do itttt', emoji: 'grinning'}]
+// }
+
 
-};
+  // Board.propTypes = {
+  //
+  // };
 
-export default Board;
+  export default Board;

src/components/Card.js

@@ -5,17 +5,37 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  constructor(props) {
+    super(props);
+  };
+
+
+  onDeleteHander = (event) => {
+    console.log(this.props.card.id)
+
+    // event.preventDefault();
+    this.props.card.deleteCardCB(this.props.card.id)
+  }
+
   render() {
+
+    let id = this.props.card.id;
+    let text = this.props.card.text;
+    let emoji = this.props.card.emoji;
+
+
     return (
-      <div className="card">
-        Card
+      <div className="card" key={id}>
+        <p >Text: "{text}"</p>
+        <p>Emoji: {emoji}</p>
+        <button onClick={this.onDeleteHander}>Delete</button>
       </div>
     )
   }
 }
-
-Card.propTypes = {
-
-};
+//
+// Card.propTypes = {
+//
+// };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,13 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+const NewCardForm = (props) => {
+  return(
+    <div>
+      hi
+    </div>
+  )
+}
+
+export default NewCardForm;

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/>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card will match the Card Snapshot 1`] = `
+<div
+  className="card"
+  key="1"
+>
+  <p>
+    Text: "
+    testing is fun!
+    "
+  </p>
+  <p>
+    Emoji: 
+  </p>
+</div>
+`;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm will match the NewCardForm snapshot 1`] = `
+<div>
+  hi
+</div>
+`;

src/components/test/card.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+
+describe('card', () => {
+  it('will match the Card Snapshot', () => {
+    const cardTester = {
+      id: 1,
+      text: 'testing is fun!'
+    }
+    const wrapper = shallow(
+      <Card card={cardTester}/>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  })
+});

src/setupTests.js

@@ -1,4 +1,4 @@
-import Enzyme from 'enzyme';
+import {configure} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter() });