Karinna Iniguez - Inspiration Board - Octos

package.json

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

src/App.js

@@ -1,21 +1,66 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+import Status from './components/Status';
+import BoardSelection from './components/BoardSelection';
 
 class App extends Component {
-  render() {
-    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>
-    );
-  }
+
+	constructor(){
+		super();
+
+		this.state = {
+			status: {
+				message: "this is a message",
+				type: "and a type"
+			},
+			board: 'karinna',
+			url: "https://inspiration-board.herokuapp.com/boards"
+		}
+
+	}
+
+	updateStatus = (mess, typ) => {
+		this.setState({
+			status: {
+				message: mess,
+				type: typ
+			}
+		})
+	}
+
+	updateBoard = (name) => {
+		this.setState({
+			board: name
+		});
+	}
+
+
+	render() {
+		return (
+			<section>
+				<header className="header">
+					<h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+				</header>
+
+				<BoardSelection
+					updateBoardCallback={this.updateBoard}
+					url={this.state.url}
+					/>
+
+				<Status
+					message={this.state.status.message}
+					type={this.state.status.type}
+					/>
+
+				<Board
+					url={this.state.url}
+					name={this.state.board}
+					updateStatusCallback={this.updateStatus}
+					/>
+			</section>
+		);
+	}
 }
 
 export default App;

src/components/Board.css

@@ -12,3 +12,13 @@
   list-style-type: none;
   padding: 0;
 }
+
+.success {
+  background-color: grey;
+  color: darkgreen;
+}
+
+.failure {
+  background-color: grey;
+  color: darkred;
+}

src/components/Board.js

@@ -1,33 +1,125 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import emoji from 'emoji-dictionary';
+
 
 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();
-
-    this.state = {
-      cards: [],
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        Board
-      </div>
-    )
-  }
 
-}
+	static propTypes = {
+		updateStatusCallback: PropTypes.func,
+		url: PropTypes.string,
+		name: PropTypes.string
+	}
+	constructor() {
+		super();
+
+		this.state = {
+			cards: [],
+		};
+
+	}
+
+
+
+	componentDidMount(){
+		axios.get(`${this.props.url}/${this.props.name}/cards`)
+		.then((response) =>{
+			this.props.updateStatusCallback("Successfully loaded board", "success")
+
+			this.setState({
+				cards: response.data
+			})
+		})
+		.catch((error) => {
+			this.props.updateStatusCallback(`Failed to load: ${error.message}`, "failure")
+		});
+
+	}
+
+	componentDidUpdate(prop, state) {
+		if (prop.name !== this.props.name) {
+			axios.get(`${this.props.url}/${prop.name}/cards`)
+			.then((response) =>{
+				this.props.updateStatusCallback("Successfully loaded board", "success")
 
-Board.propTypes = {
+				this.setState({
+					cards: response.data,
+					name: prop.name
+				})
+			})
+			.catch((error) => {
+				this.props.updateStatusCallback(`Failed to load: ${error.message}`, "failure")
+			});
+		}
+	}
+
+	addCard = (card) => {
+		card.emoji = emoji.getName(card.emoji)
+
+		axios.post(`${this.props.url}/${this.props.name}/cards`, card)
+
+		.then((response) => {
+			let updatedCards = this.state.cards;
+			updatedCards.push({card});
+			this.setState({ cards: updatedCards });
+			this.props.updateStatusCallback(`Successfully added card`, "success")
+		})
+		.catch((error) => {
+			this.props.updateStatusCallback(`Failed to add Card: ${error.message}`, "failure")
+		});
+
+	}
+
+	deleteCard = (card) => {
+		console.log(card);
+		axios.delete(`${this.props.url}/${this.props.name}/cards/${card.props.id}`)
+		.then((response) => {
+			this.props.updateStatusCallback("Successfully Deleted Card", "success")
+			let updatedCards = this.state.cards;
+			updatedCards.splice(card.props.index,1)
+			this.setState({
+				cards: updatedCards
+			})
+		})
+		.catch((error) => {
+			this.props.updateStatusCallback(`Failed to add card: ${error.message}`, "failure")
+		});
+	}
+
+	render() {
+
+		const cardCollection = this.state.cards.map((obj, index) =>{
+			return <Card key={index}
+				text={obj.card.text}
+				emoji={obj.card.emoji}
+				id={obj.card.id}
+				index={index}
+				deleteCardCallback={this.deleteCard}
+				/>
+		});
+
+		return (
+			<section>
+				<div className="new-card-form">
+					<NewCardForm
+						addCardCallback={this.addCard}
+						/>
+				</div>
+				<div className="board">
+					{cardCollection}
+				</div>
+			</section>
+		)
+	}
+
+}
 
-};
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Board from './Board';
+import {shallow} from 'enzyme';
+
+describe('Board', () => {
+
+	test('shallow mount', () => {
+		const board = shallow(<Board
+			url="something"
+			name="me"
+			updateStatusCallback={() => {}}
+			/>);
+		expect(board).toMatchSnapshot();
+	});
+});

src/components/BoardSelection.css

@@ -0,0 +1,6 @@
+.selection {
+  font-family: 'Raleway', sans-serif;
+  font-size: 1.25em;
+  text-align: center;
+  margin-left: 40%;
+}