Ramora6627 · Ramora6627 · Jul 18, 2022 · Jul 1, 2022
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/src/App.js b/src/App.js
@@ -2,19 +2,27 @@ import logo from "./logo.svg";
 import React, { useState, useEffect } from "react";
 import "./App.css";
 import axios from "axios";
-import Card from "./components/Card";
-import {Board} from "./components/Board";
+import { Board } from "./components/Board";
 import BoardDropDown from "./components/BoardDropDown";
-import CreateCard from "./components/CreateCard";
+import { CreateCard } from "./components/CreateCard";
 import CreateBoard from "./components/CreateBoard";
 
 function App() {
+  // const [boardData, setBoardData] = useState([]);
+
+  // useEffect(() => {
+  //   axios
+  //   .get("http://127.0.0.1:5000/boards")
+  //   .then((response) =>
+  //     setBoardData(response.data)
+  //   )
+  // }, []);
+
   return (
     <div id="App">
       <header>
         <h1>Inspo Board</h1>
-
-        <Board title="Board" owner="Sana"></Board>
+        <Board id="1" title="Board" owner="Sana"></Board>
       </header>
     </div>
   );

diff --git a/src/components/Board.js b/src/components/Board.js
@@ -1,8 +1,69 @@
-export const Board = ({ id, title, owner, cards }) => {
+import { Card } from "./Card";
+import { CreateCard } from "./CreateCard";
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+export const Board = ({ id, title, owner }) => {
+  const [cardData, setCardData] = useState([]);
+
+  useEffect(() => {
+    axios.get(`http://127.0.0.1:5000/boards/${id}`).then((response) => {
+      const cards = response.data.board.cards.map((card) => ({
+        id: card.id,
+        message: card.message,
+        likes: card.likes_count,
+      }));
+      setCardData(cards);
+    });
+  }, []);
+
+  const removeCard = (id) => {
+    const newCards = cardData.filter((card) => {
+      return card.id !== id;
+    });
+
+    setCardData(newCards);
+  };
+
+  const addCard = (message) => {
+    const data = {
+      board_id: id,
+      message: message,
+    };
+
+    axios
+      .post("http://127.0.0.1:5000/cards", data)
+      .then((response) => {
+        console.log(response);
+        const card = response.data.card;
+
+        const newCards = [...cardData];
+        newCards.push({
+          id: card.id,
+          message: card.message,
+          likes: card.likes_count,
+        });
+        setCardData(newCards);
+      })
+      .catch((error) => console.log(error));
+  };
+
   return (
-    <>
-      <h1>{title}</h1>
-      <p>{owner}</p>
-    </>
+    <div className="card">
+      <div className="card-body">
+        <h1 className="card-title">{title}</h1>
+        <p className="card-subtitle">{owner}</p>
+        {cardData.map((data) => (
+          <Card
+            id={data.id}
+            message={data.message}
+            likes={data.likes}
+            onRemoveCallback={removeCard}
+          ></Card>
+        ))}
+      </div>
+
+      <CreateCard addCardCallback={addCard}></CreateCard>
+    </div>
   );
 };
diff --git a/src/components/Card.css b/src/components/Card.css
@@ -0,0 +1,9 @@
+/* button {
+    background: blue;
+    color: red;
+    border: none;
+    padding: 10px;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+} */
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -0,0 +1,46 @@
+import axios from "axios";
+import { React, useState } from "react";
+import "./Card.css";
+
+export const Card = ({ id, message, likes, onRemoveCallback }) => {
+  const [like, setLike] = useState(likes);
+
+  const handleOnClick = () => {
+    axios
+      .patch(`http://127.0.0.1:5000/cards/add-like/${id}`)
+      .then((response) => {
+        console.log(response);
+        setLike(response.data.card.likes_count);
+      })
+      .catch(console.log);
+  };
+
+  const onRemove = () => {
+    axios
+      .delete(`http://127.0.0.1:5000/cards/${id}`)
+      .then((response) => {
+        console.log(response);
+        onRemoveCallback(id);
+      })
+      .catch(console.log);
+  };
+
+  return (
+    <div className="card" style={{ width: "18rem" }}>
+      <div className="card-body">
+        <p className="card-text">{message}</p>
+        <p>{like}</p>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={handleOnClick}
+        >
+          like
+        </button>
+        <button onClick={onRemove} type="button" className="btn btn-secondary">
+          delete
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/CreateCard.js b/src/components/CreateCard.js
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+const defaultFormState = {
+  message: "",
+};
+
+export const CreateCard = ({ addCardCallback }) => {
+  const [newMessage, setNewMessage] = useState(defaultFormState.message);
+
+  const handleChange = (event) => {
+    setNewMessage(event.target.value);
+  };
+
+  const submitCreateCardData = (event) => {
+    event.preventDefault();
+    addCardCallback(newMessage);
+    setNewMessage(defaultFormState.message);
+  };
+
+  return (
+    <form onSubmit={submitCreateCardData} className="card">
+      Message
+      <input value={newMessage} onChange={handleChange} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+CreateCard.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
diff --git a/yarn.lock b/yarn.lock
@@ -2793,6 +2793,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"