Merge pull request #105 from MargoMarm/features/loaderForSignUpSignIn…

…Page

added loader on SignUp SignIn page

src/components/LoaderForPages/LoaderForPages.jsx

@@ -0,0 +1,26 @@
+import { LoaderContainer } from './LoaderForPages.styled';
+
+import { Puff } from 'react-loader-spinner';
+
+const LoaderForPages = () => {
+  return (
+    <LoaderContainer>
+      <Puff
+        height={'100'}
+        width={'100'}
+        radius={1}
+        color="#E6533C"
+        ariaLabel="puff-loading"
+        wrapperStyle={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        wrapperClass=""
+        visible={true}
+      />
+    </LoaderContainer>
+  );
+};
+
+export default LoaderForPages;

src/components/LoaderForPages/LoaderForPages.styled.jsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const LoaderContainer = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+
+  background-color: rgba(0, 0, 0, 0.5);
+`;

src/components/SharedLayout/SharedLayout.jsx

@@ -3,15 +3,23 @@ import { Outlet } from 'react-router-dom';
 import { Container } from './SheradLayout.styled';
 import Header from '../../components/headersComp/Header/Header';
 import Loader from '../../components/Lodaer/Loader';
+import { useSelector } from 'react-redux';
+import { isLoadingSignInOrSignUp } from '../../redux/auth/selectors';
+import LoaderForPages from '../LoaderForPages/LoaderForPages';
 
 const SharedLayout = () => {
+  const isLoading = useSelector(isLoadingSignInOrSignUp);
+
   return (
-    <Container>
-      <Header />
-      <Suspense fallback={<Loader needToCenter/>}>
-        <Outlet />
-      </Suspense>
-    </Container>
+    <>
+      {isLoading && <LoaderForPages />}
+      <Container>
+        <Header />
+        <Suspense fallback={<Loader needToCenter />}>
+          <Outlet />
+        </Suspense>
+      </Container>
+    </>
   );
 };
 

src/redux/auth/operation.js

@@ -23,7 +23,7 @@ export const authUser = createAsyncThunk(
       return data;
     } catch (error) {
       toast.error('Oops... Something went wrong! Try again!');
-      return rejectWithValue('Oops... Something went wrong!');
+      return rejectWithValue(error.response.data.message);
     }
   },
 );

src/redux/auth/selectors.js

@@ -10,3 +10,4 @@ export const selectDailyСalories = state => state.auth.user.dailyСalories;
 
 export const selectError = state => state.auth.error;
 
+export const isLoadingSignInOrSignUp = state => state.auth.isLoading;

src/redux/auth/slice.js

@@ -24,6 +24,7 @@ const initialState = {
   token: null,
   isLoggedIn: false,
   isRefreshing: false,
+  isLoading: false,
 };
 
 const replaceUserState = (state, payload) => {
@@ -40,15 +41,22 @@ export const authSlice = createSlice({
   initialState,
   reducers: {},
   extraReducers: builder => {
+    builder.addCase(authUser.pending, state => {
+      state.error = null;
+      state.isLoading = true;
+    });
     builder.addCase(authUser.fulfilled, (state, action) => {
       state.token = action.payload.token;
       state.user.name = action.payload.name;
       state.user.email = action.payload.email;
       state.isLoggedIn = true;
       state.error = null;
+      state.isLoading = false;
     });
-    builder.addCase(authUser.rejected, (state, action) => {
-      state.error = action.payload;
+    builder.addCase(authUser.rejected, (state, { payload }) => {
+      state.error = payload;
+      Notify.failure(payload);
+      state.isLoading = false;
     });
 
     builder.addCase(updateBodyParts.fulfilled, (state, { payload }) => {
@@ -60,13 +68,19 @@ export const authSlice = createSlice({
       state.token = payload.token;
       state.isLoggedIn = true;
       state.error = null;
+      state.isLoading = false;
     });
     builder.addCase(logInUser.rejected, (state, action) => {
       state.error = action.payload;
+      state.isLoading = false;
       Notify.failure(
         'Oops... Something went wrong! Enter correct email or password',
       );
     });
+    builder.addCase(logInUser.pending, state => {
+      state.error = null;
+      state.isLoading = true;
+    });
 
     builder.addCase(logOutUser.fulfilled, state => {
       state.user.name = null;