feat: add settings page

README.md

@@ -188,5 +188,6 @@ Feature state can take only one of two values: **on** or **off**.
 - [notificationButton](/src/features/notificationButton)
 - [ThemeSwitcher](/src/features/ThemeSwitcher)
 - [UI](/src/features/UI)
+- [uiDesignSwitcher](/src/features/uiDesignSwitcher)
 
 ----

public/locales/en/settings.json

@@ -0,0 +1,6 @@
+{
+  "Настройки пользователя": "User settings",
+  "Новый": "New",
+  "Старый": "Old",
+  "Вариант интерфейса": "Interface option"
+}

public/locales/en/translation.json

@@ -24,5 +24,6 @@
   "У Вас нет доступа к этой странице": "You do not have access to this page",
   "Ваш отзыв": "Your feedback",
   "Отмена": "Cancel",
-  "Спасибо за оценку!": "Thank you for rating!"
+  "Спасибо за оценку!": "Thank you for rating!",
+  "Настройки": "Settings"
 }

public/locales/ru/settings.json

@@ -0,0 +1,6 @@
+{
+  "Настройки пользователя": "Настройки пользователя",
+  "Новый": "Новый",
+  "Старый": "Старый",
+  "Вариант интерфейса": "Вариант интерфейса"
+}

public/locales/ru/translation.json

@@ -24,5 +24,6 @@
   "У Вас нет доступа к этой странице": "У Вас нет доступа к этой странице",
   "Ваш отзыв": "Ваш отзыв",
   "Отмена": "Отмена",
-  "Спасибо за оценку!": "Спасибо за оценку!"
+  "Спасибо за оценку!": "Спасибо за оценку!",
+  "Настройки": "Настройки"
 }

src/app/providers/router/config/routerConfig.tsx

@@ -20,7 +20,9 @@ import {
   getRouteMain,
   getRouteNotFound,
   getRouteProfile,
+  getRouteSettings,
 } from '@/shared/const/router';
+import { SettingsPage } from '@/pages/SettingsPage/ui/SettingsPage';
 
 import { AppRoutesProps } from './types';
 
@@ -64,6 +66,10 @@ export const routerConfig: Record<AppRoutes, AppRoutesProps> = {
     authOnly: true,
     roles: [UserRole.ADMIN, UserRole.MANAGER],
   },
