Frontend: Fetch and Display User Data in GameActivity Navbar

[onlydustapp]

📚 Overview

This feature aims to fetch user data (profile info, coin balance, and selected game mode) using React Query and display it in the GameActivity Navbar. The fetched data will be synchronized with the global state managed by UserContext and GameModeContext, ensuring a seamless and consistent gameplay experience.

🎯 Objectives

• Fetch user data via an API endpoint (or mock API) and update both UserContext and GameModeContext accordingly.
• Render the user profile information, coin balance, and selected game mode in the GameActivity Navbar.
• Implement loading and error states for better UX.
• Ensure the UI aligns with the Figma design.

🔍 Technical Implementation

1. Create a useUserData.ts hook that uses React Query to fetch user data.
2. On successful API response:
   • Update UserContext with user profile and coin data.
   • Update GameModeContext with the current game mode.
3. In the GameActivityNavbar.tsx component:
   • Use the useUserData hook to trigger data fetching.
   • Render the user data as specified by the Figma design.
4. Implement loading indicators and error handling to improve user experience.

📋 Acceptance Criteria

• User data is reliably fetched using React Query.
• The navbar displays profile information, coin balance, and selected game mode accurately.
• UserContext and GameModeContext are updated correctly based on the fetched data.
• The UI strictly follows the design provided in the Figma link.
• Loading and error states are handled gracefully.

💻 Additional Information

• Ensure to sync with the latest changes from the LogiQuest repository before starting work. Refer to the Contribution Guidelines for more details.
• Please attach a screenshot of the updated navbar with loaded user data in your pull request.

Let's add a touch of interactivity and ensure smooth gameplay experience 🚀!

[ahmadogo]

Good Afternoon,

I'm Ahmad Abdulkareem, A frontend developer with expertise in React, Next.js, Tailwind CSS, and Shadcn UI.
I'm excited to contribute to this project and resolve this issue.
(ETA): 12 hours.
I'm looking forward to collaborating with you. Thank you."

[Michelle031]

Hi, I’m Angel — a React developer familiar with React Query, context management, and responsive UI development.

Here’s how I’ll approach this:

Create a useUserData.ts hook to fetch and manage user data with React Query

Sync fetched data with UserContext and GameModeContext

Render profile info, coin balance, and game mode in GameActivityNavbar.tsx as per Figma

Handle loading and error states for a smoother experience

Ensure code structure and styling match project conventions

ETA: 14 hours

[soyaya]

Goal: Fetch user data (profile, coins, game mode) via React Query and display it in the GameActivityNavbar.

High-Level POC Implementation

1. Data Fetching Hook (useUserData.ts)
   // Simplified POC - Fetch & sync data with contexts
   import { useQuery } from 'react-query';
   import { useUserContext, useGameModeContext } from '@/contexts';

const fetchUserData = async () => {
const res = await fetch('/api/user');
return res.json();
};

export const useUserData = () => {
const { setUser } = useUserContext();
const { setGameMode } = useGameModeContext();

return useQuery('userData', fetchUserData, {
onSuccess: (data) => {
setUser(data.profile);
setGameMode(data.gameMode);
},
});
};

Navbar Integration (GameActivityNavbar.tsx)

import { useUserData } from '@/hooks/useUserData';

export const GameActivityNavbar = () => {
const { data, isLoading, error } = useUserData();

if (isLoading) return ;
if (error) return ;

return (

);
};

Above is a POC of what i can do step by step but not what will be implemented directly. I will like to be assigned to this task.

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I am also a diamond contributor on OnlyDust. I've gone through the repository and requirements. I would love to contribute to this project and I believe this is an excellent issue for me to take on. My draft PR should be ready within 24 hrs.
Can handle this task?

[Wilfred007]

Hi my name is Wilfred a software developer with years of working on different projects with teams and individually and I’d love to work on this task.

[Elite-tch]

Would love to tackle this!
ETA 24hrs

[chiscookeke11]

I’d like to resolve this.

[Psalmuel01]

I will Fetch and Display User Data in GameActivity Navbar

Hello there. I am very interested in implementing the user data fetching feature for the GameActivity Navbar. The goal of displaying user information and synchronizing it with UserContext and GameModeContext is def a valuable enhancement.

My approach would involve:

• Creating a useUserData hook using React Query to fetch user data.

• Updating UserContext with profile and coin data, and GameModeContext with the selected game mode upon successful API response.

• Utilizing this hook in GameActivityNavbar.tsx to render the required information, while also implementing loading and error handling.

• Ensuring the UI strictly adheres to the Figma design.

I am confident in my ability to deliver this feature effectively and meet all the acceptance criteria, if you let me.

ETA: 24 hours