feat: wiring get user profile

Author: mpsalunggg

src/domains/Profile.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-export const UserSchema = z.object({
+export const profileResSchema = z.object({
   id: z.number(),
   username: z.string(),
   email: z.string(),
@@ -14,21 +14,23 @@ export const UserSchema = z.object({
   github: z.string(),
   linkedin: z.string(),
   personal_web: z.string(),
-  created_at: z.string(),
-  updated_at: z.string(),
+  created_at: z.date(),
+  updated_at: z.date(),
 });
 
-export type UserType = z.infer<typeof UserSchema>;
+export type ProfileResType = z.infer<typeof profileResSchema>;
 
-export const profileFormSchema = z.object({
-  fullname: z.string().min(1, "Fullname is required"),
-  date_of_birth: z.string().min(1, "Date of birth is required"),
-  gender: z.enum(["Male", "Female"], { required_error: "Please select a gender" }),
-  phone_number: z.string().min(1, "Phone number is required"),
-  address: z.string().min(1, "Address is required"),
-  github: z.string().url("Please enter a valid GitHub URL").optional().or(z.literal("")),
-  linkedin: z.string().url("Please enter a valid LinkedIn URL").optional().or(z.literal("")),
-  personal_web: z.string().url("Please enter a valid personal website URL").optional().or(z.literal("")),
-});
+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("")),
+  });
 
-export type ProfileFormType = z.infer<typeof profileFormSchema>;
+export type ProfileFormType = z.infer<ReturnType<typeof createProfileFormSchema>>;

src/features/profile/components/ProfileForm.tsx

@@ -3,23 +3,32 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/Form";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover";
 import { Calendar } from "@/components/ui/Calendar";
-import { profileFormSchema, ProfileFormType } from "@/domains/Profile";
+import { createProfileFormSchema, ProfileFormType } from "@/domains/Profile";
 import { cn } from "@/lib/utils";
+import { useGetProfile } from "../hooks";
+import Loader from "@/components/common/Loader";
+import { useEffect } from "react";
 
 interface ProfileFormProps {
   activeTab: "account" | "information";
 }
 
 const ProfileForm = ({ activeTab }: ProfileFormProps) => {
+  const t = useTranslations();
+  const profileFormSchema = createProfileFormSchema(t);
+  const { data, isLoading } = useGetProfile();
+
   const form = useForm<ProfileFormType>({
     resolver: zodResolver(profileFormSchema),
     defaultValues: {
+      username: "",
       fullname: "",
       date_of_birth: "",
       phone_number: "",
@@ -30,15 +39,49 @@ const ProfileForm = ({ activeTab }: ProfileFormProps) => {
     },
   });
 
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        username: data.username || "",
+        fullname: data.fullname || "",
+        date_of_birth: data.date_of_birth || "",
+        phone_number: data.phone_number || "",
+        address: data.address || "",
+        github: data.github || "",
+        linkedin: data.linkedin || "",
+        personal_web: data.personal_web || "",
+      });
+    }
+  }, [data]);
+
   const onSubmit = (data: ProfileFormType) => {
     // ! TODO handle query mutation
     console.log("Profile data:", data);
   };
 
+  console.log("dataaa", data);
+  if (isLoading) {
+    return <Loader />;
+  }
+
   const renderForm = () => {
     if (activeTab === "account") {
       return (
         <>
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input placeholder="Enter your username" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="fullname"

src/features/profile/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useGetProfile } from "./useGetProfile";

src/features/profile/hooks/useGetProfile.ts

@@ -0,0 +1,13 @@
+import { profileService } from "@/services/profile";
+import { useQuery } from "@tanstack/react-query";
+
+const useGetProfile = () =>
+  useQuery({
+    queryKey: ["getProfile"],
+    queryFn: async () => {
+      const response = await profileService.getProfile();
+      return response.data;
+    },
+  });
+
+export default useGetProfile;

src/locales/en.json

@@ -232,5 +232,18 @@
     "title": "My Blogs",
     "description": "List of post and blog article",
     "not-found": "No blogs found."
+  },
+  "Profile": {
+    "validation": {
+      "username-required": "Nama Panggilan wajib diisi",
+      "fullname-required": "Fullname is required",
+      "date-of-birth-required": "Date of birth is required",
+      "gender-required": "Please select a gender",
+      "phone-number-required": "Phone number is required",
+      "address-required": "Address is required",
+      "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"
+    }
   }
 }

src/locales/id.json

@@ -232,5 +232,18 @@
     "title": "Blog Saya",
     "description": "Daftar postingan dan artikel blog",
     "not-found": "Tidak ada blog yang ditemukan."
+  },
+  "Profile": {
+    "validation": {
+      "username-required": "Nama Panggilan wajib diisi",
+      "fullname-required": "Nama lengkap wajib diisi",
+      "date-of-birth-required": "Tanggal lahir wajib diisi",
+      "gender-required": "Silakan pilih jenis kelamin",
+      "phone-number-required": "Nomor telepon wajib diisi",
+      "address-required": "Alamat wajib diisi",
+      "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"
+    }
   }
 }

src/services/profile/index.ts

@@ -1,9 +1,12 @@
 import { HttpResponse } from "@/types/http";
 import { fetcher } from "../instance";
-import { UserType } from "@/domains/Profile";
+import { ProfileResType } from "@/domains/Profile";
 
 export const profileService = {
-  getUserId: async (): Promise<HttpResponse<UserType>> => {
-    return fetcher.get("user");
+  /**
+   * API to get detail profile user
+   */
+  getProfile: async (): Promise<HttpResponse<ProfileResType>> => {
+    return fetcher.get("/user");
   },
 };