add card rooms and refactor app and index

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   extends: ['plugin:react/recommended', 'prettier', 'airbnb'],
   plugins: ['react', 'react-hooks', 'prettier'],
   rules: {
-    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': 'error',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'linebreak-style': 0,
     'react/display-name': 'off',

src/App.jsx

@@ -1,23 +1,26 @@
-import React from 'react';
-import Header from './modules/Header/Header';
-import Footer from './modules/Footer/Footer';
-import S from './styledApp';
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { ThemeProvider } from 'styled-components/macro';
+// import Footer from './modules/Footer/Footer';
+import MyRoutes from './components/Routes/MyRoutes';
 
-const App = () => (
-  <S.AppContainer>
-    <Header headerName="CryptoTower" />
-    {/* ADD BODDY */}
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div>FILL</div>
-      <div>FILL</div>
-      <div>FILL</div>
-      <div>FILL</div>
-      <div>FILL</div>
-      <div>FILL</div>
-      <div>FILL</div>
-    </div>
-    <Footer />
-  </S.AppContainer>
-);
+const App = () => {
+  const isLogin = useSelector((state) => state.page.isLogin);
+  const isRegister = useSelector((state) => state.page.isRegister);
+
+  const theme = useMemo(
+    () => ({
+      isLogin,
+      isRegister,
+    }),
+    [isLogin, isRegister]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <MyRoutes />
+    </ThemeProvider>
+  );
+};
 
 export default App;

src/components/Card/Card.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import S from './styledCard';
+
+const Card = (
+  // eslint-disable-next-line react/prop-types
+  { roundPrice, numOfPlayers } // featureActivated
+) => (
+  <S.CardWrapper>
+    <S.CardBody>
+      <S.H2Title>{roundPrice}</S.H2Title>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam.
+      </p>
+      <S.H5Title>{`${numOfPlayers}/10`}</S.H5Title>
+    </S.CardBody>
+  </S.CardWrapper>
+);
+
+export default Card;

src/components/Card/styledCard.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+const CardWrapper = styled.div`
+  display: flex;
+  background: #fff;
+  width: 24em;
+  border-radius: 0.6em;
+  margin: 1em;
+  border: 1px dotted black;
+  /* overflow: hidden; */
+  cursor: pointer;
+  box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
+  transition: all ease 200ms;
+
+  p {
+    color: #777;
+  }
+
+  :hover {
+    transform: scale(1.03);
+    box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12),
+      0 8px 32px -8px hsla(0, 0%, 0%, 0.14),
+      0 -6px 32px -6px hsla(0, 0%, 0%, 0.02);
+  }
+`;
+
+//   h2, h5 {
+//     margin: 0;
+//   }
+
+const H2Title = styled.h2`
+  margin: 0;
+  color: #222;
+  margin-top: -0.2em;
+  line-height: 1.4;
+  font-size: 1.3em;
+  font-weight: 500;
+  font-family: 'Montserrat', sans-serif;
+  transition: all ease-in 100ms;
+`;
+
+const H5Title = styled.h5`
+  margin: 0;
+  color: #bbb;
+  font-weight: 700;
+  font-size: 0.7em;
+  letter-spacing: 0.04em;
+  margin: 1.4em 0 0 0;
+  text-transform: uppercase;
+`;
+
+const CardBody = styled.div`
+  padding: 1.2em;
+`;
+
+const S = {
+  CardWrapper,
+  H2Title,
+  H5Title,
+  CardBody,
+};
+
+export default S;

src/components/Routes/MyRoutes.jsx

@@ -1,21 +1,21 @@
 import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import App from '../../App';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Login from '../../modules/Login/Login';
-import WebsocketConnection from '../../modules/websocketConnection/WebsocketConnection';
 import Register from '../../modules/Register/Register';
-// import S from './styledRoute';
+import Header from '../../modules/Header/Header';
+import Rooms from '../../modules/Rooms/Rooms';
 
 const MyRoutes = () => (
-  <div>
+  <Router>
+    <Header />
     <Routes>
       <Route exact path="/" element={<Login />} />
-      <Route exact path="/Register" element={<Register />} />
-      <Route exact path="/websocket" element={<WebsocketConnection />} />
-      <Route exact path="/home" element={<App />} />
+      <Route exact path="/login" element={<Login />} />
+      <Route exact path="/register" element={<Register />} />
+      <Route exact path="/rooms" element={<Rooms />} />
       <Route path="*" element={<Login />} />
     </Routes>
-  </div>
+  </Router>
 );
 
 export default MyRoutes;

src/index.jsx

@@ -2,18 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.scss';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { store } from './redux/store';
-import MyRoutes from './components/Routes/MyRoutes';
 import 'react-toastify/dist/ReactToastify.css';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <BrowserRouter>
-        <MyRoutes />
-      </BrowserRouter>
+      <App />
     </Provider>
     <ToastContainer
       position="top-center"

src/index.scss

@@ -38,9 +38,7 @@ $bg-height: 50px;
 }
 
 /* Main styles */
