Ports - Shamira

src/App.js

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

src/components/Board.js

@@ -13,21 +13,105 @@ class Board extends Component {
 
     this.state = {
       cards: [],
+      errorMessage: null,
+
     };
   }
+
+  componentDidMount() {
+    const myURL = this.props.url + this.props.boardName + "/cards"; 
+    axios.get(myURL)
+      .then((response) => {
+        console.log(response.data);
+        const cards = response.data.map((info) => {
+          const newCard = {
+            text: info.text, 
+            emoji: info.emoji, 
+            id: info.id
+          }
+          return newCard;
+        })
+        this.setState({
+          cards
+        });
+      })
+      .catch((error) => {
+        this.setState({ errorMessage: error.message })
+      });
+  }
+
+  onDeleteCard =(id) => {
+    const myURL = this.props.url + this.props.boardName + "/cards"; 
+    const updatedCards = this.state.cards.filter(card => card.id !== id);
+
+    this.setState({
+      cards: updatedCards
+    })
+
+    axios.delete(myURL/`${id}`)
+    .then((response) => {
+      console.log('Card deleted id:', response.data.card.id)
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: error.message
+      })
+    })
+
+
+  }
+  //from Ada Pets
+  addCardCallback = (card) => {
+    const myURL = this.props.url + this.props.boardName + "/cards"; 
+
+    axios.post(myURL, card)
+      .then((response) => {
+        const info = response.data["card"]
+        let updatedCard = this.state.cards;
+        updatedCard.push({
+          id: info.id, 
+          text: card.text, 
+          emoji: card.emoji
+        });
+        this.setState({cards: updatedCard});
+      })
+      .catch((error) => {
+        this.setState({ errorMessage: error.message })
+    });
+  }
+
 
   render() {
+    const displayCards = this.state.cards.map((card, i) => {
+      return (<Card
+                key={i}
+                id={card.id}
+                text={card.text}
+                emoji={card.emoji} 
+                onDeleteCardCallback={this.onDeleteCard}
+              />)
+    })
+
+    const errors = this.state.error;
     return (
-      <div>
-        Board
-      </div>
+      <section>
+        <div className="validation-errors-display">
+          {errors ? errors : this.state.message}
+        </div>
+        <div className="board">
+          <NewCardForm addCardCallback={this.addCardCallback} />
+          {displayCards}
+        </div>
+      </section>
+
     )
   }
 
 }
 
 Board.propTypes = {
-
+  boardName: PropTypes.string,
+  myUrl: PropTypes.string.isRequired,
 };
 
 export default Board;

src/components/Card.js

@@ -3,18 +3,36 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
+import Axios from 'axios';
 
 class Card extends Component {
+
   render() {
+    const id = this.props.id
+    const emojis = (this.props.emoji) ? this.props.emoji : ""
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <div className="card__content-text">
+            {this.props.text}
+          </div>
+          <div className="card__content-emoji">
+            {emoji.getUnicode(emojis)}
+          </div>
+          <div>
+            <button onClick={() => this.props.onDeleteCardCallback(id)}
+            className="card__delete"> Delete Card </button> 
+          </div>
+        </section>
       </div>
     )
   }
 }
 
 Card.propTypes = {
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
 
 };
 

src/components/NewCardForm.js

@@ -4,3 +4,72 @@ 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: "",
+      emoi: "",
+    }
+  }
+
+  onCardChange = (event) => {
+    const updateCardState = {};
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    updateCardState[field] = value;
+    this.setState(updateCardState);
+  }
+
+  addCardSubmit = (event) => {
+    event.preventDefault();
+    const addCard = {
+      text: this.state.text, 
+      emoji: this.state.emoji,
+    }
+    this.props.addCardCallback(addCard)
+
+    this.clearForm()
+  }
+
+ clearForm = () => {
+   this.setState({
+     text: "",
+     emoji: "",
+   })
+ }
+
+  render() {
+    return (
+      <section>
+        <div className="new-card-form">
+          <div className="new-card-form__header">
+            What Inspires You?
+          </div>
+          <form className="new-card-form__form" onSubmit={this.addCardSubmit}>
+
+            <div>
+              <textarea name="text" value={this.state.text}
+              type="text"
+              className="new-card-form__form-textarea"
+              onChange={this.onCardChange}  
+              />
+            </div>
+
+            <div>
+              <input type="submit" value="Submit Inspiration!" 
+              className="new-card-form__form-button" />
+            </div>
+          </form>
+        </div>
+
+      </section>
+    )
+  }
+};
+
+export default NewCardForm;