Skip to content

Commit

Permalink
Change layout styled
Browse files Browse the repository at this point in the history 
Remove chakra styles and add layout.styled.js to resolve problem with routing.
  • Loading branch information
@EmiliaWenta
EmiliaWenta committed Dec 7, 2023
1 parent d9aab48 commit a988c31
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 108 deletions.
89 changes: 46 additions & 43 deletions src/components/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,64 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import React, { lazy, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';

import { Layout } from './Layout/Layout';
import Register from './Register/Register';
import Login from './Login/Login';
import Contacts from './Contacts/Contacts';
import Home from '../Pages/Home';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { StyledContainer } from './App.styled';
import PrivateRoute from './PrivateRoute/PrivateRoute';
import ProtectedRoute from './ProtectedRoute/ProtectedRoute';
import { currentUser } from '../redux/reducers/auth/operations';

// const Home = lazy(() => import('../pages/Home'));
import { StyledContainer } from './App.styled';

export function App() {
// const { isLoading, error } = useSelector(selectContacts);
import { useSelector } from 'react-redux/es/hooks/useSelector';
import { selectLoaderAuth } from 'redux/selectors';
import Loader from '../components/Loader/Loader';

const Home = lazy(() => import('../Pages/Home'));
const Register = lazy(() => import('../components/Register/Register'));
const Login = lazy(() => import('../components/Login/Login'));
const Contacts = lazy(() => import('../components/Contacts/Contacts'));

export function App() {
const dispatch = useDispatch();
const isLoadingAuth = useSelector(selectLoaderAuth);

useEffect(() => {
dispatch(currentUser());
}, [dispatch]);

// if (error) {
// Notify.failure(`${error}`);
// return <h1>Something went wrong, please try reloading page...</h1>;
// }

if (isLoadingAuth) {
return <Loader />;
}
return (
<StyledContainer>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />

<Route
path="login"
element={
<ProtectedRoute element={<Login />} redirect="/contacts" />
}
/>
<Route
path="register"
element={
<ProtectedRoute element={<Register />} redirect="/contacts" />
}
/>
<Route
path="contacts"
element={<PrivateRoute element={<Contacts />} redirect="/login" />}
/>
<Route />
</Route>

{/* {isLoading && <Loader />} */}
</Routes>
</StyledContainer>
<>
<StyledContainer>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />

<Route
path="login"
element={
<ProtectedRoute element={<Login />} redirect="/contacts" />
}
/>
<Route
path="register"
element={
<ProtectedRoute element={<Register />} redirect="/contacts" />
}
/>
<Route
path="contacts"
element={
<PrivateRoute element={<Contacts />} redirect="/login" />
}
/>
<Route />
</Route>
<Route path="*" element={<Home />} />
</Routes>
</StyledContainer>
</>
);
}
62 changes: 25 additions & 37 deletions src/components/Layout/Layout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,19 @@ import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import Loader from '../Loader/Loader';
import { Link } from 'react-router-dom';
// import { StyledHeader, StyledLink } from './Layout.styled';

import { useAuth } from 'hook/useAuth';
import { logout } from '../../redux/reducers/auth/operations';
import { useDispatch } from 'react-redux';
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

import ThemeToggler from '../ThemeToggler';
import { selectLoaderAuth } from 'redux/selectors';

import { Button, Tag, TagLabel, Avatar } from '@chakra-ui/react';

import {
Flex,
HStack,
Spacer,
Button,
Tag,
TagLabel,
Avatar,
AiOutlineUser,
} from '@chakra-ui/react';
import { Box, Stack, Grid, Wrap, AspectRatio } from '@chakra-ui/layout';
import { useSelector } from 'react-redux/es/hooks/useSelector';
import { selectUser } from '../../redux/selectors';
import { StyledLayout, StyledLink } from './Layout.styled';

const AuthenticatedNav = () => {
const user = useSelector(selectUser);
Expand All @@ -34,9 +27,9 @@ const AuthenticatedNav = () => {

return (
<>
<Tab>
<Link to="contacts">Contacts</Link>
</Tab>
<StyledLink to="/">Home</StyledLink>

<StyledLink to="contacts">Contacts</StyledLink>

<Tag size="md" colorScheme="blue" borderRadius="full">
<Avatar
Expand Down Expand Up @@ -65,36 +58,31 @@ const AuthenticatedNav = () => {
};
const UnAuthenticatedNav = () => (
<>
<Tab>
<Link to="register">Register</Link>
</Tab>
<Tab>
<Link to="login">Login</Link>
</Tab>
<StyledLink to="/">Home</StyledLink>

<StyledLink to="register">Register</StyledLink>

<StyledLink to="login">Login</StyledLink>
</>
);

export const Layout = () => {
const { isLoggedIn } = useAuth();

const isLoadingAuth = useSelector(selectLoaderAuth);
return (
<>
<Tabs isLazy>
<TabList gap="15">
<Tab>
<Link to="/">Home</Link>
</Tab>

{isLoadingAuth && <Loader />}
<StyledLayout>
<nav>

{isLoggedIn ? <AuthenticatedNav /> : <UnAuthenticatedNav />}
</TabList>
<ThemeToggler />
</nav>
</StyledLayout>

<TabPanels>
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</TabPanels>
</Tabs>
<ThemeToggler />
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</>
);
};
52 changes: 25 additions & 27 deletions src/components/Layout/Layout.styled.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
// import styled from 'styled-components';
// import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { NavLink } from 'react-router-dom';

// export const StyledHeader = styled.header`
// display: flex;
// align-items: center;
// justify-content: space-between;
// gap: 12px;
// padding: 8px 0;
// margin-bottom: 16px;
// border-bottom: 1px solid black;
export const StyledLayout = styled.header`
padding: 8px 0;
margin-bottom: 16px;
border-bottom: 1px solid black;
// > nav {
// display: flex;
// }
// `;
> nav {
display: flex;
align-items: center;
gap: 15px;
}
`;

// export const StyledLink = styled(NavLink)`
// padding: 8px 16px;
// border-radius: 4px;
// text-decoration: none;
// color: black;
// font-weight: 500;
// font-size: 35px;
// transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
export const StyledLink = styled(NavLink)`
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
color: black;
font-weight: 500;
font-size: 18px;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
// &.active {
// color: white;
// background-color: orangered;
// }
// `;
&.active {
color: white;
background-color: #2196f3;
}
`;
2 changes: 1 addition & 1 deletion src/components/ThemeToggler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();

return (
<Box textAlign="center" position="absolute" right="30px" top="10px">
<Box>
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
Expand Down
15 changes: 15 additions & 0 deletions src/redux/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,18 @@ export const selectIsLoading = state => state.contact.isLoading;
export const selectisLoggedIn = state => state.auth.isLoggedIn;

export const selectUser = state => state.auth.user;
export const selectLoaderAuth = state => state.auth.isLoading;
export const selectLoaderContacts = state => state.contact.isLoading;

// if (error) {
// Notify.failure(`${error}`);
// return <h1>Something went wrong, please try reloading page...</h1>;
// } const isLoadingContacts = useSelector(selectLoaderContacts);
// const isLoadingAuth = useSelector(selectLoaderAuth);

// import { useSelector } from 'react-redux/es/hooks/useSelector';
// import { selectLoaderAuth, selectLoaderContacts } from 'redux/selectors';

// import Loader from '../Loader/Loader';

/* {isLoadingContacts && <Loader />} */

0 comments on commit a988c31

Please sign in to comment.