add select & avatar ui component & add currency select form & other f…

…ixes

extractedTranslations/en/profile.json

@@ -2,12 +2,16 @@
   "cancel_button_text": "cancel_button_text",
   "edit_button_text": "",
   "profile_age_input_placeholder": "profile_age_input_placeholder",
+  "profile_avatar_img_alt": "profile_avatar_img_alt",
+  "profile_avatar_input_placeholder": "",
   "profile_card_error_text": "profile_card_error_text",
   "profile_card_error_title": "profile_card_error_title",
   "profile_city_input_placeholder": "profile_city_input_placeholder",
+  "profile_currency_select_label": "profile_currency_select_label",
   "profile_edit_button_text": "",
   "profile_firstname_input_placeholder": "profile_firstname_input_placeholder",
   "profile_lastname_input_placeholder": "profile_lastname_input_placeholder",
   "profile_title": "",
+  "profile_username_input_placeholder": "",
   "save_button_text": "save_button_text"
 }

extractedTranslations/en/translation.json

@@ -20,14 +20,18 @@
   "page_error_message": "page_error_message",
   "page_reload_text": "page_reload_text",
   "profile_age_input_placeholder": "profile_age_input_placeholder",
+  "profile_avatar_img_alt": "profile_avatar_img_alt",
+  "profile_avatar_input_placeholder": "profile_avatar_input_placeholder",
   "profile_card_error_text": "profile_card_error_text",
   "profile_card_error_title": "profile_card_error_title",
   "profile_city_input_placeholder": "profile_city_input_placeholder",
+  "profile_currency_select_label": "profile_currency_select_label",
   "profile_edit_button_text": "profile_edit_button_text",
   "profile_firstname_input_placeholder": "profile_firstname_input_placeholder",
   "profile_lastname_input_placeholder": "profile_lastname_input_placeholder",
   "profile_navbar": "profile_navbar",
   "profile_title": "profile_title",
+  "profile_username_input_placeholder": "profile_username_input_placeholder",
   "save_button_text": "save_button_text",
   "throw_error": "throw_error",
   "username": "username",

extractedTranslations/ru/translation.json

@@ -20,14 +20,18 @@
   "page_error_message": "page_error_message",
   "page_reload_text": "page_reload_text",
   "profile_age_input_placeholder": "profile_age_input_placeholder",
+  "profile_avatar_img_alt": "profile_avatar_img_alt",
+  "profile_avatar_input_placeholder": "profile_avatar_input_placeholder",
   "profile_card_error_text": "profile_card_error_text",
   "profile_card_error_title": "profile_card_error_title",
   "profile_city_input_placeholder": "profile_city_input_placeholder",
+  "profile_currency_select_label": "profile_currency_select_label",
   "profile_edit_button_text": "profile_edit_button_text",
   "profile_firstname_input_placeholder": "profile_firstname_input_placeholder",
   "profile_lastname_input_placeholder": "profile_lastname_input_placeholder",
   "profile_navbar": "profile_navbar",
   "profile_title": "profile_title",
+  "profile_username_input_placeholder": "profile_username_input_placeholder",
   "save_button_text": "save_button_text",
   "throw_error": "throw_error",
   "username": "username",

json-server/db.json

@@ -43,6 +43,6 @@
     "country": "Russia",
     "city": "Екатеринбург",
     "username": "kandaysbln",
-    "avatar": "https://avataaars.io/?avatarStyle=Circle&topType=LongHairNotTooLong&accessoriesType=Blank&hairColor=BrownDark&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=PastelBlue&eyeType=Surprised&eyebrowType=Default&mouthType=Smile&skinColor=Light"
+    "avatar": "https://www.w3schools.com/howto/img_avatar.png"
   }
-}
+}

public/locales/en/profile.json

@@ -5,5 +5,9 @@
   "profile_card_error_title": "There was an error loading your profile",
   "profile_card_error_text": "Try refreshing your profile page",
   "profile_age_input_placeholder": "Your age",
