kay-inspiration-board

src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
   render() {
     return (
       <section>
@@ -11,9 +12,11 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`Kay`}
           />
       </section>
+
+
     );
   }
 }

src/components/Board.js

@@ -5,29 +5,113 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
+
+let URL = "https://inspiration-board.herokuapp.com/boards/Kay/cards"
 
 class Board extends Component {
   constructor() {
     super();
 
     this.state = {
       cards: [],
+      errorMessage: '',
     };
   }
 
+  removeCard = (cardId) => {
+    console.log("cardid", cardId);
+    let DELETE_URL = `https://inspiration-board.herokuapp.com/cards/${cardId}`
+    axios.delete(DELETE_URL)
+     .then( (response) => {
+       console.log("printing response in delete", response);
+       //is it bad practice to directly itereate thru state.cards?
+       let deleteIndex = 0;
+       const modifiedCards = this.state.cards
+        modifiedCards.forEach((card, index) => {
+          if(cardId === index){
+            deleteIndex = index;
+          }
+        });
+
+        modifiedCards.splice(deleteIndex, 1);
+
+        this.setState({
+          cards: modifiedCards
+        })
+
+     })
+  }
+
+  addCard = (newCard) => {
+    console.log("what is new cards",newCard);
+    axios.post(URL, newCard)
+    .then( (response) => {
+      console.log('API response success!', response);
+      const {cards} = this.state;
+      console.log("printing this.state cards array",this.state);
+      cards.push(newCard);
+      this.setState({
+        cards
+      })
+    })
+    .catch(error => {
+      console.log(error.message);
+      this.setState({
+        errorMessage: error.message
+      });
+    });
+  };
+
+  makeCards = () => {
+    return this.state.cards.map( (card) => {
+      console.log("printing card id from borad",card.id);
+      return <Card key={card.id} id={card.id} text={card.text} emoji={card.emoji} removeCardCallback={this.removeCard}/>
+    });
+  }
+
+//this will get called when we pull in data and adding them to our state (card in state)
+//componentDidMount happens automatically
+//here we want to add some extra things to componentDidMount
+  componentDidMount() {
+    axios.get(this.props.url + this.props.boardName + "/cards")
+    .then((response) => {
+      console.log("logging response from componentDidMount",response);
+      const cards = response.data.map((cardObject) => {
+        const newCard = {
+          ...cardObject.card,
+        };
+        console.log("loggin newCard",newCard.card);
+
+        return newCard;
+      });
+
+      this.setState({
+        cards: cards,
+      });
+    })
+    .catch((error) => {
+      console.log("printing error mesg", error);
+      this.setState({
+        errorMessage: error.message,
+      })
+    });
+  }
+
   render() {
     return (
-      <div>
-        Board
+      <div className="board">
+      <NewCardForm addCardCallback={this.addCard} />
+        {this.makeCards()}
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Board from './Board';
+import {shallow} from 'enzyme' //shallow is deconstructor, going into enzyme and pulling shallow from it
+
+  describe('Board', () => {
+    test('it matches an existing snapshop', () => {
+      //make an instance of card see if it
+      //looks like something it should
+      const wrapper = shallow( <Board
+        url="url string"
+        boardName="boardname"
+  />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Card.css

@@ -42,6 +42,6 @@
 }
 
 .card__delete {
-  align-self: start;
+  align-self: center;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }

src/components/Card.js

@@ -5,17 +5,42 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+
   render() {
+    // console.log('card props here:',this.props);
     return (
       <div className="card">
-        Card
+       <section className="card__content">
+
+        <section className="card__content-text">
+        <h3>{this.props.text}</h3>
+        </section>
+
+        <section className="card__content-emoji">
+        {this.props.emoji &&  <p>{emoji.getUnicode(this.props.emoji) ? emoji.getUnicode(this.props.emoji) : this.props.emoji}</p>}
+        </section>
+
+        <button
+        onClick={()=> this.props.removeCardCallback(this.props.id)}
+        type="button"
+        className="card__delete"
+        aria-label="Close"
+        >
+        <span aria-hidden="true">&times;</span>
+
+</button>
+
+        </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,16 @@
+import React from 'react';
+import Card from './Card';
+import {shallow} from 'enzyme' //shallow is deconstructor, going into enzyme and pulling shallow from it
+
+  describe('Card', () => {
+    test('it matches an existing snapshop', () => {
+      //make an instance of card see if it
+      //looks like something it should
+      const wrapper = shallow( <Card
+        id={1}
+        text="dumpster fire!"
+        emoji="dumpster-fire-emoji"
+  />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/NewCardForm.js

@@ -3,4 +3,76 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
-const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+// const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+console.log(emoji);
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: '',
+      emoji: '',
+    };
+  }
+    resetState = () => {
+      this.setState({
+        text: '',
+        emoji: '',
+    });
+  }
+
+  emojiDropDown = () => {
+    const emojis = [""].concat(emoji.names);
+    return emojis.map((emojiname, i) => {
+      return <option value={emojiname} key={i}> {emoji.getUnicode(emojiname)} </option>;
+    });
+  };
+
+  onFormChange = (event) => {
+  const field = event.target.name;
+  const value = event.target.value;
+
+  const updatedState = {};
+  updatedState[field] = value;
+  this.setState(updatedState);
+}
+
+  onSubmit = (event) => {
+  event.preventDefault();
+
+  if (this.state.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 className="new-card-form__form">
+        <label className="new-card-form--label" htmlFor="Text">Text</label>
+        <input name="text" placeholder="write text here" onChange={this.onFormChange} value={this.state.text} />
+        <label className="new-card-form--label" htmlFor="species">Emoji</label>
+        <select name="emoji" placeholder="" onChange={this.onFormChange} value={this.state.emoji}>
+        {this.emojiDropDown()}
+        </select>
+
+
+      <input className="new-card-form__form-button" type="submit" name="submit" value="Add a Card" />
+      </div>
+    </form>
+  );
+}
+
+} //end of class
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import {shallow} from 'enzyme' //shallow is deconstructor, going into enzyme and pulling shallow from it
+
+  describe('NewCardForm', () => {
+    test('it matches an existing snapshop', () => {
+      // First Mount the Component in the testing DOM
+      // Arrange
+      //goes thru all html that newcardform will render and when it sees a funciton it will recognize a function 
+      const wrapper = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+      // Assert that it looks like the last snapshot
+      expect(wrapper).toMatchSnapshot();
+  });
+});