Space Suely & Charlotte

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

@@ -3,14 +3,15 @@ import './App.css';
 import Board from './components/Board';
 
 const App = () => {
+
   return (
     <section>
       <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`}
+        url="https://inspiration-board.herokuapp.com/"
+        boardName={`monkey-banana`}
       />
     </section>
   );

src/components/Board.js

@@ -1,21 +1,95 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } 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 [cardsList, setCardsList] = useState([]);
+  // use hook/state for proper error handling
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    axios.get(`${props.url}boards/${props.boardName}/cards`)
+      .then((response) => {
+        const apiCardsList = response.data;
+        setCardsList(apiCardsList);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+
+  }, [props.url, props.boardName]); // added dependencies here to fix console error
+
+  const onDeleteClick = (event) => {
+    const cardId = event.target.name; 
+    axios.delete(`${props.url}cards/${cardId}`)
+      .then((response) => {
+        const deleteResponse = response.data;
+        const updatedCardList = cardsList.filter( // removed the deleted card from the in memory card list
+          card => card.card.id !== deleteResponse.card.id
+        );
+        setCardsList(updatedCardList); // update the state to force the screen to redraw
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+
+  }
+
+  const onFormSubmit = (formText, formEmoji) => { 
+    axios.post(`${props.url}boards/${props.boardName}/cards`, {
+      text: formText,
+      emoji: formEmoji,  
+    })
+      .then((response) => { 
+        const updatedCardList = [response.data, ...cardsList];
+        setCardsList(updatedCardList);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+  }
+
+
+  const createCards = () => {
+
+    return cardsList.map((cardWrapper) => {
+      return (
+        <Card
+        key={cardWrapper.card.id}
+        id={cardWrapper.card.id}
+        text={cardWrapper.card.text}
+        emoji={cardWrapper.card.emoji}
+        onDeleteClick={onDeleteClick}
+        />
+      )
+    });
+
+  };
+
   return (
-    <div>
-      Board
+    // display errors - used provided css
+    <div className="validation-errors-display">
+      {errorMessage && (
+        <div className="validation-errors-display__list">
+          <h2>{errorMessage}</h2>
+        </div>
+      )}
+        {createCards()}
+        <NewCardForm
+        onFormSubmit={onFormSubmit}   
+        />
     </div>
-  )
+  );
 };
-Board.propTypes = {
 
+Board.propTypes = {
+url: PropTypes.string.isRequired,
+boardName: PropTypes.string.isRequired,
 };
 
 export default Board;

src/components/Card.js

@@ -1,19 +1,44 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-const Card = () => {
+const Card = (props) => {
+
+  const getEmoji = () => {
+    if (props.emoji){
+      return emoji.getUnicode(props.emoji);
+    } else {
+      return "";
+    }
+  }
+
   return (
     <div className="card">
-      Card
+      <ul className="card__content">
+        <span className="card__content-text">
+          {props.text}
+        </span>
+        <span className="card__content-emoji">
+        {getEmoji()}
+        </span>
+        <input
+          type="button"
+          name={props.id}
+          onClick={props.onDeleteClick}
+          value="Delete this card"
+          className="card__content-button"/> 
+      </ul>
     </div>
   )
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  onDeleteClick: PropTypes.func.isRequired,
 };
 
 export default Card;

src/components/Card.test.js

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

src/components/NewCardForm.js

@@ -1,6 +1,68 @@
-import React, { Component } from 'react';
+import React, { 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 [formText, setFormText] = useState("");
+  const [formEmoji, setFormEmoji] = useState("");
+
+  const onTextChange = (event) => {
+    setFormText( event.target.value);
+  };
+
+  const onEmojiChange = (event) => {
+    setFormEmoji( event.target.value);
+  };
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    props.onFormSubmit(formText, formEmoji);
+    setFormText("");
+    setFormEmoji(""); 
+
+  };
+
+  return (
+    <div className="new-card-form">
+      <h3 className="new-card-form__header">New Card </h3>
+      <form className="new-card-form__form" >
+
+        <div>
+          <input
+            name="text" 
+            className="new-card-form__form-textarea"
+            onChange={onTextChange}
+            value={formText}
+            placeholder="Enter Text"
+            type="text" />
+          <input
+            name="emoji" 
+            className="new-card-form__form-textarea"
+            onChange={onEmojiChange}
+            value={formEmoji}
+            placeholder="Enter Emoji"
+            type="text" />
+        </div>
+
+        <div>
+          <input
+            type="button"
+            value="Submit Card"
+            className="new-card-form__form-button"
+            onClick={onSubmit} /> 
+        </div>
+
+      </form>
+    </div>
+  );
+}
+
+NewCardForm.propTypes = {
+  onFormSubmit: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,19 @@
+// src/components/test/NewCardForm.test.js
+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
+        onFormSubmit={() => { }}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="card"
+  >
+    <ul
+      class="card__content"
+    >
+      <span
+        class="card__content-text"
+      />
+      <span
+        class="card__content-emoji"
+      />
+      <input
+        class="card__content-button"
+        type="button"
+        value="Delete this card"
+      />
+    </ul>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="new-card-form"
+  >
+    <h3
+      class="new-card-form__header"
+    >
+      New Card 
+    </h3>
+    <form
+      class="new-card-form__form"
+    >
+      <div>
+        <input
+          class="new-card-form__form-textarea"
+          name="text"
+          placeholder="Enter Text"
+          type="text"
+          value=""
+        />
+        <input
+          class="new-card-form__form-textarea"
+          name="emoji"
+          placeholder="Enter Emoji"
+          type="text"
+          value=""
+        />
+      </div>
+      <div>
+        <input
+          class="new-card-form__form-button"
+          type="button"
+          value="Submit Card"
+        />
+      </div>
+    </form>
+  </div>
+</DocumentFragment>
+`;

src/data/card-data.json

@@ -6,15 +6,17 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"
     },
     {
-      "text": "Take a nap"
+      "text": "Take a nap",
+      "emoji": "monkey"
     },
     {
+      "text": "I'm thirsty!",
       "emoji": "beer"
     }
   ]