last changes

src/pages/article/create.tsx

@@ -1,94 +1,92 @@
 import { Box, TextField, Typography, Paper } from "@mui/material";
 import { Create } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
-import { Controller } from "react-hook-form";
+import { Controller, FieldValues } from "react-hook-form";
 import React, { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
-import Cookies from "js-cookie";
 import { MarkdownEditor } from "../../components/MarkdownEditor";
 import "easymde/dist/easymde.min.css";
+import { LanguageSelector } from "@ui";
+import { observer } from "mobx-react-lite";
+import { EVERY_LANGUAGE, Languages, languageStore, META_LANGUAGE } from "@stores";
+import { axiosInstance } from "@/providers/data";
 
 const MemoizedSimpleMDE = React.memo(MarkdownEditor);
 
-export const ArticleCreate = () => {
-  const [language, setLanguage] = useState(Cookies.get("lang")!);
-  const [articleData, setArticleData] = useState<{
-    ru: { heading: string; body: string };
-    en: { heading: string; body: string };
-    zh: { heading: string; body: string };
-  }>({
-    ru: { heading: "", body: "" },
-    en: { heading: "", body: "" },
-    zh: { heading: "", body: "" },
+export const ArticleCreate = observer(() => {
+  const { language, setLanguageAction } = languageStore;
+  const [articleData, setArticleData] = useState({
+    heading: EVERY_LANGUAGE(""),
+    body: EVERY_LANGUAGE("")
   });
 
   const {
     saveButtonProps,
-    refineCore: { formLoading },
+    refineCore: { formLoading, onFinish },
     register,
     control,
     watch,
     formState: { errors },
     setValue,
+    handleSubmit,
   } = useForm({
     refineCoreProps: {
-      resource: "article/",
-      meta: {
-        headers: {
-          "Accept-Language": language,
-        },
-      },
+      resource: "article",
+      ...META_LANGUAGE(language)
     },
+    warnWhenUnsavedChanges: false
   });
 
-  useEffect(() => {
-    const lang = Cookies.get("lang")!;
-    Cookies.set("lang", language);
-    return () => {
-      Cookies.set("lang", lang);
-    };
-  }, [language]);
-
-  useEffect(() => {
-    setValue(
-      "heading",
-      articleData[language as keyof typeof articleData]?.heading || ""
-    );
-    setValue(
-      "body",
-      articleData[language as keyof typeof articleData]?.body || ""
-    );
-    setPreview(articleData[language as keyof typeof articleData]?.body || "");
-    setHeadingPreview(
-      articleData[language as keyof typeof articleData]?.heading || ""
-    );
-  }, [language, articleData, setValue]);
-
-  const handleLanguageChange = (lang: string) => {
-    setArticleData((prevData) => ({
-      ...prevData,
-      [language]: {
-        heading: watch("heading") || "",
-        body: watch("body") || "",
-      },
-    }));
-    setLanguage(lang);
-    Cookies.set("lang", lang);
-  };
-
-  const [preview, setPreview] = useState("");
-  const [headingPreview, setHeadingPreview] = useState("");
-
   // Следим за изменениями в полях body и heading
   const bodyContent = watch("body");
   const headingContent = watch("heading");
 
+  function updateTranslations() {
+    const newArticleData = {
+      ...articleData,
+      heading: {
+        ...articleData.heading,
+        [language]: watch("heading") ?? "",
+      },
+      body: {
+        ...articleData.body,
+        [language]: watch("body") ?? "",
+      }
+    }
+    setArticleData(newArticleData);
+    return newArticleData;
+  }
+
+  const handleFormSubmit = handleSubmit((values: FieldValues) => {
+    const newTranslations = updateTranslations();
+    console.log(newTranslations);
+    return onFinish({
+      translations: newTranslations
+    });
+  });
+
   useEffect(() => {
-    setPreview(bodyContent || "");
+    setValue("heading", articleData.heading[language] ?? "");
+    setValue("body", articleData.body[language] ?? "");
+    setPreview(articleData.body[language] ?? "");
+    setHeadingPreview(articleData.heading[language] ?? "");
+  }, [language, articleData, setValue]);
+
+  const handleLanguageChange = (lang: Languages) => {
+    updateTranslations();
+    setLanguageAction(lang);
+  };
+
+  const [preview, setPreview] = useState("");
+  const [headingPreview, setHeadingPreview] = useState("");
+
+
+  useEffect(() => {
+    setPreview(bodyContent ?? "");
   }, [bodyContent]);
 
   useEffect(() => {
-    setHeadingPreview(headingContent || "");
+    setHeadingPreview(headingContent ?? "");
   }, [headingContent]);
 
   const simpleMDEOptions = React.useMemo(
@@ -100,63 +98,14 @@ export const ArticleCreate = () => {
   );
 
   return (
-    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
+    <Create isLoading={formLoading} saveButtonProps={{
+      //...saveButtonProps,
+      onClick: handleFormSubmit
+    }}>
       <Box sx={{ display: "flex", flex: 1, gap: 2 }}>
         {/* Форма создания */}
         <Box sx={{ display: "flex", flex: 1, flexDirection: "column", gap: 2 }}>
-          <Box
-            sx={{
-              flex: 1,
-              display: "flex",
-              gap: 2,
-            }}
-          >
-            <Box
-              sx={{
-                cursor: "pointer",
-                flex: 1,
-                display: "flex",
-                justifyContent: "center",
-                bgcolor: language === "ru" ? "primary.main" : "transparent",
-                color: language === "ru" ? "white" : "inherit",
-                p: 1,
-                borderRadius: 1,
-              }}
-              onClick={() => handleLanguageChange("ru")}
-            >
-              RU
-            </Box>
-            <Box
-              sx={{
-                cursor: "pointer",
-                flex: 1,
-                display: "flex",
-                justifyContent: "center",
-                bgcolor: language === "en" ? "primary.main" : "transparent",
-                color: language === "en" ? "white" : "inherit",
-                p: 1,
-                borderRadius: 1,
-              }}
-              onClick={() => handleLanguageChange("en")}
-            >
-              EN
-            </Box>
-            <Box
-              sx={{
-                cursor: "pointer",
-                flex: 1,
-                display: "flex",
-                justifyContent: "center",
-                bgcolor: language === "zh" ? "primary.main" : "transparent",
-                color: language === "zh" ? "white" : "inherit",
-                p: 1,
-                borderRadius: 1,
-              }}
-              onClick={() => handleLanguageChange("zh")}
-            >
-              ZH
-            </Box>
-          </Box>
+          <LanguageSelector action={handleLanguageChange} />
           <Box
             component="form"
             sx={{ flex: 1, display: "flex", flexDirection: "column" }}
@@ -273,4 +222,4 @@ export const ArticleCreate = () => {
       </Box>
     </Create>
   );
-};
+});