feat: Update user avatar handling and modify user data structure

README.md

@@ -80,6 +80,7 @@ And that's it! Your `SkateHub Frontend` should now be up and running locally on
 
 ### 2024
 
+- 2024-12-12 - Update user avatar handling and modify user data structure [#99](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/99) _(v0.1.29)_
 - 2024-12-07 - Add custom `404 error` page [#91](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/91) _(v0.1.28)_
 - 2024-12-07 - Implement user profile update functionality in AuthContext [#89](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/89) _(v0.1.27)_
 - 2024-12-07 - Create `textarea` form component [#88](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/88) _(v0.1.26)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skatehub-frontend",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/Header/Profile.tsx

@@ -36,7 +36,11 @@ export function Profile({ showProfileData = true }: ProfileProps) {
       )}
       <Menu>
         <MenuButton>
-          <Avatar size="md" name={user?.name} bgColor="green.300" src={`https://robohash.org/${user?.email}`} />
+          <Avatar
+            size="md"
+            bgColor="green.300"
+            src={user?.avatar ? user?.avatar.url : "https://robohash.org/" + user?.email}
+          />
         </MenuButton>
 
         <MenuList bg="gray.900" borderColor="gray.800">

src/contexts/AuthContext.tsx

@@ -16,8 +16,12 @@ type User = {
   email: string;
   about: string;
   username: string;
-  avatar_url: string;
   website_url: string;
+  avatar: Avatar;
+};
+
+type Avatar = {
+  url: string;
 };
 
 type UpdateUserData = Pick<User, "id" | "name" | "username" | "email" | "about" | "website_url">;
@@ -57,8 +61,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                 email: userData.email,
                 about: userData.about || "",
                 username: userData.username,
-                avatar_url: userData.avatar_url || "",
-                website_url: userData.website_url || ""
+                website_url: userData.website_url || "",
+                avatar: userData.avatar
               });
             })
             .catch(() => {

src/services/auth.ts

@@ -11,9 +11,8 @@ type UpdateUserData = {
   name: string;
   email: string;
   about: string;
-  // username: string;
-  // avatar_url: string;
-  website_url: string;
+  username: string;
+  website_url?: string;
 };
 
 export async function signInRequest({ email, password }: SignInData) {
@@ -26,7 +25,7 @@ export async function signInRequest({ email, password }: SignInData) {
 }
 
 export async function userMe(token: string) {
-  const res = await axios.get(`${API}/api/users/me`, {
+  const res = await axios.get(`${API}/api/users/me?populate[avatar][fields][0]=url`, {
     headers: {
       Authorization: `Bearer ${token}`,
       "Content-Type": "application/json"
@@ -45,7 +44,7 @@ export async function updateUserProfile(token: string, data: UpdateUserData) {
   formData.append("name", data.name);
   formData.append("email", data.email);
   formData.append("about", data.about);
-  formData.append("website_url", data.website_url);
+  formData.append("website_url", data.website_url || "");
 
   const res = await axios.put(`${API}/api/users/${data.id}`, formData, {
     headers: {