sockets -MAria

package.json

@@ -26,6 +26,12 @@
   "devDependencies": {
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
 }

src/App.js

@@ -11,7 +11,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`marias`}
           />
       </section>
     );

src/App.test.js

@@ -1,14 +1,25 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import { mount, shallow } from "enzyme";
+import App from "./App";
 
-describe('App', () => {
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
 
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    ReactDOM.unmountComponentAtNode(div);
+describe("<App />", () => {
+  test("that it renders App with shallow rendering", () => {
+    const wrapper = shallow(<App />);
+    expect(wrapper).toMatchSnapshot();
   });
 
+  test("will match the last snapshot with deep rendering", () => {
+    const wrapper = mount(<App />);
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
 });

src/__snapshots__/App.test.js.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> that it renders App with shallow rendering 1`] = `
+<section>
+  <header
+    className="header"
+  >
+    <h1
+      className="header__h1"
+    >
+      <span
+        className="header__text"
+      >
+        Inspiration Board
+      </span>
+    </h1>
+  </header>
+  <Board
+    boardName="marias"
+    url="https://inspiration-board.herokuapp.com/boards/"
+  />
+</section>
+`;
+
+exports[`<App /> will match the last snapshot with deep rendering 1`] = `
+<App>
+  <section>
+    <header
+      className="header"
+    >
+      <h1
+        className="header__h1"
+      >
+        <span
+          className="header__text"
+        >
+          Inspiration Board
+        </span>
+      </h1>
+    </header>
+    <Board
+      boardName="marias"
+      url="https://inspiration-board.herokuapp.com/boards/"
+    >
+      <section>
+        <div />
+        <div>
+          <NewCardForm
+            addCardCallback={[Function]}
+          >
+            <section
+              className="new-card-form"
+            >
+              <form
+                className="new-card-form__form"
+                onSubmit={[Function]}
+              >
+                <h3
+                  className="new-card-form__header"
+                >
+                  Add a Card
+                </h3>
+                <label
+                  className="new-card-form__form-label"
+                >
+                  Text:
+                  <input
+                    className="new-card-form__form-textarea"
+                    name="text"
+                    onChange={[Function]}
+                    type="text"
+                    value=""
+                  />
+                </label>
+                <label
+                  className="new-card-form__form-label"
+                >
+                  Emoji:
+                  <select
+                    className="new-card-form__form-select"
+                    name="cardEmoji"
+                    onChange={[Function]}
+                  >
+                    <option
+                      value=""
+                    >
+                      Select an Emoji
+                    </option>
+                    <option
+                      key="0"
+                      value=""
+                    />
+                    <option
+                      key="1"
+                      value="heart_eyes"
+                    >
+                      😍
+                    </option>
+                    <option
+                      key="2"
+                      value="beer"
+                    >
+                      🍺
+                    </option>
+                    <option
+                      key="3"
+                      value="clap"
+                    >
+                      👏
+                    </option>
+                    <option
+                      key="4"
+                      value="sparkling_heart"
+                    >
+                      💖
+                    </option>
+                    <option
+                      key="5"
+                      value="heart_eyes_cat"
+                    >
+                      😻
+                    </option>
+                    <option
+                      key="6"
+                      value="dog"
+                    >
+                      🐶
+                    </option>
+                  </select>
+                </label>
+                <input
+                  className="new-card-form__form-button"
+                  name="submit"
+                  type="submit"
+                  value="Add a Card"
+                />
+              </form>
+            </section>
+          </NewCardForm>
+        </div>
+        <div
+          className="board"
+        />
+      </section>
+    </Board>
+  </section>
+</App>
+`;

src/components/Board.js

@@ -1,33 +1,114 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
+import React, { Component } 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";
+//import CARD_DATA from "../data/card-data.json";
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
+      errorMessage: null
+      // cards: CARD_DATA.cards,
     };
   }
 
+  componentDidMount() {
+    axios.get(`${this.props.url}/${this.props.boardName}/cards`)
+      .then((response) => {
+        this.setState({ cards: response.data });
+      })
+      .catch((error) => {
+        this.setState({
+          errorMessage: error.message
+        })
+      })
+  }
+
+  addCardCallback = (card) => {
+    const infoCard = {
+      text: card.text,
+      emoji: card.cardEmoji,
+    };
+    axios.post(`${this.props.url}/${this.props.boardName}/cards`, infoCard)
+      .then((response) => {
+        console.log(card);
+        let newcardsUpdate = this.state.cards;
+        newcardsUpdate.unshift({ 
+          card: {
+          text: card.text,
+          id: card.id,
+          emoji: card.cardEmoji,
+          } 
+        }); //add new items
+        this.setState({
+          cards: newcardsUpdate
+        });
+        console.log(newcardsUpdate);
+      })
+      .catch((error) => {
+        this.setState({
+          errorMessage: error.message,
+        });
+      });
+  }
+
+  deleteCardCallback = (cardId) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`)
+      .then((response) => {
+        const updatedCardList = this.state.cards.filter(card => card.card.id !== cardId);
+
+        this.setState({
+          cards: updatedCardList
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          errorMessage: error.message,
+        });
+      });
+  }
+
   render() {
+    const errorDisplay = this.state.errorMessage ? (
+      <section className="validation-errors-display">
+        Error: {this.state.errorMessage}
+      </section>
+    ) : null;
+
+    const cardList = this.state.cards.map((card, i) => {
+      return (
+        <Card
+          key={i}
+          id={card.card.id}
+          text={card.card.text}
+          cardEmoji={card.card.emoji}
+          deleteCardCallback={this.deleteCardCallback}
+        />
+      )
+    });
+
     return (
-      <div>
-        Board
-      </div>
+      <section>
+        <div>
+        {errorDisplay}
+        </div>
+        <div>
+          <NewCardForm addCardCallback={this.addCardCallback} />
+        </div>
+        <div className="board">{cardList}</div>
+      </section>
     )
   }
-
 }
 
 Board.propTypes = {
-
+url: PropTypes.string.isRequired,
+boardName: PropTypes.string.isRequired
 };
-
 export default Board;

src/components/Card.css

@@ -1,5 +1,5 @@
 .card {
-  background-color: #F4FF81;
+  background-color: rgb(241, 204, 239);
 
   padding: 1em 0;
   margin: 0.5rem;