fix profile page & add update profile request & other fixes

extractedTranslations/en/profile.json

@@ -1,6 +1,13 @@
 {
+  "cancel_button_text": "cancel_button_text",
+  "edit_button_text": "",
+  "profile_age_input_placeholder": "profile_age_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_edit_button_text": "",
   "profile_firstname_input_placeholder": "profile_firstname_input_placeholder",
   "profile_lastname_input_placeholder": "profile_lastname_input_placeholder",
-  "profile_title": ""
+  "profile_title": "",
+  "save_button_text": "save_button_text"
 }

extractedTranslations/en/translation.json

@@ -4,10 +4,12 @@
   "about_page": "about_page",
   "authorization_error_text": "authorization_error_text",
   "authorization_error_title": "authorization_error_title",
+  "cancel_button_text": "cancel_button_text",
   "collapse": "collapse",
   "counter-decrement": "counter-decrement",
   "counter-increment": "counter-increment",
   "counter-title": "counter-title",
+  "edit_button_text": "edit_button_text",
   "language": "language",
   "language_short": "language_short",
   "login": "login",
@@ -17,11 +19,16 @@
   "open-modal": "open-modal",
   "page_error_message": "page_error_message",
   "page_reload_text": "page_reload_text",
+  "profile_age_input_placeholder": "profile_age_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_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",
+  "save_button_text": "save_button_text",
   "throw_error": "throw_error",
   "username": "username",
   "userpass": "userpass"

extractedTranslations/ru/translation.json

@@ -4,10 +4,12 @@
   "about_page": "about_page",
   "authorization_error_text": "authorization_error_text",
   "authorization_error_title": "authorization_error_title",
+  "cancel_button_text": "cancel_button_text",
   "collapse": "collapse",
   "counter-decrement": "counter-decrement",
   "counter-increment": "counter-increment",
   "counter-title": "counter-title",
+  "edit_button_text": "edit_button_text",
   "language": "language",
   "language_short": "language_short",
   "login": "login",
@@ -17,11 +19,16 @@
   "open-modal": "open-modal",
   "page_error_message": "page_error_message",
   "page_reload_text": "page_reload_text",
+  "profile_age_input_placeholder": "profile_age_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_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",
+  "save_button_text": "save_button_text",
   "throw_error": "throw_error",
   "username": "username",
   "userpass": "userpass"

json-server/db.json

@@ -45,4 +45,4 @@
     "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"
   }
-}
+}

public/locales/en/profile.json

@@ -1,6 +1,9 @@
 {
   "profile_title": "Profile",
-  "profile_edit_button_text": "Edit",
   "profile_firstname_input_placeholder": "Your name",
-  "profile_lastname_input_placeholder": "Your lastname"
+  "profile_lastname_input_placeholder": "Your lastname",
+  "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"
 }

public/locales/en/translation.json

@@ -19,5 +19,8 @@
   "authorization_error_title": "Authorization error",
   "authorization_error_text": "Wrong login or password",
   "logout": "Logout",
-  "profile_navbar": "Profile"
+  "profile_navbar": "Profile",
+  "cancel_button_text": "Cancel",
+  "save_button_text": "Save",
+  "edit_button_text": "Edit"
 }

public/locales/ru/profile.json

@@ -1,6 +1,9 @@
 {
   "profile_title": "Профиль",
-  "profile_edit_button_text": "Редактировать",
   "profile_firstname_input_placeholder": "Ваше имя",
-  "profile_lastname_input_placeholder": "Ваша фамилия"
+  "profile_lastname_input_placeholder": "Ваша фамилия",
+  "profile_card_error_title": "Произошла ошибка при загрузке профиля",
+  "profile_card_error_text": "Попробуйте обновить страницу",
+  "profile_age_input_placeholder": "Ваш возраст",
+  "profile_city_input_placeholder": "Ваш город"
 }

public/locales/ru/translation.json

@@ -19,5 +19,8 @@
   "authorization_error_title": "Ошибка при авторизации",
   "authorization_error_text": "Неверный логин или пароль",
   "logout": "Выйти",
-  "profile_navbar": "Профиль"
+  "profile_navbar": "Профиль",
+  "cancel_button_text": "Отменить",
+  "save_button_text": "Сохранить",
+  "edit_button_text": "Редактировать"
 }

src/app/styles/index.scss

