feat: add greetings for articles page

README.md

@@ -174,6 +174,7 @@ Feature state can take only one of two values: **on** or **off**.
 ## Features
 
 - [addCommentForm](/src/features/addCommentForm)
+- [articlePageGreeting](/src/features/articlePageGreeting)
 - [articleRating](/src/features/articleRating)
 - [articleRecommendationsList](/src/features/articleRecommendationsList)
 - [articleSortSelector](/src/features/articleSortSelector)

json-server/db.json

@@ -756,7 +756,8 @@
       "jsonSettings": {
         "theme": "app_orange_theme",
         "isFirstVisit": true,
-        "settingsPageHasBeenOpen": false
+        "settingsPageHasBeenOpen": false,
+        "isArticlesPageWasOpened": true
       },
       "avatar": "https://s10.stc.yc.kpcdn.net/share/i/12/12010775/wr-960.webp"
     },

public/locales/en/articles.json

@@ -25,5 +25,7 @@
   "Ошибка при загрузке статей": "Error while loading articles",
   "Оцените статью": "Rate this article",
   "Оставьте свой отзыв о статье": "Leave your feedback on the article",
-  "Оценка статей скоро появится!": "Article ratings coming soon!"
+  "Оценка статей скоро появится!": "Article ratings coming soon!",
+  "Добро пожаловать на страницу статей": "Welcome to the articles page",
+  "Здесь Вы можете искать и просматривать статьи на различные темы": "Here you can search and view articles on various topics"
 }

public/locales/ru/articles.json

@@ -25,5 +25,7 @@
   "Ошибка при загрузке статей": "Ошибка при загрузке статей",
   "Оцените статью": "Оцените статью",
   "Оставьте свой отзыв о статье": "Оставьте свой отзыв о статье",
-  "Оценка статей скоро появится!": "Оценка статей скоро появится!"
+  "Оценка статей скоро появится!": "Оценка статей скоро появится!",
+  "Добро пожаловать на страницу статей": "Добро пожаловать на страницу статей",
+  "Здесь Вы можете искать и просматривать статьи на различные темы": "Здесь Вы можете искать и просматривать статьи на различные темы"
 }

src/entities/User/model/types/jsonSettings.ts

@@ -3,5 +3,5 @@ import { Theme } from '@/shared/const/theme';
 export interface JsonSettings {
   theme?: Theme;
   isFirstVisit?: boolean;
-  settingsPageHasBeenOpen?: boolean;
+  isArticlesPageWasOpened?: boolean;
 }

src/features/articlePageGreeting/README.md

@@ -0,0 +1 @@
+## Article page greeting

src/features/articlePageGreeting/index.ts

@@ -0,0 +1 @@
+export { ArticlePageGreeting } from './ui/ArticlePageGreeting/ArticlePageGreeting';

src/features/articlePageGreeting/ui/ArticlePageGreeting/ArticlePageGreeting.stories.tsx

@@ -0,0 +1,18 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticlePageGreeting } from './ArticlePageGreeting';
+
+export default {
+  title: 'features/ArticlePageGreeting',
+  component: ArticlePageGreeting,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticlePageGreeting>;
+
+const Template: ComponentStory<typeof ArticlePageGreeting> = (args) => (
+  <ArticlePageGreeting {...args} />
+);
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/features/articlePageGreeting/ui/ArticlePageGreeting/ArticlePageGreeting.tsx

@@ -0,0 +1,45 @@
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isMobile } from 'react-device-detect';
+
+import { Modal } from '@/shared/ui/Modal';
+import { Text } from '@/shared/ui/Text';
+import { saveJsonSettings, useJsonSettings } from '@/entities/User';
+import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { Drawer } from '@/shared/ui/Drawer';
+
+export const ArticlePageGreeting = memo(() => {
+  const { t } = useTranslation('articles');
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { isArticlesPageWasOpened } = useJsonSettings();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (!isArticlesPageWasOpened) {
+      setIsOpen(true);
+      dispatch(saveJsonSettings({ isArticlesPageWasOpened: true }));
+    }
+  }, [dispatch, isArticlesPageWasOpened]);
+
+  const onClose = () => setIsOpen(false);
+
+  const text = (
+    <Text
+      title={t('Добро пожаловать на страницу статей')}
+      text={t('Здесь Вы можете искать и просматривать статьи на различные темы')}
+    />
+  );
+
+  if (isMobile) {
+    return <Drawer>{text}</Drawer>;
+  }
+
+  return (
+    <Modal lazy isOpen={isOpen} onClose={onClose}>
+      {text}
+    </Modal>
+  );
+});
+
+ArticlePageGreeting.displayName = 'ArticlePageGreeting';

src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx

@@ -9,6 +9,7 @@ import {
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
 import { Page } from '@/widgets/Page';
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect';
+import { ArticlePageGreeting } from '@/features/articlePageGreeting';
 
 import { initArticlesPage } from '../../model/services/initArticlesPage/initArticlesPage';
 import { ArticleInfiniteList } from '../ArticleInfiniteList/ArticleInfiniteList';
@@ -48,6 +49,8 @@ export const ArticlesPage = memo((props: ArticlesPageProps) => {
         <ArticlesPageFilters />
 
         <ArticleInfiniteList />
+
+        <ArticlePageGreeting />
       </Page>
     </DynamicModuleLoader>
   );