From 3f9a76815e9c8a8c2b87d0c7765812eca0fae9dc Mon Sep 17 00:00:00 2001
From: danysmall <dany.small.work@gmail.com>
Date: Fri, 14 Oct 2022 10:29:23 +0300
Subject: [PATCH] Created navbar ru localization
---
public/locales/ru/translation.json | 24 ++++++
src/components/ArticleSearchResult.tsx | 2 +-
src/components/fetchAnArticle/AnArticle.tsx | 22 ++++--
src/components/parts/Header.tsx | 85 +++++++++++----------
src/index.tsx | 2 +
src/localization/i18n.ts | 4 +-
6 files changed, 89 insertions(+), 50 deletions(-)
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 7da6984..e474311 100755
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -59,5 +59,29 @@
"services": {
"fork": "Не удалось выполнить авторизацию в сервисе"
}
+ },
+ "articlePage": {
+ "abstract": "Введение",
+ "keywords": "Ключевые слова"
+ },
+ "navbar": {
+ "createNew": "Создать статью",
+ "about": {
+ "navTitle": "О проекте",
+ "aboutProject": "О Scipaper",
+ "contacts": "Контакты",
+ "help": "Помощь"
+ },
+ "library": {
+ "navTitle": "Моя библиотека",
+ "publications": "Публикации",
+ "favorites": "Избранное",
+ "collections": "Коллекции",
+ "recentViewed": "История"
+ },
+ "auth": {
+ "signIn": "Вход",
+ "signUp": "Регистрация"
+ }
}
}
\ No newline at end of file
diff --git a/src/components/ArticleSearchResult.tsx b/src/components/ArticleSearchResult.tsx
index d06fd3a..bce62e9 100644
--- 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={searchItem.id} className="text-2xl">
+ <Article.Title linkTo={`/article/${searchItem.id}`} className="text-2xl">
{searchItem.title}
</Article.Title>
<Article.Authors emphasis="low" className="flex flex-wrap flex-row">
diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
index 54d35d8..240d53c 100644
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -8,10 +8,13 @@ import Container from "components/Container";
import NotFound from "./NotFound";
import { SVGSearch } from "components/icons";
import BaseLayout from "components/BaseLayout";
+import Typography from "components/typography/Typography";
+import { useTranslation } from "react-i18next";
const AnArticle = () => {
const store = useArticleStore();
const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
+ const { i18n, t } = useTranslation();
const { id } = useParams();
const newId = `${id}`;
@@ -46,9 +49,13 @@ const AnArticle = () => {
<ArticlePart.Article.InteractionButtons emphasis="high" />
{article?.tags && (
<div className="keywords my-10 flex flex-col gap-2">
- <ArticlePart.Article.Title className="text-2xl">
- Keywords
- </ArticlePart.Article.Title>
+ <Typography
+ className="text-2xl"
+ fontWeightVariant="semibold"
+ >
+ {t('articlePage.keywords')}
+ </Typography>
+
<ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
{article?.tags}
@@ -56,9 +63,12 @@ const AnArticle = () => {
</div>
)}
<div className="abstract my-10 flex flex-col gap-2">
- <ArticlePart.Article.Title className="text-2xl">
- Abstract
- </ArticlePart.Article.Title>
+ <Typography
+ className="text-2xl"
+ fontWeightVariant="semibold"
+ >
+ {t('articlePage.abstract')}
+ </Typography>
<ArticlePart.Article.Description>
{article?.summary !== undefined ? (
article?.summary
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
index 2cdd0f3..cae9eaf 100755
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -1,5 +1,5 @@
import classNames from "classnames";
-import { useState } from "react";
+import { useState, useTransition } from "react";
/* -------------------------------------------------------------------------- */
/* Components */
/* -------------------------------------------------------------------------- */
@@ -23,11 +23,14 @@ import {
SVGFile,
SVGEye,
} from "components/icons";
+import i18n from "localization/i18n";
+import { useTranslation } from "react-i18next";
const Header = () => {
const [authenticated, setAuthenticated] = useState(false);
const onClick = () => setAuthenticated(true);
const [notification, setNotification] = useState(false);
+ const { t, i18n } = useTranslation();
/* -------------------------------------------------------------------------- */
/* Implement Header Component */
@@ -66,36 +69,36 @@ const Header = () => {
className="text-blue-500 px-4 font-bold uppercase"
to="/create-new"
>
- Create new
+ {t('navbar.createNew')}
</RouterLink>
{/* Link Create now - end - */}
{/* Dropdown Menu My library - start - */}
<ContextMenu
emphasis="high"
- button="My library"
+ button={t('navbar.library.navTitle')}
className="border-none uppercase"
>
<ContextMenuAction
- caption="My Publications"
+ caption={t('navbar.library.publications')}
action={() => console.log("My publications")}
icon={<SVGFile className="stroke-black " />}
></ContextMenuAction>
<ContextMenuAction
- caption="My Favorites"
+ caption={t('navbar.library.favorites')}
action={() => console.log("My Favorites")}
icon={<SVGFavoriteOutlined className="stroke-black" />}
></ContextMenuAction>
<ContextMenuAction
- caption="My Collections"
+ caption={t('navbar.library.collections')}
action={() => console.log("My Collections")}
icon={<SVGFolder className="stroke-black fill-black" />}
></ContextMenuAction>
<ContextMenuAction
- caption="Recent Viewed"
+ caption={t('navbar.library.recentViewed')}
action={() => console.log("Recent Viewed")}
icon={<SVGEye className="stroke-black " />}
></ContextMenuAction>
@@ -105,21 +108,21 @@ const Header = () => {
{/* Dropdown Menu About - start - */}
<ContextMenu
emphasis="high"
- button="About"
+ button={t('navbar.about.navTitle')}
className="border-none uppercase"
>
<ContextMenuAction
- caption="About Freeland"
+ caption={t('navbar.about.aboutProject')}
action={() => console.log("About Freeland")}
></ContextMenuAction>
<ContextMenuAction
- caption="Contact Us"
+ caption={t('navbar.about.contacts')}
action={() => console.log("Contact Us")}
></ContextMenuAction>
<ContextMenuAction
- caption="Help"
+ caption={t('navbar.about.help')}
action={() => console.log("Help")}
></ContextMenuAction>
</ContextMenu>
@@ -132,38 +135,38 @@ const Header = () => {
<div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
{!authenticated
? [
- <Button
- emphasis="low"
- onClick={onClick}
- className="text-xs sm:px-4 sm:text-sm "
- >
- Sign in
- </Button>,
- <Button
- emphasis="medium"
- className="hidden md:flex"
- onClick={onClick}
- >
- Sign up
- </Button>,
- ]
+ <Button
+ emphasis="low"
+ onClick={onClick}
+ className="text-xs sm:px-4 sm:text-sm "
+ >
+ {t('navbar.auth.signIn')}
+ </Button>,
+ <Button
+ emphasis="medium"
+ className="hidden md:flex"
+ onClick={onClick}
+ >
+ {t('navbar.auth.signUp')}
+ </Button>,
+ ]
: [
- <Button emphasis="low">
- <Button.Icon>
- {!notification ? (
- <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
- ) : (
- <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
- )}
- </Button.Icon>
- </Button>,
+ <Button emphasis="low">
+ <Button.Icon>
+ {!notification ? (
+ <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+ ) : (
+ <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+ )}
+ </Button.Icon>
+ </Button>,
- <Button emphasis="low" className="hidden lg:flex">
- <Button.Icon>
- <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
- </Button.Icon>
- </Button>,
- ]}
+ <Button emphasis="low" className="hidden lg:flex">
+ <Button.Icon>
+ <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
+ </Button.Icon>
+ </Button>,
+ ]}
{/* Burger component will be shown for the small screens */}
<Navbar className="block lg:hidden" />
</div>
diff --git a/src/index.tsx b/src/index.tsx
index 5444a2c..ed9b2e9 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,7 @@ import AccountSettings from "pages/Information/AccountSettings";
import { store } from "store/store";
import { Provider } from "react-redux";
import { SearchResultsPage } from "pages/SearchResultsPage";
+import AnArticle from "components/fetchAnArticle/AnArticle";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
@@ -32,6 +33,7 @@ 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="/account">
<Route path="settings" element={<AccountSettings />} />
</Route>
diff --git a/src/localization/i18n.ts b/src/localization/i18n.ts
index c97eeb4..d735183 100755
--- a/src/localization/i18n.ts
+++ b/src/localization/i18n.ts
@@ -18,11 +18,11 @@ export const languages: Record<Langs, Lang> = {
},
};
export const popularLangKeys = ["ru", "en"];
-const fallbackLng: Langs = "en";
+const fallbackLng: Langs = "ru";
i18n
.use(Backend)
- .use(LanguageDetector)
+ // .use(LanguageDetector)
.use(initReactI18next)
.init({
debug: process.env.NODE_ENV === "development" ? true : false,