@@ -26,9 +26,9 @@ body {
 
 .content-page {
     display: flex;
-    gap: 30px;
 }
 
 .page-wrapper {
     flex-grow: 1;
+    padding: 30px;
 }

src/entities/Profile/index.ts

@@ -3,5 +3,11 @@ export { IProfile, IProfileSchema } from './model/types/profile';
 export { profileReducer, profileActions } from './model/slice/profileSlice';
 
 export { fetchProfileData } from './model/services/fetchProfileData/fetchProfileData';
+export { updateProfileData } from './model/services/updateProfileData/updateProfileData';
 
 export { ProfileCard } from './ui/ProfileCard/ProfileCard';
+
+export { getProfileData } from './model/selectors/getProfileData/getProfileData';
+export { getProfileIsLoading } from './model/selectors/getProfileIsLoading/getProfileIsLoading';
+export { getProfileError } from './model/selectors/getProfileError/getProfileError';
+export { getProfileReadonly } from './model/selectors/getProfileReadonly/getProfileReadonly';

src/entities/Profile/model/selectors/getProfileForm/getProfileForm.ts

@@ -0,0 +1,3 @@
+import { IStateSchema } from 'shared/config/storeConfig/StateSchema';
+
+export const getProfileForm = (state: IStateSchema) => state.profile?.form || undefined;

src/entities/Profile/model/selectors/getProfileReadonly/getProfileReadonly.ts

@@ -0,0 +1,3 @@
+import { IStateSchema } from 'shared/config/storeConfig/StateSchema';
+
+export const getProfileReadonly = (state: IStateSchema) => state.profile?.readonly || false;

src/entities/Profile/model/services/updateProfileData/updateProfileData.ts

@@ -0,0 +1,22 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { IThunkConfig } from 'shared/config/storeConfig/StateSchema';
+import { IProfile } from '../../types/profile';
+import { getProfileForm } from '../../selectors/getProfileForm/getProfileForm';
+
+export const updateProfileData= createAsyncThunk<IProfile, undefined, IThunkConfig<string>>(
+    'profile/updateProfileData',
+    async (_, thunkAPI) => {
+        const { extra, getState } = thunkAPI;
+        const formData = getProfileForm( getState() );
+
+        try {
+            const response = await extra.api.put<IProfile>( '/profile', formData );
+
+            thunkAPI.fulfillWithValue( response.data );
+
+            return response.data;
+        } catch (err) {
+            return thunkAPI.rejectWithValue( 'error' );
+        }
+    }
+);

src/entities/Profile/model/slice/profileSlice.ts

@@ -1,18 +1,34 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { IProfileSchema } from '../types/profile';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IProfile, IProfileSchema } from '../types/profile';
 import { fetchProfileData } from '../services/fetchProfileData/fetchProfileData';
+import { updateProfileData } from '../services/updateProfileData/updateProfileData';
 
 const initialState: IProfileSchema = {
     isLoading: false,
     readonly: true,
     error: undefined,
     data: undefined,
+    form: undefined,
 };
 
 export const profileSlice = createSlice( {
     name: 'profile',
     initialState,
-    reducers: {},
+    reducers: {
+        setReadonly: (state, action: PayloadAction<boolean>) => {
+            state.readonly = action.payload;
+        },
+        cancelEdit: (state) => {
+            state.readonly = true;
+            state.form = state.data;
+        },
+        updateProfile: (state, action: PayloadAction<IProfile>) => {
+            state.form = {
+                ...state.form,
+                ...action.payload
+            };
+        },
+    },
     extraReducers: (builder) => {
         builder
             .addCase( fetchProfileData.pending, (state) => {
@@ -22,12 +38,27 @@ export const profileSlice = createSlice( {
             .addCase( fetchProfileData.fulfilled, (state, action) => {
                 state.isLoading = false;
                 state.data = action.payload;
+                state.form = action.payload;
                 state.error = undefined;
             } )
             .addCase( fetchProfileData.rejected, (state, action) => {
                 state.isLoading = false;
                 state.data = undefined;
                 state.error = action.payload;
+            } )
+            .addCase( updateProfileData.pending, (state) => {
+                state.isLoading = true;
+                state.error = undefined;
+            } )
+            .addCase( updateProfileData.fulfilled, (state, action) => {
+                state.isLoading = false;
+                state.data = action.payload;
+                state.form = action.payload;
+                state.error = undefined;
+            } )
+            .addCase( updateProfileData.rejected, (state, action) => {
+                state.isLoading = false;
+                state.error = action.payload;
             } );
     }
 } );

src/entities/Profile/model/types/profile.ts

@@ -1,18 +1,19 @@
 import { Country, Currency } from 'shared/const/common';
 
 export interface IProfile {
-    firstname: string;
-    lastname: string;
-    age: number;
-    currency: Currency;
-    country: Country;
-    city: string;
-    username: string;
-    avatar: string;
+    firstname?: string;
+    lastname?: string;
+    age?: number;
+    currency?: Currency;
+    country?: Country;
+    city?: string;
+    username?: string;
+    avatar?: string;
 }
 
 export interface IProfileSchema {
     data?: IProfile;
+    form?: IProfile;
     isLoading: boolean;
     error?: string;
     readonly: boolean;

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

@@ -6,12 +6,6 @@
     border: 2px solid var(--inverted-bg-color);
 }
 
-.header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
 .body {
     display: flex;
     flex-direction: column;
@@ -20,3 +14,11 @@
 
 .input {
 }
+
+.loading,
+.error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+}