Create TagPage

[TheRealLowyer]

ℹ️ Description

The TagPage component has been implemented to enhance the user experience by providing a centralized page for posts associated with specific tags. This new feature ensures dynamic navigation, seamless integration with the existing Feed component, and improved styling to showcase posts based on tags.

🎯 Tasks

TagPage Component

• Implement the TagPage component to:
  • Fetch posts associated with a specific tag from the backend.
  • Display posts using the existing Feed component.
  • Include a styled header showcasing the tag name.
  • Handle loading and error states gracefully.

Service Integration

• Create the getPostsByTag service function to:
  • Fetch posts using the endpoint GET /api/post/get-posts-by-tag?tag=@TAG.
  • Pass the Authorization token for authenticated users.
  • Handle unauthenticated requests by sending an empty token.

Routing

• Add a dynamic route for TagPage:
  • Configure <Route path="/tag/:tag" element={<TagPage />} /> in the router.
  • Ensure the TagPage dynamically renders based on the tag parameter.

Dynamic Links

• Update components (e.g., PostHeader) to link tags dynamically:
  • Use <Link to={/tag/${encodeURIComponent(tag)}}>{tag}</Link> for navigation.
  • Ensure special characters in tags are properly encoded with encodeURIComponent.

Styling Enhancements

• Design a visually appealing and responsive header for the TagPage:
  • Highlight the tag name with a styled badge.
  • Add modern UI elements to improve user interaction and overall aesthetics.