Space - Lak and Katie

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.2",
-    "emoji-dictionary": "^1.0.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "emoji-dictionary": "^1.0.10",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/App.js

@@ -10,7 +10,7 @@ const App = () => {
       </header>
       <Board
         url="https://inspiration-board.herokuapp.com/boards/"
-        boardName={`Ada-Lovelace`}
+        boardName={`lak-and-katie`}
       />
     </section>
   );

src/App.test.js

@@ -5,7 +5,7 @@ import App from './App';
 describe('App', () => {
 
   it('renders without crashing', () => {
-    console.log('testing would be nice! :)');
+    console.log('Inspiration Board');
   });
 
 });

src/components/Board.css

@@ -3,6 +3,10 @@
   flex-wrap: wrap;
 }
 
+li {
+  list-style-type: none;
+}
+
 .validation-errors-display {
   text-align: center;
   margin-bottom: 2em;

src/components/Board.js

@@ -1,21 +1,89 @@
-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
 
-const Board = () => {
+
+const Board = (props) => {
+  const [cardData, setCardData] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    //our API call
+    axios.get(props.url + props.boardName + "/cards")
+      .then((response) => {
+
+        const cardDataFromAPI = response.data.map( (card) => {
+              return({text: card.card.text,
+              emoji: card.card.emoji,
+              id: card.card.id,
+              })
+        })
+
+        setCardData(cardDataFromAPI)
+      })
+      .catch((error) =>{
+        setErrorMessage(error.message);
+      })
+  }, []);
+
+  const DELETE_URL = "https://inspiration-board.herokuapp.com/cards/"
+  const deleteCard = (id) =>{
+    const newcardData = cardData.filter((card) =>{
+      return card.id !== id
+    })
+
+    if(newcardData.length < cardData.length){
+      axios.delete(DELETE_URL + id)
+      .then(response =>{
+        setErrorMessage (`Card ${id} deleted`);
+      })
+      .catch ((error) => {
+        setErrorMessage(`Unable to delete card ${id}`);
+      })
+      setCardData(newcardData)
+    }
+  };
+
+  const addCard = (card) => { 
+    axios.post("https://inspiration-board.herokuapp.com/boards/lak-and-katie/cards", card)
+      .then((response) =>{
+        const updatedCardData = [response.data.card, ...cardData];
+        setCardData(updatedCardData);
+        setErrorMessage('');
+      })
+      .catch((error) =>{
+        setErrorMessage(error.message)
+      });
+  }
+
+  const cards = cardData.map( (card, i) => {
+    return (
+      <li key={i}>
+        <Card 
+        text={card.text}
+        emoji={card.emoji}
+        id={card.id}
+        onDeleteCallback = {deleteCard}
+      />
+      </li> 
+    )
+  });
+
   return (
     <div>
-      Board
+      {errorMessage ? <div><h2 className="validation-errors-display">{errorMessage}</h2></div> : ''}
+      <NewCardForm addCardCallback={addCard}/>
+      {cards}
     </div>
+
   )
 };
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import Board from './Board';
+
+describe('BoardTest', () => {
+  test('that it matches the existing snapshot', () => {
+    // Arrange-Act
+    const { asFragment } = render(
+      <Board
+      url="https://inspiration-board.herokuapp.com/boards/"
+      boardName={`lak-and-katie`}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/Card.js

@@ -4,16 +4,25 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-const Card = () => {
+const Card = (props) => {
+
+  const onButtonClick = () => {
+    props.onDeleteCallback(props.id);
+  }
   return (
-    <div className="card">
-      Card
+    <div className="card card__content">
+      <p className="card__content-text">{props.text}</p>
+      <p className="card__content-emoji">{emoji.getUnicode(`${props.emoji}`)}</p>
+      <button className = "card__delete" onClick = {onButtonClick}>Delete</button>
     </div>
   )
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  id: PropTypes.number,
+  onDeleteCallback: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -1,6 +1,68 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 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 NewCardForm = (props) => {
+
+  const [formFields, setFormFields] = useState({
+    text: '',
+    emoji: '',
+  })
+
+  const onInputChange = (event) => {
+    const newFormFields = {...formFields}
+    newFormFields[event.target.name] = event.target.value;
+    setFormFields(newFormFields);
+  };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    props.addCardCallback(formFields);
+
+    setFormFields({
+      text: '',
+      emoji: '',
+    });
+  };
+
+  return(
+    <div className = "new-card-form">
+      <h3 className = "new-card-form__header">Create new form</h3>
+      <form className = "new-card-form__form" onSubmit={onFormSubmit}>
+        <div>
+          <label className = "new-card-form__form-label">Message</label>
+          <input
+            onChange = {onInputChange}
+            className = "new-card-form__form-textarea"
+            name = "text"
+            type = "text"
+            value={formFields.text}
+          />
+        </div>
+        <div> 
+          <label>Emoji</label>
+          <select onChange={onInputChange} name = "emoji" className = "new-card-form__form-select" value={formFields.emoji}>
+            <option value={EMOJI_LIST[0]}>{emoji.getUnicode(`${EMOJI_LIST[0]}`)}</option>
+            <option value={EMOJI_LIST[1]}>{emoji.getUnicode(`${EMOJI_LIST[1]}`)}</option>
+            <option value={EMOJI_LIST[2]}>{emoji.getUnicode(`${EMOJI_LIST[2]}`)}</option>
+            <option value={EMOJI_LIST[3]}>{emoji.getUnicode(`${EMOJI_LIST[3]}`)}</option>
+            <option value={EMOJI_LIST[4]}>{emoji.getUnicode(`${EMOJI_LIST[4]}`)}</option>
+            <option value={EMOJI_LIST[5]}>{emoji.getUnicode(`${EMOJI_LIST[5]}`)}</option>
+            <option value={EMOJI_LIST[6]}>{emoji.getUnicode(`${EMOJI_LIST[6]}`)}</option>
+          </select>
+        </div>
+        <button className = "new-card-form__form-button">Add Card</button>
+      </form>
+    </div>
+  )
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired
+}
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import NewCardForm from './NewCardForm';
+
+describe('NewCardForm', () => {
+  test('that it matches the existing snapshot', () => {
+    // Arrange-Act
+    const { asFragment } = render(
+      <NewCardForm
+      addCardCallback={()=>{}}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

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

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BoardTest that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    <div
+      class="new-card-form"
+    >
+      <h3
+        class="new-card-form__header"
+      >
+        Create new form
+      </h3>
+      <form
+        class="new-card-form__form"
+      >
+        <div>
+          <label
+            class="new-card-form__form-label"
+          >
+            Message
+          </label>
+          <input
+            class="new-card-form__form-textarea"
+            name="text"
+            type="text"
+            value=""
+          />
+        </div>
+        <div>
+          <label>
+            Emoji
+          </label>
+          <select
+            class="new-card-form__form-select"
+            name="emoji"
+          >
+            <option
+              value=""
+            />
+            <option
+              value="heart_eyes"
+            >
+              😍
+            </option>
+            <option
+              value="beer"
+            >
+              🍺
+            </option>
+            <option
+              value="clap"
+            >
+              👏
+            </option>
+            <option
+              value="sparkling_heart"
+            >
+              💖
+            </option>
+            <option
+              value="heart_eyes_cat"
+            >
+              😻
+            </option>
+            <option
+              value="dog"
+            >
+              🐶
+            </option>
+          </select>
+        </div>
+        <button
+          class="new-card-form__form-button"
+        >
+          Add Card
+        </button>
+      </form>
+    </div>
+  </div>
+</DocumentFragment>
+`;