From 8a6be1eaa354d5b1d848f4bd74281064f5af6ce6 Mon Sep 17 00:00:00 2001 From: Lyst67 Date: Sat, 20 Jan 2024 12:37:50 +0200 Subject: [PATCH] loader --- src/App.jsx | 8 +++-- src/components/Loader/DiaryLoader.jsx | 32 ++++++++----------- src/components/Loader/DiaryLoader.styled.jsx | 14 ++++++++ src/components/MainLayout/MainLayout.jsx | 5 +-- src/components/SignInForm/SignInForm.jsx | 8 ++--- .../SignInForm/SignInForm.module.css | 16 +++++----- src/components/SignUpForm/SignUpForm.jsx | 12 +++---- .../SignUpForm/SignUpForm.module.css | 16 +++++----- src/index.css | 6 ++-- src/redux/auth/auth-selectors.js | 1 + src/redux/exercises/exercisesOperations.js | 2 +- 11 files changed, 67 insertions(+), 53 deletions(-) create mode 100644 src/components/Loader/DiaryLoader.styled.jsx diff --git a/src/App.jsx b/src/App.jsx index 2c42749..d84f786 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,6 +7,7 @@ import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import { useDispatch, useSelector } from 'react-redux'; import { + selectIsLoading, selectIsLoggedIn, selectIsParamsData, selectIsRefreshing, @@ -36,14 +37,15 @@ const ErrorPage = lazy(() => import('./pages/ErrorPage/ErrorPage')); function App() { const isLoggedIn = useSelector(selectIsLoggedIn); const isParamsData = useSelector(selectIsParamsData); - const dispatch = useDispatch(); + const isLoading = useSelector(selectIsLoading); const isRefreshing = useSelector(selectIsRefreshing); - + const dispatch = useDispatch(); + useEffect(() => { dispatch(refreshThunk()); }, [dispatch]); - return isRefreshing ? ( + return isRefreshing || isLoading ? ( ) : ( <> diff --git a/src/components/Loader/DiaryLoader.jsx b/src/components/Loader/DiaryLoader.jsx index 64aee39..de49ae1 100644 --- a/src/components/Loader/DiaryLoader.jsx +++ b/src/components/Loader/DiaryLoader.jsx @@ -1,23 +1,19 @@ - import { RotatingLines } from 'react-loader-spinner'; -import '../../index.css' +import '../../index.css'; +import { Container, Loader } from './DiaryLoader.styled'; -const MyLoader = ({ display }) => ( -
- -
+const MyLoader = () => ( + + + + + ); export default MyLoader; diff --git a/src/components/Loader/DiaryLoader.styled.jsx b/src/components/Loader/DiaryLoader.styled.jsx new file mode 100644 index 0000000..800b0c6 --- /dev/null +++ b/src/components/Loader/DiaryLoader.styled.jsx @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + position: absolute; + top: 35%; + display: flex; + justify-content: center; + width: 100%; +`; +export const Loader = styled.div` + display: flex; + width: 100%; + justify-content: center; +`; diff --git a/src/components/MainLayout/MainLayout.jsx b/src/components/MainLayout/MainLayout.jsx index 6ad0515..985c5c9 100644 --- a/src/components/MainLayout/MainLayout.jsx +++ b/src/components/MainLayout/MainLayout.jsx @@ -1,14 +1,15 @@ import { Suspense } from 'react'; import { Outlet } from 'react-router-dom'; import { Header } from '../Header/Header'; -import Loader from '../Loader/Loader'; +// import Loader from '../Loader/Loader'; +import MyLoader from '../Loader/DiaryLoader'; const MainLayout = () => { return ( <>
- }> + }>
diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx index 88c20d7..5ba3ec0 100644 --- a/src/components/SignInForm/SignInForm.jsx +++ b/src/components/SignInForm/SignInForm.jsx @@ -48,8 +48,8 @@ export const SignInForm = ({ onSubmit }) => { !errors.email ? !touched.email ? `${css.form_input}` - : `${css.form_input} ${css.success_imput}` - : `${css.form_input} ${css.error_imput}` + : `${css.form_input} ${css.success_input}` + : `${css.form_input} ${css.error_input}` } /> {errors.email && touched.email ? ( @@ -83,8 +83,8 @@ export const SignInForm = ({ onSubmit }) => { !errors.password ? !touched.password ? `${css.form_input}` - : `${css.form_input} ${css.success_imput}` - : `${css.form_input} ${css.error_imput}` + : `${css.form_input} ${css.success_input}` + : `${css.form_input} ${css.error_input}` } /> { !errors.name ? !touched.name ? `${css.form_input}` - : `${css.form_input} ${css.success_imput}` - : `${css.form_input} ${css.error_imput}` + : `${css.form_input} ${css.success_input}` + : `${css.form_input} ${css.error_input}` } /> {errors.name && touched.name ? ( @@ -87,8 +87,8 @@ export const SignUpForm = ({ onSubmit }) => { !errors.email ? !touched.email ? `${css.form_input}` - : `${css.form_input} ${css.success_imput}` - : `${css.form_input} ${css.error_imput}` + : `${css.form_input} ${css.success_input}` + : `${css.form_input} ${css.error_input}` } /> {errors.email && touched.email ? ( @@ -122,8 +122,8 @@ export const SignUpForm = ({ onSubmit }) => { !errors.password ? !touched.password ? `${css.form_input}` - : `${css.form_input} ${css.success_imput}` - : `${css.form_input} ${css.error_imput}` + : `${css.form_input} ${css.success_input}` + : `${css.form_input} ${css.error_input}` } /> state.auth.isLoggedIn; export const selectUser = (state) => state.auth.user; export const selectIsRefreshing = (state) => state.auth.isRefreshing; +export const selectIsLoading = (state) => state.auth.isLoading; export const selectIsToken = (state) => state.auth.token; export const selectUserBodyParams = (state) => state.auth.user.bodyParams; diff --git a/src/redux/exercises/exercisesOperations.js b/src/redux/exercises/exercisesOperations.js index 183c65a..400020d 100644 --- a/src/redux/exercises/exercisesOperations.js +++ b/src/redux/exercises/exercisesOperations.js @@ -2,7 +2,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit'; import axios from 'axios'; import { messageNotification } from '../../components/alertMessages/alertMessages'; -axios.defaults.baseURL = 'https://power-pulse-6-backend.onrender.com/api'; +// axios.defaults.baseURL = 'https://power-pulse-6-backend.onrender.com/api'; export const getExercises = createAsyncThunk( '/exercises',