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

2022-10-18 17:50:31 +03:00 · 2022-10-18 17:50:31 +03:00 · 969749c0c0
commit 969749c0c0
parent 5667f30a92 15b9ed1f20
13 changed files with 153 additions and 59 deletions
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -1,7 +1,7 @@
 {
  "serv": {
-    "goHome": "Home",
-    "noSuchPath": "We don't have this page"
+    "goHome": "Home 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",
-    "connectedAccounts_one": "Connected account",
-    "connectedAccounts_other": "Connected accounts",
-    "settings": "Account settings"
+    "connect": "Add Account",
+    "connectedAccounts_one": "Linked Account",
+    "connectedAccounts_other": "Linked Accounts",
+    "settings": "Account Settings"
  },
  "security": {
    "password": {
      "caption": "Password",
-      "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."
+      "twoFactor": "Two-factor authentication (2FA)",
+      "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",
-      "exists": "Service have already been connected",
-      "confirmation": "Invalid confirmation information provided"
+      "failure": "Failed to attach the service to your account",
+      "exists": "The service was already attached to your account earlier",
+      "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"
  }
-}
+
+}
--- a/src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
+++ b/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,18 +73,31 @@ export function ArticleInteractionButtons({
      </Button.Icon>
    </Button>
  );
-
  const fileInteractionButtons = interactionButtonsStore.map((button) => {
    return (
-      <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>
+      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"
+        >
+          <Button.Icon>
+            {React.cloneElement(button.icon, { className: button.iconClassName })}
+          </Button.Icon>
+          {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
+        </Button>
    );
  });

--- a/src/components/ArticleSearchResult.tsx
+++ b/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">
--- a/src/components/BaseLayout.tsx
+++ b/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>
--- a/src/components/MainPage/sections/FeaturedArticlesCards.tsx
+++ b/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 
--- a/src/components/MainPage/sections/FeaturedAuthorsCards.tsx
+++ b/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>
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/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
-                  className="text-2xl"
-                  fontWeightVariant="semibold"
-                >
-                  {t('articlePage.keywords')}
+                <Typography className="text-2xl" 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
-                className="text-2xl"
-                fontWeightVariant="semibold"
-              >
-                {t('articlePage.abstract')}
+              <Typography className="text-2xl" fontWeightVariant="semibold">
+                {t("articlePage.abstract")}
              </Typography>
              <ArticlePart.Article.Description>
                {article?.summary !== undefined ? (
--- a/src/components/fetchAnArticle/AnArticleBody.tsx
+++ b/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">
--- a/src/components/fetchAnArticle/AskeletonArticle.tsx
+++ b/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" />
--- a/src/components/typography/Link.tsx
+++ b/src/components/typography/Link.tsx
@ -51,6 +51,7 @@ export default function Link({
            : style
        }
        aria-disabled={disabled}
+        className="flex items-center"
        {...props}
      >
        {children}
--- a/src/core/helpers.ts
+++ b/src/core/helpers.ts
@ -8,10 +8,17 @@ export const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>) => {
  }
 };

-export function capitalization (str: string) {
-  return str.substring(0,1).toUpperCase() + str.substring(1);
+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('');
 }
--- a/src/index.tsx
+++ b/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>
--- a/src/pages/SearchResultsPage.tsx
+++ b/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 />