+  [AppRoutes.SETTINGS]: {
+    path: getRouteSettings(),
+    element: <SettingsPage />,
+  },
   [AppRoutes.FORBIDDEN]: {
     path: getRouteForbidden(),
     element: <ForbiddenPage />,

src/features/avatarDropdown/ui/AvatarDropdown/AvatarDropdown.tsx

@@ -8,7 +8,7 @@ import { Avatar } from '@/shared/ui/redesigned/Avatar';
 import { Dropdown as DropdownDeprecated } from '@/shared/ui/deprecated/Popups';
 import { Dropdown } from '@/shared/ui/redesigned/Popups';
 import { getUserAuthData, isUserAdmin, isUserManager, userActions } from '@/entities/User';
-import { getRouteAdminPanel, getRouteProfile } from '@/shared/const/router';
+import { getRouteAdminPanel, getRouteProfile, getRouteSettings } from '@/shared/const/router';
 import { ToggleFeatures } from '@/shared/lib/features';
 
 interface AvatarDropdownProps {
@@ -43,6 +43,10 @@ export const AvatarDropdown = memo((props: AvatarDropdownProps) => {
           },
         ]
       : []),
+    {
+      content: t('Настройки'),
+      href: getRouteSettings(),
+    },
     {
       content: t('Профиль'),
       href: getRouteProfile(authData.id),

src/features/uiDesignSwitcher/README.md

@@ -0,0 +1 @@
+## Feature for switching old and new designs

src/features/uiDesignSwitcher/index.ts

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

src/features/uiDesignSwitcher/ui/UiDesignSwitcher.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { UiDesignSwitcher } from './UiDesignSwitcher';
+
+export default {
+  title: 'shared/UiDesignSwitcher',
+  component: UiDesignSwitcher,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof UiDesignSwitcher>;
+
+const Template: ComponentStory<typeof UiDesignSwitcher> = (args) => <UiDesignSwitcher {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/features/uiDesignSwitcher/ui/UiDesignSwitcher.tsx

@@ -0,0 +1,77 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { ListBox } from '@/shared/ui/redesigned/Popups';
+import { getFeatureFlag, updateFeatureFlags } from '@/shared/lib/features';
+import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { getUserAuthData } from '@/entities/User';
+import { HStack } from '@/shared/ui/redesigned/Stack';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+
+interface UiDesignSwitcherProps {
+  className?: string;
+}
+
+export const UiDesignSwitcher = memo((props: UiDesignSwitcherProps) => {
+  const { className } = props;
+  const { t } = useTranslation('settings');
+  const dispatch = useAppDispatch();
+  const authData = useSelector(getUserAuthData);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isAppRedesigned = getFeatureFlag('isAppRedesigned');
+  const items = useMemo(
+    () => [
+      {
+        content: t('Новый'),
+        value: 'new',
+      },
+      {
+        content: t('Старый'),
+        value: 'old',
+      },
+    ],
+    [t],
+  );
+
+  const onDesignChange = useCallback(
+    async (value: string) => {
+      if (authData?.id) {
+        setIsLoading(true);
+
+        await dispatch(
+          updateFeatureFlags({
+            userId: authData.id,
+            newFeatures: {
+              isAppRedesigned: value === 'new',
+            },
+          }),
+        ).unwrap();
+
+        setIsLoading(false);
+      }
+    },
+    [authData?.id, dispatch],
+  );
+
+  return (
+    <HStack gap="8" max>
+      <Text text={t('Вариант интерфейса')} />
+
+      {isLoading ? (
+        <Skeleton width={100} height={40} />
+      ) : (
+        <ListBox
+          onChange={onDesignChange}
+          value={isAppRedesigned ? 'new' : 'old'}
+          items={items}
+          className={className}
+        />
+      )}
+    </HStack>
+  );
+});
+
+UiDesignSwitcher.displayName = 'UiDesignSwitcher';

src/pages/SettingsPage/index.ts

@@ -0,0 +1 @@
+export { SettingsPageAsync as SettingsPage } from './ui/SettingsPage.async';

src/pages/SettingsPage/ui/SettingsPage.async.tsx

@@ -0,0 +1,5 @@
+import { lazy } from 'react';
+
+export const SettingsPageAsync = lazy(() =>
+  import('./SettingsPage').then((module) => ({ default: module.SettingsPage })),
+);

src/pages/SettingsPage/ui/SettingsPage.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { SettingsPage } from './SettingsPage';
+
+export default {
+  title: 'pages/SettingsPage',
+  component: SettingsPage,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof SettingsPage>;
+
+const Template: ComponentStory<typeof SettingsPage> = (args) => <SettingsPage {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/pages/SettingsPage/ui/SettingsPage.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Page } from '@/widgets/Page';
+import { VStack } from '@/shared/ui/redesigned/Stack';
+import { UiDesignSwitcher } from '@/features/uiDesignSwitcher';
+
+interface SettingsPageProps {
+  className?: string;
+}
+
+export const SettingsPage = memo((props: SettingsPageProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation('settings');
+
+  return (
+    <Page className={className}>
+      <VStack gap="16" max>
+        <Text title={t('Настройки пользователя')} />
+
+        <UiDesignSwitcher />
+      </VStack>
+    </Page>
+  );
+});
+
+SettingsPage.displayName = 'SettingsPage';

src/shared/const/router.ts

@@ -7,6 +7,7 @@ export enum AppRoutes {
   ARTICLE_CREATE = 'article_create',
   ARTICLE_EDIT = 'article_edit',
   ADMIN_PANEL = 'admin_panel',
+  SETTINGS = 'settings',
   FORBIDDEN = 'forbidden',
 
   // last
@@ -21,5 +22,6 @@ export const getRouteArticlesDetails = (id: string) => `/articles/${id}`;
 export const getRouteArticleCreate = () => '/articles/create';
 export const getRouteArticleEdit = (id: string) => `/articles/${id}/edit`;
 export const getRouteAdminPanel = () => '/admin_panel';
+export const getRouteSettings = () => '/settings';
 export const getRouteForbidden = () => '/forbidden';
 export const getRouteNotFound = () => '*';

src/shared/lib/features/api/featureFlagsApi.ts

@@ -0,0 +1,23 @@
+import { rtkApi } from '@/shared/api/rtkApi';
+import { FeatureFlags } from '@/shared/types/featureFlags';
+
+interface UpdateFeatureFlagsArg {
+  userId: string;
+  features: Partial<FeatureFlags>;
+}
+
+const featureFlagsApi = rtkApi.injectEndpoints({
+  endpoints: (build) => ({
+    updateFeatureFlags: build.mutation<void, UpdateFeatureFlagsArg>({
+      query: ({ userId, features }) => ({
+        url: `/users/${userId}`,
+        method: 'PATCH',
+        body: {
+          features,
+        },
+      }),
+    }),
+  }),
+});
+
+export const updateFeatureFlagsMutation = featureFlagsApi.endpoints.updateFeatureFlags.initiate;

src/shared/lib/features/ToggleFeatures/ToggleFeatures.tsx → src/shared/lib/features/components/ToggleFeatures/ToggleFeatures.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import { FeatureFlags } from '@/shared/types/featureFlags';
 
-import { getFeatureFlag } from '../setGetFeatures';
+import { getFeatureFlag } from '../../lib/setGetFeatures';
 
 interface ToggleFeaturesProps {
   feature: keyof FeatureFlags;

src/shared/lib/features/index.ts

@@ -1,3 +1,4 @@
-export { getFeatureFlag, setFeatureFlags } from './setGetFeatures';
-export { toggleFeatures } from './toggleFeatures';
-export { ToggleFeatures } from './ToggleFeatures/ToggleFeatures';
+export { getFeatureFlag, setFeatureFlags } from './lib/setGetFeatures';
+export { toggleFeatures } from './lib/toggleFeatures';
+export { ToggleFeatures } from './components/ToggleFeatures/ToggleFeatures';
+export { updateFeatureFlags } from './services/updateFeatureFlags';

src/shared/lib/features/setGetFeatures.ts → src/shared/lib/features/lib/setGetFeatures.ts

@@ -12,3 +12,7 @@ export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
 export function getFeatureFlag(flag: keyof FeatureFlags) {
   return featureFlags[flag];
 }
+
+export function getAllFeatureFlags() {
+  return featureFlags;
+}

src/shared/lib/features/services/updateFeatureFlags.ts

@@ -0,0 +1,38 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import { ThunkConfig } from '@/app/providers/StoreProvider';
+import { updateFeatureFlagsMutation } from '@/shared/lib/features/api/featureFlagsApi';
+import { FeatureFlags } from '@/shared/types/featureFlags';
+import { getAllFeatureFlags } from '@/shared/lib/features/lib/setGetFeatures';
+
+interface UpdateFeatureFlagsArg {
+  userId: string;
+  newFeatures: Partial<FeatureFlags>;
+}
+
+export const updateFeatureFlags = createAsyncThunk<
+  void,
+  UpdateFeatureFlagsArg,
+  ThunkConfig<string>
+>('features/updateFeatureFlags', async ({ userId, newFeatures }, thunkAPI) => {
+  const { rejectWithValue, dispatch } = thunkAPI;
+
+  try {
+    await dispatch(
+      updateFeatureFlagsMutation({
+        userId,
+        features: {
+          ...getAllFeatureFlags(),
+          ...newFeatures,
+        },
+      }),
+    );
+
+    window.location.reload();
+
+    return undefined;
+  } catch (e) {
+    console.log(e);
+    return rejectWithValue('');
+  }
+});

src/widgets/Page/ui/Page.module.scss

@@ -8,6 +8,7 @@
 
 .pageRedesigned {
   overflow-y: auto;
+  height: 100%;
 }
 
 .trigger {