Prepare API Calls in `useTopics` with Mock Data

[Septimus4]

Objective:
Set up placeholders for API calls within the useTopics function to prepare for future backend integration. For now, use mock data for trending topics and query filtering while keeping the structure ready for actual API requests.

Tasks

1. Set Up Axios

   • Install axios to standardize API call structure for future integration.
   • Command: npm install axios or yarn add axios

2. Configure Mock Data & API Call Structure

   • Create a structure for the submitQuery function to handle API calls.
   • Wrap the API call in a conditional check to return mock data if the backend isn’t available.

3. Replace Dummy Trending Topics with Mock Data in submitQuery

   • Replace the existing trending topics filter logic with a simulated API call.
   • Use the following mock data response to mimic trending topics:

     const mockTrendingResponse = {
     data: { topics: ['data science', 'biology', 'ai', 'longevity', 'trading'] }
     };

   • Update searchOptions with the filtered results based on query.

4. Implement Error and Loading States

   • Keep existing error and loading states to maintain a responsive UI.
   • Ensure the error state displays if no topics match the query.

5. Example of submitQuery Function with Mock Data

   import axios from 'axios';
   
   const submitQuery = async () => {
      loading.value = true;
      try {
          // Use mock data for now, but structure this for future API integration
          const response = mockTrendingResponse;
   
          searchOptions.value = response.data.topics.filter((topic) =>
              topic.toLowerCase().includes(query.value?.toLowerCase()?.trim() || "")
          );
   
          error.value = searchOptions.value.length ? '' : 'No relevant topics are discussed on this server';
      } catch (e) {
          error.value = 'Failed to fetch topics from the server.';
      } finally {
          loading.value = false;
      }
   };

Acceptance Criteria

• [ ] submitQuery is structured to handle an API call with mock data in place.
• [ ] Trending topics are updated based on query, and error/loading states are displayed correctly.
• [ ] Easy-to-swap logic for replacing mock data with actual API response when backend is ready.

---

This will allow the frontend to function with mock data, while the structure is ready for actual API requests once the backend is live.

[Emmanuel-Darko]

Okay @Septimus4 So which endpoint do I use for the mocking? If I'm using this const mockTrendingResponse = { data: { topics: ['data science', 'biology', 'ai', 'longevity', 'trading'] } };

Will I still need the axios?

[Septimus4]

@Emmanuel-Darko Yes, even with mock data, Axios is still helpful here to maintain the structure for future backend integration. By setting up Axios now, we’ll be able to swap in the actual API response easily without changing the logic.

Here’s how we can structure it:

1. Use Axios as if we’re making a real API call but conditionally use the mock data if the backend isn’t ready.
2. When we’re ready to connect to the backend, we just replace the mock URL with the actual endpoint.

Here’s how the submitQuery function would look:

import axios from 'axios';

const submitQuery = async () => {
    loading.value = true;
    try {
        const response = await axios.get('/mock-endpoint');  // Placeholder for actual endpoint
        const topics = response?.data?.topics || mockTrendingResponse.data.topics;

        searchOptions.value = topics.filter((topic) =>
            topic.toLowerCase().includes(query.value?.toLowerCase()?.trim() || "")
        );

        error.value = searchOptions.value.length ? '' : 'No relevant topics are discussed on this server';
    } catch (e) {
        error.value = 'Failed to fetch topics from the server.';
    } finally {
        loading.value = false;
    }
};

In this setup:

• /mock-endpoint is a placeholder for the actual endpoint we’ll use later.
• Axios handles the structure, so swapping in the real backend will just be a matter of updating the URL.

[Septimus4]

But of course if you prefer any other http library or dependency to do that, you are free to use it instead, what's matters is the ability swap in the actual API response easily without changing the logic