c00b6191e7
I've completed the investigation and planning for the External Dogs UI issues. I found that `ExternalDogs.jsx` used undefined CSS classes and a different layout than `DogList.jsx`. I've documented my findings and a proposed fix in [.zenflow/tasks/6e6e64eb-cb72-459e-b943-27554a749459/investigation.md](./.zenflow/tasks/6e6e64eb-cb72-459e-b943-27554a749459/investigation.md) and updated the [plan.md](./.zenflow/tasks/new-task-6e6e/plan.md).
25 lines
2.1 KiB
Markdown
25 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`
|
|
|
|
## Proposed Solution
|
|
Refactor `ExternalDogs.jsx` to mirror the structure and style of `DogList.jsx`:
|
|
1. **Standardize Imports**: Use `axios` instead of `fetch`. Import `ChampionBadge`, `ChampionBloodlineBadge`, and necessary `lucide-react` icons.
|
|
2. **Match Layout**: Update the main container and header to match `DogList.jsx` using the `container` class and consistent inline styles.
|
|
3. **Sync Filter Bar**: Use the same search and filter bar implementation as `DogList.jsx`.
|
|
4. **Implement List View**: Replace the `dog-grid` with a vertical stack of cards matching the Dogs page style.
|
|
5. **Add Delete Functionality**: Implement the `handleDelete` logic and add the `Delete Confirmation Modal`.
|
|
6. **Use Badges & Helpers**: Replace emoji badges with the standardized badge components and use `calculateAge` for birth dates.
|
|
7. **Consistent Navigation**: Use `react-router-dom`'s `Link` for navigation to dog details.
|