redesign profile page

roman-adamchik · Sep 24, 2023 · 8f9dfbe · 8f9dfbe
1 parent d7ff443
commit 8f9dfbe
Show file tree

Hide file tree

Showing 18 changed files with 440 additions and 161 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -82,7 +82,8 @@ module.exports = {
           'feature',
           'variant',
           'activeClassName',
-          'border'
+          'border',
+          'size'
         ],
       }],
     'max-len': [

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -4,16 +4,20 @@
   "Admin": "Admin",
   "Admin Panel": "Admin Panel",
   "Admin panel": "Admin panel",
+  "Age": "Age",
   "All": "All",
   "Article is not found": "Article is not found",
   "Article rating coming soon...": "Article rating coming soon...",
   "Asc": "Asc",
+  "Avatar url": "Avatar url",
   "Back to articles list": "Back to articles list",
   "Cancel": "Cancel",
+  "City": "City",
   "Close": "Close",
   "Comments": "Comments",
   "Create new article": "Create new article",
   "Create page": "Create page",
+  "Cсылка на аватар": "Cсылка на аватар",
   "Date": "Date",
   "Desc": "Desc",
   "Economics": "Economics",
@@ -23,6 +27,7 @@
   "Enter your comment": "Enter your comment",
   "Error loading article list": "Error loading article list",
   "Error loading comments": "Error loading comments",
+  "Error loading profile": "Error loading profile",
   "Error loading the article": "Error loading the article",
   "Forbidden page": "Forbidden page",
   "Here is the article page.": "Here is the article page.",
@@ -36,11 +41,13 @@
   "Incorrect username": "Incorrect username",
   "Language": "English",
   "Language short": "En",
+  "Last name": "Last name",
   "Login": "Login",
   "Login form": "Login form",
   "Logout": "Logout",
   "Main": "Main",
   "Main page": "Main page",
+  "Name": "Name",
   "No articles found": "No articles found",
   "No comments yet": "No comments yet",
   "No form data": "No form data",
@@ -73,7 +80,9 @@
   "There is no articles for this filter": "There is no articles for this filter",
   "Throw error": "Throw error",
   "Title": "Title",
+  "Try to reload the page": "Try to reload the page",
   "Ulbi TV App": "Ulbi TV App",
+  "User name": "User name",
   "Username": "Username",
   "Views": "Views",
   "Wrong username or password": "Wrong username or password",
@@ -94,5 +103,17 @@
   "title": "title",
   "toggle": "toggle",
   "views": "views",
-  "Создать статью": "Создать статью"
+  "Ваш возраст": "Ваш возраст",
+  "Ваша фамилия": "Ваша фамилия",
+  "Ваше имя": "Ваше имя",
+  "Введите имя пользователя": "Введите имя пользователя",
+  "Введите ссылку на аватар": "Введите ссылку на аватар",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Попробуйте обновить страницу": "Попробуйте обновить страницу",
+  "Произошла ошибка при загрузке профиля": "Произошла ошибка при загрузке профиля",
+  "Создать статью": "Создать статью",
+  "Фамилия": "Фамилия"
 }
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -4,16 +4,20 @@
   "Admin": "Admin",
   "Admin Panel": "Admin Panel",
   "Admin panel": "Admin panel",
+  "Age": "Age",
   "All": "All",
   "Article is not found": "Article is not found",
   "Article rating coming soon...": "Article rating coming soon...",
   "Asc": "Asc",
+  "Avatar url": "Avatar url",
   "Back to articles list": "Back to articles list",
   "Cancel": "Cancel",
+  "City": "City",
   "Close": "Close",
   "Comments": "Comments",
   "Create new article": "Create new article",
   "Create page": "Create page",
+  "Cсылка на аватар": "Cсылка на аватар",
   "Date": "Date",
   "Desc": "Desc",
   "Economics": "Economics",
@@ -23,6 +27,7 @@
   "Enter your comment": "Enter your comment",
   "Error loading article list": "Error loading article list",
   "Error loading comments": "Error loading comments",
+  "Error loading profile": "Error loading profile",
   "Error loading the article": "Error loading the article",
   "Forbidden page": "Forbidden page",
   "Here is the article page.": "Here is the article page.",
@@ -36,11 +41,13 @@
   "Incorrect username": "Incorrect username",
   "Language": "Русский",
   "Language short": "Ру",
+  "Last name": "Last name",
   "Login": "Войти",
   "Login form": "Login form",
   "Logout": "Logout",
   "Main": "Главная",
   "Main page": "Главная",
+  "Name": "Name",
   "No articles found": "No articles found",
   "No comments yet": "No comments yet",
   "No form data": "No form data",
@@ -73,7 +80,9 @@
   "There is no articles for this filter": "There is no articles for this filter",
   "Throw error": "Бросить ошибку",
   "Title": "Title",
