Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added frontend support for icons #46

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

kingwrg
Copy link

@kingwrg kingwrg commented Jul 11, 2024

Pull Request Summary
This pull request introduces support for icons within the frontend application. The following key changes were made:

  1. API Integration for Icon Updates
    New API Endpoint: Added a new API endpoint updateGoalIcon to update the icon of a goal.
    Endpoint: PUT /api/Goal/{goalId}
    Payload: { icon: string }
  2. Data Model Updates
    Goal Model: Updated the Goal interface to include an optional icon field.
    icon: string | null
  3. User Interface Enhancements
    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.
  4. Icon Picker Integration
    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.
  5. Goal Manager Component
    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.
  6. Styling Adjustments
    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant