feat: Route list page

src/shared/store/ArticlesStore/index.tsx

@@ -15,6 +15,29 @@ type Media = {
   media_type: number;
 };
 
+type ArticleListCashed = {
+  ru: {
+    data: Article[];
+    loaded: boolean;
+  };
+  en: {
+    data: Article[];
+    loaded: boolean;
+  };
+  zh: {
+    data: Article[];
+    loaded: boolean;
+  };
+};
+
+type PreviewCashed = {
+  ru: Article;
+  en: Article;
+  zh: Article;
+};
+
+type ArticlePreviewCashed = Record<string, PreviewCashed>;
+
 class ArticlesStore {
   constructor() {
     makeAutoObservable(this);
@@ -25,19 +48,47 @@ class ArticlesStore {
     en: [],
     zh: [],
   };
-  articleList: Article[] = [];
+  articleList: ArticleListCashed = {
+    ru: {
+      data: [],
+      loaded: false,
+    },
+    en: {
+      data: [],
+      loaded: false,
+    },
+    zh: {
+      data: [],
+      loaded: false,
+    },
+  };
+  articlePreview: ArticlePreviewCashed = {};
   articleData: Article | null = null;
   articleMedia: Media | null = null;
   articleLoading: boolean = false;
 
   getArticleList = async () => {
+    const { language } = languageStore;
+    if (this.articleList[language].loaded) {
+      return;
+    }
     const response = await authInstance.get("/article");
 
     runInAction(() => {
-      this.articleList = response.data;
+      this.articleList[language].data = response.data;
+      this.articleList[language].loaded = true;
     });
   };
 
+  getArticlePreview = async (id: number) => {
+    const { language } = languageStore;
+    if (this.articlePreview[id][language]) {
+      return;
+    }
+    const response = await authInstance.get(`/article/${id}/preview`);
+    this.articlePreview[id][language] = response.data;
+  };
+
   getArticles = async (language: Language) => {
     this.articleLoading = true;
     const response = await authInstance.get("/article");