Merge branch 'feature/add-filters' of http://85.143.176.51:3000/free-land/front-end into feature/add-filters

public/locales/en/translation.json

@@ -1,7 +1,7 @@
 {
   "serv": {
-    "goHome": "Home",
+    "goHome": "Home page",
-    "noSuchPath": "We don't have this page"
+    "noSuchPath": "We don't have such a page"
   },
   "sidemenu": {
     "dashboard": "Dashboard",
@@ -19,45 +19,110 @@
   "hellousr": "Hello, {{username}}",
   "edit": "Edit",
   "language": "Language",
-  "selectLanguage": "Select language",
+  "selectLanguage": "Select a language",
   "save": "Save",
   "cancel": "Cancel",
   "account": {
-    "info": "Personal information",
+    "info": "Personal Information",
     "mail": "Mail",
-    "connect": "Add account",
+    "connect": "Add Account",
-    "connectedAccounts_one": "Connected account",
+    "connectedAccounts_one": "Linked Account",
-    "connectedAccounts_other": "Connected accounts",
+    "connectedAccounts_other": "Linked Accounts",
-    "settings": "Account settings"
+    "settings": "Account Settings"
   },
   "security": {
     "password": {
       "caption": "Password",
-      "twoFactor": "Two factor authentication (2FA)",
+      "twoFactor": "Two-factor authentication (2FA)",
-      "description": "Keep your account secure by enabling 2FA via SMS or using a temporary one-time passcode (TOTP) from an authenticator app."
+      "description": "Protect your account by enabling 2FA via SMS or using a temporary one-time password (OTP) from the authentication app."
     },
     "activity": {
       "caption": "Device activity"
     }
   },
   "search": {
-    "label": "Search for something.."
+    "label": "We will find something.."
   },
   "subscriptions": {
-    "subscribed": "Service have been connected"
+    "subscribed": "The service is attached to the account"
   },
   "viewHistory": "View history",
-  "logOutEverywhere": "log out from all devices",
+  "logOutEverywhere": "Log out from all devices",
   "back": "Back",
-  "logOut": "Log out",
+  "logOut": "Exit",
   "failures": {
     "subscriptions": {
-      "failure": "Failed to connect service",
+      "failure": "Failed to attach the service to your account",
-      "exists": "Service have already been connected",
+      "exists": "The service was already attached to your account earlier",
-      "confirmation": "Invalid confirmation information provided"
+      "confirmation": "Invalid password"
     },
     "services": {
-      "fork": "Failed to authenticate in service"
+      "fork": "Failed to perform authorization in the service"
     }
+  },
+  "articlePage": {
+    "abstract": "Abstract",
+    "keywords": "Keywords"
+  },
+  "navbar": {
+    "createNew": "Create an article",
+    "about": {
+      "navTitle": "About the project",
+      "aboutProject": "About Scipaper",
+      "contacts": "Contacts",
+      "help": "Help"
+    },
+    "library": {
+      "navTitle": "My library",
+      "publications": "Publications",
+      "favorites": "Favorites",
+      "collections": "Collections",
+      "recentViewed": "History"
+    },
+    "auth": {
+      "signIn": "Sign In",
+      "signUp": "Sign Up"
     }
+  },
+  "footer": {
+    "accountSettings": "Account Settings",
+    "about": "About Scipaper",
+    "help": "Help",
+    "contactUs": "Contacts",
+    "allRightsReserved": "All rights reserved",
+    "termsOfUse": "Terms of Use",
+    "privacyPolicy": "Privacy Policy",
+    "coockiesPolicy": "coockies Usage Policy",
+    "supportedBy": "Created"
+  },
+  "mainPage": {
+    "title": "Scientific Library with free access",
+    "search": "Search",
+    "article_one": "Articles",
+    "article_few": "Articles",
+    "article_many": "Articles",
+    "advancedSearch": "Advanced search",
+    "featuredArticles": {
+      "title": "Popular articles",
+      "descriptionPart1": "Choose the one you are interested in",
+      "descriptionPart2": "Scientific category",
+      "categories": {
+        "Medical": "Medical",
+        "TechnicsAndTechlonogies": "Technics and Technology",
+        "Fundamental": "Fundamental",
+        "Humanitarian": "Humanitarian",
+        "Agricultural": "Agricultural",
+        "Social": "Social"
+      }
+    },
+    "featuredAuthors": "Popular authors",
+    "more": "More",
+    "showAll": "Show all"
+  },
+  "searchResults": {
+    "title": "Search results",
+    "totalResults":"Total results",
+    "nothingFound": "Nothing found"
+  }
+
 }

src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx

@@ -12,6 +12,7 @@ import {
 } from "components/icons";
 import classNames from "classnames";
 import { Transition } from "@headlessui/react";
+import Link from "components/typography/Link";
 
 const interactionButtonsStore = [
   {
@@ -46,6 +47,7 @@ type ArticleButtonProps = {
   children?: React.ReactNode;
   className?: string;
   emphasis?: "high" | "low";
+  articleID?: string,
 } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
 
 export function ArticleInteractionButtons({
@@ -53,6 +55,7 @@ export function ArticleInteractionButtons({
   children,
   openAbstract = () => { },
   className,
+  articleID,
   emphasis = "high", //to change displaying of component
   ...props
 }: ArticleButtonProps) {
@@ -70,9 +73,22 @@ export function ArticleInteractionButtons({
       </Button.Icon>
     </Button>
   );
-
   const fileInteractionButtons = interactionButtonsStore.map((button) => {
     return (
+      button.title === 'Read file' ?
+        <Link
+          to={`/article/content/${articleID}`}>
+          <Button
+            emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
+            className="h-max px-2 mr-2"
+          >
+            <Button.Icon>
+              {React.cloneElement(button.icon, { className: button.iconClassName })}
+            </Button.Icon>
+            {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+          </Button>
+        </Link>
+        :
         <Button
           emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
           className="h-max px-2 mr-2"

src/components/ArticleSearchResult.tsx

@@ -37,7 +37,7 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
         <Article.SubscriptionsButtons />
       </div>
 
-      <Article.Title linkTo={`/article/${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/BaseLayout.tsx

@@ -1,3 +1,4 @@
+import { joinClassnames } from "core/helpers";
 import React from "react";
 import { Footer } from "./parts/Footer";
 import Header from "./parts/Header";
@@ -10,10 +11,10 @@ type Props = {
 
 function BaseLayout({ header, footer, children, className }: Props) {
   return (
-    <div className={className}>
+    <div className={joinClassnames(className, 'flex min-h-screen flex-col justify-between')}>
       <Header />
 
-      <main>{children}</main>
+      <main className="flex-1">{children}</main>
 
       <Footer />
     </div>

src/components/MainPage/sections/FeaturedArticlesCards.tsx

@@ -98,10 +98,10 @@ const FeaturedArticlesCards = () => {
   const navigationPrevRef = useRef(null);
   const navigationNextRef = useRef(null);
   const paginationRef = useRef(null);
-  const [t, i18next] = useTranslation()
+  const [t, i18next] = useTranslation();
 
   return (
-    <div className="slider-wrapper articles">
+    <div className="slider-wrapper articles px-8">
       <div className="flex justify-end gap-2 my-2">
         <div
           className="prev inline-flex  justify-center items-center 

src/components/MainPage/sections/FeaturedAuthorsCards.tsx

@@ -75,10 +75,12 @@ export default function FeaturedAuthorsCards(): JSX.Element {
   return (
     <div>
       {/* The Title of Featured Authors section */}
-      <Heading className="text-center my-8 text-3xl font-semibold">{t("mainPage.featuredAuthors")}</Heading>
+      <Heading className="text-center my-8 text-3xl font-semibold">
+        {t("mainPage.featuredAuthors")}
+      </Heading>
 
       {/* Featured Authors section */}
-      <div className="slider-wrapper Authors">
+      <div className="slider-wrapper Authors px-8">
         <Swiper
           slidesPerView={1.25}
           slidesPerGroup={1}
@@ -133,7 +135,7 @@ export default function FeaturedAuthorsCards(): JSX.Element {
 
                 <Card.CardAction href={card.Link}>
                   <Link className="text-blue-500 font-bold" to="*">
-                    {t('mainPage.more')}
+                    {t("mainPage.more")}
                   </Link>
                   <SVGCaretRight className="fill-blue-500 w-4 h-4" />
                 </Card.CardAction>

src/components/fetchAnArticle/AnArticle.tsx

@@ -33,7 +33,7 @@ const AnArticle = () => {
           <AskeletonArticle />
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="flex flex-col gap-4 pb-4">
@@ -46,28 +46,24 @@ const AnArticle = () => {
               <hr></hr>
             </div>
 
-            <ArticlePart.Article.InteractionButtons emphasis="high" />
+            <ArticlePart.Article.InteractionButtons
+              emphasis="high"
+              articleID={article?.id}
+            />
             {article?.tags && (
               <div className="keywords my-10 flex flex-col gap-2">
-                <Typography
+                <Typography className="text-2xl" fontWeightVariant="semibold">
-                  className="text-2xl"
+                  {t("articlePage.keywords")}
-                  fontWeightVariant="semibold"
-                >
-                  {t('articlePage.keywords')}
                 </Typography>
 
-
                 <ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
                   {article?.tags}
                 </ArticlePart.Article.Keywords>
               </div>
             )}
             <div className="abstract my-10 flex flex-col gap-2">
-              <Typography
+              <Typography className="text-2xl" fontWeightVariant="semibold">
-                className="text-2xl"
+                {t("articlePage.abstract")}
-                fontWeightVariant="semibold"
-              >
-                {t('articlePage.abstract')}
               </Typography>
               <ArticlePart.Article.Description>
                 {article?.summary !== undefined ? (

src/components/fetchAnArticle/AnArticleBody.tsx

@@ -27,7 +27,7 @@ const AnArticleBody = () => {
       <Container variant="straight">
         {shouldShowLoading ? (
           <>
-            <Skeleton count={1} />
+            <Skeleton count={1} className="my-4" />
             <div className="gap-4 py-12 px-20">
               <Skeleton
                 count={1}
@@ -39,7 +39,7 @@ const AnArticleBody = () => {
           </>
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="gap-4 py-12 px-20">

src/components/fetchAnArticle/AskeletonArticle.tsx

@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 const AskeletonArticle = () => {
   return (
     <>
-      <Skeleton count={1} />
+      <Skeleton count={1} className="my-4" />
       <div className="flex flex-col gap-4 pb-4">
         <Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
         <Skeleton count={1} containerClassName="authors w-1/4" />

src/components/typography/Link.tsx

@@ -51,6 +51,7 @@ export default function Link({
             : style
         }
         aria-disabled={disabled}
+        className="flex items-center"
         {...props}
       >
         {children}

src/core/helpers.ts

@@ -8,10 +8,17 @@ export const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
   }
 };
 
-export function capitalization (str: string) {
+export function capitalization(str: string): string {
   return str.substring(0, 1).toUpperCase() + str.substring(1);
 }
 
-export function formatNumber(num: number) {
+export function formatNumber(num: number): string {
   return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
 }
+
+export function joinClassnames(first?: string, second?: string): string {
+  return [
+    first ?? '',
+    second ?? '',
+  ].join('');
+}

src/index.tsx

@@ -17,6 +17,8 @@ import { store } from "store/store";
 import { Provider } from "react-redux";
 import { SearchResultsPage } from "pages/SearchResultsPage";
 import AnArticle from "components/fetchAnArticle/AnArticle";
+import NotFound from "components/fetchAnArticle/NotFound";
+import AnArticleBody from "components/fetchAnArticle/AnArticleBody";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Failed to find the root element");
@@ -33,11 +35,15 @@ root.render(
           <Route path="/terms-of-use" element={<TermsOfUse />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           <Route path="/cookies-policy" element={<CookiesPolicy />} />
-          <Route path="/article/:id" element={<AnArticle />} />
+          <Route path="/article">
+            <Route path="info/:id" element={<AnArticle />} />
+            <Route path="content/:id" element={<AnArticleBody />} />
+          </Route>
           <Route path="/account">
             <Route path="settings" element={<AccountSettings />} />
           </Route>
-          <Route path="/search-results" element={<SearchResultsPage />}></Route>
+          <Route path="/search-results" element={<SearchResultsPage />} />
+          <Route path="/*" element={<NotFound />}></Route>
         </Routes>
       </BrowserRouter>
     </React.StrictMode>

src/pages/SearchResultsPage.tsx

@@ -14,7 +14,7 @@ export const SearchResultsPage = () => {
       <SearchSection />
       <ColumnLayout>
         <ColumnLayout.Left>
-          <div className="w-[300px] border rounded my-5"><Fiter/></div>
+          <div className="h-98 w-[300px]"></div>
         </ColumnLayout.Left>
         <ColumnLayout.Main>
           <SearchResultSection />