feat: user profile

package.json

@@ -22,18 +22,22 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.3",
     "query-string": "^9.1.0",
     "react": "^18.3.1",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.8.0",
     "@tailwindcss/typography": "^0.5.14",
+    "@tanstack/eslint-plugin-query": "^5.51.15",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",

src/App.tsx

@@ -2,11 +2,15 @@ import "./App.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes";
 import { AuthProvider } from "./context/AuthProvider.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 function App() {
+  const queryClient = new QueryClient();
   return (
-    <AuthProvider>
-      <RouterProvider router={router} />
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <RouterProvider router={router} />
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }
 

src/api/auth/service/auth.service.ts

@@ -1,4 +1,7 @@
-import { TokenScopeResponse } from "../../../data-objects/interface";
+import {
+  TokenResponse,
+  TokenScopeResponse,
+} from "../../../data-objects/interface";
 
 const authorizationEndpoint = "https://accounts.spotify.com/authorize";
 const clientId = import.meta.env.VITE_CLIENT_ID;
@@ -73,9 +76,10 @@ export async function getToken(code: string): Promise<TokenScopeResponse> {
   return response;
 }
 
-export const getRefreshToken = async () => {
+export const getRefreshToken = async (
+  refreshToken: string,
+): Promise<TokenResponse> => {
   // refresh token that has been previously stored
-  const refreshToken = localStorage.getItem("refresh_token");
   const url = "https://accounts.spotify.com/api/token";
 
   const payload = {
@@ -92,8 +96,5 @@ export const getRefreshToken = async () => {
   const body = await fetch(url, payload);
   const response = await body.json();
 
-  localStorage.setItem("access_token", response.accessToken);
-  if (response.refreshToken) {
-    localStorage.setItem("refresh_token", response.refreshToken);
-  }
+  return response;
 };

src/api/user/hooks/useProfileQuery.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import profileQueryKey from "./user-query-keys.ts";
+import { getUserData } from "../service/user.service.ts";
+
+export const useProfileQuery = (token: string) => {
+  return useQuery({
+    queryKey: profileQueryKey.profile,
+    queryFn: () => getUserData(token),
+  });
+};

src/api/user/hooks/user-query-keys.ts

@@ -0,0 +1,5 @@
+const profileQueryKey = {
+  profile: ["profile"],
+};
+
+export default profileQueryKey;

src/api/user/index.ts

@@ -0,0 +1 @@
+export * from "./hooks/useProfileQuery";

src/api/user/service/user.service.ts

@@ -0,0 +1,12 @@
+import { ProfileInterface } from "../../../data-objects/interface";
+
+export async function getUserData(token: string): Promise<ProfileInterface> {
+  const response = await fetch("https://api.spotify.com/v1/me", {
+    method: "GET",
+    headers: {
+      Authorization: "Bearer " + token,
+    },
+  });
+
+  return await response.json();
+}