chore: adjust translation for better language

mpsalunggg · mpsalunggg · commit 2fd8a9a8591f · 2025-08-27T20:52:09.000+07:00
diff --git a/src/domains/Profile.ts b/src/domains/Profile.ts
@@ -22,15 +22,15 @@ export type ProfileResType = z.infer<typeof profileResSchema>;
 
 export const createProfileFormSchema = (t: (key: string) => string) =>
   z.object({
-    username: z.string().min(1, t("Profile.validation.username-required")),
-    fullname: z.string().min(1, t("Profile.validation.fullname-required")),
-    date_of_birth: z.string().min(1, t("Profile.validation.date-of-birth-required")),
-    gender: z.enum(["Male", "Female"], { required_error: t("Profile.validation.gender-required") }),
-    phone_number: z.string().min(1, t("Profile.validation.phone-number-required")),
-    address: z.string().min(1, t("Profile.validation.address-required")),
-    github: z.string().url(t("Profile.validation.github-invalid-url")).optional().or(z.literal("")),
-    linkedin: z.string().url(t("Profile.validation.linkedin-invalid-url")).optional().or(z.literal("")),
-    personal_web: z.string().url(t("Profile.validation.personal-web-invalid-url")).optional().or(z.literal("")),
+    username: z.string().min(1, t("validation.username-required")),
+    fullname: z.string().min(1, t("validation.fullname-required")),
+    date_of_birth: z.string().min(1, t("validation.date-of-birth-required")),
+    gender: z.string().min(1, t("validation.gender-required")),
+    phone_number: z.string().min(1, t("validation.phone-number-required")),
+    address: z.string().min(1, t("validation.address-required")),
+    github: z.string().url(t("validation.github-invalid-url")).optional().or(z.literal("")),
+    linkedin: z.string().url(t("validation.linkedin-invalid-url")).optional().or(z.literal("")),
+    personal_web: z.string().url(t("validation.personal-web-invalid-url")).optional().or(z.literal("")),
   });
 
 export type ProfileFormType = z.infer<ReturnType<typeof createProfileFormSchema>>;
diff --git a/src/features/profile/components/ProfileForm.tsx b/src/features/profile/components/ProfileForm.tsx
@@ -21,7 +21,7 @@ interface ProfileFormProps {
 }
 
 const ProfileForm = ({ activeTab }: ProfileFormProps) => {
-  const t = useTranslations();
+  const t = useTranslations("Profile");
   const profileFormSchema = createProfileFormSchema(t);
   const { data, isLoading } = useGetProfile();
   const { mutate } = useUpdateProfile();
@@ -33,6 +33,7 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
       fullname: "",
       date_of_birth: "",
       phone_number: "",
+      gender: "",
       address: "",
       github: "",
       linkedin: "",
@@ -47,6 +48,7 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
         fullname: data.fullname || "",
         date_of_birth: data.date_of_birth || "",
         phone_number: data.phone_number || "",
+        gender: data.gender || "",
         address: data.address || "",
         github: data.github || "",
         linkedin: data.linkedin || "",
@@ -56,8 +58,6 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
   }, [data]);
 
   const onSubmit = (data: ProfileFormType) => {
-    // ! TODO handle query mutation
-    console.log("Profile data:", data);
     mutate(data);
   };
 
@@ -74,9 +74,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="username"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Username</FormLabel>
+                <FormLabel>{t("form.label.username")}</FormLabel>
                 <FormControl>
-                  <Input placeholder="Enter your username" {...field} />
+                  <Input placeholder={t("form.placeholder.username")} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -88,9 +88,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="fullname"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Full Name</FormLabel>
+                <FormLabel>{t("form.label.fullname")}</FormLabel>
                 <FormControl>
