Merge pull request #90 from Elizabethhub/dmytro-prymache-header-start…

…-page loadind finish
Elizabethhub · Mar 23, 2024 · 93c425e · 93c425e
2 parents 3d8b5ef + 03bb176
commit 93c425e
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 85 deletions.
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -6,24 +6,27 @@ import LoginPage from '../../pages/LoginPage/LoginPage';
 import RegistrationPage from '../../pages/RegistrationPage/RegistrationPage';
 import PrivateRoute from '../../routes/PrivateRoute';
 import PublicRoute from '../../routes/PublicRoute';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useEffect } from 'react';
 import { currentThunk } from '../../store/auth/thunks';
-
+import Loader from '../Loader/Loader';
 import ErrorPage from '../Loader/ErrorPage';
 import ForgotPassword from '../../pages/ForgotPassword/ForgotPassword';
 import UpdatePassword from '../../pages/UpdatePassword/UpdatePassword';
+import { selectorLoadingSelectorsSlise } from '../../store/loading/LoadingSelectorsSlise';
 
 function App() {
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(currentThunk());
   }, [dispatch]);
-  // const loading = useSelector((state) => state.auth.isLoading);
+
+  const loading = useSelector(selectorLoadingSelectorsSlise);
+
   return (
     <>
-      {/* {loading && <Loader />} */}
+      {loading && <Loader />}
       {/* <Loader /> */}
 
       <Routes>

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -7,13 +7,13 @@ import {
   HeaderLink,
 } from './Header.styled';
 
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import HeaderModal from './HeaderModal';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { selectUser } from '../../store/auth/selectors';
 import { HeaderUserName } from './HeaderModalStyled';
 import { useEffect, useState } from 'react';
-import DivSetting from './language/DivSetting';
+import DivSetting from './language/languageSelectorComponent';
 import { useTranslation } from 'react-i18next';
 import Switch from './ThemeStyled/SwitchTheme/Switch';
 import { useMediaQuery } from 'react-responsive';

diff --git a/src/components/Header/HeaderModal.jsx b/src/components/Header/HeaderModal.jsx
@@ -28,7 +28,7 @@ import { useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 import { selectUser } from '../../store/auth/selectors';
 import { useTranslation } from 'react-i18next';
-import DivSetting from './language/DivSetting';
+import DivSetting from './language/languageSelectorComponent';
 import { useMediaQuery } from 'react-responsive';
 
 const HeaderModal = () => {

diff --git a/src/components/Header/language/Jsonlanguage/italian.json b/src/components/Header/language/Jsonlanguage/italian.json
@@ -2,7 +2,7 @@
   "chooseAvalue": "Scegli un valore:",
   "today": "Oggi",
   "yourPhoto": "La tua foto",
-  "yourGenderIdentity": "La tua identità di genere",
+  "yourGenderIdentity": "Seleziona il tuo sesso",
   "woman": "Donna",
   "man": "Uomo",
   "yourName": "Il tuo nome",

diff --git a/...components/Header/language/DivSetting.jsx → ...er/language/languageSelectorComponent.jsx b/...components/Header/language/DivSetting.jsx → ...er/language/languageSelectorComponent.jsx
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
@@ -12,7 +12,6 @@ import {
 
 import { ThemeProvider } from 'styled-components';
 import { useEffect, useState } from 'react';
-import Switch from '../Header/ThemeStyled/SwitchTheme/Switch.jsx';
 
 const Layout = () => {
   const storedTheme = localStorage.getItem('theme');

diff --git a/src/components/Loader/ErrorPage.jsx b/src/components/Loader/ErrorPage.jsx
@@ -72,9 +72,11 @@ const TextSpan2 = styled.span`
 `;
 
 const ContainerErrorDiv = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #020311;
   display: flex;
   justify-content: center;
-  padding-top: 50px;
 `;
 
 const ErrorPage = () => {
@@ -98,39 +100,43 @@ const ErrorPage = () => {
   return (
     <>
       <ContainerErrorDiv>
-        <h1>
-          You will be redirected to the main page in {redirectTimer} seconds
-        </h1>
+        {/* <h1>You will be redirected to the main page in 15 seconds</h1> */}
         <span></span>
-      </ContainerErrorDiv>
-      <StyledErrorCon>
-        <StyledErrorWrapper>
-          <StyledError1>
-            <svg
-              viewBox="0 0 500 500"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-              width="700px"
-              id="blobSvg"
-            >
-              <defs>
-                <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                  <stop
-                    offset="0%"
-                    style={{ stopColor: 'rgb(215, 227, 255)' }}
-                  />
-                  <stop
-                    offset="100%"
-                    style={{ stopColor: 'rgb(64, 123, 255)' }}
-                  />
-                </linearGradient>
-              </defs>
-              <path fill="url(#gradient)">
-                <animate
-                  attributeName="d"
-                  dur="10000ms"
-                  repeatCount="indefinite"
-                  values="M428.5,295Q374,340,341.5,385Q309,430,252.5,424Q196,418,155.5,383Q115,348,64.5,299Q14,250,35.5,179.5Q57,109,128,101Q199,93,258,68Q317,43,371,83Q425,123,454,186.5Q483,250,428.5,295Z;
+
+        <StyledErrorCon>
+          <StyledErrorWrapper>
+            <StyledError1>
+              <svg
+                viewBox="0 0 500 500"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                width="700px"
+                id="blobSvg"
+              >
+                <defs>
+                  <linearGradient
+                    id="gradient"
+                    x1="0%"
+                    y1="0%"
+                    x2="0%"
+                    y2="100%"
+                  >
+                    <stop
+                      offset="0%"
+                      style={{ stopColor: 'rgb(215, 227, 255)' }}
+                    />
+                    <stop
+                      offset="100%"
+                      style={{ stopColor: 'rgb(64, 123, 255)' }}
+                    />
+                  </linearGradient>
+                </defs>
+                <path fill="url(#gradient)">
+                  <animate
+                    attributeName="d"
+                    dur="10000ms"
+                    repeatCount="indefinite"
+                    values="M428.5,295Q374,340,341.5,385Q309,430,252.5,424Q196,418,155.5,383Q115,348,64.5,299Q14,250,35.5,179.5Q57,109,128,101Q199,93,258,68Q317,43,371,83Q425,123,454,186.5Q483,250,428.5,295Z;
             M430.5,296.5Q378,343,340.5,378Q303,413,242,437.5Q181,462,119.5,425.5Q58,389,73.5,319.5Q89,250,95.5,196Q102,142,144.5,99Q187,56,245.5,69.5Q304,83,339.5,121Q375,159,429,204.5Q483,250,430.5,296.5Z;
             M429,322.5Q449,395,383,425.5Q317,456,252,450.5Q187,445,118.5,420.5Q50,396,31,323Q12,250,47,189Q82,128,133,87.5Q184,47,250,46.5Q316,46,368,86.5Q420,127,414.5,188.5Q409,250,429,322.5Z;
             M401.5,295.5Q375,341,343.5,391.5Q312,442,242.5,464.5Q173,487,145.5,416.5Q118,346,100.5,298Q83,250,104,204.5Q125,159,160,120Q195,81,259,53Q323,25,368,78Q413,131,420.5,190.5Q428,250,401.5,295.5Z;
@@ -140,36 +146,42 @@ const ErrorPage = () => {
             M460.5,313.5Q425,377,369,411Q313,445,249.5,446Q186,447,150.5,397.5Q115,348,66,299Q17,250,64.5,200Q112,150,155,120Q198,90,248.5,94.5Q299,99,366,108Q433,117,464.5,183.5Q496,250,460.5,313.5Z;
             M428.5,304Q399,358,357.5,406.5Q316,455,247,464Q178,473,149.5,408Q121,343,75.5,296.5Q30,250,58.5,190.5Q87,131,134,84Q181,37,251,33.5Q321,30,355,89.5Q389,149,423.5,199.5Q458,250,428.5,304Z;
                       "
-                ></animate>
-              </path>
-            </svg>
-          </StyledError1>
-          <StyledError2>
-            <svg
-              viewBox="0 0 500 500"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink"
-              width="700px"
-              id="blobSvg"
-            >
-              <defs>
-                <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                  <stop
-                    offset="0%"
-                    style={{ stopColor: 'rgb(215, 227, 255)' }}
-                  />
-                  <stop
-                    offset="100%"
-                    style={{ stopColor: 'rgb(64, 123, 255)' }}
-                  />
-                </linearGradient>
-              </defs>
-              <path fill="url(#gradient)">
-                <animate
-                  attributeName="d"
-                  dur="10000ms"
-                  repeatCount="indefinite"
-                  values="M428.5,295Q374,340,341.5,385Q309,430,252.5,424Q196,418,155.5,383Q115,348,64.5,299Q14,250,35.5,179.5Q57,109,128,101Q199,93,258,68Q317,43,371,83Q425,123,454,186.5Q483,250,428.5,295Z;
+                  ></animate>
+                </path>
+              </svg>
+            </StyledError1>
+            <StyledError2>
+              <svg
+                viewBox="0 0 500 500"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+                width="700px"
+                id="blobSvg"
+              >
+                <defs>
+                  <linearGradient
+                    id="gradient"
+                    x1="0%"
+                    y1="0%"
+                    x2="0%"
+                    y2="100%"
+                  >
+                    <stop
+                      offset="0%"
+                      style={{ stopColor: 'rgb(215, 227, 255)' }}
+                    />
+                    <stop
+                      offset="100%"
+                      style={{ stopColor: 'rgb(64, 123, 255)' }}
+                    />
+                  </linearGradient>
+                </defs>
+                <path fill="url(#gradient)">
+                  <animate
+                    attributeName="d"
+                    dur="10000ms"
+                    repeatCount="indefinite"
+                    values="M428.5,295Q374,340,341.5,385Q309,430,252.5,424Q196,418,155.5,383Q115,348,64.5,299Q14,250,35.5,179.5Q57,109,128,101Q199,93,258,68Q317,43,371,83Q425,123,454,186.5Q483,250,428.5,295Z;
             M430.5,296.5Q378,343,340.5,378Q303,413,242,437.5Q181,462,119.5,425.5Q58,389,73.5,319.5Q89,250,95.5,196Q102,142,144.5,99Q187,56,245.5,69.5Q304,83,339.5,121Q375,159,429,204.5Q483,250,430.5,296.5Z;
             M429,322.5Q449,395,383,425.5Q317,456,252,450.5Q187,445,118.5,420.5Q50,396,31,323Q12,250,47,189Q82,128,133,87.5Q184,47,250,46.5Q316,46,368,86.5Q420,127,414.5,188.5Q409,250,429,322.5Z;
             M401.5,295.5Q375,341,343.5,391.5Q312,442,242.5,464.5Q173,487,145.5,416.5Q118,346,100.5,298Q83,250,104,204.5Q125,159,160,120Q195,81,259,53Q323,25,368,78Q413,131,420.5,190.5Q428,250,401.5,295.5Z;
@@ -179,16 +191,20 @@ const ErrorPage = () => {
             M460.5,313.5Q425,377,369,411Q313,445,249.5,446Q186,447,150.5,397.5Q115,348,66,299Q17,250,64.5,200Q112,150,155,120Q198,90,248.5,94.5Q299,99,366,108Q433,117,464.5,183.5Q496,250,460.5,313.5Z;
             M428.5,304Q399,358,357.5,406.5Q316,455,247,464Q178,473,149.5,408Q121,343,75.5,296.5Q30,250,58.5,190.5Q87,131,134,84Q181,37,251,33.5Q321,30,355,89.5Q389,149,423.5,199.5Q458,250,428.5,304Z;
                       "
-                ></animate>
-              </path>
-            </svg>
-          </StyledError2>
-          <TextDiv>
-            <TextSpan1>Sorry</TextSpan1>
-            <TextSpan2>This page is temporarily unavailable</TextSpan2>
-          </TextDiv>
-        </StyledErrorWrapper>
-      </StyledErrorCon>
+                  ></animate>
+                </path>
+              </svg>
+            </StyledError2>
+            <TextDiv>
+              <TextSpan1>Sorry</TextSpan1>
+              <TextSpan2>
+                This page is temporarily unavailable {setRedirectTimer}
+              </TextSpan2>
+              <span></span>
+            </TextDiv>
+          </StyledErrorWrapper>
+        </StyledErrorCon>
+      </ContainerErrorDiv>
     </>
   );
 };

diff --git a/src/images/AuthImg/BottleSVG.jsx b/src/images/AuthImg/BottleSVG.jsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTheme } from 'styled-components';
 
 const BottleSVG = (props) => {

diff --git a/src/store/loading/LoadingSelectorsSlise.js b/src/store/loading/LoadingSelectorsSlise.js
@@ -0,0 +1 @@
+export const selectorLoadingSelectorsSlise = (state) => state.loader.loading;
diff --git a/src/store/loading/loadingSlice.js b/src/store/loading/loadingSlice.js
@@ -0,0 +1,60 @@
+import { createSlice, isAnyOf } from '@reduxjs/toolkit';
+import {
+  currentThunk,
+  logoutThunk,
+  updateAvatarThunk,
+  updateUserThunk,
+  forgotThunk,
+  updatePasswordThunk,
+} from '../auth/thunks.js';
+
+const loadingSlice = createSlice({
+  name: 'loader',
+  initialState: {
+    loading: false,
+  },
+  extraReducers: (builder) => {
+    builder
+      .addMatcher(
+        isAnyOf(
+          currentThunk.pending,
+          logoutThunk.pending,
+          updateAvatarThunk.pending,
+          updateUserThunk.pending,
+          forgotThunk.pending,
+          updatePasswordThunk.pending
+        ),
+        (state) => {
+          state.loading = true;
+        }
+      )
+      .addMatcher(
+        isAnyOf(
+          currentThunk.rejected,
+          logoutThunk.rejected,
+          updateAvatarThunk.rejected,
+          updateUserThunk.rejected,
+          forgotThunk.rejected,
+          updatePasswordThunk.rejected
+        ),
+        (state) => {
+          state.loading = false;
+        }
+      )
+      .addMatcher(
+        isAnyOf(
+          currentThunk.fulfilled,
+          logoutThunk.fulfilled,
+          updateAvatarThunk.fulfilled,
+          updateUserThunk.fulfilled,
+          forgotThunk.fulfilled,
+          updatePasswordThunk.fulfilled
+        ),
+        (state) => {
+          state.loading = false;
+        }
+      );
+  },
+});
+
+export const loadingReducer = loadingSlice.reducer;
diff --git a/src/store/store.js b/src/store/store.js
@@ -13,7 +13,7 @@ import {
 } from 'redux-persist';
 import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 import { waterReducer } from './water/waterSlice';
-
+import { loadingReducer } from './loading/loadingSlice';
 const persistConfig = {
   key: 'root',
   storage,
@@ -27,6 +27,7 @@ export const store = configureStore({
     auth: persistedReducer,
     //Добавляем сюда свои редьюсеры!)
     waterSlice: waterReducer,
+    loader: loadingReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({