Removed double request

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

.dockerignore

@@ -1,5 +1,5 @@
 .env*
-!.env.production
+.env.production
 node_modules
 build
 .vscode

.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

Dockerfile

@@ -1,41 +1,30 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:fermium-alpine AS deps
 # 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 /app
+WORKDIR /home/app/
 COPY package.json package-lock.json ./ 
 RUN npm ci
 
-# Rebuild the source code only when needed
-FROM node:16-alpine AS builder
-ENV NODE_ENV production
-WORKDIR /app
-# Copy dependencies from deps stage
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-RUN npm run build
 
 # Bundle static assets with nginx
-FROM node:16-alpine as production
+FROM node:fermium-alpine as production
+
 # Copy built assets from builder
-WORKDIR /app
-COPY --from=builder /app/build .
+WORKDIR /home/app/
+COPY --from=deps ./home/app/node_modules ./node_modules
+COPY . .
 
 # Expose ports
 EXPOSE 3000
 
-COPY .env.production .
-
 ENV NODE_ENV production
 ENV USER_NAME=node_user USER_UID=2000 GROUP_NAME=node_group GROUP_UID=2000
 
-RUN npm i -g serve \
-    && deluser --remove-home node \
+RUN deluser --remove-home node \
     && addgroup --g ${GROUP_UID} -S ${GROUP_NAME} \ 
-    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}\
-    && chown -R ${USER_NAME}:${GROUP_NAME} "/app/"
-
-
+    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}
 USER "${USER_NAME}"
-CMD serve -s .
+
+
+ENTRYPOINT [ "npm","start"]

package.json

@@ -7,7 +7,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "^1.6.6",
+    "@headlessui/react": "^1.7.3",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/node": "^16.11.47",
     "@types/react": "^18.0.15",
@@ -24,9 +24,9 @@
     "i18next-http-backend": "^1.4.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
+    "react": "^18.1.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.1.0",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
     "react-loading-skeleton": "^3.1.0",

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),
-    [store.getArticle, store.setArticle]
+    (id: string) => {
+      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(store.article.id);
-    }
-  }, [store.article?.id]);
+    _getArticle(id);
+  }, [article]);
 
   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/ArticleSearchResult.tsx

@@ -27,17 +27,15 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
     <Article className=" pt-6 pb-3 ">
       <div className="flex flex-row justify-between">
         <Article.Breadcumbs emphasis="low" className="flex flex-wrap flex-row">
-          {[
-            `${searchItem.topic}`,
-            `${searchItem.topic}`,
-            `${searchItem.topic}`,
-            `${searchItem.topic}`,
-          ]}
+          {[`${searchItem.topic}`]}
         </Article.Breadcumbs>
         <Article.SubscriptionsButtons />
       </div>
 
-      <Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
+      <Article.Title
+        linkTo={`/article/info/${searchItem.id}`}
+        className="text-2xl"
+      >
         {searchItem.title}
       </Article.Title>
       <Article.Authors emphasis="low" className="flex flex-wrap flex-row">

src/components/Burger.tsx

