From 5ba6455b2aa6c75c336628bda59e70b46e3b1d6b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 7 Aug 2020 22:42:50 +0300
Subject: refactor: separate Auth pages

---
 src/pages/AuthPage/AuthPage.tsx                 | 50 ---------------
 src/pages/AuthPage/SignInForm.tsx               | 80 ------------------------
 src/pages/AuthPage/SignUpForm.tsx               | 73 ----------------------
 src/pages/LoginPage/LoginPage.tsx               | 82 +++++++++++++++++++++++++
 src/pages/Page.tsx                              |  7 ++-
 src/pages/RegistrationPage/RegistrationPage.tsx | 75 ++++++++++++++++++++++
 6 files changed, 161 insertions(+), 206 deletions(-)
 delete mode 100644 src/pages/AuthPage/AuthPage.tsx
 delete mode 100644 src/pages/AuthPage/SignInForm.tsx
 delete mode 100644 src/pages/AuthPage/SignUpForm.tsx
 create mode 100644 src/pages/LoginPage/LoginPage.tsx
 create mode 100644 src/pages/RegistrationPage/RegistrationPage.tsx

diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
deleted file mode 100644
index ad93463..0000000
--- a/src/pages/AuthPage/AuthPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import SignInForm from './SignInForm';
-import SignUpForm from './SignUpForm';
-
-const useStyles = makeStyles({
-  formTransfer: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  transferButton: {
-    marginLeft: 10,
-    color: 'green',
-    cursor: 'pointer'
-  }
-});
-
-const AuthPage: React.FC = () => {
-  const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn');
-  const classes = useStyles();
-
-  const handleRedirect = () => {
-    setAuth(auth === 'signIn' ? 'signUp' : 'signIn');
-  };
-
-  const footerInfo = {
-    signIn: ['Don\'t have an account?', 'Sign up'],
-    signUp: ['Already have an account?', 'Sign in']
-  };
-
-  return (
-    <>
-      {auth === 'signIn' && <SignInForm />}
-      {auth === 'signUp' && <SignUpForm />}
-      <div className={classes.formTransfer}>
-        <div>{footerInfo[auth][0]}</div>
-        <span
-          onClick={handleRedirect}
-          className={classes.transferButton}
-          role="presentation"
-        >
-          {footerInfo[auth][1]}
-        </span>
-      </div>
-    </>
-  );
-};
-
-export default AuthPage;
-
diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx
deleted file mode 100644
index e68483b..0000000
--- a/src/pages/AuthPage/SignInForm.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  TextField,
-  Button,
-  FormControlLabel,
-  Switch
-} from '@material-ui/core';
-import { useAuth } from '../../hooks/useAuth';
-import { useNavigate } from '../../hooks/useNavigate';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(35)
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center'
-  },
-  formHeader: {
-    textAlign: 'center',
-    fontSize: 25
-  }
-}));
-
-const SignInForm: React.FC = () => {
-  const [error, setError] = useState<boolean>(false);
-  const [remember, setRemember] = useState<boolean>(true);
-  const classes = useStyles();
-  const nameRef = useRef<HTMLInputElement>();
-  const passwordRef = useRef<HTMLInputElement>();
-  const { login } = useAuth();
-  const { navigate } = useNavigate();
-
-  const handleCheck = () => {
-    setRemember(!remember);
-  };
-
-  const handleSubmit = async () => {
-    const name = nameRef.current?.value;
-    const password = passwordRef.current?.value;
-    if (name && password) {
-      login(name, password, remember).then(success => {
-        if (success) navigate('profile');
-        else setError(true);
-      });
-    }
-  };
-
-  return (
-    <>
-      <div className={classes.formHeader}>Sign In</div>
-      <form className={classes.root} noValidate autoComplete="off">
-        <TextField
-          inputRef={nameRef}
-          error={error}
-          label="Login"
-        />
-        <TextField
-          inputRef={passwordRef}
-          error={error}
-          helperText={error && 'Invalid credentials'}
-          label="Password"
-          type="password"
-        />
-        <FormControlLabel
-          control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />}
-          label="Remember me"
-        />
-        <Button variant="contained" onClick={handleSubmit}>submit</Button>
-      </form>
-    </>
-  );
-};
-
-export default SignInForm;
-
diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx
deleted file mode 100644
index 1dacd45..0000000
--- a/src/pages/AuthPage/SignUpForm.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import { post } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
-import { useNavigate } from '../../hooks/useNavigate';
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(35)
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center'
-  },
-  formHeader: {
-    textAlign: 'center',
-    fontSize: 25
-  }
-}));
-
-const SignUpForm: React.FC = () => {
-  const [error, setError] = useState<boolean>(false);
-  const classes = useStyles();
-  const usernameRef = useRef<HTMLInputElement>();
-  const emailRef = useRef<HTMLInputElement>();
-  const passwordRef = useRef<HTMLInputElement>();
-  const { login } = useAuth();
-  const { navigate } = useNavigate();
-
-  const onClick = () => {
-    const username = usernameRef.current?.value;
-    const password = passwordRef.current?.value;
-    const email = emailRef.current?.value;
-    if (username && password) {
-      post('/users', { username, password, email })
-        .then(() => login(username, password))
-        .then(() => navigate('profile'));
-    } else setError(true);
-  };
-
-  return (
-    <>
-      <div className={classes.formHeader}>Sign Up</div>
-      <form className={classes.root} noValidate autoComplete="off">
-        <TextField
-          inputRef={usernameRef}
-          label="Username"
-          error={error}
-          helperText={error && 'This field is required!'}
-          required
-        />
-        <TextField inputRef={emailRef} label="Email" />
-        <TextField
-          inputRef={passwordRef}
-          label="Password"
-          type="password"
-          required
-          error={error}
-          helperText={error && 'This field is required!'}
-        />
-        <Button variant="contained" onClick={onClick}>submit</Button>
-      </form>
-    </>
-  );
-};
-
-export default SignUpForm;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 0000000..ef31491
--- /dev/null
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  TextField,
+  Button,
+  FormControlLabel,
+  Switch
+} from '@material-ui/core';
+import { useAuth } from '../../hooks/useAuth';
+import { useNavigate } from '../../hooks/useNavigate';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      width: theme.spacing(35)
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center'
+  },
+  formHeader: {
+    textAlign: 'center',
+    fontSize: 25
+  }
+}));
+
+const LoginPage: React.FC = () => {
+  const [error, setError] = useState<boolean>(false);
+  const [remember, setRemember] = useState<boolean>(true);
+  const classes = useStyles();
+  const nameRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>();
+  const { login } = useAuth();
+  const { navigate } = useNavigate();
+
+  const handleCheck = () => {
+    setRemember(!remember);
+  };
+
+  const handleSubmit = async () => {
+    const name = nameRef.current?.value;
+    const password = passwordRef.current?.value;
+    if (name && password) {
+      login(name, password, remember).then(success => {
+        if (success) navigate('profile');
+        else setError(true);
+      });
+    }
+  };
+
+  // TODO: Add registration redirect
+
+  return (
+    <>
+      <div className={classes.formHeader}>Sign In</div>
+      <form className={classes.root} noValidate autoComplete="off">
+        <TextField
+          inputRef={nameRef}
+          error={error}
+          label="Login"
+        />
+        <TextField
+          inputRef={passwordRef}
+          error={error}
+          helperText={error && 'Invalid credentials'}
+          label="Password"
+          type="password"
+        />
+        <FormControlLabel
+          control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />}
+          label="Remember me"
+        />
+        <Button variant="contained" onClick={handleSubmit}>submit</Button>
+      </form>
+    </>
+  );
+};
+
+export default LoginPage;
+
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 29b9564..47f5f50 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -6,7 +6,8 @@ import { BrowserRouter, Switch } from 'react-router-dom';
 
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
-import AuthPage from './AuthPage/AuthPage';
+import LoginPage from './LoginPage/LoginPage';
+import RegistrationPage from './RegistrationPage/RegistrationPage';
 import HomePage from './HomePage/HomePage';
 import NotificationsPage from './NotificationsPage/NotificationsPage';
 import Route from './Route';