-  "profile_city_input_placeholder": "Your city"
+  "profile_city_input_placeholder": "Your city",
+  "profile_avatar_input_placeholder": "Your avatar",
+  "profile_username_input_placeholder": "Your username",
+  "profile_avatar_img_alt": "Your avatar",
+  "profile_currency_select_label": "Your currency"
 }

public/locales/ru/profile.json

@@ -5,5 +5,9 @@
   "profile_card_error_title": "Произошла ошибка при загрузке профиля",
   "profile_card_error_text": "Попробуйте обновить страницу",
   "profile_age_input_placeholder": "Ваш возраст",
-  "profile_city_input_placeholder": "Ваш город"
+  "profile_city_input_placeholder": "Ваш город",
+  "profile_avatar_input_placeholder": "Ваш аватар",
+  "profile_username_input_placeholder": "Ваше имя пользователя",
+  "profile_avatar_img_alt": "Ваша аватарка",
+  "profile_currency_select_label": "Ваша валюта"
 }

src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss

@@ -22,3 +22,13 @@
     justify-content: center;
     height: 300px;
 }
+
+.avatar-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.editing {
+    border: 2px solid var(--inverted-primary-color);
+}

src/entities/Profile/ui/ProfileCard/ProfileCard.tsx

@@ -1,11 +1,14 @@
 import React, { memo } from 'react';
-import { classNames } from 'shared/lib/classNames/classNames';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
 import classes from './ProfileCard.module.scss';
 import { useTranslation } from 'react-i18next';
 import { Text } from 'shared/ui/Text/Text';
 import { Input } from 'shared/ui/Input/Input';
 import { IProfile } from '../../model/types/profile';
 import { Loader } from 'shared/ui/Loader/Loader';