+  "Try to reload the page": "Try to reload the page",
   "Ulbi TV App": "Ulbi TV App",
+  "User name": "User name",
   "Username": "Username",
   "Views": "Views",
   "Wrong username or password": "Wrong username or password",
@@ -94,5 +103,17 @@
   "title": "title",
   "toggle": "свернуть",
   "views": "views",
-  "Создать статью": "Создать статью"
+  "Ваш возраст": "Ваш возраст",
+  "Ваша фамилия": "Ваша фамилия",
+  "Ваше имя": "Ваше имя",
+  "Введите имя пользователя": "Введите имя пользователя",
+  "Введите ссылку на аватар": "Введите ссылку на аватар",
+  "Возраст": "Возраст",
+  "Город": "Город",
+  "Имя": "Имя",
+  "Имя пользователя": "Имя пользователя",
+  "Попробуйте обновить страницу": "Попробуйте обновить страницу",
+  "Произошла ошибка при загрузке профиля": "Произошла ошибка при загрузке профиля",
+  "Создать статью": "Создать статью",
+  "Фамилия": "Фамилия"
 }
diff --git a/src/entities/Country/ui/CountrySelect/CountrySelect.tsx b/src/entities/Country/ui/CountrySelect/CountrySelect.tsx
@@ -2,12 +2,14 @@ import { classNames } from '@/shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
 import { useCallback } from 'react';
 import { Country } from '../../model/types/country';
-import { ListBox } from '@/shared/ui/deprecated/Popups';
+import { ListBox as ListBoxDeprecated } from '@/shared/ui/deprecated/Popups';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { ListBox } from '@/shared/ui/redesigned/Popups';
 
 interface CountrySelectProps {
   className?: string;
   value?: Country;
-  readonly?: boolean;
+  readOnly?: boolean;
   onChange?: (value: Country) => void;
 }
 
@@ -19,7 +21,7 @@ const currencyOptions = [
 ];
 
 export const CountrySelect = (props: CountrySelectProps) => {
-  const { className = '', value, readonly, onChange } = props;
+  const { className = '', value, readOnly, onChange } = props;
   const { t } = useTranslation();
 
   const handleChange = useCallback(
@@ -29,16 +31,22 @@ export const CountrySelect = (props: CountrySelectProps) => {
     [onChange],
   );
 
+  const listBoxProps = {
+    className: classNames('', {}, [className]),
+    items: currencyOptions,
+    value,
+    defaultValue: t('Select country'),
+    readOnly,
+    onChange: handleChange,
+    direction: 'top right' as const,
+    label: t('Select country'),
+  };
+
   return (
-    <ListBox
-      className={classNames('', {}, [className])}
-      items={currencyOptions}
-      value={value}
-      defaultValue={t('Select country')}
-      readonly={readonly}
-      onChange={handleChange}
-      direction="top right"
-      label={t('Select country')}
+    <ToggleFeatures
+      feature="isNewDesign"
+      on={<ListBox {...listBoxProps} />}
+      off={<ListBoxDeprecated {...listBoxProps} />}
     />
   );
 };
diff --git a/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx b/src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx
@@ -2,12 +2,14 @@ import { Currency } from '../../model/types/currency';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
 import { useCallback } from 'react';
-import { ListBox } from '@/shared/ui/deprecated/Popups';
+import { ListBox as ListBoxDeprecated } from '@/shared/ui/deprecated/Popups';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { ListBox } from '@/shared/ui/redesigned/Popups';
 
 interface CurrencySelectProps {
   className?: string;
   value?: Currency;
-  readonly?: boolean;
+  readOnly?: boolean;
   onChange?: (value: Currency) => void;
 }
 
@@ -19,7 +21,7 @@ const currencyOptions = [
 ];
 
 export const CurrencySelect = (props: CurrencySelectProps) => {
-  const { className = '', value, readonly, onChange } = props;
+  const { className = '', value, readOnly, onChange } = props;
   const { t } = useTranslation();
 
   const handleChange = useCallback(
@@ -29,16 +31,22 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
     [onChange],
   );
 
+  const listBoxProps = {
+    onChange: handleChange,
+    className: classNames('', {}, [className]),
+    items: currencyOptions,
+    value,
+    defaultValue: t('Select currency'),
+    label: t('Select currency'),
+    readOnly,
+    direction: 'top right' as const,
+  };
+
   return (
-    <ListBox
-      onChange={handleChange}
-      className={classNames('', {}, [className])}
-      items={currencyOptions}
-      value={value}
-      defaultValue={t('Select currency')}
-      label={t('Select currency')}
-      readonly={readonly}
-      direction="top right"
+    <ToggleFeatures
+      feature="isNewDesign"
+      on={<ListBox {...listBoxProps} />}
+      off={<ListBoxDeprecated {...listBoxProps} />}
     />
   );
 };