Merge pull request #15 from 001elijah/header

fix header fix loader fix userinfo

src/components/App.jsx

@@ -6,10 +6,10 @@ import WelcomePage from 'pages/WelcomePage';
 import AuthPage from '../pages/AuthPage';
 import { HomePage } from 'pages/HomePage';
 import { BoardPage } from 'pages/BoardPage';
-import { SharedLayout } from './SharedLayout/SharedLayout';
 import { PrivateRoute, PublicRoute } from './AuthForm/route';
 
 import { currentUser } from 'redux/Auth/authOperations';
+import { Loader } from './Loader/Loader';
 
 export const App = () => {
   const dispatch = useDispatch();
@@ -20,7 +20,8 @@ export const App = () => {
 
   return (
     <>
-      <SharedLayout />
+      <Loader />
+      {/* <SharedLayout /> */}
       <Routes>
         <Route path="/" element={<PublicRoute component={<WelcomePage />} />} />
         <Route

src/components/Header/Header.jsx

@@ -1,14 +1,19 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
-
 import { Container } from 'components/Container';
 import { UserInfo } from 'components/UserInfo/UserInfo';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import { themeChangeUser } from 'redux/Auth/authOperations';
 import s from './Header.module.scss';
-
 import icons from '../../assets/icons/sprite.svg';
 
 export const Header = () => {
-  const theme = useSelector(state => state.auth?.user?.theme);
+  const theme = useSelector(selectorTheme);
+  const dispatch = useDispatch();
+
+  const changeTheme = themeValue => {
+    dispatch(themeChangeUser(themeValue));
+  };
 
   return (
     <header className={clsx(s.header, s[theme])}>
@@ -30,19 +35,19 @@ export const Header = () => {
             <div className={clsx(s.dropDownContent, s[theme])}>
               <div
                 className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => {}}
+                onClick={() => changeTheme('light')}
               >
                 Light
               </div>
               <div
                 className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => {}}
+                onClick={() => changeTheme('dark')}
               >
                 Dark
               </div>
               <div
                 className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => {}}
+                onClick={() => changeTheme('colorful')}
               >
                 Colorful
               </div>

src/components/Loader/Loader.js

@@ -1,19 +1,25 @@
 import clsx from 'clsx';
+import { useSelector } from 'react-redux';
+import { selectorIsLoading } from 'redux/Loader/loaderSelectors';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import s from './Loader.module.scss';
 
 export const Loader = () => {
-  const triInvert = clsx(s.tri, s.invert);
+  const isLoading = useSelector(selectorIsLoading);
+  const theme = useSelector(selectorTheme);
   return (
-    <div className={s.triangles}>
-      <div className={triInvert}></div>
-      <div className={triInvert}></div>
-      <div className={s.tri}></div>
-      <div className={triInvert}></div>
-      <div className={triInvert}></div>
-      <div className={s.tri}></div>
-      <div className={triInvert}></div>
-      <div className={s.tri}></div>
-      <div className={triInvert}></div>
-    </div>
+    isLoading && (
+      <div className={s.triangles}>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+        <div className={clsx(s.tri, s[theme])}></div>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+        <div className={clsx(s.tri, s[theme])}></div>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+        <div className={clsx(s.tri, s[theme])}></div>
+        <div className={clsx(s.tri, s.invert, s[theme])}></div>
+      </div>
+    )
   );
 };

src/components/Loader/Loader.module.scss

@@ -11,17 +11,37 @@
   .tri {
     position: absolute;
     animation: pulse_51 750ms ease-in infinite;
-    border-top: 27px solid $black-color;
+    border-top: 27px solid $black-text-color;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 0px;
+
+    &.light {
+      border-top-color: $black-text-color;
+    }
+    &.dark {
+      border-top-color: $white-color;
+    }
+    &.colorful {
+      border-top-color: $accent-bright-color;
+    }
   }
 
   .tri.invert {
     border-top: 0px;
-    border-bottom: 27px solid $black-color;
+    border-bottom: 27px solid $black-text-color;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
+
+    &.light {
+      border-bottom-color: $black-text-color;
+    }
+    &.dark {
+      border-bottom-color: $white-color;
+    }
+    &.colorful {
+      border-bottom-color: $accent-bright-color;
+    }
   }
 
   .tri:nth-child(1) {

src/components/SharedLayout/SharedLayout.jsx

@@ -1,18 +1,3 @@
-import { useSelector } from 'react-redux';
-
-// import { Header } from 'components/Header/Header';
-import { Loader } from 'components/Loader/Loader';
-
 export const SharedLayout = () => {
-  // const token = useSelector(state => state.auth?.token);
-  const isLoading = useSelector(state => state.auth?.isLoading);
-
-  return (
-    <>
-      {isLoading && <Loader />}
-
-      {/* {token && <Header />} */}
-      {/* <Header/> */}
-    </>
-  );
+  return <>SharedLayout</>;
 };

src/components/UserInfo/UserInfo.jsx

@@ -1,13 +1,17 @@
 import { useSelector } from 'react-redux';
 import clsx from 'clsx';
+import {
+  selectorAvatarURL,
+  selectorTheme,
+  selectorUserName,
+} from 'redux/Auth/authSelectors';
 import s from './UserInfo.module.scss';
-
 import icons from '../../assets/icons/sprite.svg';
 
 export const UserInfo = () => {
-  const theme = useSelector(state => state.auth?.user?.theme);
-  const userName = useSelector(state => state.auth?.user?.userName);
-  const userAvatar = useSelector(state => state.auth?.user?.avatarUrl);
+  const theme = useSelector(selectorTheme);
+  const userName = useSelector(selectorUserName);
+  const userAvatar = useSelector(selectorAvatarURL);
 
   return (
     <div className={s.userInfo}>

src/pages/HomePage.jsx

@@ -1,18 +1,19 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { logoutUser } from 'redux/Auth/authOperations';
-import { themeChangeUser } from 'redux/Auth/authOperations';
-import { selectorTheme } from 'redux/Auth/authSelectors';
+// import { themeChangeUser } from 'redux/Auth/authOperations';
+// import { selectorTheme } from 'redux/Auth/authSelectors';
 import React, { useState } from 'react';
 import { Modal } from '../components/Modal/Modal';
+import { Header } from 'components/Header/Header';
 
 export const HomePage = () => {
-  const theme = useSelector(selectorTheme) || '';
+  // const theme = useSelector(selectorTheme) || '';
   const dispatch = useDispatch();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const handleChange = e => {
-    dispatch(themeChangeUser(e.target.value));
-  };
+  // const handleChange = e => {
+  //   dispatch(themeChangeUser(e.target.value));
+  // };
 
   const openModal = () => {
     setIsModalOpen(true);
@@ -24,11 +25,12 @@ export const HomePage = () => {
 
   return (
     <div>
-      <select name="priority" value={theme} onChange={handleChange}>
+      <Header />
+      {/* <select name="priority" value={theme} onChange={handleChange}>
         <option value="light">Light</option>
         <option value="dark">Dark</option>
         <option value="colorful">Colorful</option>
-      </select>
+      </select> */}
       <button onClick={() => dispatch(logoutUser())}>Log logOut</button>
 
       <button onClick={openModal}>Open Modal</button>

src/redux/Auth/authSelectors.js

@@ -1,3 +1,7 @@
 export const selectorIsAuth = state => Boolean(state.auth.token);
 
 export const selectorTheme = state => state.auth.theme;
+
+export const selectorUserName = state => state.auth.userName;
+
+export const selectorAvatarURL = state => state.auth.avatarUrl;