Refactor API calls into a single call

[qisforq]

Here's a more detailed task description for refactoring the API calls into a single call:

Objective: Refactor the API calls in the AthletiFi Next.js application to consolidate the fetching of user-related data (card data, settings, and notifications) into a single API call when the app first loads

Sub-tasks

1. Identify the current API calls for fetching user-related data.

   • [ ] Review the codebase and locate the existing API calls for fetching card data, settings, and notifications separately.
   • [ ] Take note of the components or pages that initiate these API calls (e.g., src/app/(auth)/profile/page.tsx, src/app/(auth)/settings/page.tsx).

2. Design a new API endpoint for fetching consolidated user data.

   • [ ] Create a new API route file (e.g., src/app/api/user-data/route.ts) to handle the consolidated user data fetch.
   • [ ] Define the API endpoint URL (e.g., /api/user-data) and the expected request and response formats.
   • [ ] Determine the necessary query parameters or request payload to include any required user identification or filtering options.

3. Implement the server-side logic for the new API endpoint.

   • [ ] In the new API route file, create the handler function for the consolidated user data fetch.
   • [ ] Retrieve the authenticated user's ID from the request (e.g., using the authentication middleware or by decoding the user token).
   • [ ] Use the user ID to fetch the user's card data from the player_card_images table in the PostgreSQL database.
   • [ ] Fetch the user's settings and notification preferences from the relevant tables (e.g., users table, many_users_has_many_notification_types table).
   • [ ] Combine the fetched data into a single response object, structuring it in a way that is easy to consume on the client-side.
   • [ ] Handle any necessary error scenarios and return appropriate error responses.

4. Update the client-side code to use the new consolidated API endpoint.

   • [ ] Identify the components or pages that currently initiate separate API calls for card data, settings, and notifications (e.g., src/app/(auth)/profile/page.tsx, src/app/(auth)/settings/page.tsx).
   • [ ] Replace the separate API calls with a single API call to the new consolidated endpoint (e.g., /api/user-data).
   • [ ] Update the data handling and state management logic in the affected components to work with the consolidated response data structure.
   • [ ] Ensure that the UI components properly render the fetched data and reflect any changes in the data structure.

5. Optimize the API response and client-side rendering.

   • [ ] Analyze the size and structure of the consolidated user data response.
   • [ ] Consider implementing pagination or lazy loading mechanisms to efficiently handle large amounts of card data or notifications.
   • [ ] Evaluate the performance impact of the consolidated API call and make necessary optimizations (e.g., caching, data compression).

6. Test the refactored API call and client-side integration.

   • [ ] Perform end-to-end testing to verify that the client-side components correctly fetch and display the consolidated data.
   • [ ] Test various scenarios, such as users with different numbers of cards, settings, and notification preferences.
   • [ ] Validate that the refactored code handles error scenarios gracefully and provides appropriate user feedback.

7. Document the changes and update relevant documentation.

   • [ ] Update the API documentation to include the new consolidated user data endpoint, including the request and response formats.
   • [ ] Modify any relevant client-side documentation or code comments to reflect the changes in data fetching and handling.
   • [ ] Communicate the refactoring changes to the team, highlighting the benefits and any necessary updates to dependent code or components.

8. Monitor and evaluate the impact of the refactored API call.

   • [ ] Deploy the updated code to the production environment.
   • [ ] Monitor the performance and behavior of the application after the refactoring, paying attention to any improvements or issues.
   • [ ] Gather feedback from users and stakeholders regarding the responsiveness and user experience of the application with the consolidated API call.
   • [ ] Make any necessary adjustments or optimizations based on the monitoring and feedback.