Show Full-Screen Image for Specific Favorite Photo

[GeorgePapalazaridis]

We need to implement a photo detail view that displays a full-screen version of the photo when accessed via the route /photos/:id. This view should also include a "Remove from Favorites" button that allows users to remove the photo from their favorites list.

Requirements:

• [x] Route Setup:

  • Create a new route for /photos/:id in the Angular application.
  • This route should load the photo-detail component.

• [x] Photo Detail Component:

  • The component should display a full-size version of the photo.
  • Use the id from the route parameter (/photos/:id) to fetch the specific photo.
  • The photo details should include:
    • A full-screen image.
    • The photo title.

• [x] Favorites Button:

  • A "Remove from Favorites" button should be included in the detail view.
  • The button will be visible only if the photo is currently in the favorites list.
  • When clicked, the photo should be removed from the favorites list using the FavoritesService.

• [x] UI/UX:

  • Ensure the photo is displayed in a clean, user-friendly way.
  • The photo should have a modal-like appearance or a full-screen view, ensuring that it stands out.
  • The "Remove from Favorites" button should be styled clearly, with a distinct icon (e.g., a trash icon or "heart" icon with a "removed" effect).

Technical Details:

• Route: /photos/:id
• Component: PhotoDetailComponent
• Service: Use the FavoritesService to check if the photo is a favorite and to remove it from favorites.
• Route Param: Retrieve the id from the route parameters using Angular's ActivatedRoute.

Acceptance Criteria:

• The /photos/:id route loads the photo detail view with the full image and title.
• The "Remove from Favorites" button appears if the photo is already a favorite.
• Clicking the "Remove from Favorites" button successfully removes the photo from the favorites list and updates the UI.