Added Board component and select/list all boards functionality

src/App.js

@@ -1,10 +1,8 @@
-import logo from './logo.svg';
 import './App.css';
 
 import {useEffect, useState} from 'react';
 import axios from 'axios';
 
-
 import Board from './components/Board';
 import Card from './components/Card';
 import NewBoardForm from './components/NewBoardForm';
@@ -14,24 +12,50 @@ import CardList from './components/CardList';
 
 function App() {
 
-  // create a state for board -> set useSate to ([]), empty list == array of empty boards
+  // create state for board (default: empty array, meaning no boards created)
   const [boardsData, setBoardsData] = useState([]) 
-  // create state for selected board
+  // create state for selected board (default: no board is selected)
   const [selectedBoard, setSelectedBoard] = useState({
     title: '',
     owner: '', 
     board_id: null
   });
 
-  //  utilize useEffect for API call -> will call backend .env 
-
+  // sends GET request to boards endpoint
+  // response contains data for all boards
+  useEffect(() => {
+    axios
+    .get(`${process.env.REACT_APP_BACKEND_URL}/boards`, {
+    })
+    .then((response) => {setBoardsData(response.data);
+    })
+  }, []);
+
+  // 
+  const selectBoard = (board) => { setSelectedBoard(board) };
 
+  // mapping the response data from a successful GET request to 
+  // a list of boards (boardsElements)
+  const boardsElements = boardsData.map((board) => {
+    return (<li>
+      <Board board={board} onBoardSelect={selectBoard}></Board>
+    </li>)
+  });
 
+  // Board component will display a blue border if rendered correctly
   return (
     <div>
       <h1>Inspiration Board</h1>
-      <h2>Boards</h2>
-      <h2>Selected Boards</h2>
+        <section>
+            <h2>Boards</h2>
+            <ol className="boards__list">
+              {boardsElements}
+            </ol>
+        </section>
+        <section>
+            <h2>Selected Board</h2>
+            <p>{selectedBoard.board_id ? `${selectedBoard.title} - ${selectedBoard.owner}` : 'First select a board from list'}</p>
+        </section>
       <h2>Create a New Board</h2>
       <h2>Create a New Card</h2>
       <h2>Selected Card</h2>

src/components/Board.css

@@ -0,0 +1,4 @@
+/* for testing only: */
+.board {
+    border: dashed 2px blue;
+}

src/components/Board.js

@@ -1,13 +1,14 @@
 import './Board.css';
-import PropTypes from 'prop-types';
+
 
 const Board = (props) => {
     return (
-        <section>
-            {/* props we need: board & onBoardSelect 
-            onClick too*/}
-        </section>
+        <div className="board"
+        onClick={() => props.onBoardSelect(props.board)}
+        >
+            {props.board.title}
+        </div>
     );
-}
+};
 
 export default Board;