Json Settings, add Greetings modal to Articles Pgae for first user visit

extractedTranslations/en/translation.json

@@ -131,5 +131,7 @@
   "state": "state",
   "text": "text",
   "thanks-for-rate": "thanks-for-rate",
-  "title": "title"
+  "title": "title",
+  "welcome": "welcome",
+  "welcome-message-description": "welcome-message-description"
 }

extractedTranslations/ru/translation.json

@@ -131,5 +131,7 @@
   "state": "state",
   "text": "text",
   "thanks-for-rate": "thanks-for-rate",
-  "title": "title"
+  "title": "title",
+  "welcome": "welcome",
+  "welcome-message-description": "welcome-message-description"
 }

json-server/db.json

@@ -1201,7 +1201,8 @@
         "isCounterEnabled": true
       },
       "jsonSettings": {
-        "theme": "app_blue_theme"
+        "theme": "app_blue_theme",
+        "isArticlesPageWasOpenedOnce": true
       },
       "avatar": "https://source.boringavatars.com/pixel/120/Stefan?colors=26a653,2a1d8f,79646a"
     },
@@ -1217,7 +1218,8 @@
         "isCounterEnabled": true
       },
       "jsonSettings": {
-        "theme": "app_light_theme"
+        "theme": "app_light_theme",
+        "isArticlesPageWasOpenedOnce": true
       },
       "avatar": "https://cdn.discordapp.com/attachments/341701512155758594/1136485169189105714/Main_avatar.png"
     },

public/locales/en/articles.json

@@ -11,5 +11,7 @@
   "can-edit": "Edit",
   "rate-article": "Article rate",
   "feedback": "Your feedback",
-  "leave-your-feedback": "Please, rate an article to improve service quality!"
+  "leave-your-feedback": "Please, rate an article to improve service quality!",
+  "welcome": "Welcome to the articles page!",
+  "welcome-message-description": "Here you can serve an articles to different interests!"
 }

public/locales/ru/articles.json

@@ -11,5 +11,7 @@
   "can-edit": "Редактировать",
   "rate-article": "Оценка статьи",
   "feedback": "Ваш отзыв",
-  "leave-your-feedback": "Пожалуйста, оцените статью, что бы помочь нам улучшить качество сервиса!"
+  "leave-your-feedback": "Пожалуйста, оцените статью, что бы помочь нам улучшить качество сервиса!",
+  "welcome": "Добро пожаловать на страницу статей!",
+  "welcome-message-description": "Здесь вы можете просматривать и искать статьи из списка доступных тем и филльтров!"
 }

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -9,7 +9,7 @@ interface ThemeProviderProps {
 }
 
 const ThemeProvider: FC<ThemeProviderProps> = ({ children, initialTheme }) => {
-  const defaultTheme = useJsonSettings()?.theme;
+  const { theme: defaultTheme } = useJsonSettings();
   const [themeInited, setThemeInited] = useState<boolean>(false);
   const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.BLUE);
 

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

@@ -1,3 +1,8 @@
 import { buildSelector } from '@/shared/lib/store';
+import { JsonSettings } from '../../types/jsonSettings';
 
-export const [useJsonSettings, getJsonSettings] = buildSelector((state) => state.user?.authData?.jsonSettings);
+const defaultJsonSettings: JsonSettings = {};
+
+export const [useJsonSettings, getJsonSettings] = buildSelector(
+  (state) => state.user?.authData?.jsonSettings ?? defaultJsonSettings,
+);

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

@@ -1,7 +1,8 @@
 import { Theme } from '@/shared/consts/theme';
 
 export interface JsonSettings {
-  theme: Theme;
+  theme?: Theme;
+  isArticlesPageWasOpenedOnce?: boolean;
 }
 
 export type JsonSettingsKey = keyof JsonSettings;

src/features/ArticlePageGreetings/index.ts

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

src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.module.scss

@@ -0,0 +1,3 @@
+.ArticlePageGreetings {
+
+}

src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArticlePageGreetings } from './ArticlePageGreetings';
+
+const meta: Meta<typeof ArticlePageGreetings> = {
+  title: 'features/ArticlePageGreetings',
+  component: ArticlePageGreetings,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ArticlePageGreetings>;
+
+export const Root: Story = {
+  args: {
+
+  },
+};

src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.tsx

@@ -0,0 +1,31 @@
+import { FC, memo, useEffect, useState } from 'react';
+import { useAppTranslation } from '@/shared/lib/hooks/useAppTranslation';
+import { Modal } from '@/shared/ui/Modal';
+import { VStack } from '@/shared/ui/Stack';
+import { Text } from '@/shared/ui/Text';
+import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch';
+import { saveJsonSettings, useJsonSettings } from '@/entities/User';
+import cls from './ArticlePageGreetings.module.scss';
+
+export const ArticlePageGreetings: FC = memo(() => {
+  const { t } = useAppTranslation('articles');
+  const dispatch = useAppDispatch();
+
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { isArticlesPageWasOpenedOnce } = useJsonSettings();
+
+  useEffect(() => {
+    if (!isArticlesPageWasOpenedOnce) {
+      setIsModalOpen(true);
+      dispatch(saveJsonSettings({ isArticlesPageWasOpenedOnce: true }));
+    }
+  }, [isArticlesPageWasOpenedOnce, dispatch]);
+
+  return (
+    <Modal isOpen={isModalOpen} onClose={setIsModalOpen} className={cls.ArticlePageGreetings}>
+      <VStack>
+        <Text title={t('welcome')} text={t('welcome-message-description')} />
+      </VStack>
+    </Modal>
+  );
+});

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

@@ -9,6 +9,7 @@ import { ArticleInfiniteList } from '../ArticleInfiniteList/ArticleInfiniteList'
 import { articlesListReducer } from '../../model/slices/articlesListSlice';
 import { fetchNewArticles } from '../../model/services/fetchNewArticles/fetchNewArticles';
 import { initArticlesList } from '../../model/services/initArticlesList/initArticlesList';
+import { ArticlePageGreetings } from '@/features/ArticlePageGreetings';
 
 interface ArticlesPageProps {
   className?: string;
@@ -44,6 +45,7 @@ const ArticlesPage: FC<ArticlesPageProps> = ({ className }) => {
         <ArticleInfiniteList
           onNextArticlesPageLoad={onNextArticlesPageLoad}
         />
+        <ArticlePageGreetings />
       </PageWrapper>
     </DynamicModuleWrapper>
   );