Semret Nicodimos - Inspiration-board - Edges

src/App.css

@@ -33,3 +33,14 @@ h1, h2 {
 
   transform: rotate(-3deg) skew(-3deg);
 }
+
+.board-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.board-contents {
+
+}

src/App.js

@@ -9,10 +9,13 @@ class App extends Component {
         <header className="header">
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
-        <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
-          />
+        <section className="board-container">
+          <Board
+            className="board-contents"
+            url="https://inspiration-board.herokuapp.com/boards/"
+            boardName={`Ada-Lovelace`}
+            />
+        </section>
       </section>
     );
   }

src/components/Board.js

@@ -12,22 +12,90 @@ class Board extends Component {
     super();
 
     this.state = {
-      cards: [],
+      cards: []
     };
   }
+  componentDidMount() {
+    axios.get('https://inspiration-board.herokuapp.com/boards/Semret/cards')
+    .then((response) => {
+      this.setState({
+        cards: response.data
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    })
+  }
+  deleteThisCard = (id) => {
+    console.log("a specific card is being deleted");
+    const updatedCards = this.state.cards
+    console.log(updatedCards.length);
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+    .then((response) => {
+
+      const filteredCards = updatedCards.filter(({card}) => card.id !== id )
+      console.log(filteredCards.length);
+      this.setState({
+        cards: filteredCards
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    })
+  }
+
+  addNewCard = (newCard) => {
+    console.log("adding new card", newCard);
+    const updateCards = [...this.state.cards, newCard]
+
+    axios.post(`https://inspiration-board.herokuapp.com/boards/Semret/cards?text=${newCard.card.text}&emoji=${newCard.card.emoji}`)
+    .then((response) => {
+      this.setState({
+        cards: updateCards
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    })
+  }
 
   render() {
+    const emoji = require("emoji-dictionary");
+
+    const messages = this.state.cards
+
+    const messageCollection = messages.map((message, i) => {
+      return <Card
+        key={i}
+        id={message.card.id}
+        text={message.card.text}
+        emoji={emoji.getUnicode(`${message.card.emoji}`)}
+        deleteCardCallback={this.deleteThisCard}
+        />
+    });
     return (
       <div>
-        Board
+        <section className="form-section">
+          <NewCardForm
+            addNewCardToCollection={this.addNewCard}
+            />
+        </section>
+        <section className="board">
+          {messageCollection}
+        </section>
       </div>
     )
   }
-
 }
 
 Board.propTypes = {
-
+  cards: PropTypes.array,
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Board from './Board';
+import { shallow } from 'enzyme';
+
+
+describe('Board', () => {
+  test('that it matches an existing snapshot for deleting', () => {
+    const wrapper = shallow( <Board deleteThisCard={() => {} } />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('that it matches an existing snapshot for adding', () => {
+    const wrapper = shallow( <Board addNewCard={() => {} } />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Card.css

@@ -11,12 +11,14 @@
   border-radius: 5px;
 
   display: grid;
-  grid-template-columns: 1fr 5fr 1fr;
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-rows: 1fr 2fr 1fr;
   align-items: center;
 }
 
 .card__content {
   grid-column-start: 2;
+  grid-row-start: 2;
 
   display: flex;
   flex-direction: column;
@@ -42,6 +44,9 @@
 }
 
 .card__delete {
-  align-self: start;
+  grid-column-start: 3;
+  grid-row-start: 1;
+  justify-self: end;
+
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }

src/components/Card.js

@@ -5,17 +5,37 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  deleteCardClickHandler = (event) => {
+    console.log("The delete button was clicked");
+
+    this.props.deleteCardCallback(this.props.id);
+  }
   render() {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <div className="card__content-text">
+            {this.props.text}
+          </div>
+          <div className="card__content-emoji">
+            {this.props.emoji}
+          </div>
+        </section>
+          <div className="card__delete">
+            <button
+              onClick={ this.deleteCardClickHandler }>
+              Delete
+            </button>
+          </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string,
 };
 
 export default Card;

src/components/NewCardForm.css

@@ -9,6 +9,7 @@
 .new-card-form__header {
   text-align: center;
   text-transform: uppercase;
+  row-span: all;
 }
 
 .new-card-form__form {
@@ -34,7 +35,14 @@
 }
 
 .new-card-form__form-button {
-  background-color: inherit;
+  background-color: seashell;
   border: 1px solid black;
   font-size: 1em;
 }
+
+.form {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: auto;
+  border: solid 2px red;
+}

src/components/NewCardForm.js

@@ -3,4 +3,89 @@ 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", "umbrella", "tada", "kissing_heart", "muscle", "brain", "sun_with_face", "spades", "gift_heart", "dog2", "trophy", "cocktail"]
+
+
+class NewCardForm extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: "",
+      emoji: "",
+    }
+  }
+  onInputChange = (event) => {
+    console.log("I'm in the onInputChange funtion");
+
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const newState = {};
+    newState[field] = value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newCard = {
+      card: {
+        text: this.state.text,
+        emoji: this.state.emoji,
+      }
+
+    };
+
+    this.setState({
+      text: '',
+      emoji: '',
+    });
+
+    console.log("created a new card from input", newCard);
+    this.props.addNewCardToCollection(newCard);
+  }
+
+  emojiSelection = () => {
+    return  EMOJI_LIST.map((item, i) => {
+      return <option
+        key={i}
+        value={item}>{emoji.getUnicode(item)}</option>
+    });
+  }
+
+  render() {
+    return (
+      <div className="new-card-form">
+        <div className="new-card-form__header">
+          <h2>New card Submission Form</h2>
+        </div>
+        <form className="new-card-form__form"
+          onSubmit={this.onFormSubmit}>
+            <label  htmlFor="text">Your Message</label>
+            <textarea
+              className="new-card-form__form-textarea"
+              name="text"
+              value={this.state.text}
+              onChange={this.onInputChange}/>
+            <label htmlFor="emoji"> Emoji</label>
+            <select
+              className="new-card-form__form-select"
+              name="emoji"
+              value={this.state.emoji}
+              onChange={this.onInputChange}>
+              {this.emojiSelection()}
+            </select>
+            <input
+              type="submit"
+              value="Submit Message"
+              className="new-card-form__form-button"
+              />
+          </form>
+        </div>
+      );
+    }
+  }
+
+  export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { shallow } from 'enzyme';
+
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot for adding', () => {
+
+    const wrapper = shallow( <NewCardForm addNewCardToCollection={() => {} } />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('that it matches an existing snapshot for delete', () => {
+
+    const wrapper = shallow( <NewCardForm deleteCardCallback={() => {} } />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('that it matches an existing snapshot for delete', () => {
+
+    const wrapper = shallow( <NewCardForm deleteCardCallback={() => {} } />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});