Redesign profile card

vladislav0sidorov · Oct 24, 2023 · 544c35b · 544c35b
1 parent 7653bbe
commit 544c35b
Show file tree

Hide file tree

Showing 18 changed files with 410 additions and 129 deletions.
diff --git a/extractedTranslations/en/profile.json b/extractedTranslations/en/profile.json
@@ -1,10 +1,10 @@
 {
-  "Ваш возраст": "Ваш возраст",
-  "Ваш город": "Ваш город",
-  "Ваша фамилия": "Ваша фамилия",
-  "Ваше имя": "Ваше имя",
-  "Ваше имя пользователя": "Ваше имя пользователя",
-  "Ваше фото профиля": "Ваше фото профиля",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Фамилия": "Фамилия",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Фото профиля": "Фото профиля",
   "Мы уже работаем, не переживайте": "Мы уже работаем, не переживайте",
   "Некорректная ссылка на фото профиля": "Некорректная ссылка на фото профиля",
   "Некорректная страна": "Некорректная страна",

diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -22,13 +22,12 @@
   "increment": "increment",
   "Админ": "Админ",
   "Айти": "Айти",
-  "Ваш возраст": "Ваш возраст",
-  "Ваш город": "Ваш город",
-  "Ваш отзыв": "Ваш отзыв",
-  "Ваша фамилия": "Ваша фамилия",
-  "Ваше имя": "Ваше имя",
-  "Ваше имя пользователя": "Ваше имя пользователя",
-  "Ваше фото профиля": "Ваше фото профиля",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Фамилия": "Фамилия",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Фото профиля": "Фото профиля",
   "Введите имя пользователя": "Введите имя пользователя",
   "Введите пароль": "Введите пароль",
   "Введите текст комментария": "Введите текст комментария",

diff --git a/extractedTranslations/ru/profile.json b/extractedTranslations/ru/profile.json
@@ -1,10 +1,10 @@
 {
-  "Ваш возраст": "Ваш возраст",
-  "Ваш город": "Ваш город",
-  "Ваша фамилия": "Ваша фамилия",
-  "Ваше имя": "Ваше имя",
-  "Ваше имя пользователя": "Ваше имя пользователя",
-  "Ваше фото профиля": "Ваше фото профиля",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Фамилия": "Фамилия",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Фото профиля": "Фото профиля",
   "Мы уже работаем, не переживайте": "Мы уже работаем, не переживайте",
   "Некорректная ссылка на фото профиля": "Некорректная ссылка на фото профиля",
   "Некорректная страна": "Некорректная страна",

diff --git a/extractedTranslations/ru/translation.json b/extractedTranslations/ru/translation.json
@@ -22,13 +22,12 @@
   "increment": "increment",
   "Админ": "Админ",
   "Айти": "Айти",
-  "Ваш возраст": "Ваш возраст",
-  "Ваш город": "Ваш город",
-  "Ваш отзыв": "Ваш отзыв",
-  "Ваша фамилия": "Ваша фамилия",
-  "Ваше имя": "Ваше имя",
-  "Ваше имя пользователя": "Ваше имя пользователя",
-  "Ваше фото профиля": "Ваше фото профиля",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Фамилия": "Фамилия",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Фото профиля": "Фото профиля",
   "Введите имя пользователя": "Введите имя пользователя",
   "Введите пароль": "Введите пароль",
   "Введите текст комментария": "Введите текст комментария",

diff --git a/json-server/db.json b/json-server/db.json
@@ -117,7 +117,7 @@
         "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_dark_theme",
+        "theme": "app_light_theme",
         "isArticlePageWasOpen": true
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"

diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -3,14 +3,14 @@
   "Редактировать": "Edit",
   "Отменить": "Cancel",
   "Сохранить": "Save",
-  "Ваше имя": "First name",
-  "Ваша фамилия": "Last name",
-  "Ваш возраст": "Age",
-  "Ваше имя пользователя": "user name",
-  "Ваш город": "City",
+  "Имя": "First name",
+  "Фамилия": "Last name",
+  "Возраст": "Age",
+  "Имя пользователя": "user name",
+  "Город": "City",
   "Укажите валюту": "Select currency",
   "Укажите cтрану": "Select country",
-  "Ваше фото профиля": "Profile photo",
+  "Фото профиля": "Profile photo",
   "Некорректное имя": "Incorrect first name",
   "Некорректная фамилия": "Incorrect last name",
   "Некорректный возраст": "Incorrect age",

diff --git a/public/locales/ru/profile.json b/public/locales/ru/profile.json
@@ -3,14 +3,14 @@
   "Редактировать": "Редактировать",
   "Отменить": "Отменить",
   "Сохранить": "Сохранить",
-  "Ваше имя": "Ваше имя",
-  "Ваша фамилия": "Ваша фамилия",
-  "Ваш возраст": "Ваш возраст",
-  "Ваше имя пользователя": "Ваше имя пользователя",
-  "Ваш город": "Ваш город",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Фамилия": "Фамилия",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
   "Укажите валюту": "Укажите валюту",
   "Укажите cтрану": "Укажите cтрану",
-  "Ваше фото профиля": "Ваше фото профиля",
+  "Фото профиля": "Фото профиля",
   "Некорректное имя": "Некорректное имя",
   "Некорректная фамилия": "Некорректная фамилия",
   "Некорректный возраст": "Некорректный возраст",

diff --git a/src/entities/Country/ui/CountrySelect/CountrySelect.tsx b/src/entities/Country/ui/CountrySelect/CountrySelect.tsx
@@ -5,6 +5,8 @@ import { Country } from '../../model/types/country'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
+import { Select } from '@/shared/ui/deprecated/Select'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
 
 interface CountrySelectProps {
   className?: string
@@ -31,7 +33,18 @@ export const CountrySelect = memo((props: CountrySelectProps) => {
     [onChange],
   )
 
-  return (
+  const deprecatedContent = (
+    <Select
+      className={classNames('', {}, [className])}
+      options={options}
+      label={t('Укажите страну')}
+      onChange={onChangeHandler}
+      value={value}
+      readonly={readonly}
+    />
+  )
+
+  const redesignedContent = (
     <ListBox
       className={classNames('', {}, [className])}
       items={options}
@@ -42,4 +55,6 @@ export const CountrySelect = memo((props: CountrySelectProps) => {
       direction="top right"
     />
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })
diff --git a/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx b/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx
@@ -5,6 +5,8 @@ import { Currency } from '../../model/types/currency'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Select } from '@/shared/ui/deprecated/Select'
 
 interface CurrencySelectProps {
   className?: string
@@ -29,7 +31,18 @@ export const CurrencySelect: React.FC<CurrencySelectProps> = memo((props) => {
     [onChange],
   )
 
-  return (
+  const deprecatedContent = (
+    <Select
+      className={classNames('', {}, [className])}
+      options={options}
+      label={t('Укажите валюту')}
+      onChange={onChangeHandler}
+      value={value}
+      readonly={readonly}
+    />
+  )
+
+  const redesignedContent = (
     <ListBox
       className={classNames('', {}, [className])}
       items={options}
@@ -40,4 +53,6 @@ export const CurrencySelect: React.FC<CurrencySelectProps> = memo((props) => {
       direction="top right"
     />
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })
diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx
@@ -1,18 +1,20 @@
-import { useTranslation } from 'react-i18next'
-
-import cls from './ProfileCard.module.scss'
 import { Profile } from '../../model/types/profile'
+import {
+  ProfileCardRedesigned,
+  ProfileCardRedesignedError,
+  SkeletonProfileCardRedesigned,
+} from '../ProfileCardRedesigned/ProfileCardRedesigned'
+import {
+  ProfileCardDeprecated,
+  ProfileCardDeprecatedError,
+  ProfileCardDeprecatedLoader,
+} from '../ProfileCardDeprecated/ProfileCardDeprecated'
 
-import { classNames, Mods } from '@/shared/lib/ClassNames/ClassNames'
-import { Currency, CurrencySelect } from '@/entities/Currency'
-import { Country, CountrySelect } from '@/entities/Country'
-import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
-import { Avatar } from '@/shared/ui/deprecated/Avatar'
-import { Input } from '@/shared/ui/deprecated/Input'
-import { TextTheme, TextAling, Text } from '@/shared/ui/deprecated/Text/ui/Text'
-import { Loader } from '@/shared/ui/deprecated/Loader'
+import { Currency } from '@/entities/Currency'
+import { Country } from '@/entities/Country'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
 
-interface ProfileCardProps {
+export interface ProfileCardProps {
   className?: string
   data?: Profile
   isLoading?: boolean
@@ -44,84 +46,48 @@ export const ProfileCard = (props: ProfileCardProps) => {
     onChangeCurrency,
     onChangeCountry,
   } = props
-  const { t } = useTranslation('profile')
+
+  const propsForComponents: ProfileCardProps = {
+    className,
+    data,
+    isLoading,
+    error,
+    readonly,
+    onChangeFirstname,
+    onChangeLastname,
+    onChangeAge,
+    onChangeUsername,
+    onChangeCity,
+    onChangeAvatar,
+    onChangeCurrency,
+    onChangeCountry,
+  }
 
   if (isLoading) {
     return (
-      <HStack max justify="center" className={classNames(cls.ProfileCard, {}, [className, cls.loading])}>
-        <Loader />
-      </HStack>
+      <ToggleFeaturesComponent
+        featureName="isAppRedesigned"
+        on={<SkeletonProfileCardRedesigned />}
+        off={<ProfileCardDeprecatedLoader />}
+      />
     )
   }
 
   if (error) {
     return (
-      <HStack max justify="center" className={classNames(cls.ProfileCard, {}, [className, cls.error])}>
-        <Text
-          theme={TextTheme.ERROR}
-          aling={TextAling.CENTER}
-          title={t('Произошла ошибка при загрузке профиля')}
-          text={t('Мы уже работаем, не переживайте')}
-        />
-      </HStack>
+      <ToggleFeaturesComponent
+        featureName="isAppRedesigned"
+        on={<ProfileCardRedesignedError />}
+        off={<ProfileCardDeprecatedError />}
+      />
     )
   }
 
-  const mods: Mods = {
-    [cls.editing]: !readonly,
-  }
-
   return (
-    <VStack gap="16" max className={classNames(cls.ProfileCard, mods, [className])}>
-      {data?.avatar && (
-        <HStack max justify="center">
-          <Avatar size={150} src={data?.avatar} />
-        </HStack>
-      )}
-      <Input
-        data-testid="ProfileCard.FirstName"
-        value={data?.firstname}
-        placeholder={t('Ваше имя')}
-        onChange={onChangeFirstname}
-        readonly={readonly}
-      />
-      <Input
-        data-testid="ProfileCard.LastName"
-        value={data?.lastname}
-        placeholder={t('Ваша фамилия')}
-        onChange={onChangeLastname}
-        readonly={readonly}
-      />
-      <Input
-        data-testid="ProfileCard.Age"
-        value={data?.age}
-        placeholder={t('Ваш возраст')}
-        onChange={onChangeAge}
-        readonly={readonly}
-      />
-      <Input
-        data-testid="ProfileCard.Username"
-        value={data?.username}
-        placeholder={t('Ваше имя пользователя')}
-        onChange={onChangeUsername}
-        readonly={readonly}
-      />
-      <Input
-        data-testid="ProfileCard.City"
-        value={data?.city}
-        placeholder={t('Ваш город')}
-        onChange={onChangeCity}
-        readonly={readonly}
-      />
-      <Input
-        data-testid="ProfileCard.Avatar"
-        value={data?.avatar}
-        placeholder={t('Ваше фото профиля')}
-        onChange={onChangeAvatar}
-        readonly={readonly}
-      />
-      <CurrencySelect value={data?.currency} onChange={onChangeCurrency} readonly={readonly} />
-      <CountrySelect value={data?.country} onChange={onChangeCountry} readonly={readonly} />
-    </VStack>
+    <ToggleFeaturesComponent
+      featureName="isAppRedesigned"
+      on={<ProfileCardRedesigned {...propsForComponents} />}
+      off={<ProfileCardDeprecated {...propsForComponents} />}
+    />
   )
 }
diff --git a/src/entities/Profile/ui/ProfileCardDeprecated/ProfileCardDeprecated.module.scss b/src/entities/Profile/ui/ProfileCardDeprecated/ProfileCardDeprecated.module.scss
@@ -0,0 +1,13 @@
+.ProfileCard {
+  padding: 20px;
+  border: 2px solid var(--inverted-bg-color);
+}
+
+.loading,
+.error {
+  height: 300px;
+}
+
+.editing {
+  border: 2px solid var(--secondary-color);
+}