30 lines
2.1 KiB
Markdown
30 lines
2.1 KiB
Markdown
# Investigation - External Dogs UI Issues
|
|
|
|
## Bug Summary
|
|
The "External Dogs" interface does not match the layout and style of the main "Dogs" page. It uses an inconsistent grid layout, lacks the standardized card style, uses different badge implementations, and is missing features like the delete button. Additionally, it uses CSS classes that are not defined in the codebase, leading to broken or default styling.
|
|
|
|
## Root Cause Analysis
|
|
- **Inconsistent Layout**: `DogList.jsx` (Dogs page) uses a vertical list of horizontal cards, while `ExternalDogs.jsx` uses a grid of square-ish cards.
|
|
- **Undefined CSS Classes**: `ExternalDogs.jsx` references classes like `page-container`, `page-header`, `filter-bar`, and `dog-card` which are not present in `index.css` or `App.css`.
|
|
- **Missing Components**: `ExternalDogs.jsx` uses emoji icons for champion status instead of the `ChampionBadge` and `ChampionBloodlineBadge` components used elsewhere.
|
|
- **Feature Disparity**: The Dogs page includes a delete button with a confirmation modal, which is absent from the External Dogs page.
|
|
- **Helper Usage**: `ExternalDogs.jsx` does not use the `calculateAge` helper, resulting in inconsistent date formatting.
|
|
|
|
## Affected Components
|
|
- `client/src/pages/ExternalDogs.jsx`
|
|
|
|
## Implementation Notes
|
|
Refactored `ExternalDogs.jsx` to match `DogList.jsx` in layout, style, and functionality. Key changes:
|
|
- Switched to `axios` for API calls.
|
|
- Adopted the vertical list layout instead of the grid.
|
|
- Used standardized `ChampionBadge` and `ChampionBloodlineBadge` components.
|
|
- Added a search/filter bar consistent with the main Dogs page.
|
|
- Implemented delete functionality with a confirmation modal.
|
|
- Standardized age calculation using the `calculateAge` helper logic.
|
|
- Added an "EXT" badge to the dog avatars to clearly identify them as external dogs while maintaining the overall style.
|
|
|
|
## Test Results
|
|
- Verified that all components are correctly imported.
|
|
- Verified that API endpoints match the backend routes.
|
|
- Code review shows consistent use of CSS variables and classes (e.g., `container`, `card`, `btn`).
|