Merge pull request #26 from mykhalenych/feature/successNotifications

feature/successNotifications
mykhalenych · Jul 6, 2023 · 2bf89de · 2bf89de
2 parents d06a456 + b59e03b
commit 2bf89de
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import {useSelector} from 'react-redux';
 import {useForm, FormProvider} from 'react-hook-form';
 import {yupResolver} from '@hookform/resolvers/yup';
 
 import {changeUserName, changeUserPassword} from '../../redux/auth/thunks';
+import {selectUser} from '../../redux/auth/selectors';
 import {useAppDispatch} from '../../redux/store';
 import {nameValidation, defaultNameValue, defaultPasswordValue, passwordValidation} from './form';
 import {Grid, Typography} from '@mui/material';
@@ -12,6 +14,7 @@ import {useTranslation} from 'react-i18next';
 
 const Profile = () => {
     const dispatch = useAppDispatch();
+    const {name, id} = useSelector(selectUser);
     const {t} = useTranslation();
 
     const methods = useForm({
@@ -23,7 +26,7 @@ const Profile = () => {
         mode: 'onChange',
     });
 
-    const {formState, watch} = methods;
+    const {formState, reset, watch} = methods;
     const [newName, password, passwordConfirmation, newPassword] = watch([
         'newName',
         'password',
@@ -32,6 +35,14 @@ const Profile = () => {
     ]);
     const {errors} = formState;
 
+    useEffect(() => {
+        if (id) {
+            reset({
+                newName: name,
+            });
+        }
+    }, [reset, id, name]);
+
     const isPasswordFilled = password && passwordConfirmation && newPassword;
     const isPasswordCorrect = !errors.password && !errors.passwordConfirmation && !errors.newPassword;
 
@@ -74,7 +85,7 @@ const Profile = () => {
                                             variant="contained"
                                             color="primary"
                                             minWidth={190}
-                                            disabled={!newName || !!errors.newName}
+                                            disabled={!newName || !!errors.newName || name === newName}
                                             onClick={handleChangeName}>
                                             {t('profile.change')}
                                         </Button>

diff --git a/src/redux/auth/authSlice.ts b/src/redux/auth/authSlice.ts
@@ -48,7 +48,7 @@ export const authData = createGenericSlice<IAuthState, typeof reducers>({
             };
         });
         builder.addCase(changeUserName.fulfilled, (state, action) => {
-            state.data.user.name = action.payload;
+            state.data.user.name = action.payload.name;
         });
         builder.addCase(changeUserTheme.fulfilled, (state, action) => {
             state.data.user.theme = action.payload;

diff --git a/src/redux/auth/thunks.ts b/src/redux/auth/thunks.ts
@@ -14,7 +14,6 @@ import {
     changeTheme,
     changeLanguage,
 } from '../../services/auth';
-import {showSuccess} from '../snackbar/slice';
 import {changeName, changePassword} from '../../services/profile';
 import {handleResponse} from '../utils';
 import {NewPasswordRequest} from '../../services/profile/types';
@@ -32,8 +31,10 @@ export const fetchUser = createAsyncThunk(
 
 export const signInUser = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.signInUser}`,
-    async (data: SignInRequest, {rejectWithValue}) => {
+    async (data: SignInRequest, {rejectWithValue, dispatch}) => {
         try {
+            dispatch(handleResponse('You are signed in!', `${authThunkNames.signInUser}`));
+
             return await register(data);
         } catch (err) {
             return rejectWithValue({message: err});
@@ -43,8 +44,10 @@ export const signInUser = createAsyncThunk(
 
 export const logInUser = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.logInUser}`,
-    async (data: LogInRequest, {rejectWithValue}) => {
+    async (data: LogInRequest, {rejectWithValue, dispatch}) => {
         try {
+            dispatch(handleResponse('You are logged in!', `${authThunkNames.logInUser}`));
+
             return await login(data);
         } catch (err) {
             return rejectWithValue({message: err});
@@ -54,8 +57,10 @@ export const logInUser = createAsyncThunk(
 
 export const forgotPassword = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.forgotPassword}`,
-    async (data: ForgotPasswordRequest, {rejectWithValue}) => {
+    async (data: ForgotPasswordRequest, {rejectWithValue, dispatch}) => {
         try {
+            dispatch(handleResponse('Your password has been reset!', `${authThunkNames.forgotPassword}`));
+
             return await resetPassword(data);
         } catch (err) {
             return rejectWithValue({message: err});
@@ -76,8 +81,10 @@ export const activateUser = createAsyncThunk(
 
 export const logoutUser = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.logoutUser}`,
-    async (data: void, {rejectWithValue}) => {
+    async (data: void, {rejectWithValue, dispatch}) => {
         try {
+            dispatch(handleResponse('You are logged out!', `${authThunkNames.logoutUser}`));
+
             return await logout();
         } catch (err) {
             return rejectWithValue({message: err});
@@ -91,17 +98,7 @@ export const newPassword = createAsyncThunk(
         try {
             const result = await recoveryPassword(data);
 
-            dispatch(
-                showSuccess({
-                    message: 'Password changed successfully!',
-                    id: 333,
-                    from: {
-                        slice: ISlicesNames.auth,
-                        thunk: authThunkNames.newPassword,
-                        requestId: result.requestId,
-                    },
-                }),
-            );
+            dispatch(handleResponse('Password changed successfully!', `${authThunkNames.newPassword}`));
 
             return result;
         } catch (err) {
@@ -116,7 +113,7 @@ export const changeUserName = createAsyncThunk(
         try {
             const result = await changeName(data);
 
-            dispatch(handleResponse('Name changed successfully!', `${ISlicesNames.auth}/${authThunkNames.changeName}`));
+            dispatch(handleResponse('Name changed successfully!', `${authThunkNames.changeName}`));
 
             return result;
         } catch (err) {
@@ -131,12 +128,7 @@ export const changeUserPassword = createAsyncThunk(
         try {
             const result = await changePassword(data);
 
-            dispatch(
-                handleResponse(
-                    'Password changed successfully!',
-                    `${ISlicesNames.auth}/${authThunkNames.changePassword}`,
-                ),
-            );
+            dispatch(handleResponse('Password changed successfully!', `${authThunkNames.changePassword}`));
 
             return result;
         } catch (err) {
@@ -147,11 +139,11 @@ export const changeUserPassword = createAsyncThunk(
 
 export const changeUserLanguage = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.changeUserLanguage}`,
-    async (language: string, {rejectWithValue}) => {
+    async (language: string, {rejectWithValue, dispatch}) => {
         try {
-            await changeLanguage(language);
+            dispatch(handleResponse('Language changed!', `${authThunkNames.changeUserLanguage}`));
 
-            return language;
+            return await changeLanguage(language);
         } catch (err) {
             return rejectWithValue({message: err});
         }
@@ -160,11 +152,11 @@ export const changeUserLanguage = createAsyncThunk(
 
 export const changeUserTheme = createAsyncThunk(
     `${ISlicesNames.auth}/${authThunkNames.changeUserTheme}`,
-    async (theme: string, {rejectWithValue}) => {
+    async (theme: string, {rejectWithValue, dispatch}) => {
         try {
-            await changeTheme(theme);
+            dispatch(handleResponse('Theme changed!', `${authThunkNames.changeUserTheme}`));
 
-            return theme;
+            return await changeTheme(theme);
         } catch (err) {
             return rejectWithValue({message: err});
         }