Ampers: Angela Poland

.dockerignore

@@ -0,0 +1 @@
+#node_modules

Dockerfile

@@ -0,0 +1,20 @@
+# base image
+FROM node:9.6.1
+
+# set working directory
+RUN mkdir /usr/inspiration-board
+WORKDIR /usr/inspiration-board
+
+# add `/usr/src/app/node_modules/.bin` to $PATH
+ENV PATH /usr/inspiration-board/node_modules/.bin:$PATH
+
+# install and cache app dependencies
+COPY .  /usr/inspiration-board
+#COPY package.json /usr/src/app/package.json
+
+
+RUN npm install --silent
+RUN npm install [email protected] -g --silent
+
+# start app
+CMD ["npm", "start"]

package.json

@@ -20,7 +20,14 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "gh-pages": "^1.2.0"
+    "enzyme-to-json": "^3.3.4",
+    "gh-pages": "^1.2.0",
+    "jest-mock-axios": "^2.1.11"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   },
   "homepage": "http://adagold.github.io/inspiration-board"
 }

src/App.css

@@ -5,6 +5,7 @@
 
 body {
   font-family: 'Raleway', sans-serif;
+  /*background-color: #92FED5;*/
 }
 
 h1, h2 {

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/boards/angelap/cards"
+          boardName={`Angela-P`}
           />
       </section>
     );

src/components/Board.js

@@ -5,29 +5,107 @@ 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';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
     };
   }
 
+  componentDidMount = () => {
+    console.log('Component did mount was called')
+
+    axios.get('https://inspiration-board.herokuapp.com/boards/angelap/cards')
+    .then((response) => {
+      this.setState({ cards: response.data });
+      console.log(response.data)
+    })
+    .catch((error) => {
+      console.log('Error is happening');
+      console.log(error);
+      this.setState({ error: error.message});
+      return error;
+
+    });
+  }
+
+  renderCards = () => {
+    console.log('Rendering cards')
+
+    const cardList = this.state.cards.map((card, index) => {
+      let singleCard = card["card"]
+      return (
+        <Card
+          key={index}
+          id={singleCard.id}
+          text={singleCard.text}
+          emoji={singleCard.emoji}
+          deleteCard={this.deleteCard}
+          />
+      );
+    });
+    return cardList;
+  }
+
+  addCard = (note) => {
+    const cards = this.state.cards;
+    axios.post(`https://inspiration-board.herokuapp.com/boards/angelap/cards/`, note)
+    .then((response) => {
+      note.id = response.data.card.id;
+      cards.push({card: note});
+      console.log(note);
+      this.setState({
+        cards,
+        message: `Successfully Added a new Card`
+      });
+    })
+    .catch((error) => {
+      console.log(error)
+      this.setState({
+        message: error.message,
+      });
+    })
+  }
+
+  deleteCard = (id) => {
+    console.log(id)
+    axios.delete(`https://inspiration-board.herokuapp.com/boards/angelap/cards/${id}`)
+    .then((response) => {
+      this.componentDidMount();
+      console.log(response)
+    })
+    .catch((error) => {
+      console.log('Unable to delete card');
+      console.log(error);
+      this.setState({ error: error.message});
+      return error;
+
+    });
+  }
+
+
+
   render() {
     return (
       <div>
-        Board
+        <NewCardForm addCardCallBack={this.addCard} />
+          <p>{this.state.error}</p>
+          <p>{this.state.message}</p>
+        <section className="board">
+          {this.renderCards()}
+        </section>
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  cards: PropTypes.array.isRequired,
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,14 @@
+
+import React, { Component } from 'react';
+import {mount, shallow} from 'enzyme';
+import Board from './Board'
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = mount(<Board/>)
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.unmount();
+  });
+});

src/components/Card.css

@@ -1,5 +1,5 @@
 .card {
-  background-color: #F4FF81;
+  background-color: #D6CADA;
 
   padding: 1em 0;
   margin: 0.5rem;
@@ -44,4 +44,5 @@
 .card__delete {
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  margin-left: 8px;
 }

src/components/Card.js

@@ -5,17 +5,39 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  displayEmoji = () => {
+    if (this.props.emoji) {
+      return emoji.getUnicode(this.props.emoji)
+    }
+  };
+
+  removeCard = (event) => {
+    console.log(event.target.id);
+    event.preventDefault();
+    this.props.deleteCard(this.props.id);
+  }
+
   render() {
+    console.log('Rendering a card')
     return (
       <div className="card">
-        Card
-      </div>
-    )
-  }
-}
+        <button className="card__delete" onClick={this.removeCard}>X</button>
+        <div className="card__content">
 
-Card.propTypes = {
+          <p className="card__content-text">{this.props.text}</p>
+          <p className="card__content-emoji">{this.displayEmoji()}</p>
+          </div>
+        </div>
+      )
+    }
+  }
 
-};
+  Card.propTypes = {
+    text: PropTypes.string.isRequired,
+    emoji: PropTypes.string,
+    deleteCard: PropTypes.func,
+    id: PropTypes.number.isRequired,
+  };
 
-export default Card;
+  export default Card;

src/components/Card.test.js

@@ -0,0 +1,14 @@
+
+import React, { Component } from 'react';
+import {mount, shallow} from 'enzyme';
+import Card from './Card'
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    const wrapper = shallow(<Card/>)
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.unmount();
+  });
+});