-                  <Input placeholder="Enter your full name" {...field} />
+                  <Input placeholder={t("form.placeholder.fullname")} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -102,15 +102,19 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="date_of_birth"
             render={({ field }) => (
               <FormItem className="flex flex-col">
-                <FormLabel>Date of Birth</FormLabel>
+                <FormLabel>{t("form.label.date-of-birth")}</FormLabel>
                 <Popover>
                   <PopoverTrigger asChild>
                     <FormControl>
                       <Button
                         variant="outline"
                         className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                       >
-                        {field.value ? format(new Date(field.value), "PPP") : <span>Pick a date</span>}
+                        {field.value ? (
+                          format(new Date(field.value), "PPP")
+                        ) : (
+                          <span>{t("form.placeholder.date-of-birth")}</span>
+                        )}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </FormControl>
@@ -139,15 +143,15 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="gender"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Gender</FormLabel>
+                <FormLabel>{t("form.label.gender")}</FormLabel>
                 <FormControl>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger>
-                      <SelectValue placeholder="Select gender" />
+                      <SelectValue placeholder={t("form.placeholder.gender")} />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="Male">Male</SelectItem>
-                      <SelectItem value="Female">Female</SelectItem>
+                      <SelectItem value="Male">{t("gender.male")}</SelectItem>
+                      <SelectItem value="Female">{t("gender.female")}</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormControl>
@@ -161,9 +165,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="phone_number"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Phone Number</FormLabel>
+                <FormLabel>{t("form.label.phone-number")}</FormLabel>
                 <FormControl>
-                  <Input placeholder="Enter your phone number" {...field} />
+                  <Input placeholder={t("form.placeholder.phone-number")} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -175,9 +179,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
             name="address"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Address</FormLabel>
+                <FormLabel>{t("form.label.address")}</FormLabel>
                 <FormControl>
-                  <Input placeholder="Enter your address" {...field} />
+                  <Input placeholder={t("form.placeholder.address")} {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -194,9 +198,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
           name="github"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>GitHub</FormLabel>
+              <FormLabel>{t("form.label.github")}</FormLabel>
               <FormControl>
-                <Input placeholder="Enter your github account" {...field} />
+                <Input placeholder={t("form.placeholder.github")} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -208,9 +212,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
           name="linkedin"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>LinkedIn</FormLabel>
+              <FormLabel>{t("form.label.linkedin")}</FormLabel>
               <FormControl>
-                <Input placeholder="Enter your linkedin account" {...field} />
+                <Input placeholder={t("form.placeholder.linkedin")} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -222,9 +226,9 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
           name="personal_web"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Personal Website</FormLabel>
+              <FormLabel>{t("form.label.personal-web")}</FormLabel>
               <FormControl>
-                <Input placeholder="Enter your personal website" {...field} />
+                <Input placeholder={t("form.placeholder.personal-web")} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -239,7 +243,7 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
         {renderForm()}
         <Button type="submit" className="bg-hmc-base-darkblue dark:bg-hmc-base-lightblue w-full text-white sm:w-auto">
-          Save Profile
+          {t("form.save-button")}
         </Button>
       </form>
     </Form>
diff --git a/src/features/profile/hooks/useUpdateProfile.ts b/src/features/profile/hooks/useUpdateProfile.ts
@@ -1,11 +1,19 @@
 import { ProfileFormType } from "@/domains/Profile";
 import { profileService } from "@/services/profile";
 import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
 
-const useUpdateProfile = () =>
-  useMutation({
+const useUpdateProfile = () => {
+  const t = useTranslations("Profile");
+
+  return useMutation({
     mutationKey: ["updateProfile"],
     mutationFn: async (payload: ProfileFormType) => profileService.updateProfile(payload),
+    onSuccess: () => {
+      toast.success(t("toast.update-success"));
+    },
   });
+};
 
 export default useUpdateProfile;
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -235,7 +235,7 @@
   },
   "Profile": {
     "validation": {
-      "username-required": "Nama Panggilan wajib diisi",
+      "username-required": "Username is required",
       "fullname-required": "Fullname is required",
       "date-of-birth-required": "Date of birth is required",
       "gender-required": "Please select a gender",
@@ -244,6 +244,46 @@
       "github-invalid-url": "Please enter a valid GitHub URL",
       "linkedin-invalid-url": "Please enter a valid LinkedIn URL",
       "personal-web-invalid-url": "Please enter a valid personal website URL"
+    },
+    "toast": {
+      "update-success": "Profile updated successfully!"
+    },
+    "form": {
+      "title": {
+        "account": "Account Information",
+        "information": "Additional Information"
+      },
+      "tab": {
+        "account": "Account",
+        "information": "Information"
+      },
+      "placeholder": {
+        "username": "Enter your username",
+        "fullname": "Enter your full name",
+        "date-of-birth": "Pick a date",
+        "gender": "Select gender",
+        "phone-number": "Enter your phone number",
+        "address": "Enter your address",
+        "github": "Enter your GitHub account",
+        "linkedin": "Enter your LinkedIn account",
+        "personal-web": "Enter your personal website"
+      },
+      "label": {
+        "username": "Username",
+        "fullname": "Full Name",
+        "date-of-birth": "Date of Birth",
+        "gender": "Gender",
+        "phone-number": "Phone Number",
+        "address": "Address",
+        "github": "GitHub",
+        "linkedin": "LinkedIn",
+        "personal-web": "Personal Website"
+      },
+      "save-button": "Save Profile"
+    },
+    "gender": {
+      "male": "Male",
+      "female": "Female"
     }
   }
 }
diff --git a/src/locales/id.json b/src/locales/id.json
@@ -235,7 +235,7 @@
   },
   "Profile": {
     "validation": {
-      "username-required": "Nama Panggilan wajib diisi",
+      "username-required": "Nama pengguna wajib diisi",
       "fullname-required": "Nama lengkap wajib diisi",
       "date-of-birth-required": "Tanggal lahir wajib diisi",
       "gender-required": "Silakan pilih jenis kelamin",
@@ -244,6 +244,46 @@
       "github-invalid-url": "Silakan masukkan URL GitHub yang valid",
       "linkedin-invalid-url": "Silakan masukkan URL LinkedIn yang valid",
       "personal-web-invalid-url": "Silakan masukkan URL website pribadi yang valid"
+    },
+    "toast": {
+      "update-success": "Profil berhasil diperbarui!"
+    },
+    "form": {
+      "title": {
+        "account": "Informasi Akun",
+        "information": "Informasi Tambahan"
+      },
+      "tab": {
+        "account": "Akun",
+        "information": "Informasi"
+      },
+      "placeholder": {
+        "username": "Masukkan nama pengguna",
+        "fullname": "Masukkan nama lengkap",
+        "date-of-birth": "Pilih tanggal",
+        "gender": "Pilih jenis kelamin",
+        "phone-number": "Masukkan nomor telepon",
+        "address": "Masukkan alamat",
+        "github": "Masukkan akun GitHub",
+        "linkedin": "Masukkan akun LinkedIn",
+        "personal-web": "Masukkan website pribadi"
+      },
+      "label": {
+        "username": "Nama Pengguna",
+        "fullname": "Nama Lengkap",
+        "date-of-birth": "Tanggal Lahir",
+        "gender": "Jenis Kelamin",
+        "phone-number": "Nomor Telepon",
+        "address": "Alamat",
+        "github": "GitHub",
+        "linkedin": "LinkedIn",
+        "personal-web": "Website Pribadi"
+      },
+      "save-button": "Simpan Profil"
+    },
+    "gender": {
+      "male": "Laki-laki",
+      "female": "Perempuan"
     }
   }
 }
