Sea Turtles - Adriana Gutierrez, Esther Annorzie, Joanna Dudley, & Lili Parra #29
Conversation
…d increaseLikes API call function
… state into Board and BoardDropdown for processing - hopefully it works
…king but asynchronity is out of step
…tries to run without the patch response data
…emoved extraneous console.log lines
…e change happens one board-selection late
… to named function to clean up return value of Board.js, reordered a couple things in App to make more sense
| displayBoard = filterBoardsBySeason(boards, "Summer"); | ||
| chooseBoard(displayBoard); | ||
| break; | ||
| case 8: | ||
| case 9: | ||
| case 10: | ||
| displayBoard = filterBoardsBySeason(boards, "Fall"); | ||
| chooseBoard(displayBoard); | ||
| break; | ||
| default: | ||
| chooseBoard(blankBoard); | ||
| } |
There was a problem hiding this comment.
To reduce repeated chooseBoard calls, the switch could handle setting displayBoard for default as well, then we could call chooseBoard once after the switch, something like:
...
case 8:
case 9:
case 10:
displayBoard = filterBoardsBySeason(boards, "Fall");
break;
default:
displayBoard = blankBoard;
}
chooseBoard(displayBoard);| title: PropTypes.string, | ||
| cards: PropTypes.arrayOf(PropTypes.shape(cardObjectShape)), | ||
| }).isRequired, | ||
| }; |
There was a problem hiding this comment.
We'd probably want to include the 3rd prop deleteCardApp here as well.
| themeHeader.setAttribute("id", "summer-header"); | ||
| themeBody.setAttribute("id", "summer-body"); |
There was a problem hiding this comment.
Nice use of setting attributes to update the styles!
| const dropdownOptions = boardData.map((board) => { | ||
| if (board.title === chosenBoard.title) { | ||
| return ( | ||
| <option | ||
| key={board.board_id} | ||
| id={board.board_id} | ||
| value={JSON.stringify(board)} | ||
| selected | ||
| > | ||
| {board.title} | ||
| </option> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <option | ||
| key={board.board_id} | ||
| id={board.board_id} | ||
| value={JSON.stringify(board)} | ||
| > | ||
| {board.title} | ||
| </option> | ||
| ); | ||
| } | ||
| }); |
There was a problem hiding this comment.
We can use the spread operator to pass a dictionary of values to an element as props. This allows us to reduce duplication when creating an element with a prop we want to set conditionally.
// Set the data that all option elements will have
const optionProps = {
key: board.board_id,
id: board.board_id,
value: JSON.stringify(board)
}
// Conditionally add `selected` to the optionProps if chosenBoard is found
if (board.title === chosenBoard.title) {
optionProps["selected"] = true
}
// return an option element with the props defined in optionProps
return (<option {...optionProps}>{board.title}</option>);| message: PropTypes.string, | ||
| }; | ||
|
|
||
| const boardObjectShape = { |
There was a problem hiding this comment.
Nice use of variables to make the propTypes definition cleaner!
| }; | ||
|
|
||
| return ( | ||
| <div id="all-MainContent"> |
There was a problem hiding this comment.
I would consider using main or section as the outer wrapper here. Like in raw HTML, with React we still want to make sure we're using semantic tags wherever possible and fallback to tags without semantic meaning like div when nothing else fits better.
No description provided.