Improved loading content of and article with saving them in redux store

When article was loaded once than it will be cached in redux store.
On the next loading of article content it will be get from store

Dockerfile

@@ -1,30 +1,43 @@
-# Install dependencies only when needed
+# Install dependencies of project
-FROM node:fermium-alpine AS deps
+FROM node:fermium-alpine AS dependencies
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /home/app/
-COPY package.json package-lock.json ./ 
+COPY package.json ./ 
-RUN npm ci
+RUN npm i
 
 
-# Bundle static assets with nginx
+# Build application to bunch of static files
-FROM node:fermium-alpine as production
+FROM node:fermium-alpine AS builder
-
-# Copy built assets from builder
 WORKDIR /home/app/
-COPY --from=deps ./home/app/node_modules ./node_modules
+COPY --from=dependencies ./home/app/node_modules ./node_modules
 COPY . .
+RUN npm run build
+
+
+# NGINX image
+FROM nginx:1.21.6 as production
+# Copy built assets from builder
+COPY --from=builder /home/app/build /usr/share/nginx/html
+# Add nginx.config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Copy setup nginx entrypoint file
+COPY ./scripts/entrypoint.sh .
 
 # Expose ports
-EXPOSE 3000
+EXPOSE 80
+
+# Execute script
+RUN chmod +x ./entrypoint.sh
 
 ENV NODE_ENV production
-ENV USER_NAME=node_user USER_UID=2000 GROUP_NAME=node_group GROUP_UID=2000
+# ENV USER_NAME=node_user USER_UID=2000 GROUP_NAME=node_group GROUP_UID=2000
 
-RUN deluser --remove-home node \
+# RUN deluser --remove-home node \
-    && addgroup --g ${GROUP_UID} -S ${GROUP_NAME} \ 
+#     && addgroup --g ${GROUP_UID} -S ${GROUP_NAME} \ 
-    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}
+#     && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}
-USER "${USER_NAME}"
+# USER "${USER_NAME}"
 
+ENTRYPOINT ["./entrypoint.sh"]
 
-ENTRYPOINT [ "npm","start"]
+# Start serving
+CMD ["nginx", "-g", "daemon off;"]

scripts/entrypoint.sh

@@ -1,6 +1,9 @@
 #! /bin/bash
 # no verbose
 set +x
+# save env to file
+printenv > .env.production
+
 # config
 envFilename='.env.production'
 resolvingPath='/usr/share/nginx/html'

src/article/controller/articleViewModel.ts

@@ -1,44 +1,30 @@
 import type { ArticleStore } from "../domain/articleStore";
 import { useCallback, useEffect } from "react";
-import { getArticle } from "article/data/articleAPIService";
 import { Article } from "article/domain/articleEntity";
