Add ArticlePageGetting modal

json-server/db.json

@@ -116,7 +116,8 @@
         "isArticleRaitingEnebled": true
       },
       "jsonSettings": {
-        "theme": "app_dark_green"
+        "theme": "app_dark_green",
+        "isArticlePageWasOpen": true
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"
     },

public/locales/en/article-list.json

@@ -14,5 +14,5 @@
   "Наука": "Science",
   "Не удалось загрузить список рекомендаций": "The list of recommendations could not be loaded",
   "Идет загрузка": "Loading",
-  "Нам неудалось загрузить изображение. Попробуйте снова.": "We could`t load the image. Try again."
+  "Нам не удалось загрузить изображение. Попробуйте снова.": "We could`t load the image. Try again."
 }

public/locales/en/articles-page.json

@@ -1,3 +1,5 @@
 {
-  "Произошла ошибка при загрезке статей": "An error occurred while uploading articles"
+  "Произошла ошибка при загрезке статей": "An error occurred while uploading articles",
+  "Добро пожаловать на страницу статей!": "Welcome to the articles page!",
+  "Здесь вы можете просматривать и искать статьи на различные темы.": "Here you can browse and search for articles on various topics."
 }

public/locales/ru/article-list.json

@@ -14,5 +14,5 @@
   "Наука": "Наука",
   "Не удалось загрузить список рекомендаций": "Не удалось загрузить список рекомендаций",
   "Идет загрузка": "Идет загрузка",
-  "Нам неудалось загрузить изображение. Попробуйте снова.": "Нам неудалось загрузить изображение. Попробуйте снова."
+  "Нам не удалось загрузить изображение. Попробуйте снова.": "Нам не удалось загрузить изображение. Попробуйте снова."
 }

public/locales/ru/articles-page.json

@@ -1,3 +1,5 @@
 {
-  "Произошла ошибка при загрезке статей": "Произошла ошибка при загрезке статей"
+  "Произошла ошибка при загрезке статей": "Произошла ошибка при загрезке статей",
+  "Добро пожаловать на страницу статей!": "Добро пожаловать на страницу статей!",
+  "Здесь вы можете просматривать и искать статьи на различные темы.": "Здесь вы можете просматривать и искать статьи на различные темы."
 }

src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx

@@ -42,7 +42,7 @@ export const ArticleListItem: FC<ArticleListItemProps> = React.memo((props) => {
   const errorIconFallback = (
     <VStack heightMax justify="center">
       <Text
-        text={t('Нам неудалось загрузить изображение. Попробуйте снова.')}
+        text={t('Нам не удалось загрузить изображение. Попробуйте снова.')}
         size={TextSize.S}
         aling={TextAling.CENTER}
       />

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

@@ -2,4 +2,5 @@ import { Theme } from '@/shared/const/theme'
 
 export interface JsonSettings {
   theme?: Theme
+  isArticlePageWasOpen?: boolean
 }

src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx

@@ -6,19 +6,19 @@ import { Loader } from '@/shared/ui/Loader'
 import { Modal } from '@/shared/ui/Modal'
 
 interface LoginModalProps {
-  className?: string
-  isOpen: boolean
-  onClose: () => void
+    className?: string
+    isOpen: boolean
+    onClose: () => void
 }
 
 export const LoginModal: React.FC<LoginModalProps> = (props) => {
-  const { isOpen, onClose } = props
+    const { isOpen, onClose } = props
 
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} lazy>
-      <Suspense fallback={<Loader />}>
-        <LoginFormAsync onSuccess={onClose} />
-      </Suspense>
-    </Modal>
-  )
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} lazy>
+            <Suspense fallback={<Loader />}>
+                <LoginFormAsync onSuccess={onClose} />
+            </Suspense>
+        </Modal>
+    )
 }

src/features/articlePageGetting/index.ts

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

src/features/articlePageGetting/ui/ArticlePageGetting/ArticlePageGetting.tsx

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

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

@@ -10,6 +10,7 @@ import { ArticlesPageInfiniteList } from '../ArticlesPageInfiniteList/ArticlesPa
 import { Page } from '@/widgets/Page'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { ReducersList, DynamicModuleLoader } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader'
+import { ArticlePageGetting } from '@/features/articlePageGetting'
 
 interface ArticlesPageProps {
   className?: string
@@ -33,6 +34,7 @@ const ArticlesPage: React.FC<ArticlesPageProps> = (props) => {
       <Page data-testid="ArticlesPage" onScrollEnd={onLoadNextPart}>
         <ArticlePageFilters />
         <ArticlesPageInfiniteList className={cls.list} />
+        <ArticlePageGetting />
       </Page>
     </DynamicModuleLoader>
   )