feat: Add instagram_url field to user profile and update related forms

README.md

@@ -78,8 +78,11 @@ And that's it! Your `SkateHub Frontend` should now be up and running locally on
 
 ## :memo: Changelog
 
+### 2025
+
 ### 2024
 
+- 2024-12-31 - Add `instagram_url` field to user profile and update related forms [#113](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/113) _(v0.1.32)_
 - 2024-12-29 - Add username validation to prevent email format in sign-up form [#111](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/111) _(v0.1.31)_
 - 2024-12-19 - Implement server-side redirection for authenticated users [#103](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/103) _(v0.1.30)_
 - 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)_

package.json

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

src/contexts/AuthContext.tsx

@@ -17,14 +17,15 @@ type User = {
   about: string;
   username: string;
   website_url: string;
+  instagram_url: string;
   avatar: Avatar;
 };
 
 type Avatar = {
   url: string;
 };
 
-type UpdateUserData = Pick<User, "id" | "name" | "username" | "email" | "about" | "website_url">;
+type UpdateUserData = Pick<User, "id" | "name" | "username" | "email" | "about" | "website_url" | "instagram_url">;
 
 type AuthContextType = {
   isAuthenticated: boolean;
@@ -62,6 +63,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                 about: userData.about || "",
                 username: userData.username,
                 website_url: userData.website_url || "",
+                instagram_url: userData.instagram_url || "",
                 avatar: userData.avatar
               });
             })

src/features/user/edit/index.tsx

@@ -17,6 +17,7 @@ type RegisterForm = {
   email: string;
   about: string;
   website_url: string;
+  instagram_url: string;
   // password: string;
   // password_confirmation: string;
 };
@@ -26,7 +27,8 @@ const UserEditFormSchema = z.object({
   username: z.string().min(1, "Campo obrigatório."),
   email: z.string().email("E-mail inválido.").min(1, "Campo obrigatório."),
   about: z.string().max(255, "Máximo de 255 caracteres."),
-  website_url: z.string()
+  website_url: z.string(),
+  instagram_url: z.string()
   // .url("URL inválida.")
 });
 
@@ -62,7 +64,8 @@ export function UserEdit() {
         username: user ? user.username : "",
         email: values.email,
         about: values.about,
-        website_url: values.website_url
+        website_url: values.website_url,
+        instagram_url: values.instagram_url
       });
       addToast({
         title: "Usuário editado com sucesso.",
@@ -108,6 +111,9 @@ export function UserEdit() {
                 InputLeftAddonText="instagram.com/"
                 label="Perfil Instagram"
                 placeholder="Ex. nome_do_usuário"
+                {...register("instagram_url")}
+                error={errors.instagram_url}
+                isInvalid={isError}
               />
               <Input
                 isInputGroup

src/services/auth.ts

@@ -13,6 +13,7 @@ type UpdateUserData = {
   about: string;
   username: string;
   website_url?: string;
+  instagram_url?: string;
 };
 
 export async function signInRequest({ email, password }: SignInData) {
@@ -45,6 +46,7 @@ export async function updateUserProfile(token: string, data: UpdateUserData) {
   formData.append("email", data.email);
   formData.append("about", data.about);
   formData.append("website_url", data.website_url || "");
+  formData.append("instagram_url", data.instagram_url || "");
 
   const res = await axios.put(`${API}/api/users/${data.id}`, formData, {
     headers: {