Space - Olivia and Sara

package.json

@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.2",
-    "emoji-dictionary": "^1.0.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "emoji-dictionary": "^1.0.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/App.js

@@ -1,16 +1,18 @@
-import React from 'react';
-import './App.css';
-import Board from './components/Board';
+import React from "react";
+import "./App.css";
+import Board from "./components/Board";
 
 const App = () => {
   return (
     <section>
       <header className="header">
-        <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+        <h1 className="header__h1">
+          <span className="header__text">Inspiration Board</span>
+        </h1>
       </header>
       <Board
         url="https://inspiration-board.herokuapp.com/boards/"
-        boardName={`Ada-Lovelace`}
+        boardName={`Pinreact`} //let's pick a name
       />
     </section>
   );

src/App.test.js

@@ -1,11 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-describe('App', () => {
-
-  it('renders without crashing', () => {
-    console.log('testing would be nice! :)');
-  });
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
+describe("App", () => {
+  it("renders without crashing", () => {});
 });

src/components/Board.js

@@ -1,21 +1,94 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
+import React, { useState, useEffect } 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';
+const Board = ({ url, boardName }) => {
+  const [board, setBoard] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  console.log(board);
+
+  useEffect(() => {
+    axios
+      .get(`${url}${boardName}/cards`)
+      .then((response) => {
+        const apiBoard = response.data;
+        setBoard(apiBoard);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  }, [boardName]); // this is a dependency array. If one of the dependencies change the callback method will be run, if it is empty it will only run on the first render
+
+  const addCard = (card) => {
+    axios
+      .post(url + boardName + "/cards", { text: card.text, emoji: card.emoji })
+      .then((response) => {
+        const newCard = {
+          card: {
+            id: response.data.card.id,
+            text: response.data.card.text,
+            emoji: response.data.card.emoji,
+          },
+        };
+        const newBoard = [newCard, ...board];
+        setBoard(newBoard);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  };
+
+  const deleteCard = (id) => {
+    axios
+      .delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+      .then((response) => {
+        console.log(response);
+        const updateBoard = board.filter((card) => card.card.id !== id);
+        setBoard(updateBoard); //
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  };
 
-const Board = () => {
   return (
-    <div>
-      Board
+    <div className="Myboard">
+      <div>Board {boardName}</div>
+      {errorMessage ? (
+        <div>
+          <h2 className="error-msg">{errorMessage}</h2>
+        </div>
+      ) : (
+        ""
+      )}
+      {board.map((el) => {
+        return (
+          <Card
+            key={el.card.id}
+            id={el.card.id}
+            text={el.card.text}
+            emoji={el.card.emoji}
+            deleteCard={deleteCard}
+          />
+        );
+      })}
+
+      <NewCardForm addCardCallback={addCard} />
     </div>
-  )
+  );
 };
-Board.propTypes = {
 
+Board.propTypes = {
+  url: PropTypes.string,
+  boardName: PropTypes.string,
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Board from "./Board";
+
+describe("Board", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(<Board url="abc" boardName={`Pinreact`} />);
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/Card.js

@@ -1,19 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+import React from "react";
+import PropTypes from "prop-types";
+import emojiLib from "emoji-dictionary";
 
-import './Card.css';
+import "./Card.css";
 
-const Card = () => {
+const Card = ({ emoji, text, deleteCard, id }) => {
   return (
     <div className="card">
-      Card
+      <div className="card__content">
+        <div className="card__content-text">{text ? text : ""}</div>
+        <div className="card__content-emoji">
+          {emoji ? emojiLib.getUnicode(emoji) : ""}
+        </div>
+        <button
+          className="card__delete"
+          onClick={() => {
+            deleteCard(id);
+          }}
+        >
+          Delete
+        </button>
+      </div>
     </div>
-  )
-}
+  );
+};
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCard: PropTypes.func,
 };
-
 export default Card;
+
+// {
+//   "card": {
+//     "id": 4733,
+//     "text": "'Be patient'",
+//     "emoji": "'heart'"
+//   }
+// };
+//card data
+
+// const studentIds = newStudentList.map(student => student.id);
+//const nextId = Math.max(...studentIds) + 1;

src/components/Card.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Card from "./Card";
+
+describe("Card", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(
+      <Card
+        key={1}
+        id={1}
+        text={"happy"}
+        emoji={"dog"}
+        deleteCard={() => null}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});

src/components/NewCardForm.js

@@ -1,6 +1,87 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
-import './NewCardForm.css';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import emojiLib from "emoji-dictionary";
+import "./NewCardForm.css";
 
-const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+const EMOJI_LIST = [
+  "",
+  "heart_eyes",
+  "beer",
+  "clap",
+  "sparkling_heart",
+  "heart_eyes_cat",
+  "dog",
+];
+
+const NewCardForm = (props) => {
+  const [text, setText] = useState("");
+  const [emoji, setEmoji] = useState("");
+
+  // function for submitting the form
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    const message = {
+      text: text,
+      emoji: emoji,
+    };
+    props.addCardCallback(message);
+
+    setText("");
+    setEmoji("");
+  };
+
+  const allEmojis = EMOJI_LIST.map((emoji, index) => {
+    return (
+      <option key={index} value={emoji}>
+        {emojiLib.getUnicode(emoji)}
+      </option>
+    );
+  });
+
+  return (
+    <form className="new-card-form" onSubmit={onFormSubmit}>
+      <h3 className="new-card-form__header">What inspires you?</h3>
+
+      <div className="new-card-form_form">
+        <label className="new-card-form__form-label" htmlFor="text">
+          Text:
+        </label>
+        <input
+          className="new-card-form__form-textarea"
+          name="text"
+          placeholder="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+      </div>
+
+      <div className="new-card-form_form">
+        <label className="new_card_form_form-label" htmlFor="emoji">
+          Emoji:
+          {allEmojis}
+        </label>
+        <input
+          className="new-card-form__form-textarea"
+          name="emoji"
+          placeholder="emoji"
+          value={emoji}
+          onChange={(e) => setEmoji(e.target.value)}
+        />
+      </div>
+
+      <input
+        className="new-card-form__form-button"
+        type="submit"
+        value="Add Card"
+      />
+    </form>
+  );
+};
+
+NewCardForm.propTypes = {
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  addCardCallback: PropTypes.func,
+};
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import NewCardForm from "./NewCardForm";
+
+describe("NewCardForm", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(<NewCardForm addCardCallback={() => null} />);
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});