feat: Add edit pages with cache

src/shared/store/CarrierStore/index.tsx

@@ -1,4 +1,4 @@
-import { authInstance } from "@shared";
+import { authInstance, languageStore } from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 
 export type Carrier = {
@@ -14,14 +14,19 @@ export type Carrier = {
   right_color: string;
 };
 
+type Carriers = Carrier[];
+
+type CashedCarrier = Record<number, Carrier>;
+
 class CarrierStore {
-  carriers: Carrier[] = [];
-  carrier: Carrier | null = null;
+  carriers: Carriers = [];
+  carrier: CashedCarrier = {};
   constructor() {
     makeAutoObservable(this);
   }
 
   getCarriers = async () => {
+    if (this.carriers.length > 0) return;
     const response = await authInstance.get("/carrier");
 
     runInAction(() => {
@@ -34,13 +39,30 @@ class CarrierStore {
 
     runInAction(() => {
       this.carriers = this.carriers.filter((carrier) => carrier.id !== id);
+      delete this.carrier[id];
     });
   };
 
   getCarrier = async (id: number) => {
+    if (this.carrier[id]) return this.carrier[id];
     const response = await authInstance.get(`/carrier/${id}`);
+
     runInAction(() => {
-      this.carrier = response.data;
+      if (!this.carrier[id]) {
+        this.carrier[id] = {
+          id: 0,
+          short_name: "",
+          full_name: "",
+          slogan: "",
+          city: "",
+          city_id: 0,
+          logo: "",
+          main_color: "",
+          left_color: "",
+          right_color: "",
+        };
+      }
+      this.carrier[id] = response.data;
     });
     return response.data;
   };
@@ -50,9 +72,9 @@ class CarrierStore {
     shortName: string,
     city: string,
     cityId: number,
-    primaryColor: string,
-    secondaryColor: string,
-    accentColor: string,
+    main_color: string,
+    left_color: string,
+    right_color: string,
     slogan: string,
     logoId: string
   ) => {
@@ -61,9 +83,9 @@ class CarrierStore {
       short_name: shortName,
       city,
       city_id: cityId,
-      primary_color: primaryColor,
-      secondary_color: secondaryColor,
-      accent_color: accentColor,
+      main_color,
+      left_color,
+      right_color,
       slogan,
       logo: logoId,
     });
@@ -71,6 +93,57 @@ class CarrierStore {
       this.carriers.push(response.data);
     });
   };
+
+  editCarrierData = {
+    full_name: "",
+    short_name: "",
+    city: "",
+    city_id: 0,
+    main_color: "",
+    left_color: "",
+    right_color: "",
+    slogan: "",
+    logo: "",
+  };
+
+  setEditCarrierData = (
+    fullName: string,
+    shortName: string,
+    city: string,
+    cityId: number,
+    main_color: string,
+    left_color: string,
+    right_color: string,
+    slogan: string,
+    logoId: string
+  ) => {
+    this.editCarrierData = {
+      full_name: fullName,
+      short_name: shortName,
+      city,
+      city_id: cityId,
+      main_color: main_color,
+      left_color: left_color,
+      right_color: right_color,
+      slogan: slogan,
+      logo: logoId,
+    };
+  };
+
+  editCarrier = async (id: number) => {
+    const response = await authInstance.patch(
+      `/carrier/${id}`,
+      this.editCarrierData
+    );
+
+    runInAction(() => {
+      this.carriers = this.carriers.map((carrier) =>
+        carrier.id === id ? { ...carrier, ...response.data } : carrier
+      );
+
+      this.carrier[id] = response.data;
+    });
+  };
 }
 
 export const carrierStore = new CarrierStore();