add articles page greeting modal

json-server/db.json

@@ -580,7 +580,8 @@
       "jsonSettings": {
         "theme": "app-theme-dark",
         "isFirstVisit": true,
-        "settingsPageHasBeenOpened": true
+        "settingsPageHasBeenOpened": true,
+        "isArticlesPageGreetingsOpened": true
       }
     },
     {

public/locales/en/translation.json

@@ -25,6 +25,7 @@
   "Error loading comments": "Error loading comments",
   "Error loading the article": "Error loading the article",
   "Forbidden page": "Forbidden page",
+  "Here is the article page.": "Here is the article page.",
   "IT": "IT",
   "Incorrect age": "Incorrect age",
   "Incorrect avatar link": "Incorrect avatar link",
@@ -74,6 +75,7 @@
   "Username": "Username",
   "Views": "Views",
   "Wrong username or password": "Wrong username or password",
+  "You can choose any article, read it and rate if you want.": "You can choose any article, read it and rate if you want.",
   "Your age": "Your age",
   "Your avatar url": "Your avatar url",
   "Your city": "Your city",

public/locales/ru/translation.json

@@ -25,6 +25,7 @@
   "Error loading comments": "Error loading comments",
   "Error loading the article": "Error loading the article",
   "Forbidden page": "Forbidden page",
+  "Here is the article page.": "Here is the article page.",
   "IT": "IT",
   "Incorrect age": "Incorrect age",
   "Incorrect avatar link": "Incorrect avatar link",
@@ -74,6 +75,7 @@
   "Username": "Username",
   "Views": "Views",
   "Wrong username or password": "Wrong username or password",
+  "You can choose any article, read it and rate if you want.": "You can choose any article, read it and rate if you want.",
   "Your age": "Your age",
   "Your avatar url": "Your avatar url",
   "Your city": "Your city",

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

@@ -2,10 +2,7 @@ import { JsonSettings } from './../types/jsonSettings';
 import { StateSchema } from "@/app/providers/StoreProvider";
 import { buildSelector } from "@/shared/lib/store";
 
-export const defaultJsonSettings: JsonSettings = {
-  isFirstVisit: false,
-  settingsPageHasBeenOpened: false,
-};
+export const defaultJsonSettings: JsonSettings = {};
 
 export const [ useJsonSettings, getJsonSettings ] = buildSelector(
   (state: StateSchema) => state.user.authData?.jsonSettings ?? defaultJsonSettings,

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

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

src/features/ArticlesPageGreeting/index.ts

@@ -0,0 +1,5 @@
+import { ArticlesPageGreeting } from './ui/ArticlesPageGreeting/ArticlesPageGreeting';
+
+export {
+  ArticlesPageGreeting,
+};

src/features/ArticlesPageGreeting/ui/ArticlesPageGreeting/ArticlesPageGreeting.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from 'react-i18next';
+import { memo, useCallback, useEffect, useState } from 'react';
+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 { isMobile } from 'react-device-detect';
+import { Drawer } from '@/shared/ui/Drawer';
+
+export const ArticlesPageGreeting = memo(() => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { isArticlesPageGreetingsOpened } = useJsonSettings();
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!isArticlesPageGreetingsOpened) {
+      setIsModalOpen(true);
+      void dispatch(saveJsonSettings({ isArticlesPageGreetingsOpened: true }));
+    }
+  }, [isArticlesPageGreetingsOpened, dispatch]);
+
+  const handleModalClose = useCallback(() => {
+    setIsModalOpen(false);
+  }, [setIsModalOpen]);
+
+  const content = (
+    <Text
+      title={t('Here is the article page.')}
+      text={t('You can choose any article, read it and rate if you want.')}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer isOpen={isModalOpen} onClose={handleModalClose}>
+        {content}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal lazy isOpen={isModalOpen} onClose={handleModalClose}>
+      {content}
+    </Modal>
+  );
+});
+
+ArticlesPageGreeting.displayName = 'ArticlesPageGreeting';

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

@@ -14,6 +14,7 @@ import cls from './ArticlesPage.module.scss';
 import { ArticlesPageFilter } from '../ArticlesPageFilter/ArticlesPageFilter';
 import { useSearchParams } from 'react-router-dom';
 import { ArticleInfiniteList } from '../ArticleInfiniteList/ArticleInfiniteList';
+import { ArticlesPageGreeting } from '@/features/ArticlesPageGreeting';
 
 interface ArticlesPageProps {
   className?: string;
@@ -47,6 +48,7 @@ const ArticlesPage: FC<ArticlesPageProps> = memo((props) => {
       >
         <ArticlesPageFilter />
         <ArticleInfiniteList className={cls.articleList} />
+        <ArticlesPageGreeting />
       </Page>
     </DynamicModuleLoader>
   );