Ada-C18 · lbbetts · Jan 3, 2023 · Jan 4, 2023 · Jan 4, 2023 · Jan 5, 2023
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,26 @@ yarn-error.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
-# Inspiration Board: Front-end Layer
+## Inspo Board - Frontend
 
-This scaffold only includes a `.gitignore` file.
+Inspo Board is an digital bulletin board for inspirational content! Users can create new boards, select their board, view all the cards associated with the selected board, add new cards, and +1 cards that they like.
 
-To get started, follow the setup directions described in the project.
+- Link to Backend Repo: https://github.com/n1colemejia/back-end-inspiration-board
+
+<img width="auto" alt="" src="https://github.com/n1colemejia/inspo-board/assets/100858764/0a89ba77-566c-460b-8161-29d848af5b18">
diff --git a/README.old.md b/README.old.md
@@ -0,0 +1,5 @@
+# Inspiration Board: Front-end Layer
+
+This scaffold only includes a `.gitignore` file.
+
+To get started, follow the setup directions described in the project.
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "front-end-inspiration-board",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "axios": "^1.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,235 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import "./App.css";
+import BoardContainer from "./components/BoardContainer";
+import CardContainer from "./components/CardContainer";
+import Header from "./components/Header";
+import NewBoardForm from "./components/NewBoardForm";
+import NewCardForm from "./components/NewCardForm";
+
+// const url = "https://group-4-inspo-board.herokuapp.com"
+const url = "http://localhost:5000"
+
+
+// helper function for boards API request
+const getAllBoardsApi = () => {
+  return axios
+    .get(`${url}/board`)
+    .then((response) => {
+      const newBoards = response.data.map((board) => {
+        return {
+          id: board.board_id,
+          title: board.title,
+          owner: board.owner,
+        };
+      });
+
+      return newBoards;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+// helper function for cards API request
+const getAllCardsApi = (id) => {
+  return axios
+    .get(`${url}/board/${id}/cards`)
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+// helper function for delete card API request
+const deleteCardApi = (boardId, cardId) => {
+  return axios.delete(`${url}/board/${boardId}/cards/${cardId}`)
+  .then(response => {
+    console.log(response);
+    console.log(`Card ${cardId} from Board ${boardId} deleted`);
+  })
+  .catch(error => {
+    console.log(error);
+  })
+};
+
+// helper function for patch API request
+const patchCardApi = (boardId, cardId) => {
+  return axios.patch(`${url}/board/${boardId}/cards/${cardId}`)
+  .then(response => {
+    console.log(response)
+    console.log(`Card ${cardId} from Board ${boardId} patched`);
+    return response.data;
+  })
+  .catch(error => {
+    console.log(error);
+  })};
+
+function App() {
+  // state
+  const[isBoardFormVisible,setIsBoardFormVisible] = useState(true);
+  const [boards, setBoards] = useState([]);
+  const [cards, setCards] = useState([]);
+  const [boardFormMessage, setBoardFormMessage] = useState("");
+  const [cardFormMessage, setCardFormMessage] = useState("");
+  const [currentBoard, setCurrentBoard] = useState({title: "No board selected",});
+  const [boardSelected, setBoardSelected] = useState(false);
+
+  // toggle button
+  const toggleNewBoardForm = () =>{setIsBoardFormVisible(!isBoardFormVisible)}
+
+  // get all boards using API helper
+  const getAllBoards = () => {
+    return getAllBoardsApi().then((boards) => setBoards(boards));
+  };
+
+  // get all boards when App renders
+  useEffect(() => {
+    getAllBoards();
+  }, [currentBoard]);
+
+  //Delete board 
+  const deleteBoard =()=>{
+
+        try {
+            const res = axios.delete(`${url}/board/${currentBoard.id}`)
+            console.log(res,"got the data back from api ")
+            setCurrentBoard({title: "No board selected",})
+
+
+        } catch (error) {
+            console.log(error)
+        }
+
+
+    }
+  // get all cards using API helper
+  const getAllCards = (id) => {
+    console.log(`currentBoard.id: ${currentBoard.id}`)
+    getAllCardsApi(id).then((cards) => {
+      const allCards = [];
+      for (let card of cards) {
+        allCards.push({
+          id: card.card_id,
+          message: card.message,
+          likeCount: card.likes_count,
+        });
+      }
+      setCards(allCards);
+    });
+  };
+
+  // display current board callback for selected Board
+  const displayCurrentBoard = (id) => {
+    for (let board of boards) {
+      if (id === board.id) {
+        console.log(board,"display current board")
+        setCurrentBoard(board);
+        getAllCards(id);
+        setBoardSelected(true);
+        setBoardFormMessage("");
+        setCardFormMessage("");
+      }
+    }
+  };
+
+  // add new board callback for new board form
+  const addBoard = (boardData) => {
+    if (!boardData.title || !boardData.owner) {
+      setBoardFormMessage("Please enter a title or owner.");
+    } else {
+      axios
+      .post(`${url}/board`, boardData)
+      .then((response) => {
+
+        const newBoards = [...boards];
+
+        newBoards.push({
+          title: response.data.title,
+          owner: response.data.owner,
+          ...boardData,
+        });
+
+        setBoards(newBoards);
+        setBoardFormMessage("You made a new board!");
+      })
+      .catch((error) => {
+        console.log(error);
+        setBoardFormMessage("Input is invalid.");
+      });
+    }
+  };
+
+  // add new card callback for new card form
+  const addCard = (cardData) => {
+    console.log(`currentBoard.id: ${currentBoard.id}`)
+    axios
+      .post(`${url}/board/${currentBoard.id}/cards`, cardData)
+      .then((response) => {
+
+        const newCards = [...cards];
+
+        newCards.push({
+          message: response.data.message,
+          likeCount: response.data.likes_count,
+          ...cardData,
+        });
+
+        setCards(newCards);
+        setCardFormMessage("You made a new card!");
+      })
+      .catch((error) => {
+        console.log(error);
+        // add conditional to display custom message for empty message or exceeded character limit
+        setCardFormMessage("Input invalid");
+      });
+  };
+
+  // delete card from board
+  const deleteCard = (cardId) => {
+    deleteCardApi(currentBoard.id, cardId)
+    .then(response => {
+      setCards(cards => cards.filter(card => {
+        return card.id !== cardId;
+      }))
+    })
+  };
+
+  // increase like count for card
+  // add function to increase likes on card
+  const incrementLikeCount = (id) => {
+    patchCardApi(currentBoard.id, id)
+    .then(newLikeCount =>{
+      setCards(cards => cards.map(card => {
+        if (card.id === id) {
+          return {
+              id: id,
+              message: card.message, 
+              likeCount: newLikeCount,
+              ...cards};
+        } else {
+          return card;
+        }
+      }));
+      });
+    }
+
+  return (
+    <div className="App">
+      <Header />
+      {isBoardFormVisible ? <NewBoardForm addBoardCallback={addBoard} afterSubmitMessage={boardFormMessage}></NewBoardForm>: ''}
+      <span onClick={toggleNewBoardForm} className='new-board-form__toggle-btn'>{isBoardFormVisible ? 'Hide New Board Form' : 'Show New Board Form'}</span>
+      {/* <NewBoardForm addBoardCallback={addBoard} afterSubmitMessage={boardFormMessage} toggleHide={toggleHide} isVisible={isVisible}/> */}
+      <BoardContainer
+        boards={boards}
+        onDisplayCurrentBoard={displayCurrentBoard}
+      />
+      <NewCardForm addCardCallback={addCard} afterSubmitMessage={cardFormMessage} boardSelected={boardSelected}/>
+      <CardContainer deleteBoard={deleteBoard} currentBoard={currentBoard} cards={cards} onDeleteCard={deleteCard} incrementLikeCount={incrementLikeCount}/>
+    </div>
+  );
+  };
+
+export default App;