feat: add greeting message in json settings

extractedTranslations/en/translation.json

@@ -22,6 +22,7 @@
   "Error with getting article data": "",
   "Error with getting profile data": "",
   "Exit": "",
+  "Here you can search and view articles on various topics": "",
   "IT": "",
   "Incorrect age": "",
   "Incorrect country": "",
@@ -48,6 +49,7 @@
   "Sorting by": "",
   "Thanks for review!": "",
   "Try to reload page": "",
+  "Welcome to the articles page!": "",
   "You don`t have access to this page!": "",
   "Your name": "",
   "article_not_found": "",

json-server/db.json

@@ -757,7 +757,8 @@
       "jsonSettings": {
         "theme": "app_light_theme",
         "isFirstVisit": true,
-        "settingsPageHasBeenOpen": false
+        "settingsPageHasBeenOpen": false,
+        "isArticlesPageWasOpened": true
       }
     },
     {

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

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

src/features/articlePageGreeting/index.ts

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

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

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { memo, useEffect, useState } from 'react';
+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 { Drawer } from '@/shared/ui/Drawer';
+import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
+
+export const ArticlePageGreeting = memo(() => {
+    const { t } = useTranslation();
+    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('Welcome to the articles page!')}
+            text={t('Here you can search and view articles on various topics')}
+        />
+    );
+
+    if (isMobile) {
+        return (
+            <Drawer lazy isOpen={isOpen} onClose={onClose}>
+                {text}
+            </Drawer>
+        );
+    }
+
+    return (
+        <Modal lazy isOpen={isOpen} onClose={onClose}>
+            {text}
+        </Modal>
+    );
+});

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

@@ -13,6 +13,7 @@ import { fetchNextArticlePage } from '../../model/services/fetchNextArticlePage/
 import { initArticlesPage } from '../../model/services/initArticlesPage/initArticlesPage';
 import { articlesPageReducer } from '../../model/slices/articlesPageSlice';
 import { Page } from '@/widgets/Page';
+import { ArticlePageGreeting } from '@/features/articlePageGreeting';
 
 interface ArticlesPageProps {
     className?: string;
@@ -44,6 +45,7 @@ const ArticlesPage = ({ className }: ArticlesPageProps) => {
             >
                 <ArticlesPageFilters />
                 <ArticleInfiniteList />
+                <ArticlePageGreeting />
             </Page>
         </DynamicModuleLoader>
     );