@@ -42,8 +43,8 @@ const Page: React.FC = () => {
         <div className={classes.root}>
           <Switch>
             <Route exact path={urls.home} component={HomePage} />
-            <Route exact path={urls.login} component={AuthPage} />
-            <Route exact path={urls.registration} component={AuthPage} />
+            <Route exact path={urls.login} component={LoginPage} />
+            <Route exact path={urls.registration} component={RegistrationPage} />
             <Route exact path={urls.feed} component={FeedPage} />
             <Route exact path={urls.notifications} component={NotificationsPage} />
             <Route path={urls.profile} component={ProfilePage} />
diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx
new file mode 100644
index 0000000..e283a0e
--- /dev/null
+++ b/src/pages/RegistrationPage/RegistrationPage.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import { post } from '../../requests';
+import { useAuth } from '../../hooks/useAuth';
+import { useNavigate } from '../../hooks/useNavigate';
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      width: theme.spacing(35)
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center'
+  },
+  formHeader: {
+    textAlign: 'center',
+    fontSize: 25
+  }
+}));
+
+const RegistrationPage: React.FC = () => {
+  const [error, setError] = useState<boolean>(false);
+  const classes = useStyles();
+  const usernameRef = useRef<HTMLInputElement>();
+  const emailRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>();
+  const { login } = useAuth();
+  const { navigate } = useNavigate();
+
+  const onClick = () => {
+    const username = usernameRef.current?.value;
+    const password = passwordRef.current?.value;
+    const email = emailRef.current?.value;
+    if (username && password) {
+      post('/users', { username, password, email })
+        .then(() => login(username, password))
+        .then(() => navigate('profile'));
+    } else setError(true);
+  };
+
+  // TODO: add login redirect
+
+  return (
+    <>
+      <div className={classes.formHeader}>Sign Up</div>
+      <form className={classes.root} noValidate autoComplete="off">
+        <TextField
+          inputRef={usernameRef}
+          label="Username"
+          error={error}
+          helperText={error && 'This field is required!'}
+          required
+        />
+        <TextField inputRef={emailRef} label="Email" />
+        <TextField
+          inputRef={passwordRef}
+          label="Password"
+          type="password"
+          required
+          error={error}
+          helperText={error && 'This field is required!'}
+        />
+        <Button variant="contained" onClick={onClick}>submit</Button>
+      </form>
+    </>
+  );
+};
+
+export default RegistrationPage;
-- 
cgit v1.2.3