+import { Avatar } from 'shared/ui/Avatar/Avatar';
+import { Select } from 'shared/ui/Select/Select';
+import { Currency } from 'shared/const/common';
 
 interface IProfileCardProps {
     className?: string;
@@ -17,6 +20,8 @@ interface IProfileCardProps {
     onChangeLastName?: (value: string) => void
     onChangeAge?: (value: string) => void
     onChangeCity?: (value: string) => void
+    onChangeUsername?: (value: string) => void
+    onChangeAvatar?: (value: string) => void
 }
 
 const ProfileCardComponent: React.FC<IProfileCardProps> = (props) => {
@@ -29,11 +34,17 @@ const ProfileCardComponent: React.FC<IProfileCardProps> = (props) => {
         onChangeLastName,
         onChangeFirstName,
         onChangeAge,
-        onChangeCity
+        onChangeCity,
+        onChangeAvatar,
+        onChangeUsername,
     } = props;
 
     const { t } = useTranslation( 'profile' );
 
+    const mods: Mods = {
+        [classes.editing]: !readonly,
+    };
+
     if (isLoading) {
         return (
             <div className={ classNames( classes.card, {}, [ className, classes.loading ] ) }>
@@ -56,8 +67,13 @@ const ProfileCardComponent: React.FC<IProfileCardProps> = (props) => {
     }
 
     return (
-        <div className={ classNames( classes.card, {}, [ className ] ) }>
+        <div className={ classNames( classes.card, mods, [ className ] ) }>
             <div className={ classes.body }>
+                { data?.avatar && (
+                    <div className={ classes.avatarWrapper }>
+                        <Avatar src={ data.avatar } alt={ t( 'profile_avatar_img_alt' ) }/>
+                    </div>
+                ) }
                 <Input
                     readonly={ readonly }
                     value={ data?.firstname }
@@ -86,6 +102,38 @@ const ProfileCardComponent: React.FC<IProfileCardProps> = (props) => {
                     className={ classes.input }
                     onChange={ onChangeCity }
                 />
+                <Input
+                    readonly={ readonly }
+                    value={ data?.username }
+                    placeholder={ t( 'profile_username_input_placeholder' ) }
+                    className={ classes.input }
+                    onChange={ onChangeUsername }
+                />
+                <Input
+                    readonly={ readonly }
+                    value={ data?.avatar }
+                    placeholder={ t( 'profile_avatar_input_placeholder' ) }
+                    className={ classes.input }
+                    onChange={ onChangeAvatar }
+                />
+
+                <Select
+                    label={t('profile_currency_select_label')}
+                    options={[
+                        {
+                            value: Currency.RUB,
+                            text: Currency.RUB,
+                        },
+                        {
+                            value: Currency.USD,
+                            text: Currency.USD,
+                        },
+                        {
+                            value: Currency.EUR,
+                            text: Currency.EUR,
+                        },
+                    ]}
+                />
             </div>
         </div>
     );

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -60,6 +60,14 @@ const ProfilePage = React.memo( (props: IProfilePageProps) => {
         dispatch( profileActions.updateProfile( { city: value } ) );
     }, [ dispatch ] );
 
+    const onChangeUsername = useCallback( (value: string) => {
+        dispatch( profileActions.updateProfile( { username: value } ) );
+    }, [ dispatch ] );
+
+    const onChangeAvatar = useCallback( (value: string) => {
+        dispatch( profileActions.updateProfile( { avatar: value } ) );
+    }, [ dispatch ] );
+
     return (
         <DynamicModuleLoader reducers={ reducers } removeAfterUnmount>
             <div className={ classNames( classes.page, {}, [ className ] ) }>
@@ -73,6 +81,8 @@ const ProfilePage = React.memo( (props: IProfilePageProps) => {
                     onChangeFirstName={ onChangeFirstName }
                     onChangeAge={ onChangeAge }
                     onChangeCity={ onChangeCity }
+                    onChangeUsername={ onChangeUsername }
+                    onChangeAvatar={ onChangeAvatar }
                 />
             </div>
         </DynamicModuleLoader>

src/shared/ui/Avatar/Avatar.module.scss

@@ -0,0 +1,5 @@
+.avatar {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+}

src/shared/ui/Avatar/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Avatar } from './Avatar';
+import AvatarImg from './storybook.png';
+
+export default {
+    title: 'shared/Avatar',
+    component: Avatar,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof Avatar>;
+
+const Template: ComponentStory<typeof Avatar> = (args) => <Avatar { ...args } />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    src: AvatarImg,
+    size: 150,
+};
+
+export const Small = Template.bind({});
+Small.args = {
+    src: AvatarImg,
+    size: 50,
+};

src/shared/ui/Avatar/Avatar.tsx

@@ -0,0 +1,27 @@
+import React, { CSSProperties, ImgHTMLAttributes, useMemo } from 'react';
+import { classNames } from 'shared/lib/classNames/classNames';
+import classes from './Avatar.module.scss';
+
+interface IAvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    className?: string;
+    size?: number;
+}
+
+export const Avatar: React.FC<IAvatarProps> = (props) => {
+    const {
+        className,
+        size,
+        ...otherProps
+    } = props;
+
+    const styles = useMemo<CSSProperties>( () => {
+        return {
+            width: size || 100,
+            height: size || 100,
+        };
+    }, [ size ] );
+
+    return (
+        <img style={ styles } alt={otherProps.alt} className={ classNames( classes.avatar, {}, [ className ] ) } { ...otherProps }/>
+    );
+};

src/shared/ui/Select/Select.module.scss

@@ -0,0 +1,19 @@
+.select-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.label {}
+
+.select {
+    outline: none;
+    color: var(--inverted-primary-color);
+    background: var(--primary-color);
+    padding: 5px;
+}
+
+.select-option {
+    color: var(--inverted-primary-color);
+    background: var(--primary-color);
+}

src/shared/ui/Select/Select.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Select } from 'shared/ui/Select/Select';
+
+export default {
+    title: 'shared/Select',
+    component: Select,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => <Select { ...args } />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    label: 'Укажите значение',
+    options: [
+        {
+            value: '1',
+            text: 'Первый пункт',
+        },
+        {
+            value: '2',
+            text: 'Второй пункт',
+        },
+        {
+            value: '3',
+            text: 'Третий пункт',
+        }
+    ]
+};