Ports - Faiza

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

@@ -10,8 +10,8 @@ class App extends Component {
           <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={`Faiza`}
           />
       </section>
     );

src/App.test.js

@@ -1,14 +1,30 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import App from './App';
 
-describe('App', () => {
+describe('<App />', () => {
 
   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,137 @@
+// 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="Faiza"
+    url="https://inspiration-board.herokuapp.com/"
+  />
+</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="Faiza"
+      url="https://inspiration-board.herokuapp.com/"
+    >
+      <div
+        className="board"
+      >
+        <NewCardForm
+          addCardCallback={[Function]}
+        >
+          <form
+            className="new-card-form"
+            onSubmit={[Function]}
+          >
+            <h3>
+               Add a Card
+            </h3>
+            <div>
+              <label
+                htmlFor="text"
+              >
+                 Text: 
+              </label>
+              <input
+                name="text"
+                onChange={[Function]}
+                type="text"
+                value=""
+              />
+              <label
+                htmlFor="emoji"
+              />
+              <select
+                name="emoji"
+                onChange={[Function]}
+                type="text"
+                value=""
+              >
+                <option
+                  value=""
+                >
+                  Add emojis to your message!
+                </option>
+                <option
+                  value=""
+                >
+                  None
+                </option>
+                <option
+                  value="heart_eyes"
+                >
+                  Heart Eyes
+                </option>
+                <option
+                  value="beer"
+                >
+                  Beer
+                </option>
+                <option
+                  value="clap"
+                >
+                  Clap
+                </option>
+                <option
+                  value="sparkling_heart"
+                >
+                  Sparkling Heart
+                </option>
+                <option
+                  value="heart_eyes_cat"
+                >
+                  Heart Eyes Cat
+                </option>
+                <option
+                  value="dog"
+                >
+                  Dog
+                </option>
+              </select>
+            </div>
+            <div
+              className=".new-card-form__form-button"
+            >
+              <input
+                className="btn btn-success new-card-form--submit"
+                name="submit"
+                type="submit"
+                value="Add a Card"
+              />
+            </div>
+          </form>
+        </NewCardForm>
+      </div>
+    </Board>
+  </section>
+</App>
+`;

src/components/Board.js

@@ -5,29 +5,120 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
+// import { isExpressionWrapper, throwStatement } from '@babel/types';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
+      error: null
     };
   }
 
+  componentDidMount() {
+    const {url, boardName } = this.props;
+    axios.get(`${url}boards/${boardName}/cards`)
+      .then((response) => {
+        console.log('In .then!!!!');
+
+        const allCards = response.data.map(element => {
+          const card = {
+            ...element.card,
+          }
+          return card;
+        });
+
+        this.setState({
+          cards: allCards,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: error.message
+        });
+      })
+  }
+
+  deleteCard = (id) => {
+    console.log(id);
+
+    const updatedCards = this.state.cards.filter((card) => card.id !== id);
+
+    this.setState({
+      cards: updatedCards,
+    });
+
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+    .then((response) => {
+      console.log('ID of card deleted:', response.data.card.id);
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+
+  addCard = (card) => {
+    const { url, boardName } = this.props;
+
+    const newCardData = {
+      text: card.text,
+      emoji: card.emoji,
+    };
+
+    axios.post(`${url}boards/${boardName}/cards`, newCardData)
+    .then((response) => {
+
+      console.log("This is what response.data looks like from the API on a successful response", response.data);
+
+      let updatedCards = this.state.cards;
+
+      updatedCards.unshift({
+        id: response.data.card.id,
+        text: card.text,
+        emoji: card.emoji,
+      });
+
+      this.setState({
+        cards: updatedCards,
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message,
+      });
+    });
+  }
+
   render() {
-    return (
-      <div>
-        Board
+    const allCards = this.state.cards.map((card, i) => {
+      return <Card 
+        key={i}
+        {...card}
+        onDeleteCard={this.deleteCard}
+      />
+    });
+
+    return(
+      <div className="board">
+        <NewCardForm 
+          addCardCallback={this.addCard} 
+        />
+
+        {allCards}
+
       </div>
-    )
+    );
   }
-
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('<Board />', () => {
+  test('that it matches as existing snapshot', () => {
+    const wrapper = shallow(<NewCardForm addCardCallback={() => { }} />); 
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});