Merge pull request 'fix/fetch-article-loop' (#178) from fix/fetch-article-loop into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/178

.env

@@ -0,0 +1,6 @@
+REACT_APP_CMS_BASE_URL=http://api.scipaper.ru
+REACT_APP_CMS_APP_NAME=scipaper
+REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code
+REACT_APP_INTEGRATOR_URL=http://api.scipaper.ru
+REACT_APP_INTEGRATOR_API_VERSION=/v1
+REACT_APP_GRAPHQL_URL=/graphql

.env.development

@@ -1,6 +1,6 @@
-REACT_APP_CMS_BASE_URL=http://scipaper.ru
+REACT_APP_CMS_BASE_URL=http://api.scipaper.ru
 REACT_APP_CMS_APP_NAME=scipaper
 REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code
-REACT_APP_INTEGRATOR_URL=http://scipaper.ru
+REACT_APP_INTEGRATOR_URL=http://api.scipaper.ru
 REACT_APP_INTEGRATOR_API_VERSION=/v1
 REACT_APP_GRAPHQL_URL=/graphql

.env.production

@@ -1,6 +1,6 @@
-REACT_APP_CMS_BASE_URL=http://scipaper.ru
+REACT_APP_CMS_BASE_URL=http://api.scipaper.ru
 REACT_APP_CMS_APP_NAME=scipaper
 REACT_APP_OPENID_PROVIDER_URL=http://auth.techpal.ru/auth/realms/master/protocol/openid-connect/auth?client_id=techpal&response_type=code
-REACT_APP_INTEGRATOR_URL=http://scipaper.ru
+REACT_APP_INTEGRATOR_URL=http://api.scipaper.ru
 REACT_APP_INTEGRATOR_API_VERSION=/v1
 REACT_APP_GRAPHQL_URL=/graphql

src/article/controller/articleViewModel.ts

@@ -1,18 +1,40 @@
 import type { ArticleStore } from "../domain/articleStore";
-import { getArticleUseCase } from "../useCases/getArticleUseCase";
 import { useCallback, useEffect } from "react";
+import { getArticle } from "article/data/articleAPIService";
+import { Article } from "article/domain/articleEntity";
+
+function useArticleViewModel(
+  store: ArticleStore,
+  fetchArticleUseCase: (
+    fetchArticleCallback: (id: string) => Promise<Article | null>,
+    setArticle: ArticleStore["setArticle"],
+    id: string,
+  ) => Promise<Article | null>,
+  getArticleUseCase: (
+    getArticle: ArticleStore["getArticle"],
+    setArticle: ArticleStore["setArticle"],
+    id: Article["id"],
+  ) => Promise<Article | null>,
+  id: string,
+) {
+  let article: Article | null | undefined;
 
-function useArticleViewModel(store: ArticleStore) {
   const _getArticle = useCallback(
-    (id: string) => getArticleUseCase(store.getArticle, store.setArticle, id),
+    (id: string) => {
-    [store.getArticle, store.setArticle]
+      getArticleUseCase(store.getArticle, store.setArticle, id).then(async (value) => {
+        if (value == null) {
+          article = await fetchArticleUseCase(getArticle, store.setArticle, id);
+          return;
+        }
+        article = value;
+      });
+    },
+    [store.setArticle]
   );
 
   useEffect(() => {
-    if (store.article != undefined) {
+    _getArticle(id);
-      _getArticle(store.article.id);
+  }, [article]);
-    }
-  }, [store.article?.id]);
 
   return {
     article: store.article,

src/article/data/articleActions.ts

@@ -7,7 +7,6 @@ const setArticleAction = (article: Article) => (dispatch: any) =>
   dispatch({ type: actionTypes.SET_ARTICLE, article });
 
 const getArticleAction = (id: string) => (dispatch: any) => {
-  dispatch({ type: actionTypes.GET_ARTICLE });
 
   return getArticleAPI(id)
     .then((article) => {

src/article/useCases/fetchArticleUseCase.ts

@@ -0,0 +1,16 @@
+import { Article } from "article/domain/articleEntity";
+import { ArticleStore } from "article/domain/articleStore";
+
+const fetchArticleUseCase = async (
+    fetchArticleCallback: (id: string) => Promise<Article | null>,
+    setArticle: ArticleStore["setArticle"],
+    id: string,
+): Promise<Article | null> => {
+    const article = await fetchArticleCallback(id);
+    if (article) {
+        await setArticle(article);
+    }
+    return article;
+};
+
+export { fetchArticleUseCase };

src/components/fetchAnArticle/AnArticle.tsx

@@ -10,18 +10,26 @@ import { SVGSearch } from "components/icons";
 import BaseLayout from "components/BaseLayout";
 import Typography from "components/typography/Typography";
 import { useTranslation } from "react-i18next";
+import { fetchArticleUseCase } from "article/useCases/fetchArticleUseCase";
+import { getArticleUseCase } from "article/useCases/getArticleUseCase";
 
 const AnArticle = () => {
   const store = useArticleStore();
-  const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
+  const { id } = useParams();
+  const { article, hasError, shouldShowLoading } = useArticleViewModel(
+    store,
+    fetchArticleUseCase,
+    getArticleUseCase,
+    id ?? '',
+  );
   const { i18n, t } = useTranslation();
 
-  const { id } = useParams();
+  // const { id } = useParams();
-  const newId = `${id}`;
+  // const newId = `${id}`;
 
-  useEffect(() => {
+  // useEffect(() => {
-    store.getArticle(newId);
+  //   store.getArticle(newId);
-  }, [id]);
+  // }, [id]);
 
   if (hasError) {
     return <NotFound />;

src/components/fetchAnArticle/AnArticleBody.tsx

@@ -13,15 +13,21 @@ import BaseLayout from "components/BaseLayout";
 import Container from "components/Container";
 import NotFound from "./NotFound";
 import Markdown from "components/Markdown";
+import { fetchArticleUseCase } from "article/useCases/fetchArticleUseCase";
+import { getArticleUseCase } from "article/useCases/getArticleUseCase";
 
 const AnArticleBody = () => {
   const store = useArticleStore();
-  const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
   const { id } = useParams();
-  const newId = `${id}`;
+  const { article, hasError, shouldShowLoading } = useArticleViewModel(
-  useEffect(() => {
+    store,
-    store.getArticle(newId);
+    fetchArticleUseCase,
-  }, [id]);
+    getArticleUseCase,
+    id ?? '',
+  );
+  // useEffect(() => {
+  //   store.getArticle(newId);
+  // }, [id]);
   if (hasError) <NotFound />;
   return (
     <BaseLayout>