diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json index e9bff5b..44fecf5 100644 --- a/extractedTranslations/en/translation.json +++ b/extractedTranslations/en/translation.json @@ -1,9 +1,11 @@ { "": "", "123": "123", + "About site": "", "Admin panel": "", "All": "", "Article ratings coming soon!": "", + "Articles": "", "Articles app": "", "Articles not found": "", "Ascending": "", @@ -33,6 +35,8 @@ "Incorrect country": "", "Incorrect user data": "", "Leave your feedback on the article, it will help improve the quality": "", + "Main page": "", + "Main_page": "", "Name": "", "New": "", "No data": "", @@ -89,6 +93,10 @@ "read more": "", "throw error": "throw error", "views": "", + "{{count}} views": "", + "{{count}} views_plural": "", + "{{count}} просмотров": "", + "{{count}} просмотров_plural": "", "Айти": "", "Ваш отзыв": "", "Все статьи": "", @@ -102,6 +110,7 @@ "Попробуйте обновить страницу": "", "Произошла непредвиденная ошибка": "", "Произошла ошибка при загрузке профиля": "", + "Редактировать": "", "Сортировать ПО": "", "Статьи не найдены": "", "Экономика": "", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index f38140a..cefe0a7 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -19,5 +19,8 @@ "auth_password": "Enter password", "login_error": "An incorrect username or password", "exit": "Exit", - "main_page": "Main page" + "main_page": "Main page", + "{{count}} views_zero": "{{count}} views", + "{{count}} views_one": "{{count}} view", + "{{count}} views_other": "{{count}} views" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 31dc9b3..90dd907 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -19,5 +19,13 @@ "auth_password": "Введите пароль", "login_error": "Вы ввели неверный логин или пароль", "exit": "Выйти", - "main_page": "Главная страница" + "main_page": "Главная страница", + "Main page": "Главная страница", + "About site": "О сайте", + "Profile": "Профиль", + "Articles": "Статьи", + "{{count}} views_zero": "{{count}} просмотров", + "{{count}} views_one": "{{count}} просмотр", + "{{count}} views_few": "{{count}} просмотров", + "{{count}} views_many": "{{count}} просмотров" } diff --git a/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.module.scss b/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.module.scss new file mode 100644 index 0000000..79f0f8b --- /dev/null +++ b/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.module.scss @@ -0,0 +1,3 @@ +.card { + width: 264px; +} diff --git a/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.tsx b/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.tsx new file mode 100644 index 0000000..0861c72 --- /dev/null +++ b/src/pages/ArticlesDetailsPage/ui/AdditionalInfoContainer/AdditionalInfoContainer.tsx @@ -0,0 +1,35 @@ +import { memo, useCallback } from 'react'; +import { useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { Card } from '@/shared/ui/redesigned/Card'; +import { ArticleAdditionalInfo } from '@/widgets/ArticleAdditionalInfo'; +import cls from './AdditionalInfoContainer.module.scss'; +import { getRouteArticleEdit } from '@/shared/const/router'; +import { getArticlesDetailsData } from '@/entities/Article'; + +export const AdditionalInfoContainer = memo(() => { + const article = useSelector(getArticlesDetailsData); + + const navigate = useNavigate(); + + const onEditArticle = useCallback(() => { + if (article) { + navigate(getRouteArticleEdit(article.id)); + } + }, [article, navigate]); + + if (!article) { + return null; + } + + return ( + + + + ); +}); diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx index 7787a17..0b8b811 100644 --- a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx +++ b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx @@ -1,8 +1,6 @@ import { memo } from 'react'; import { useParams } from 'react-router-dom'; -import { useTranslation } from 'react-i18next'; import { VStack } from '@/shared/ui/redesigned/Stack'; -import { Card } from '@/shared/ui/deprecated/Card'; import { DynamicModuleLoader, ReducersList, @@ -10,12 +8,12 @@ import { import { ArticleRecommendationsList } from '@/features/articleRecommendationsList'; import { ArticleDetailsComments } from '../../ui/ArticleDetailsComments/ArticleDetailsComments'; -import { ArticlesDetailsPageHeader } from '../../ui/ArticlesDetailsPageHeader/ArticlesDetailsPageHeader'; import { articleDetailsPageReducer } from '../../model/slices'; -import { ArticleDetails } from '../../../../entities/Article'; import { ArticleRating } from '@/features/articleRating'; import { Page } from '@/widgets/Page'; -import { ToggleFeatures } from '@/shared/lib/features'; +import { StickyContentLayout } from '@/shared/layouts/StickyContentLayout'; +import { DetailsContainer } from '../DetailsContainer/DetailsContainer'; +import { AdditionalInfoContainer } from '../AdditionalInfoContainer/AdditionalInfoContainer'; const reducers: ReducersList = { articleDetailsPage: articleDetailsPageReducer, @@ -23,34 +21,24 @@ const reducers: ReducersList = { const ArticlesDetailsPage = (props: any) => { const { id } = useParams<{ id: string }>(); - const { t } = useTranslation(); - if (!id) { return null; } - - // usage example for func - // const articleRatingCard = toggleFeatures({ - // name: 'isArticleRatingEnabled', - // on: () => todo1(), - // off: () => todo2(), - // }); - return ( - - - - - } - off={{t('Article ratings coming soon!')}} - /> - - - - + + + + + + + + + } + right={} + /> ); }; diff --git a/src/pages/ArticlesDetailsPage/ui/DetailsContainer/DetailsContainer.tsx b/src/pages/ArticlesDetailsPage/ui/DetailsContainer/DetailsContainer.tsx new file mode 100644 index 0000000..b5580ae --- /dev/null +++ b/src/pages/ArticlesDetailsPage/ui/DetailsContainer/DetailsContainer.tsx @@ -0,0 +1,23 @@ +import { memo } from 'react'; +import { useParams } from 'react-router-dom'; +import { ArticleDetails } from '@/entities/Article'; +import { Card } from '@/shared/ui/redesigned/Card'; + +interface DetailsContainerProps { + className?: string; +} + +export const DetailsContainer = memo((props: DetailsContainerProps) => { + const { className } = props; + + const { id } = useParams<{ id: string }>(); + + if (!id) { + return null; + } + return ( + + + + ); +}); diff --git a/src/widgets/ArticleAdditionalInfo/index.ts b/src/widgets/ArticleAdditionalInfo/index.ts new file mode 100644 index 0000000..18713a7 --- /dev/null +++ b/src/widgets/ArticleAdditionalInfo/index.ts @@ -0,0 +1 @@ +export { ArticleAdditionalInfo } from './ui/ArticleAdditionalInfo/ArticleAdditionalInfo'; diff --git a/src/widgets/ArticleAdditionalInfo/ui/ArticleAdditionalInfo/ArticleAdditionalInfo.tsx b/src/widgets/ArticleAdditionalInfo/ui/ArticleAdditionalInfo/ArticleAdditionalInfo.tsx new file mode 100644 index 0000000..cb5c384 --- /dev/null +++ b/src/widgets/ArticleAdditionalInfo/ui/ArticleAdditionalInfo/ArticleAdditionalInfo.tsx @@ -0,0 +1,35 @@ +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { classNames } from '@/shared/lib/classNames/classNames'; +import { User } from '@/entities/User'; +import { HStack, VStack } from '@/shared/ui/redesigned/Stack'; +import { Avatar } from '@/shared/ui/redesigned/Avatar'; +import { Text } from '@/shared/ui/redesigned/Text'; +import { Button } from '@/shared/ui/redesigned/Button'; + +interface ArticleAdditionalInfoProps { + className?: string; + author: User; + createdAt: string; + views: number; + onEdit: () => void; +} + +export const ArticleAdditionalInfo = memo( + (props: ArticleAdditionalInfoProps) => { + const { className, author, createdAt, views, onEdit } = props; + const { t } = useTranslation(); + + return ( + + + + + + + + + + ); + }, +);