-body {
-  margin-top: 13.5rem;
-
+body {  
   color: #999;
   font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
   text-align: center;
@@ -55,12 +53,4 @@ body {
   -moz-animation-timing-function:    linear;
   -o-animation-timing-function:      linear;
   animation-timing-function:         linear;
-
-  &::before {
-    content: "Crypto Tower";
-
-    font-size: 8rem;
-    font-weight: 100;
-    font-style: normal;
-  }
 }

src/modules/Header/Header.jsx

@@ -1,25 +1,24 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import S from './styledHeader';
 
-const Header = ({ headerName }) => {
+const Header = () => {
   // eslint-disable-next-line no-unused-vars
   const [test, setTest] = useState(false);
 
   return (
     <S.HeaderContainer>
-      <S.Title>{headerName}</S.Title>
       <S.LinksContainer>
-        <S.StyledLink to="/login">login</S.StyledLink>
+        {/* <S.StyledLink to="/login">login</S.StyledLink>
         <S.StyledLink to="/websocket">WebsocketConnection</S.StyledLink>
-        <S.StyledLink to="/register">register</S.StyledLink>
+        <S.StyledLink to="/register">register</S.StyledLink> */}
       </S.LinksContainer>
     </S.HeaderContainer>
   );
 };
 
-Header.propTypes = {
-  headerName: PropTypes.string,
-};
+// Header.propTypes = {
+//   headerName: PropTypes.string,
+// };
 
 export default Header;

src/modules/Header/styledHeader.js

@@ -6,19 +6,26 @@ const StyledLink = styled(Link)`
   padding-right: 2rem;
 `;
 
-const Title = styled.h1`
-  font-size: 1.5em;
-  text-align: center;
-  color: palevioletred;
-  align-self: flex-start;
-`;
+// const Title = styled.h1`
+//   font-size: 1.5em;
+//   text-align: center;
+//   color: palevioletred;
+//   align-self: flex-start;
+// `;
 
 const HeaderContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  /* background: salmon; */
+  margin-top: ${({ theme }) =>
+    theme.isLogin || theme.isRegister ? '13.5rem' : '0.5rem'};
+  &::before {
+    content: 'Crypto Tower';
+    font-size: 8rem;
+    font-weight: 100;
+    font-style: normal;
+  }
 `;
 
 const LinksContainer = styled.div`
@@ -27,7 +34,6 @@ const LinksContainer = styled.div`
 `;
 
 const S = {
-  Title,
   StyledLink,
   HeaderContainer,
   LinksContainer,

src/modules/Login/Login.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Axios from 'axios';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -9,6 +9,7 @@ import { FaEye, FaRegEyeSlash } from 'react-icons/fa';
 import config from '../../config/config';
 import { errorHandler } from '../../services/errorHandler';
 import { setJwtToken } from '../../redux/actions/connectionAction';
+import { setIsLogin } from '../../redux/actions/pageAction';
 import Button from '../../components/Button/Button';
 import S from './styledLogin';
 
@@ -29,7 +30,7 @@ const Login = () => {
       dispatch(setJwtToken(response.data));
       console.log(response); // we should get the jwt token from the response
       toast.success('you have been successfully logged in');
-      navigate('/', { replace: true });
+      navigate('/rooms', { replace: true });
     } catch (err) {
       console.log(err);
       const errResponse = errorHandler(err.response.data);
@@ -38,6 +39,12 @@ const Login = () => {
     }
   };
 
+  useEffect(() => {
+    dispatch(setIsLogin(true));
+
+    return () => dispatch(setIsLogin(false));
+  }, [dispatch]);
+
   return (
     <S.Wrappper>
       <form onSubmit={handleSubmit(sendLogin)}>

src/modules/Register/Register.jsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Axios from 'axios';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { FaEye, FaRegEyeSlash } from 'react-icons/fa';
+import { useDispatch } from 'react-redux';
 import config from '../../config/config';
+import { setIsRegister } from '../../redux/actions/pageAction';
 import { errorHandler } from '../../services/errorHandler';
 import Button from '../../components/Button/Button';
 import S from './styledRegister';
@@ -15,6 +17,7 @@ const Register = () => {
   const navigate = useNavigate();
   const { register, handleSubmit } = useForm();
   const [passwordShown, setPasswordShown] = useState(false);
+  const dispatch = useDispatch();
 
   const sendRegister = async (formData) => {
     try {
@@ -34,6 +37,12 @@ const Register = () => {
     }
   };
 
+  useEffect(() => {
+    dispatch(setIsRegister(true));
+
+    return () => dispatch(setIsRegister(false));
+  }, [dispatch]);
+
   return (
     <S.Wrappper>
       <form onSubmit={handleSubmit(sendRegister)}>
@@ -74,7 +83,6 @@ const Register = () => {
             <FaRegEyeSlash onClick={() => setPasswordShown(!passwordShown)} />
           )}
         </S.FormPassword>
-
         <Button type="submit">Register</Button>
       </form>
     </S.Wrappper>