Sea Turtles - Mission Inspirational - Georgia, Natalia, Shari, Tamara #28
Conversation
adds cardApiToJson, increaseLike, handleLike functions; builds a basic prop path from App to Board to Card
creates CardList component files; adds CardList component to prop pathway
adds BoardDropdown files to components folder
component
added CSS and wireframe to App.js
Adds like functionality
Adds board dropdown functionality and component
Board component
updates board jsx, adds class to dropdown form
tries to fix call to css file that wasn't working
adds prop to Board and adjusts PropType
moves useEffect fx into useEffect and adds dependencies
Natalia 7 18
Nat daily 7 19
Made everything pretty
Delete_card and enter to create new card
removes unneeded comment; adds proptypes to dropdown components
|
|
||
| const cardApiToJson = (card) => { | ||
| const { id, likes, message, board_id: boardId } = card; | ||
| return { id, likes, message, boardId }; |
There was a problem hiding this comment.
Nice function for transforming the card response!
| const showChosenBoard = (boardTitle) => { | ||
| setBoardOption(boardTitle); | ||
| }; | ||
|
|
||
| // order is ascending or descending, type is which type of sort | ||
| const updateSortOrder = (order) => { | ||
| setSortOrder(order); | ||
| }; | ||
|
|
||
| const updateSortType = (type) => { | ||
| setSortType(type); | ||
| }; |
There was a problem hiding this comment.
Since these 3 functions only call the useState functions and pass through the parameters without change, I'd consider if they could be removed and if the useState functions directly used in their place.
| if (cardOrder === "Ascending") { | ||
| if (cardSort === "ID") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.id > b.id ? 1 : -1 | ||
| ); | ||
| } else if (cardSort === "Likes") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.likes > b.likes ? 1 : -1 | ||
| ); | ||
| } else if (cardSort === "Alphabetically") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.message.toLowerCase() > b.message.toLowerCase() ? 1 : -1 | ||
| ); | ||
| } | ||
| } else if (cardOrder === "Descending") { | ||
| if (cardSort === "ID") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.id < b.id ? 1 : -1 | ||
| ); | ||
| } else if (cardSort === "Likes") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.likes < b.likes ? 1 : -1 | ||
| ); | ||
| } else if (cardSort === "Alphabetically") { | ||
| sortedCardData = chosenBoardData.cards.sort((a, b) => | ||
| a.message.toLowerCase() < b.message.toLowerCase() ? 1 : -1 | ||
| ); | ||
| } | ||
| } | ||
| setSortedData([...sortedCardData]); |
There was a problem hiding this comment.
When you have long if/else trees whose conditions are looking to match something particular, a switch statement can be a good replacement: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
| .then((response) => { | ||
| return cardApiToJson(response.data); | ||
| }) | ||
| .then(() => getSelectedBoardData(boardId)) |
There was a problem hiding this comment.
I'm wondering, were y'all seeing issues having more than 1 statement in a then block?
| }; | ||
|
|
||
| useEffect(() => { | ||
| document.title = "INSPOBOARD"; |
There was a problem hiding this comment.
If it won't change, I would probably set this in index.html.
| </section> | ||
| </section> | ||
| <NewCardForm updateCards={addNewCard} /> | ||
| </main> |
| disabled={ | ||
| title.length === 0 || | ||
| owner.length === 0 || | ||
| title.length > 40 || | ||
| owner.length > 40 | ||
| } | ||
| className={ | ||
| title.length === 0 || | ||
| owner.length === 0 || | ||
| title.length > 40 || | ||
| owner.length > 40 | ||
| ? "board-button" | ||
| : "board-button-grey" | ||
| } |
There was a problem hiding this comment.
To keep the JSX cleaner and reduce repetition, I'd consider calculating the result of (title.length === 0 || owner.length === 0 || title.length > 40 || owner.length > 40) somewhere above and storing it in a variable to use here.
Adding skills assessed and goal of project
No description provided.