update form login/registration

src/actions/ActionLogin.js

@@ -1,5 +1,3 @@
-import {store} from "../reducers";
-
 const {actionAuthLogin} = require("../reducers/AuthReducer");
 const {actionPromise} = require("../reducers/PromiseReducer");
 const {gql} = require("./ActionGQL");

src/pages/MyAccountPage.jsx

@@ -23,89 +23,9 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
     const matches = useMediaQuery('(max-width:899px)')
     const [status, setStatus] = useState('login')
 
-    const Login = ({onLogin}) => {
-        const [valueLogin, setValueLogin] = useState('')
-        const [valuePassword, setValuePassword] = useState('')
-        const [flagLogin, setFlagLog] = useState(false)
-        const [flagPassword, setFlagPass] = useState(false)
+    const Form = ({title, target, onClickEvent, children}) => {
+        const matches2 = useMediaQuery('(max-width:450px)')
 
-        return (
-            <Box
-                sx={{
-                    backgroundColor: "#fff",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    padding: "40px 60px"
-                }}
-            >
-                <Typography
-                    variant='h4'
-                    letterSpacing='10px'
-                    marginBottom='30px'
-                >
-                    LOGIN
-                </Typography>
-                <TextField
-                    id="login"
-                    label="Login"
-                    variant="standard"
-                    type="text"
-                    required
-                    fullWidth
-                    value={valueLogin}
-                    onChange={e => {setValueLogin(e.target.value); setFlagLog(true)}}
-                    error={flagLogin && (valueLogin.length <= 3 || valueLogin.length > 20)}
-                    sx={{marginBottom: '20px'}}
-                />
-                <TextField
-                    id="password"
-                    label="Password"
-                    variant="standard"
-                    type="password"
-                    required
-                    fullWidth
-                    value={valuePassword}
-                    onChange={e => {setValuePassword(e.target.value); setFlagPass(true)}}
-                    error={flagPassword && (valuePassword.length <= 3 || valuePassword.length > 20)}
-                    sx={{marginBottom: '50px'}}
-                />
-                {promise?.login?.status === "RESOLVED" &&
-                    <Typography
-                        variant='body2'
-                        color='red'
-                        marginBottom='20px'
-                    >
-                        This user does not exist
-                    </Typography>
-                }
-                <UnstyledButtonCustom
-                    onClick={() => {
-                        if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
-                            valueLogin.length >= 3 && valueLogin.length <= 20) {
-                            onLogin(valueLogin, valuePassword)
-                        }
-                    }}
-                    text={'LOGIN'}
-                />
-                <Box
-                    width='100%'
-                    display='flex'
-                    justifyContent='flex-end'
-                    marginTop='20px'
-                >
-                    <Button
-                        onClick={() => setStatus('register')}
-                    >
-                        Register
-                        <ArrowForwardIosIcon/>
-                    </Button>
-                </Box>
-            </Box>
-        )
-    }
-    const Register = ({onRegister}) => {
         const [valueLogin, setValueLogin] = useState('')
         const [valuePassword, setValuePassword] = useState('')
         const [flagLogin, setFlagLog] = useState(false)
@@ -119,7 +39,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
                     flexDirection: "column",
                     justifyContent: "center",
                     alignItems: "center",
-                    padding: "40px 60px"
+                    padding: matches2 ? "30px 20px" : "40px 60px"
                 }}
             >
                 <Typography
@@ -127,7 +47,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
                     letterSpacing='10px'
                     marginBottom='30px'
                 >
-                    REGISTER
+                    {title}
                 </Typography>
                 <TextField
                     id="login"
@@ -138,7 +58,7 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
                     fullWidth
                     value={valueLogin}
                     onChange={e => {setValueLogin(e.target.value); setFlagLog(true)}}
-                    error={flagLogin && (valueLogin.length <= 3 || valueLogin.length > 20)}
+                    error={flagLogin && (valueLogin.length < 3 || valueLogin.length > 20)}
                     sx={{marginBottom: '20px'}}
                 />
                 <TextField
@@ -150,36 +70,18 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
                     fullWidth
                     value={valuePassword}
                     onChange={e => {setValuePassword(e.target.value); setFlagPass(true)}}
-                    error={flagPassword && (valuePassword.length <= 3 || valuePassword.length > 20)}
-                    sx={{marginBottom: '50px'}}
+                    error={flagPassword && (valuePassword.length < 3 || valuePassword.length > 20)}
+                    sx={{marginBottom: '30px'}}
                 />
