add greeting modal for articles

Author: vmishakin

json-server/db.json

@@ -2012,7 +2012,8 @@
       "jsonSettings": {
         "theme": "app_magneta_theme",
         "isFirstVisit": true,
-        "settingsPageHasBeenOpened": false
+        "settingsPageHasBeenOpened": false,
+        "isArtcilesPageWasOpened": true
       }
     },
     {

public/locales/en/translation.json

@@ -34,5 +34,7 @@
     " You don": "Forbidden. You don`t have access."
   },
   "Close": "Close",
-  "add five": "add five"
+  "add five": "add five",
+  "Welcome to the articles page": "Welcome to the articles page",
+  "Here you can search and view articles on various topics": "Here you can search and view articles on various topics"
 }

public/locales/ru/translation.json

@@ -31,5 +31,7 @@
   "Forbidden": {
     " You don": "Запрещенный. \nУ вас нет доступа."
   },
-  "Close": "Закрывать"
+  "Close": "Закрывать",
+  "Welcome to the articles page": "Добро пожаловать на страницу статей",
+  "Here you can search and view articles on various topics": "Здесь вы можете искать и просматривать статьи на различные темы"
 }

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

@@ -4,6 +4,7 @@ interface _JsonSettings {
   theme: Theme;
   isFirstVisist: boolean;
   settingsPageHasBeenOpened: boolean;
+  isArtcilesPageWasOpened?: boolean;
 }
 
 export type JsonSettings = Partial<_JsonSettings>;

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,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ArticlePageGreeting } from './ArticlePageGreeting';
+
+export default {
+  title: 'entities/ArticlePageGreeting',
+  component: ArticlePageGreeting,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticlePageGreeting>;
+
+const Template: ComponentStory<typeof ArticlePageGreeting> = () => {
+  return <ArticlePageGreeting />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {};

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

@@ -0,0 +1,45 @@
+import { 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 = () => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const { isArtcilesPageWasOpened } = useJsonSettings();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (!isArtcilesPageWasOpened) {
+      setIsOpen(true);
+      dispatch(saveJsonSettings({ isArtcilesPageWasOpened: true }));
+    }
+  }, [dispatch, isArtcilesPageWasOpened]);
+
+  const handleOnClose = () => setIsOpen(false);
+
+  const text = (
+    <Text
+      title={t('Welcome to the articles page')}
+      text={t('Here you can search and view articles on various topics')}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer isOpen={isOpen} lazy onClose={handleOnClose}>
+        {text}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal isOpen={isOpen} lazy onClose={handleOnClose}>
+      {text}
+    </Modal>
+  );
+};

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

@@ -13,6 +13,7 @@ import { fetchNextArticlesPage } from '../../model/services/fetchNextArticlesPag
 import { articlesPageReducer } from '../../model/slices/articlesPageSlice';
 import s from './ArticlesPage.module.scss';
 import { ArticlesPageFilters } from '../ArticlesPageFilters/ArticlesPageFilters';
+import { ArticlePageGreeting } from '@/features/articlePageGreeting';
 
 const reducers: ReducersList = {
   articlesPage: articlesPageReducer,
@@ -35,6 +36,7 @@ export const ArticlesPage = memo(() => {
       <Page onScrollEnd={onLoadNextPart} className={s.ArticlesPage} data-testid="ArticlesPage">
         <ArticlesPageFilters />
         <ArtcileInfiniteList className={s.list} />
+        <ArticlePageGreeting />
       </Page>
     </DynamicModuleLoader>
   );