+import { GetArticleUseCase } from "article/useCases/getArticleUseCase";
+import { FetchArticleUseCase } from "article/useCases/fetchArticleUseCase";
+import { useParams } from "react-router-dom";
 
 function useArticleViewModel(
   store: ArticleStore,
-  fetchArticleUseCase: (
+  fetchArticleUseCase: FetchArticleUseCase,
-    fetchArticleCallback: (id: string) => Promise<Article | null>,
+  getArticleUseCase: GetArticleUseCase,
-    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;
+  const { id } = useParams();
 
-  const _getArticle = useCallback(
+  const getArticle = useCallback(
-    (id: string) => {
+    () => {
-      getArticleUseCase(store.getArticle, store.setArticle, id).then(async (value) => {
+      getArticleUseCase.call(id ?? '').catch((_) => fetchArticleUseCase.call(id ?? ''));
-        if (value == null) {
+      console.log(id);
-          article = await fetchArticleUseCase(getArticle, store.setArticle, id);
-          return;
-        }
-        article = value;
-      });
     },
-    [store.setArticle]
+    [id]
   );
 
-  useEffect(() => {
+  useEffect(getArticle, []);
-    _getArticle(id);
-  }, [article]);
 
   return {
-    article: store.article,
+    article: store.currentArticle,
-    shouldShowLoading: typeof store.article === "undefined" || store.isLoading,
+    shouldShowLoading: store.isLoading,
     hasError: store.hasError,
   };
 }

src/article/data/articleAPIService.ts

@@ -7,7 +7,7 @@ import { integratorApiClient } from "core/httpClient";
 
 const articleEndpoint = "/papers/"
 
-async function getArticle(id: string): Promise<Article> {
+async function fetchArticle(id: string): Promise<Article> {
   try {
     const response = await integratorApiClient.get<FetchArticleByIdDTO>(
       // `https://run.mocky.io/v3/62cd4581-d864-4d46-b1d6-02b45b5d1994/${id}`
@@ -33,4 +33,4 @@ async function getArticle(id: string): Promise<Article> {
   }
 }
 
-export { getArticle };
+export { fetchArticle };

src/article/data/articleActions.ts

@@ -1,22 +1,25 @@
 import type { Article } from "../domain/articleEntity";
-import { getArticle as getArticleAPI } from "./articleAPIService";
 import * as actionTypes from "./articleActionTypes";
 import { dispatchStatus } from "../../store/index";
 
-const setArticleAction = (article: Article) => (dispatch: any) =>
+const setArticleAction = (article: Article, articlesList: Array<Article>) => (dispatch: any) => {
-  dispatch({ type: actionTypes.SET_ARTICLE, article });
+  if (!articlesList.includes(article)) {
+    const updatedList = articlesList.concat([article]);
+    dispatch({ type: actionTypes.SET_ARTICLE, article, updatedList });
+  }
+}
 
-const getArticleAction = (id: string) => (dispatch: any) => {
+const getArticleAction = (id: string, articles: Array<Article>) => (dispatch: any) => {
-
+  const filteredArray = articles.filter((e) => e.id == id);
-  return getArticleAPI(id)
+  if (filteredArray.length > 0) {
-    .then((article) => {
+    const article = filteredArray[0];
     dispatchStatus(actionTypes.GET_ARTICLE, ".success", article)(dispatch);
     return article;
-    })
+  }
-    .catch((reason) => {
+
+  const reason = 'Article not in the store';
   dispatchStatus(actionTypes.GET_ARTICLE, ".failure", reason)(dispatch);
-      return reason;
+  return null;
-    });
 };
 
 export { setArticleAction, getArticleAction };

src/article/data/articleCommonStateStore.ts

@@ -2,37 +2,58 @@ import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
 import { ArticleStore } from "../domain/articleStore";
 import type { Article } from "../domain/articleEntity";
-import { getArticle as getArticleAPI } from "./articleAPIService";
 
 const useArticleCommonStore = (): ArticleStore => {
   const [isLoading, setLoading] = useState<boolean>(false);
   const [hasError, setError] = useState<boolean>(false);
-  const [article, setArticleState] = useState<Article | undefined>();
+  const [currentArticle, setCurrentArticle] = useState<Article | null>(null);
+  const [articles, setArticlesState] = useState<Array<Article>>([]);
 
   const dispatch = useDispatch();
 
   const getArticle = useCallback(
-    async (id: string) => {
+    (id: string) => {
       setLoading(true);
-      try {
+      if (typeof currentArticle === undefined) {
-        const article = await getArticleAPI(id);
+        const fromStore = findArticleFromStore(id);
-        setArticleState(article);
+        if (typeof fromStore === undefined) {
-        setLoading(false);
-        return article;
-      } catch (error) {
           setError(true);
           return null;
         }
+        setLoading(false);
+        setCurrentArticle(fromStore);
+        return fromStore;
+      }
+      setLoading(false);
+      return currentArticle;
     },
     [dispatch]
   );
 
+  const findArticleFromStore = (id: string): Article | null => {
+    const filteredArray = articles.filter((e) => e.id == id);
+    if (filteredArray.length > 0) {
+      return filteredArray[0];
+    }
+    return null;
+  }
+
+  const setNewArticle = (newArticle: Article) => {
+    setCurrentArticle(newArticle);
+    if (!articles.includes(newArticle)) {
+      setArticlesState(articles.concat([newArticle]));
+    } else if (articles.length == 0) {
+      setArticlesState([newArticle]);
+    }
+  }
+
   return {
-    article: article,
+    articles: articles,
+    currentArticle: currentArticle,
     isLoading,
     hasError,
-    setArticle: setArticleState,
+    setArticle: setNewArticle,
-    getArticle,
+    getArticle: getArticle,
   };
 };
 

src/article/data/articleReducer.ts

@@ -5,7 +5,8 @@ import * as actionTypes from "./articleActionTypes";
 type ArticleStoreState = Omit<ArticleStore, "getArticle" | "setArticle">;
 
 const INITIAL_STATE: ArticleStoreState = {
-  article: undefined,
+  articles: [],
+  currentArticle: null,
   isLoading: false,
   hasError: false,
 };
@@ -16,11 +17,11 @@ const articleReducer = (
 ): ArticleStoreState => {
   switch (action.type) {
     case actionTypes.SET_ARTICLE:
-      return { ...state, article: action.article };
+      return { ...state, articles: action.updatedList, currentArticle: action.article };
     case actionTypes.GET_ARTICLE:
       return { ...state, isLoading: true };
     case actionTypes.GET_ARTICLE_SUCCESS:
-      return { ...state, isLoading: false, article: action.payload };
+      return { ...state, isLoading: false, currentArticle: action.payload };
     case actionTypes.GET_ARTICLE_FAILURE:
       return { ...state, hasError: true, isLoading: false };
     default:

src/article/data/articleStoreImplementation.ts

@@ -9,22 +9,23 @@ import { RootState, useAppSelector } from "store";
 const articleSelector = (state: RootState): ArticleStoreState => state.article;
 
 const useArticleStore = (): ArticleStore => {
-  const { isLoading, article, hasError } = useAppSelector(articleSelector);
+  const { isLoading, hasError, currentArticle, articles } = useAppSelector(articleSelector);
 
   const dispatch = useDispatch();
 
   const setArticle = useCallback(
-    (article: Article) => setArticleAction(article)(dispatch),
+    (article: Article) => setArticleAction(article, articles)(dispatch),
     [dispatch]
   );
 
   const getArticle = useCallback(
-    (id: string) => getArticleAction(id)(dispatch),
+    (id: string) => getArticleAction(id, articles)(dispatch),
     [dispatch]
   );
 
   return {
-    article: article,
+    articles: articles,
+    currentArticle: currentArticle,
     isLoading,
     hasError,
     setArticle,

src/article/domain/articleStore.ts

@@ -1,13 +1,14 @@
 import { Article } from './articleEntity';
 interface ArticleStore {
   // State
-  article: Article | undefined;
+  articles: Array<Article>;
+  currentArticle: Article | null;
   isLoading: boolean;
   hasError: boolean;
 
   // Actions
-  setArticle(article?: Article): void;
+  setArticle(article: Article): void;
-  getArticle(identifier: string): Promise<Article | null>;
+  getArticle(identifier: string): Article | null;
 }
 
 export type { ArticleStore };

src/article/useCases/fetchArticleUseCase.ts

@@ -1,6 +1,32 @@
 import { Article } from "article/domain/articleEntity";
 import { ArticleStore } from "article/domain/articleStore";
 
+
+class FetchArticleUseCase {
+    /* ------------------------------ Dependencies ------------------------------ */
+    _fetchArticleCallback: (id: string) => Promise<Article | null>;
+    _store: ArticleStore;
+    /* -------------------------------------------------------------------------- */
+    constructor(
+        fetchArticle: (id: string) => Promise<Article | null>,
+        store: ArticleStore,
+    ) {
+        this._fetchArticleCallback = fetchArticle;
+        this._store = store;
+    }
+    /* ----------------------------- Implementation ----------------------------- */
+    async call(id: string): Promise<Article | null> {
+        return this._fetchArticleCallback(id).then((article) => {
+            if (article != null) {
+                this._store.setArticle(article);
+            }
+            return article;
+        })
+    }
+    /* -------------------------------------------------------------------------- */
+}
+
+
 const fetchArticleUseCase = async (
     fetchArticleCallback: (id: string) => Promise<Article | null>,
     setArticle: ArticleStore["setArticle"],
@@ -12,5 +38,5 @@ const fetchArticleUseCase = async (
     }
     return article;
 };
-
+export { FetchArticleUseCase };
 export { fetchArticleUseCase };

src/article/useCases/getArticleUseCase.ts

@@ -1,6 +1,28 @@
 import { Article } from "article/domain/articleEntity";
 import type { ArticleStore } from "../domain/articleStore";
 
+class GetArticleUseCase {
+  /* ------------------------------ Dependencies ------------------------------ */
+  _store: ArticleStore;
+  /* -------------------------------------------------------------------------- */
+  constructor(
+    store: ArticleStore,
+  ) {
+    this._store = store;
+  }
+  /* ----------------------------- Implementation ----------------------------- */
+  async call(id: string): Promise<Article> {
+    const storedArticle = this._store.getArticle(id);
+    if (storedArticle != null) {
+      this._store.setArticle(storedArticle);
+      return storedArticle;
+    }
+    throw new Error('Article not found');
+  }
+  /* -------------------------------------------------------------------------- */
+}
+
+
 const getArticleUseCase = async (
   getArticle: ArticleStore["getArticle"],
   setArticle: ArticleStore["setArticle"],
@@ -13,4 +35,5 @@ const getArticleUseCase = async (
   return article;
 };
 
+export { GetArticleUseCase };
 export { getArticleUseCase };

src/components/fetchAnArticle/AnArticle.tsx

@@ -10,27 +10,20 @@ 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 { FetchArticleUseCase } from "article/useCases/fetchArticleUseCase";
-import { getArticleUseCase } from "article/useCases/getArticleUseCase";
+import { GetArticleUseCase } from "article/useCases/getArticleUseCase";
+import { fetchArticle } from "article/data/articleAPIService";
 
 const AnArticle = () => {
   const store = useArticleStore();
-  const { id } = useParams();
   const { article, hasError, shouldShowLoading } = useArticleViewModel(
     store,
-    fetchArticleUseCase,
+    new FetchArticleUseCase(fetchArticle, store),
-    getArticleUseCase,
+    new GetArticleUseCase(store),
-    id ?? '',
   );
+
   const { i18n, t } = useTranslation();
 
-  // const { id } = useParams();
-  // const newId = `${id}`;
-
-  // useEffect(() => {
-  //   store.getArticle(newId);
-  // }, [id]);
-
   if (hasError) {
     return <NotFound />;
   }

src/components/fetchAnArticle/AnArticleBody.tsx

@@ -13,21 +13,17 @@ 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 { FetchArticleUseCase } from "article/useCases/fetchArticleUseCase";
-import { getArticleUseCase } from "article/useCases/getArticleUseCase";
+import { GetArticleUseCase } from "article/useCases/getArticleUseCase";
+import { fetchArticle } from "article/data/articleAPIService";
 
 const AnArticleBody = () => {
   const store = useArticleStore();
-  const { id } = useParams();
   const { article, hasError, shouldShowLoading } = useArticleViewModel(
     store,
-    fetchArticleUseCase,
+    new FetchArticleUseCase(fetchArticle, store),
-    getArticleUseCase,
+    new GetArticleUseCase(store),
-    id ?? '',
   );
-  // useEffect(() => {
-  //   store.getArticle(newId);
-  // }, [id]);
   if (hasError) <NotFound />;
   return (
     <BaseLayout>