.dockerignore

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

.env

@@ -1,6 +0,0 @@
-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://api.scipaper.ru
+REACT_APP_CMS_BASE_URL=http://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_URL=http://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://api.scipaper.ru
+REACT_APP_CMS_BASE_URL=http://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_URL=http://scipaper.ru
 REACT_APP_INTEGRATOR_API_VERSION=/v1
 REACT_APP_GRAPHQL_URL=/graphql

Dockerfile

@@ -1,30 +1,41 @@
 # Install dependencies only when needed
-FROM node:fermium-alpine AS deps
+FROM node:16-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 /home/app/
+WORKDIR /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:fermium-alpine as production
-
+FROM node:16-alpine as production
 # Copy built assets from builder
-WORKDIR /home/app/
-COPY --from=deps ./home/app/node_modules ./node_modules
-COPY . .
+WORKDIR /app
+COPY --from=builder /app/build .
 
 # 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 deluser --remove-home node \
+RUN npm i -g serve \
+    && 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}
+    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}\
+    && chown -R ${USER_NAME}:${GROUP_NAME} "/app/"
+
+
 USER "${USER_NAME}"
-
-
-ENTRYPOINT [ "npm","start"]
+CMD serve -s .

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.7.3",
+    "@headlessui/react": "^1.6.6",
     "@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.1.0",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
     "react-loading-skeleton": "^3.1.0",

src/article/controller/articleViewModel.ts

@@ -1,40 +1,18 @@
 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).then(async (value) => {
-        if (value == null) {
-          article = await fetchArticleUseCase(getArticle, store.setArticle, id);
-          return;
-        }
-        article = value;
-      });
-    },
-    [store.setArticle]
+    (id: string) => getArticleUseCase(store.getArticle, store.setArticle, id),
+    [store.getArticle, store.setArticle]
   );
 
   useEffect(() => {
-    _getArticle(id);
-  }, [article]);
+    if (store.article != undefined) {
+      _getArticle(store.article.id);
+    }
+  }, [store.article?.id]);
 
   return {
     article: store.article,

src/article/data/articleActions.ts

@@ -7,6 +7,7 @@ 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

@@ -1,16 +0,0 @@
-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,15 +27,17 @@ 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,12 +21,10 @@ 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">
@@ -48,15 +46,13 @@ const Burger = (props: Props) => {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="origin-top-right absolute right-0 mt-5 w-48 rounded-md 
+            className="origin-top-right absolute right-0 mt-5 w-44 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]">
-                    {t("navbar.createNew")}
-                  </Link>
+                  <Link className="text-[#096DD9]">create new</Link>
                 </Disclosure.Button>
               </Disclosure>
               <hr />
@@ -70,7 +66,7 @@ const Burger = (props: Props) => {
                       text-base	
                      "
                     >
-                      <span>{t("navbar.library.navTitle")}</span>
+                      my library
                       <SVGArrowUp
                         className={`${
                           open ? "rotate-180 transform" : "rotate-360"
@@ -87,7 +83,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFile className="stroke-black w-4 h-4" />
-                        <span>{t("navbar.library.publications")}</span>
+                        My Publications
                       </Disclosure.Panel>
                     </Link>
 
@@ -100,7 +96,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFavoriteOutlined className="stroke-black w-4 h-4" />
-                        <span>{t("navbar.library.favorites")}</span>
+                        My Favorites
                       </Disclosure.Panel>
                     </Link>
 
@@ -113,7 +109,7 @@ const Burger = (props: Props) => {
                         "
                       >
                         <SVGFolder className="stroke-black fill-black w-4 h-4" />
-                        <span>{t("navbar.library.collections")}</span>
+                        My Collections
                       </Disclosure.Panel>
                     </Link>
 
@@ -126,7 +122,7 @@ const Burger = (props: Props) => {
                          "
                       >
                         <SVGEye className="stroke-black w-4 h-4" />
-                        <span>{t("navbar.library.recentViewed")}</span>
+                        Recent Viewed
                       </Disclosure.Panel>
                     </Link>
                   </>
@@ -144,7 +140,7 @@ const Burger = (props: Props) => {
                       text-base	
                      "
                     >
-                      <span>{t("navbar.about.navTitle")}</span>
+                      About
                       <SVGArrowUp
                         className={`${
                           open ? "rotate-180 transform" : "rotate-360"
@@ -160,7 +156,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        <span>{t("navbar.about.aboutProject")}</span>
+                        About Freeland
                       </Disclosure.Panel>
                     </Link>
 
@@ -172,7 +168,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        <span>{t("navbar.about.contacts")}</span>
+                        Contact Us
                       </Disclosure.Panel>
                     </Link>
 
@@ -184,7 +180,7 @@ const Burger = (props: Props) => {
                         text-base	
                         "
                       >
-                        <span>{t("navbar.about.help")}</span>
+                        Help
                       </Disclosure.Panel>
                     </Link>
                   </>

src/components/Markdown.tsx

@@ -14,8 +14,9 @@ import Heading from "./typography/Heading";
 /*                                    Code                                    */
 /* -------------------------------------------------------------------------- */
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { dark } 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;
@@ -152,7 +153,7 @@ const Markdown = ({ markdown }: Props) => {
           return !inline && match ? (
             <SyntaxHighlighter
               children={String(children).replace(/\n$/, "")}
-              style={oneLight}
+              style={dark}
               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 as any } {...props} onChange={onChange}>
+      <Listbox value={value} {...props} onChange={onChange}>
         <div className="relative">
           <Listbox.Button
             className={classNames([

src/components/fetchAnArticle/AnArticle.tsx

@@ -10,26 +10,18 @@ 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 { id } = useParams();
-  const { article, hasError, shouldShowLoading } = useArticleViewModel(
-    store,
-    fetchArticleUseCase,
-    getArticleUseCase,
-    id ?? '',
-  );
+  const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
   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,21 +13,15 @@ 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 { article, hasError, shouldShowLoading } = useArticleViewModel(
-    store,
-    fetchArticleUseCase,
-    getArticleUseCase,
-    id ?? '',
-  );
-  // useEffect(() => {
-  //   store.getArticle(newId);
-  // }, [id]);
+  const newId = `${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 z-40"
+            className="border-none uppercase"
           >
             <ContextMenuAction
               caption={t("navbar.library.publications")}
@@ -112,7 +112,7 @@ const Header = () => {
           <ContextMenu
             emphasis="high"
             button={t("navbar.about.navTitle")}
-            className="border-none uppercase z-40"
+            className="border-none uppercase"
           >
             <ContextMenuAction
               caption={t("navbar.about.aboutProject")}

src/components/typography/Link.tsx

@@ -46,9 +46,8 @@ export default function Link({
         style={
           typeof style === "function"
             ? style({
-              isActive: true,
-              isPending: false
-            })
+                isActive: true,
+              })
             : 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 as string)}
+      className={classNames({ "pointer-events-none": disabled }, className)}
     >
       {children}
     </NavLink>

src/index.tsx

@@ -25,6 +25,7 @@ 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 />} />
@@ -45,6 +46,7 @@ root.render(
           <Route path="/*" element={<NotFound />}></Route>
         </Routes>
       </BrowserRouter>
+    </React.StrictMode>
   </Provider>
 );