Time - Corinna + Jessica

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.css

@@ -3,8 +3,13 @@
   box-sizing: border-box;
 }
 
-body {
+.app {
   font-family: 'Raleway', sans-serif;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  margin: 0 auto;
 }
 
 h1, h2 {

src/App.js

@@ -3,15 +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`}
-      />
+      <section className="app">
+        <Board/>
+      </section>
     </section>
   );
 };

src/components/Board.css

@@ -1,5 +1,6 @@
 .board {
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
 }
 
@@ -11,4 +12,4 @@
 .validation-errors-display__list {
   list-style-type: none;
   padding: 0;
-}
+}

src/components/Board.js

@@ -1,21 +1,73 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
 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 BASE_URL = "https://inspiration-board.herokuapp.com/"
+  const BASE_BOARD = "jessica-liang"
+  const [cardList, setCardList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const newCardList = [];
+
+  useEffect(() => {
+    axios.get(BASE_URL + "boards/" + BASE_BOARD + "/cards")
+    .then( (response) => {
+      for (let card of response.data) {
+        newCardList.push(
+        <li key={card.card.id}>
+          <Card
+            key={card.card.id}
+            id={card.card.id}
+            text={card.card.text}
+            emoji={card.card.emoji}
+            deleteCardCallBack ={ deleteCard } 
+          />
+        </li>
+        );
+      };
+      setCardList(newCardList);
+    })
+    .catch((error) => {
+      setErrorMessage(error.message);
+      console.log(error.message);
+    });
+  }, [newCardList]);
+
+  // Delete a card from board.
+  const deleteCard = (props) => {
+    axios.delete(BASE_URL + "cards/" + props)
+      .then((response) => {
+        setErrorMessage(`Card ${ props } deleted`);
+      })
+      .catch((error) => {
+        setErrorMessage(`Unable to delete card ${ props }`);
+      });
+  };
+
+  // Add a card to board.
+  const addCard = (props) => {
+    axios.post(BASE_URL + "boards/" + BASE_BOARD + "/cards", props)
+      .then((response) => {
+        setErrorMessage(`Card ${ props } added`);
+      })
+      .catch((response) => {
+        setErrorMessage(`Unable to add card ${ props }`);
+      });
+  };
+
   return (
-    <div>
-      Board
-    </div>
-  )
-};
-Board.propTypes = {
+    <div className="board">
+      <NewCardForm addCardCallBack={ addCard } />
 
+      <ul className="validation-errors-display validation-errors-display__list">
+        { cardList }
+      </ul>
+    </div>
+  );
 };
 
 export default Board;

src/components/Board.test.js

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

src/components/Card.css

@@ -1,3 +1,7 @@
+* {
+  justify-content: center;
+}
+
 .card {
   background-color: #F4FF81;
 
@@ -8,23 +12,23 @@
   min-width: 225px;
   flex-basis: 18%;
 
-  border-radius: 5px;
+  border-radius: 25px;
 
   display: grid;
   grid-template-columns: 1fr 5fr 1fr;
-  align-items: center;
+  align-content: center;
 }
 
 .card__content {
   grid-column-start: 2;
 
-  display: flex;
-  flex-direction: column;
   justify-content: space-around;
 
   text-align: center;
   font-weight: 100;
   overflow: hidden;
+
+  margin: 10px;
 }
 
 .card__content-text {
@@ -42,6 +46,8 @@
 }
 
 .card__delete {
-  align-self: start;
+  justify-items: center;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  grid-column-start: 2;
+  margin: 10px;
 }

src/components/Card.js

@@ -1,19 +1,34 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+import emojiDictionary from 'emoji-dictionary';
 
 import './Card.css';
 
-const Card = () => {
+const Card = (props) => {
   return (
     <div className="card">
-      Card
+      <div className="card__content">
+        <section className="card__content-text">
+          {props.text}
+        </section>
+        <section className="card__content-emoji">
+          {emojiDictionary.getUnicode(`${props.emoji}`)}
+        </section>
+      </div>
+      <button 
+        className="card__delete"
+        onClick={() => props.deleteCardCallBack(props.id)}>
+          CLICK ME TO DELETE
+      </button>
     </div>
   )
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number.isRequired,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallBack: PropTypes.func.isRequired, 
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,16 @@
+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 />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/NewCardForm.css

@@ -13,15 +13,17 @@
 
 .new-card-form__form {
   font-size: 1.5em;
-  display: grid;
-  grid-template-columns: [labels] auto [controls] 1fr;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   grid-auto-flow: row;
   grid-gap: .8em;
 }
 
 .new-card-form__form-label  {
   grid-column: labels;
   grid-row: auto;
+  align-self: center;
 }
 
 .new-card-form__form-select,
@@ -31,6 +33,9 @@
   font-size: 1.25em;
   grid-column: controls;
   grid-row: auto;
+  margin: 10px;
+  align-self: center;
+  border-radius: 5%;
 }
 
 .new-card-form__form-button {

src/components/NewCardForm.js

@@ -1,6 +1,78 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+import emojiDictionary 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 onFieldChange = (event) => {
+		const updatedFormState = {...formFields};
+
+		updatedFormState[event.target.name] = event.target.value;
+		setFormFields(updatedFormState);
+	};
+
+	const onSubmitHandler = (event) => {
+		event.preventDefault();
+
+		if(formFields.text || formFields.emoji){
+			props.addCardCallBack(formFields)
+		}
+
+		setFormFields({
+			text: '',
+			emoji: ''
+		})
+	};
+
+	const emojiOptions = EMOJI_LIST.map((emoji, i) => <option key={ i } value={ emoji }>{emojiDictionary.getUnicode(emoji) }</option>);
+
+	return (
+		<form className="new-card-form" onSubmit={ onSubmitHandler }>
+					<h1 className="new-card-form__header">Add a Card</h1>
+					<div className="new-card-form__form">
+						<div>
+							<label className="new-card-form__form-label" htmlFor="text">Text: </label>
+							<input
+								className="new-card-form__form-textarea"
+								name="text"
+								id="text"
+								onChange={ onFieldChange }
+								value={ formFields.text }
+							/>
+						</div>
+						<div>
+							<label className="new-card-form__form-label" htmlFor="emoji">Emoji: </label>
+							<select
+								className="new-card-form__form-select"
+								name="emoji"
+								id="emoji"
+								onChange={ onFieldChange }
+								value={(formFields.emoji === '') ? '' : emojiDictionary.getUnicode(`${emojiOptions}`)}>
+								{ emojiOptions }
+							</select> 
+						</div>
+						<input
+							className="new-card-form__form-button"
+							type="submit"
+							name="submit"
+							value="Submit"
+							onClick={ onSubmitHandler }
+						/>
+					</div>
+				</form>
+	)
+}
+
+NewCardForm.propTypes = {
+	addCardCallBack: PropTypes.func.isRequired
+};
+
+export default NewCardForm;