change

src/features/profile/ui/information-section.tsx

@@ -0,0 +1,98 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Input } from "@/shared/ui/input";
+import { Button } from "@/shared/ui/button";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { getUserMe, updateUserMe } from "@/shared/api/userMeSvc";
+import { useTranslations } from "next-intl";
+
+const InformationSection = () => {
+  const t = useTranslations("");
+  const { data: user } = useQuery({
+    queryKey: ["getUserMe"],
+    queryFn: getUserMe,
+  });
+
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    middle_name: "",
+    phone: "",
+    gender: true,
+  });
+
+  useEffect(() => {
+    if (user?.data) {
+      setFormData({
+        first_name: user.data.first_name || "",
+        last_name: user.data.last_name || "",
+        middle_name: user.data.middle_name || "",
+        phone: user.data.phone || "",
+        gender: true,
+      });
+    }
+  }, [user]);
+
+  const mutation = useMutation({
+    mutationFn: updateUserMe,
+    onError: () => {
+      alert(t("Xatolik yuz berdi"));
+    },
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  return (
+    <div className={"profile-section-wrapper"}>
+      <h1 className={"profile-section-title"}>{t("Profil ma'lumotlari")}</h1>
+      <span className={"profile-section-subtitle"}>
+        {t("Sizning profil ma'lumotlaringiz va ularni o'zgartirish")}
+      </span>
+      <form onSubmit={handleSubmit} className={"space-y-5 mt-5 text-end"}>
+        <div className={"grid grid-cols-2 gap-5"}>
+          <Input
+            name="first_name"
+            placeholder={t("Ismingiz")}
+            value={formData.first_name}
+            onChange={handleChange}
+            required
+          />
+          <Input
+            name="last_name"
+            placeholder={t("Familiyangiz")}
+            value={formData.last_name}
+            onChange={handleChange}
+            required
+          />
+          <Input
+            name="middle_name"
+            placeholder={t("Sharif")}
+            value={formData.middle_name}
+            onChange={handleChange}
+            required
+          />
+          <Input
+            name="phone"
+            placeholder={t("Telefon raqam")}
+            value={formData.phone}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <Button size={"lg"} type="submit" disabled={mutation.isPending}>
+          {mutation.isPending ? t("Saqlanmoqda") : t("Saqlash")}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default InformationSection;