Space - Diana and Hala

package.json

@@ -2,12 +2,15 @@
   "name": "inspiration-board",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://dnguye3.github.io/inspiration-board/",
   "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"
@@ -16,6 +19,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "predeploy": "npm-run-build",
+    "deploy": "gh-pages -d build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,16 +1,19 @@
-import React from 'react';
-import './App.css';
-import Board from './components/Board';
+import React from "react";
+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>
+        <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/boards/Hala&Diana/cards"
+        boardName={`Hala&Diana`}
       />
     </section>
   );

src/components/Board.css

@@ -1,6 +1,11 @@
 .board {
   display: flex;
   flex-wrap: wrap;
+  /* centers board */
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+  justify-content: center;
 }
 
 .validation-errors-display {

src/components/Board.js

@@ -1,21 +1,78 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
+import React, { 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';
+import "./Board.css";
+import Card from "./Card";
+import NewCardForm from "./NewCardForm";
+
+const Board = ({ url }) => {
+  const [cardList, setCardList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const loadCards = () => {
+    axios
+      .get(url)
+      .then((response) => {
+        const apiCardList = response.data;
+        let cardCollection = apiCardList.map((item) => {
+          return (
+            <Card
+              key={item.card.id}
+              id={item.card.id}
+              text={item.card.text}
+              emoji={item.card.emoji}
+              deleteCardCallback={deleteCard}
+            />
+          );
+        });
+        setCardList(cardCollection);
+      })
+      .catch((error) => {
+        const errorMessage = error.message;
+        setErrorMessage(errorMessage);
+        console.log(errorMessage);
+      });
+  };
+
+  useEffect(() => {loadCards();}, []);
+
+  const deleteCard = (id) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+      .then((response) => {
+        loadCards();
+      })
+      .catch((error) => {
+        setErrorMessage(`Unable to delete card ${id}`);
+      });
+    // }
+  };
+
+  const postCard = (cardObject) => {
+    axios
+      .post(
+        `https://inspiration-board.herokuapp.com/boards/Hala&Diana/cards`,
+        cardObject)
+      .then((response) => {
+        loadCards();
+      })
+      .catch((error) => {
+        setErrorMessage(`Unable to post card`);
+      });
+  };
 
-const Board = () => {
   return (
-    <div>
-      Board
-    </div>
-  )
+      <div><NewCardForm addCardCallback={postCard} />
+      <div className="board">
+        {cardList}  
+      </div>
+      </div>
+
+  );
 };
-Board.propTypes = {
 
+Board.propTypes = {
+  url: PropTypes.string
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import Board from './Board';
+import NewCardForm from './NewCardForm';
+
+describe ('Board', () => {
+  // test('renders one card of off the Board', () => {
+  //     const { getByText } = render(<Card />);
+  //     const linkElement = getByText(/nap/i);
+  //     expect(linkElement).toBeInTheDocument();
+  // });
+
+  test('will render the NewCardForm properly', () => {
+    // Arrange-Act
+    const { asFragment } = render(
+      <NewCardForm
+        addCardCallback={() => { }}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+  });
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/Card.css

@@ -1,5 +1,24 @@
+.card__color-red {
+  background-color: #E75335;
+}
+
+.card__color-yellow {
+  background-color: #FFD81B;
+}
+
+.card__color-green {
+  background-color: #DCDA47;
+}
+
+.card__color-blue {
+  background-color: #7CA5D1;
+}
+
+.card__color-pink {
+  background-color: #DB73A4;
+}
+
 .card {
-  background-color: #F4FF81;
 
   padding: 1em 0;
   margin: 0.5rem;
@@ -8,15 +27,14 @@
   min-width: 225px;
   flex-basis: 18%;
 
-  border-radius: 5px;
-
   display: grid;
   grid-template-columns: 1fr 5fr 1fr;
   align-items: center;
 }
 
 .card__content {
   grid-column-start: 2;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
 
   display: flex;
   flex-direction: column;
@@ -44,4 +62,109 @@
 .card__delete {
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  background-color: black;
+  border: 1px solid black;
+  color: white;
+}
+
+.card__delete:hover {
+  background-color: white;
+  border: 1px solid white;
+  color: black;
+}
+
+
+/* input text styling */
+/* source: https://codepen.io/chrisoncode/pen/IdGKH */
+/* form starting stylings ------------------------------- */
+.group 			  { 
+  position:relative; 
+  margin-bottom:45px; 
+}
+input 				{
+  font-size:18px;
+  padding:10px 10px 10px 5px;
+  display:block;
+  width:300px;
+  border:none;
+  border-bottom:1px solid #333;
+}
+input:focus 		{ outline:none; }
+
+/* LABEL ======================================= */
+label 				 {
+  color:#999; 
+  font-size:18px;
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left:5px;
+  top:10px;
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+
+/* active state */
+input:focus ~ label, input:valid ~ label 		{
+  top:-20px;
+  font-size:14px;
+  color:#5264AE;
+}
+
+/* BOTTOM BARS ================================= */
+.bar 	{ position:relative; display:block; width:300px; }
+.bar:before, .bar:after 	{
+  content:'';
+  height:2px; 
+  width:0;
+  bottom:1px; 
+  position:absolute;
+  background:#5264AE; 
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+.bar:before {
+  left:50%;
+}
+.bar:after {
+  right:50%; 
+}
+
+/* active state */
+input:focus ~ .bar:before, input:focus ~ .bar:after {
+  width:50%;
+}
+
+/* HIGHLIGHTER ================================== */
+.highlight {
+  position:absolute;
+  height:60%; 
+  width:100px; 
+  top:25%; 
+  left:0;
+  pointer-events:none;
+  opacity:0.5;
+}
+
+/* active state */
+input:focus ~ .highlight {
+  -webkit-animation:inputHighlighter 0.3s ease;
+  -moz-animation:inputHighlighter 0.3s ease;
+  animation:inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+@-webkit-keyframes inputHighlighter {
+	from { background:#ffff88; }
+  to 	{ width:0; background:transparent; }
+}
+@-moz-keyframes inputHighlighter {
+	from { background:#ffff88; }
+  to 	{ width:0; background:transparent; }
 }
+@keyframes inputHighlighter {
+	from { background:#ffff88; }
+  to 	{ width:0; background:transparent; }
+}