-                <Typography
-                    variant='body2'
-                    color='#616161'
-                    textAlign='justify'
-                    marginBottom='40px'
-                >
-                    Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our
-                    <Link style={{textDecoration: 'none'}} to='/privacy-policy'> privacy policy</Link>
-                    .
-                </Typography>
-                {promise?.register?.status === "RESOLVED" &&
-                    <Typography
-                        variant='body2'
-                        color='red'
-                        marginBottom='20px'
-                    >
-                        Such user already exists
-                    </Typography>
-                }
+                {children}
                 <UnstyledButtonCustom
                     onClick={() => {
                         if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
-                            valueLogin.length >= 3 && valueLogin.length <= 20){
-                            onRegister(valueLogin, valuePassword)
+                            valueLogin.length >= 3 && valueLogin.length <= 20) {
+                            onClickEvent(valueLogin, valuePassword)
                         }
                     }}
-                    text={'REGISTER'}
+                    text={title}
                 />
                 <Box
                     width='100%'
@@ -188,9 +90,9 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
                     marginTop='20px'
                 >
                     <Button
-                        onClick={() => setStatus('login')}
+                        onClick={() => setStatus(target)}
                     >
-                        Login
+                        {target}
                         <ArrowForwardIosIcon/>
                     </Button>
                 </Box>
@@ -205,7 +107,43 @@ const MyAccountPage = ({auth, promise, onLogin, onRegister}) => {
             <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                 <Container maxWidth="sm">
                     {auth?.payload ? <Redirect to={'/profile'}/> :
-                        status === 'login' ? <Login onLogin={onLogin}/> : <Register onRegister={onRegister}/>
+                        status === 'login' ?
+                            <Form title={'LOGIN'} target={'register'} onClickEvent={onLogin} children={
+                                <>
+                                    {promise?.login?.status === "RESOLVED" &&
+                                        <Typography
+                                            variant='body2'
+                                            color='red'
+                                            marginBottom='20px'
+                                        >
+                                            This user does not exist
+                                        </Typography>
+                                    }
+                                </>
+                            }/> :
+                            <Form title={'REGISTER'} target={'login'} onClickEvent={onRegister} children={
+                                <>
+                                    <Typography
+                                        variant='body2'
+                                        color='#616161'
+                                        textAlign='justify'
+                                        marginBottom='40px'
+                                    >
+                                        Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our
+                                        <Link style={{textDecoration: 'none'}} to='/privacy-policy'> privacy policy</Link>
+                                        .
+                                    </Typography>
+                                    {promise?.register?.status === "RESOLVED" &&
+                                        <Typography
+                                            variant='body2'
+                                            color='red'
+                                            marginBottom='20px'
+                                        >
+                                            Such user already exists
+                                        </Typography>
+                                    }
+                                </>
+                            }/>
                     }
                 </Container>
             </main>

src/pages/OurTeamPage.jsx

@@ -28,7 +28,7 @@ let defaultTeam = [
             {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
         ],
         phone: '+123 456 77 88',
-        email: 'info@gmail.com'
+        email: 'chmoleg@gmail.com'
     },
     {
         img: two,

src/reducers/CombineReducers.js

@@ -0,0 +1,10 @@
+import {combineReducers} from "redux";
+import {AuthReducer} from "./AuthReducer";
+import {PromiseReducer} from "./PromiseReducer";
+import {CartReducer} from "./CartReducer";
+
+export const rootReducer = combineReducers({
+    auth: AuthReducer,
+    promise: PromiseReducer,
+    cart: CartReducer
+})

src/reducers/index.js

@@ -1,15 +1,6 @@
-import {applyMiddleware, combineReducers, createStore} from "redux";
-import {AuthReducer} from "./AuthReducer";
-import {PromiseReducer} from "./PromiseReducer";
-import {CartReducer} from "./CartReducer";
+import {applyMiddleware, createStore} from "redux";
 import thunk from "redux-thunk";
-
-const rootReducer = combineReducers({
-    auth: AuthReducer,
-    promise: PromiseReducer,
-    cart: CartReducer
-})
+import {rootReducer} from "./CombineReducers";
 
 export const store = createStore(rootReducer, applyMiddleware(thunk))
 store.subscribe(() => console.log(store.getState()))
-