Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request Summary
This pull request introduces support for icons within the frontend application. The following key changes were made:
New API Endpoint: Added a new API endpoint updateGoalIcon to update the icon of a goal.
Endpoint: PUT /api/Goal/{goalId}
Payload: { icon: string }
Goal Model: Updated the Goal interface to include an optional icon field.
icon: string | null
Goal Card Component: Modified the GoalCard component to display the icon associated with a goal.
Added a styled Icon component to render the icon.
Updated the GoalCard to include the icon display.
Emoji Picker: Integrated an emoji picker for selecting icons using the emoji-mart library.
State Management: Added state variables to manage the icon and emoji picker visibility.
Event Handling: Implemented event handlers to update the icon in both the local state and the backend.
Icon Selection: Added functionality to the GoalManager component to select and update icons.
Included an IconDisplay component for displaying the selected icon.
Integrated the emoji picker within the GoalManager component.
Updated the Redux store and backend API when an icon is selected.
Styled Components: Made styling adjustments to various components to accommodate the new icon feature.
Adjusted styles for GoalManagerContainer, IconDisplay, and EmojiPickerContainer.
Detailed Changes:
API Changes:
updateGoalIcon(goalId: string, icon: string): Added this function to update the goal's icon.
Model Changes:
Goal interface: Added icon: string | null.
Component Updates:
GoalCard: Display the goal's icon.
GoalManager:
State management for icon and emojiPickerIsOpen.
Function pickEmojiOnClick to handle icon selection and update.
New Imports:
emoji-mart for the emoji picker.
BaseEmoji for type definitions.
Testing:
Unit Tests: Added unit tests to verify the new icon functionality.
Manual Testing: Performed manual testing to ensure icons are correctly displayed and updated.
Please review the changes.