Merge pull request #9 from BekhUriy/HomePage

Home page config

src/components/App.jsx

@@ -32,7 +32,9 @@ function App() {
         />
         <Route
           path="home"
-          element={<PrivateRoute redirectTo={'/'} component={<HomePage />} />}
+          // element={<PrivateRoute redirectTo={'/'} component={<HomePage />} />}
+          element={<PublicRoute redirectTo={'/'} component={<HomePage />} />}
+
         />
         <Route
           path="signup"
@@ -41,7 +43,7 @@ function App() {
           }
         />
         <Route
-          path="signin"
+          path="login"
           element={
             <PublicRoute component={<SignInPage />} redirectTo="/home" />
           }

src/components/DailyNorma/DailyNorma.jsx → src/components/Home/DailyNorma/DailyNorma.jsx

@@ -5,7 +5,7 @@ import { ModalContext } from "./DailyNormaModal/ModalProvider/ModalProvider"
 import DailyNormaModal from "./DailyNormaModal/DailyNormaModal";
 
 
-export const DailyNorma = () => {
+const DailyNorma = () => {
     const toggleModal = useContext(ModalContext);
 
 
@@ -23,4 +23,6 @@ export const DailyNorma = () => {
             </WaterNormaContainer>
         </MyDailyNormaContainer>
     )
-}
+}
+
+export default DailyNorma;

src/guards/PrivateRoute.jsx

@@ -2,11 +2,11 @@ import { useSelector } from 'react-redux';
 import { isAuthSelector } from '../redux/auth/selectors';
 import { Navigate, useLocation } from 'react-router-dom';
 
-const PrivateRoute = ({ children }) => {
+const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
   const isAuth = useSelector(isAuthSelector);
   const location = useLocation();
 
-  return isAuth ? children : <Navigate to="/login" state={location} />;
+  return isAuth ? Component : <Navigate to={redirectTo} />;
 };
 
 export default PrivateRoute;

src/guards/PublicRoute.jsx

@@ -1,11 +1,12 @@
 import { useSelector } from 'react-redux';
 import { isAuthSelector } from '../redux/auth/selectors';
 import { Navigate, useLocation } from 'react-router-dom';
+import { Component } from 'react';
 
-const PublicRoute = ({ children }) => {
+const PublicRoute = ({ component: Component, redirectTo = '/' } ) => {
   const isAuth = useSelector(isAuthSelector);
-  const { state: prevLocation } = useLocation();
-  return !isAuth ? children : <Navigate to={prevLocation ?? '/'} />;
+  // const { state: prevLocation } = useLocation();
+  return isAuth ? <Navigate to={redirectTo}/> : Component  ;
 };
 
 export default PublicRoute;

src/main.jsx

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 import { persistor, store } from './store';
 import { PersistGate } from 'redux-persist/integration/react';
 import App from './components/App';
-import ModalProvider from './components/DailyNorma/DailyNormaModal/ModalProvider/ModalProvider';
+import ModalProvider from './components/Home/DailyNorma/DailyNormaModal/ModalProvider/ModalProvider';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

src/pages/Home/Home.jsx

@@ -1,5 +1,8 @@
+import Crossbar from '../../components/Home/Crossbar/Crossbar.jsx';
+import DailyNorma from '../../components/Home/DailyNorma/DailyNorma.jsx';
+import MonthStatsTable from '../../components/Home/MonthStatsTable/MonthStatsTable.jsx';
 import {
-    DailyNormaContainer,
+  DailyNormaContainer,
   HomeContainer,
   HomeSection,
   StatisticsContainer,
@@ -10,10 +13,15 @@ const HomePage = () => {
     <HomeSection>
       <HomeContainer>
         <DailyNormaContainer>
-          //DailyNorma //WaterRatioPanel
+          <DailyNorma />
+          {/* DailyNorma */}
+          <Crossbar></Crossbar>
+          {/* //WaterRatioPanel */}
         </DailyNormaContainer>
         <StatisticsContainer>
-          //TodayWaterList //MonthStatsTable
+          {/* //TodayWaterList  */}
+          <MonthStatsTable/>
+          {/* //MonthStatsTable */}
         </StatisticsContainer>
       </HomeContainer>
     </HomeSection>