Adds state for cardList and updates state in App

src/App.js

@@ -1,9 +1,16 @@
 import './App.css';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import CardList from './components/CardList.js';
+import Card from './components/Card.js';
 import NewBoardForm from './components/NewBoardForm';
-import BoardList from './components/BoardList';
+import NewCardForm from './components/NewCardForm';
 import axios from 'axios';
 
+
+//BLUEPRINTS: 
+//"/cards", "/<int:id>/cards", "/<int:id>", "/<int:id>/like"
+//"/boards"
+
 // process.env.REACT_APP_BACKEND_URL
 // axios.get(`${process.env.REACT_APP_BACKEND_URL}/boards`, {
   // ...
@@ -14,8 +21,117 @@ boardsData
 selectedBoard
 isBoardFormVisible */
 
+//Creates helper data array to test with
+const createCards = () => {
+  const cards = [];
+
+  let current_id = 0
+
+  for(let row = 0; row < 9; row +=1) {
+    cards.push({
+      card_id: current_id,
+      likes_count: 0,
+      message: 'This works!'});
+      current_id += 1
+  }  
+  console.log('cards', cards)
+  return cards;
+}
+
+
 function App() {
+  const BASE_URL = 'http://localhost:5000';
+
   const [boardsData, setBoardsData] = useState([])
+  const [cards, setCards] = useState(createCards()); //for test data
+  // const [cards, setCards] = useState([]);  //for API calls
+
+  //when a user clicks a card list then:
+
+  // useEffect(()=>{
+    //   axios
+    //   .get(`${BASE_URL}/cards`)
+    //   .then((response) => console.log(response))
+    //   //.then((response)=>setCards(response))//setCards will have an empty obj or list as default([])
+    //   .catch((error)=>console.log(error));
+    // }, []);
+    //use state to
+    //then it will trigger render so that it gets added to cardList with -setCards
+    //the way we trigger a re-render is by calling a set function
+
+  const createNewCard = (newCardObj) => {
+
+    console.log('hi im in createNewCard')
+    console.log(newCardObj.message)
+
+    // axios
+    //     .post(`${BASE_URL}/boards/{board_id}/cards/`, newCardObj)
+    //     //   .then((response) => console.log(response))
+    //     .then((response)=>{
+    //       // const newCardsList = [...cards]
+    //       // newCardsList.push(response.data)
+    //       //setCards(newCardsList)
+    //       setCards([...cards, response.data]) //do I need to specify here?
+    //     })
+    //     .catch((error)=>console.log(error));
+
+
+
+    //recieves an object from NewCardForm constructed from the data from the form fields : 
+    //{
+  //   card_id: Id,
+  //   likes_count: 0,
+  //   message: ''
+  //  }
+
+    //put card data into database with POST request
+    // useEffect(()=>{
+    //   axios
+    //   .post(`${BASE_URL}/cards`, {newCardObject.newMessage})
+    //   .then((response) => console.log(response))
+    //   //.then((response)=>setCards(response))//setCards will have an empty obj or list as default([])
+          //or .then((response)=>())
+    //   .catch((error)=>console.log(error));
+    // }, []);
+
+    // //then do API GET request to get all the cards and then put that data in setCards to update state
+
+  } 
+
+    const testDeleteCardCallback = (card_id) => {
+      console.log('Im in delete')
+      // axios.delete(`${BASE_URL}/cards/card_id`)
+      // .then(() =>);
+    }
+
+    const testLikeCallback = (card_id) => {
+      console.log('Im in Like', card_id)
+
+      //still needs logic
+
+      // axios.patch(`${BASE_URL}/cards/card_id`)
+      //.then(setCards(response.data.card))
+      //.catch((error) => console.log(error))
+
+
+      // update state/iterate through cards and find the one I want and change the likes count
+      //then display the updated card
+      //check out update student
+    }
+
+    const testfunction = () => {
+      console.log('This is a test function')
+    }
+
+  // return(
+  //   <div className="Cards">
+  //     <h2>Cards</h2>
+  //     <main>
+  //       <CardList cards={cards} onClickCallback={testfunction} deleteCallback={testDeleteCardCallback} likeCallback={testLikeCallback}/>
+  //       <NewCardForm createNewCard={createNewCard} />
+  //     </main>
+  //   </div>
+  // )
   const [selectedBoard, setSelectedBoard] = useState({
     title: '',
     owner: '',
@@ -83,24 +199,31 @@ function App() {
 
   //tenery is board form visible, render newboard form, if not ''
   return (
-    <div>
-      <h1>Inspiration Board</h1>
-      <h2>Create a New Board</h2>
-      {isBoardFormVisible ? <NewBoardForm createNewBoard={CreateNewBoard}/> : ''}
-      <input type="button" value={changeBoardForm} onClick = {() => setIsBoardFormVisible(!isBoardFormVisible)}/>
-      {/* <NewBoardForm createNewBoard={CreateNewBoard}/> */}
-      {/* <input type="button" value="Hide Board Form" onClick = {() => setIsBoardFormVisible(false)}/> */}
-
-      <section>
-        <h3>Boards</h3>
-        <BoardList boards={boardsData} onBoardSelect={onBoardSelect}/>
-      </section>
-      <section>
-        <h3>Selected Board</h3>
-        <div> {selectedBoard.title} - {selectedBoard.owner}</div>
-      </section>
+    // <div>
+    //   <h1>Inspiration Board</h1>
+    //   <h2>Create a New Board</h2>
+    //   {isBoardFormVisible ? <NewBoardForm createNewBoard={CreateNewBoard}/> : ''}
+    //   <input type="button" value={changeBoardForm} onClick = {() => setIsBoardFormVisible(!isBoardFormVisible)}/>
+    //   {/* <NewBoardForm createNewBoard={CreateNewBoard}/> */}
+    //   {/* <input type="button" value="Hide Board Form" onClick = {() => setIsBoardFormVisible(false)}/> */}
+
+    //   <section>
+    //     <h3>Boards</h3>
+    //     <BoardList boards={boardsData} onBoardSelect={onBoardSelect}/>
+    //   </section>
+    //   <section>
+    //     <h3>Selected Board</h3>
+    //     <div> {selectedBoard.title} - {selectedBoard.owner}</div>
+    //   </section>
+      <div>
+      <h2>Cards</h2>
+      <main>
+        <CardList cards={cards} onClickCallback={testfunction} deleteCallback={testDeleteCardCallback} likeCallback={testLikeCallback}/>
+        <NewCardForm createNewCard={createNewCard} />
+      </main>
     </div>
   );
+
 }
 
 export default App;

src/components/Card.js

@@ -0,0 +1,34 @@
+import '../App.css';
+import App from '../App.js';
+import CardList from './CardList.js';
+import { useState } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const Card = (props) => {
+  console.log('Card:', props)
+
+  const handleLikeClick = () => {
+    props.likeCallback(props.id)
+  }
+
+  const handleDeleteClick = () => {
+    props.deleteCallback(props.id)
+  }
+
+  return (
+    <div>
+        <span>{props.message}</span>
+        <button className="deleteButton" onClick={handleDeleteClick}>Delete</button>
+        {/* <span className="likeCount">{props.likeCount}</span> */}
+        <button className='likeButton' onClick={handleLikeClick}>Like</button>
+    </div>
+  )
+}
+
+// Card.propTypes = {
+//   id: PropTypes.number.isRequired,
+// };
+
+export default Card;

src/components/CardList.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import '../App.css';
+import Card from './Card';
+import PropTypes from 'prop-types';
+
+
+const CardList = (props) => {
+
+    console.log('cardsList props', props.cards)
+    const cardComponents = props.cards.map((card, index)=>{
+        return(
+            <li key={index}>
+                <Card
+                    id={card.card_id}
+                    message={card.message}
+                    onClick={props.onClickCallback}
+                    likeCallback={props.likeCallback}
+                    deleteCallback={props.deleteCallback}>
+                </Card>
+            </li>  
+        ); 
+    });
+    return (
+        <section>
+            <ul>
+                {cardComponents}
+            </ul>
+        </section>
+    );
+};
+
+
+// CardList.propTypes = {
+//     cards: PropTypes.arrayOf(
+//         PropTypes.arrayOf(PropTypes.shape({
+//             id:PropTypes.number.isRequired,
+//             messsage: PropTypes.string.isRequired
+//         }))
+//     ),
+//     onClickCallback: PropTypes.func
+// };
+
+export default CardList;
+
+

src/components/NewCardForm.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+
+const NewCardForm = (props) => {
+
+    const [message, setMessage] = useState('');
+
+    const onMessageEntry = (event) => {
+        setMessage({
+            ...message,
+            message: event.target.value
+        })
+    };
+
+    const submitCard = (event) => {
+        event.preventDefault();
+
+
+        props.createNewCard({
+            message: message.message
+        })
+
+
+        setMessage({
+            message: ''
+        })
+    };
+
+
+//why doesnt this form render on the UI?
+    return(
+        <form onSubmit={submitCard}>
+            <div>
+                <label htmlFor='message'>Message</label>
+                <input 
+                    name='message'
+                    value={message.message}
+                    onChange={onMessageEntry} />
+            </div>
+            <button type='submit'>Submit</button>
+        </form>
+    );
+};
+
+export default NewCardForm;