Sockets - Shubha

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "emoji-dictionary": "^1.0.10",
+    "fsevents": "^2.0.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/App.js

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

src/components/Board.js

@@ -8,26 +8,123 @@ 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: [],
     };
   }
 
+  onDeleteButtonClick = (cardID) => {
+      axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardID}`)
+        .then((response) => {
+          this.getCards();
+        })
+        .catch((error) => {
+          if (error.response && error.response.data) {
+            this.setState({
+              error: error.response.data.cause,
+            });
+          } else {
+            this.setState({
+              error: error.message,
+            });
+          }
+        })
+  }
+
+  addNewQuote = (text, emoji) =>{
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, { text, emoji,})
+    .then((response) => {
+      this.getCards();
+    })
+    .catch((error) => {
+      console.log([error]);
+      if (error.response && error.response.data) {
+        this.setState({
+          error: error.response.data.cause,
+          validationErrors:error.response.data.errors
+        });
+      } else {
+        this.setState({
+          error: error.message,
+
+        });
+      }
+    })
+  }
+
+  getCards() {
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+      .then((response) => {
+        const updatedCards = response.data.map((object)=>{
+          return (
+              <Card 
+                id={object.card.id} 
+                key={object.card.id}
+                text={object.card.text} 
+                emoji={object.card.emoji}
+                deleteButtonCallback={this.onDeleteButtonClick}/>);
+        });
+        this.setState({
+          cards: updatedCards,
+          error: null,
+          validationErrors: null
+        });
+      })
+      .catch((error) => {
+        if (error.response && error.response.data) {
+          this.setState({
+            error: error.response.data.cause,
+          });
+        } else {
+          this.setState({
+            error: error.message,
+          });
+        }
+      })
+  }
+
+  displayValidationErrors = (errors) => {
+    let errorList = [];
+    for (const field in errors) {
+      for (const problem of errors[field]) {
+        errorList.push(<li>{field}: {problem}</li>);
+      }
+    }
+      return errorList;
+  }
+
+  componentDidMount() {
+    this.getCards();
+  }
+
   render() {
     return (
       <div>
-        Board
+        <div className="validation-errors-display">
+          {this.state.error ? this.state.error : null}
+          <ul className="validation-errors-display__list">
+            {this.state.validationErrors ? this.displayValidationErrors(this.state.validationErrors) : null}
+          </ul>
+
+        </div>
+        <div className="board">
+          {this.state.cards}
+          <NewCardForm submitCallback={this.addNewQuote}/>
+      </div>
       </div>
+
+
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Card.js

@@ -5,17 +5,28 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
-  render() {
+  onDeleteButtonClick= (event) => {
+    event.preventDefault();
+    this.props.deleteButtonCallback(this.props.id);
+  }
+  render(props) {
     return (
-      <div className="card">
-        Card
+      <div className="card" id={this.props.id}>
+        <div className="card__content">
+          <p className = "card__content-text">{this.props.text ? this.props.text : null}</p>
+          <p className="card__content-emoji">{this.props.emoji ? emoji.getUnicode(this.props.emoji) : null}</p>
+          <button className="card__delete" onClick={this.onDeleteButtonClick}>Delete</button>
+        </div>
+
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteButtonCallback: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,76 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+    constructor(props) {
+        super(props);
+        this.state = this.initialState();
+    }
+
+    initialState = () => {
+        return ({
+            emoji: "",
+            text: "",
+        });
+    }
+
+    onInputChange = (event) => {
+        const updatedState = {};
+
+        const field = event.target.name;
+        const value = event.target.value;
+
+        updatedState[field] = value;
+        this.setState(updatedState);
+      }
+
+      handleSubmitForm  = (event)=> {
+        const {text, emoji} = this.state;
+        event.preventDefault();
+        this.props.submitCallback(text, emoji);
+        this.setState(this.initialState());
+      }
+
+    generateOptions = () => {
+        return (
+            EMOJI_LIST.map((emojiText, i) =>{
+                return (<option value={emojiText} key={i}>{emoji.getUnicode(emojiText)}</option>);
+            })
+        );
+
+    } 
+
+    render() {
+        return (
+            <div className="new-card-form">
+                <h1 className="new-card-form__header">Add a Quote</h1>
+                <form className="new-card-form__form" onSubmit={this.handleSubmitForm}>
+                    <input 
+                        type="text"
+                        placeholder="Quote Text"
+                        name="text"
+                        value={this.state.text}
+                        onChange={this.onInputChange}
+                        ></input>
+                    <select name="emoji" 
+                            value={this.state.emoji}
+                            selected={this.state.emoji}
+                            onChange={this.onInputChange}
+                            >
+                        {this.generateOptions()}
+                    </select> 
+                    <input type="submit" value="Add Quote"></input>     
+                </form> 
+            </div>
+
+
+        )
+    }
+}
+
+NewCardForm.propTypes = {
+    submitCallback: PropTypes.func.isRequired,
+}
+
+export default NewCardForm;

src/components/test/Board.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Board from '../Board';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <Board deleteButtonCallback={() => {}  } url="" boardName=""/>);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/Card.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <Card text="" emoji="heart_eyes" />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <NewCardForm submitCallback={() => {} } />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/__snapshots__/Board.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `ShallowWrapper {}`;

src/components/test/__snapshots__/Card.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `ShallowWrapper {}`;

src/components/test/__snapshots__/NewCardForm.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `ShallowWrapper {}`;