feat: Add edit pages with cache

2025-06-08 08:33:43 +03:00
parent e37f9e14bc
commit b09c1b3214
37 changed files with 2223 additions and 772 deletions
--- a/src/pages/Country/CountryCreatePage/index.tsx
+++ b/src/pages/Country/CountryCreatePage/index.tsx
@ -4,20 +4,20 @@ import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { countryStore } from "@shared";
+import { countryStore, languageStore } from "@shared";
 import { useState } from "react";
 import { LanguageSwitcher } from "@widgets";

 export const CountryCreatePage = observer(() => {
  const navigate = useNavigate();
-  const [name, setName] = useState("");
-  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
+  const { language } = languageStore;
+  const { createCountryData, setCountryData, createCountry } = countryStore;

  const handleCreate = async () => {
    try {
      setIsLoading(true);
-      await countryStore.createCountry(code, name);
+      await createCountry();
      toast.success("Страна успешно создана");
      navigate("/country");
    } catch (error) {
@ -44,16 +44,24 @@ export const CountryCreatePage = observer(() => {
        <TextField
          fullWidth
          label="Код страны"
-          value={code}
+          value={createCountryData.code}
          required
-          onChange={(e) => setCode(e.target.value)}
+          onChange={(e) =>
+            setCountryData(
+              e.target.value,
+              createCountryData[language].name,
+              language
+            )
+          }
        />
        <TextField
          fullWidth
          label="Название"
-          value={name}
+          value={createCountryData[language].name}
          required
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) =>
+            setCountryData(createCountryData.code, e.target.value, language)
+          }
        />

        <Button
@ -61,7 +69,7 @@ export const CountryCreatePage = observer(() => {
          className="w-min flex gap-2 items-center"
          startIcon={<Save size={20} />}
          onClick={handleCreate}
-          disabled={isLoading || !name || !code}
+          disabled={isLoading || !createCountryData[language].name}
        >
          {isLoading ? (
            <Loader2 size={20} className="animate-spin" />
--- a/src/pages/Country/CountryEditPage/index.tsx
+++ b/src/pages/Country/CountryEditPage/index.tsx
@ -0,0 +1,87 @@
+import { Button, Paper, TextField } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import { countryStore, languageStore } from "@shared";
+import { useEffect, useState } from "react";
+import { LanguageSwitcher } from "@widgets";
+
+export const CountryEditPage = observer(() => {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const { language } = languageStore;
+  const { id } = useParams();
+  const { editCountryData, editCountry, getCountry, setEditCountryData } =
+    countryStore;
+
+  const handleEdit = async () => {
+    try {
+      setIsLoading(true);
+      await editCountry(id as string);
+      toast.success("Страна успешно обновлена");
+    } catch (error) {
+      toast.error("Ошибка при обновлении страны");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (id) {
+        const data = await getCountry(id as string, language);
+        setEditCountryData(data.name, language);
+      }
+    })();
+  }, [id, language]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/country")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          fullWidth
+          label="Код страны"
+          value={id as string}
+          required
+          disabled
+        />
+        <TextField
+          fullWidth
+          label="Название"
+          value={editCountryData[language].name}
+          required
+          onChange={(e) =>
+            countryStore.setEditCountryData(e.target.value, language)
+          }
+        />
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleEdit}
+          disabled={isLoading || !editCountryData[language].name}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Обновить"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Country/CountryListPage/index.tsx
+++ b/src/pages/Country/CountryListPage/index.tsx
@ -2,7 +2,7 @@ import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { countryStore, languageStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Eye, Trash2 } from "lucide-react";
+import { Eye, Pencil, Trash2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";

@ -14,7 +14,7 @@ export const CountryListPage = observer(() => {
  const { language } = languageStore;

  useEffect(() => {
-    getCountries();
+    getCountries(language);
  }, [language]);

  const columns: GridColDef[] = [
@ -28,10 +28,15 @@ export const CountryListPage = observer(() => {
      headerName: "Действия",
      align: "center",
      headerAlign: "center",
-
+      width: 200,
      renderCell: (params: GridRenderCellParams) => {
        return (
          <div className="flex h-full gap-7 justify-center items-center">
+            <button
+              onClick={() => navigate(`/country/${params.row.code}/edit`)}
+            >
+              <Pencil size={20} className="text-blue-500" />
+            </button>
            <button onClick={() => navigate(`/country/${params.row.code}`)}>
              <Eye size={20} className="text-green-500" />
            </button>
@ -49,7 +54,7 @@ export const CountryListPage = observer(() => {
    },
  ];

-  const rows = countries.map((country) => ({
+  const rows = countries[language]?.map((country) => ({
    id: country.code,
    code: country.code,
    name: country.name,
@ -66,12 +71,14 @@ export const CountryListPage = observer(() => {
        </div>
        <DataGrid rows={rows} columns={columns} hideFooter />
      </div>
+
      <DeleteModal
        open={isDeleteModalOpen}
        onDelete={async () => {
          if (rowId) {
-            await countryStore.deleteCountry(rowId);
-            getCountries(); // Refresh the list after deletion
+            await countryStore.deleteCountry(rowId, language);
+            getCountries(language); // Refresh the list after deletion
+            setIsDeleteModalOpen(false);
          }
          setIsDeleteModalOpen(false);
          setRowId(null);
--- a/src/pages/Country/CountryPreviewPage/index.tsx
+++ b/src/pages/Country/CountryPreviewPage/index.tsx
@ -1,23 +1,29 @@
 import { Paper } from "@mui/material";
-import { countryStore } from "@shared";
+import { countryStore, languageStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft } from "lucide-react";
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { LanguageSwitcher } from "@widgets";

 export const CountryPreviewPage = observer(() => {
  const { id } = useParams();
-  const { getCountry, country } = countryStore;
+  const { getCountry, country, setEditCountryData } = countryStore;
  const navigate = useNavigate();
+  const { language } = languageStore;

  useEffect(() => {
    (async () => {
-      await getCountry(id as string);
+      if (id) {
+        const data = await getCountry(id as string, language);
+        setEditCountryData(data.name, language);
+      }
    })();
-  }, [id]);
+  }, [id, language]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
      <div className="flex justify-between items-center">
        <button
          className="flex items-center gap-2"
@ -45,11 +51,11 @@ export const CountryPreviewPage = observer(() => {
          </Button>
        </div> */}
      </div>
-      {country && (
+      {country[id!]?.[language] && (
        <div className="flex flex-col gap-10 w-full">
          <div className="flex flex-col gap-2">
            <h1 className="text-lg font-bold">Название</h1>
-            <p>{country?.name}</p>
+            <p>{country[id!]?.[language]?.name}</p>
          </div>
        </div>
      )}
--- a/src/pages/Country/index.ts
+++ b/src/pages/Country/index.ts
@ -1,3 +1,4 @@
 export * from "./CountryListPage";
 export * from "./CountryPreviewPage";
 export * from "./CountryCreatePage";
+export * from "./CountryEditPage";