@@ -21,10 +21,12 @@ import { ReactComponent as SVGFile } from "assets/svg/file.svg";
 import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
 import { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
 import { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg";
+import { useTranslation } from "react-i18next";
 
 type Props = React.ComponentPropsWithoutRef<"div">;
 
 const Burger = (props: Props) => {
+  const { t, i18n } = useTranslation();
   return (
     <div {...props}>
       <Menu as="div" className="relative inline-block text-left z-30">
@@ -46,13 +48,15 @@ const Burger = (props: Props) => {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="origin-top-right absolute right-0 mt-5 w-44 rounded-md 
+            className="origin-top-right absolute right-0 mt-5 w-48 rounded-md 
           shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
           >
             <div className="py-1">
               <Disclosure>
                 <Disclosure.Button className="uppercase text-base	 px-2 py-1">
-                  <Link className="text-[#096DD9]">create new</Link>
+                  <Link className="text-[#096DD9]">
+                    {t("navbar.createNew")}
+                  </Link>
                 </Disclosure.Button>
               </Disclosure>
               <hr />
@@ -66,7 +70,7 @@ const Burger = (props: Props) => {
                       text-base	
                      "
                     >
-                      my library
+                      <span>{t("navbar.library.navTitle")}</span>
                       <SVGArrowUp
                         className={`${
                           open ? "rotate-180 transform" : "rotate-360"
@@ -83,7 +87,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFile className="stroke-black w-4 h-4" />
-                        My Publications
+                        <span>{t("navbar.library.publications")}</span>
                       </Disclosure.Panel>
                     </Link>
 
@@ -96,7 +100,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFavoriteOutlined className="stroke-black w-4 h-4" />
-                        My Favorites
+                        <span>{t("navbar.library.favorites")}</span>
                       </Disclosure.Panel>
                     </Link>
 
@@ -109,7 +113,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFolder className="stroke-black fill-black w-4 h-4" />
-                        My Collections
+                        <span>{t("navbar.library.collections")}</span>
                       </Disclosure.Panel>
                     </Link>
 
@@ -122,7 +126,7 @@ const Burger = (props: Props) => {
                          "
                       >
                         <SVGEye className="stroke-black w-4 h-4" />
-                        Recent Viewed
+                        <span>{t("navbar.library.recentViewed")}</span>
                       </Disclosure.Panel>
                     </Link>
                   </>
@@ -140,7 +144,7 @@ const Burger = (props: Props) => {
                       text-base	
                      "
                     >
-                      About
+                      <span>{t("navbar.about.navTitle")}</span>
                       <SVGArrowUp
                         className={`${
                           open ? "rotate-180 transform" : "rotate-360"
@@ -156,7 +160,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        About Freeland
+                        <span>{t("navbar.about.aboutProject")}</span>
                       </Disclosure.Panel>
                     </Link>
 
@@ -168,7 +172,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        Contact Us
+                        <span>{t("navbar.about.contacts")}</span>
                       </Disclosure.Panel>
                     </Link>
 
@@ -180,7 +184,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        Help
+                        <span>{t("navbar.about.help")}</span>
                       </Disclosure.Panel>
                     </Link>
                   </>

src/components/Markdown.tsx

@@ -14,9 +14,8 @@ import Heading from "./typography/Heading";
 /*                                    Code                                    */
 /* -------------------------------------------------------------------------- */
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import Link from "./typography/Link";
-import style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
 
 export type Props = {
   markdown: string;
@@ -153,7 +152,7 @@ const Markdown = ({ markdown }: Props) => {
           return !inline && match ? (
             <SyntaxHighlighter
               children={String(children).replace(/\n$/, "")}
-              style={dark}
+              style={oneLight}
               language={match[1]}
               PreTag="div"
             />

src/components/Select.tsx

@@ -3,7 +3,7 @@
 /* -------------------------------------------------------------------------- */
 import React from "react";
 import { Fragment } from "react";
-import { Listbox, Transition } from "@headlessui/react";
+import {  Listbox, Transition } from "@headlessui/react";
 import classNames from "classnames";
 import "../index.css";
 import { ReactComponent as SelectIcon } from "../assets/svg/caret-down.svg";
@@ -83,7 +83,7 @@ function Select<T>({
 }: Props<T>): JSX.Element {
   return (
     <div className={classNames("top-16 w-60", className)}>
-      <Listbox value={value} {...props} onChange={onChange}>
+      <Listbox value={value as any } {...props} onChange={onChange}>
         <div className="relative">
           <Listbox.Button
             className={classNames([

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 newId = `${id}`;
+  // const { id } = useParams();
+  // const newId = `${id}`;
 
-  useEffect(() => {
-    store.getArticle(newId);
-  }, [id]);
+  // useEffect(() => {
+  //   store.getArticle(newId);
+  // }, [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}`;
-  useEffect(() => {
-    store.getArticle(newId);
-  }, [id]);
+  const { article, hasError, shouldShowLoading } = useArticleViewModel(
+    store,
+    fetchArticleUseCase,
+    getArticleUseCase,
+    id ?? '',
+  );
+  // useEffect(() => {
+  //   store.getArticle(newId);
+  // }, [id]);
   if (hasError) <NotFound />;
   return (
     <BaseLayout>

src/components/parts/Header.tsx

@@ -80,7 +80,7 @@ const Header = () => {
           <ContextMenu
             emphasis="high"
             button={t("navbar.library.navTitle")}
-            className="border-none uppercase"
+            className="border-none uppercase z-40"
           >
             <ContextMenuAction
               caption={t("navbar.library.publications")}
@@ -112,7 +112,7 @@ const Header = () => {
           <ContextMenu
             emphasis="high"
             button={t("navbar.about.navTitle")}
-            className="border-none uppercase"
+            className="border-none uppercase z-40"
           >
             <ContextMenuAction
               caption={t("navbar.about.aboutProject")}

src/components/typography/Link.tsx

@@ -46,8 +46,9 @@ export default function Link({
         style={
           typeof style === "function"
             ? style({
-                isActive: true,
-              })
+              isActive: true,
+              isPending: false
+            })
             : style
         }
         aria-disabled={disabled}

src/components/typography/RouterLink.tsx

@@ -15,7 +15,7 @@ export function RouterLink({
   return (
     <NavLink
       to={to}
-      className={classNames({ "pointer-events-none": disabled }, className)}
+      className={classNames({ "pointer-events-none": disabled }, className as string)}
     >
       {children}
     </NavLink>

src/index.tsx

@@ -25,7 +25,6 @@ if (!rootElement) throw new Error("Failed to find the root element");
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <Provider store={store}>
-    <React.StrictMode>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<App />} />
@@ -46,7 +45,6 @@ root.render(
           <Route path="/*" element={<NotFound />}></Route>
         </Routes>
       </BrowserRouter>
-    </React.StrictMode>
   </Provider>
 );