refactor: apply PR requested changes

src/api/authentication.js

@@ -1,29 +1,25 @@
 import { API_HOST } from '../config/constants';
+import { DEFAULT_GET, DEFAULT_POST } from './utils';
 
 // payload = {email}
 export const signIn = async (payload) => {
   const req = await fetch(`${API_HOST}/login`, {
-    method: 'POST',
+    ...DEFAULT_POST,
     body: JSON.stringify(payload),
-    headers: { 'Content-Type': 'application/json' },
   });
   return req.status === 204;
 };
 
 export const signOut = async () => {
-  const req = await fetch(`${API_HOST}/logout`, {
-    credentials: 'include',
-    method: 'GET',
-  });
+  const req = await fetch(`${API_HOST}/logout`, DEFAULT_GET);
   return req.status === 204;
 };
 
 // payload = {name, mail}
-export const register = async (payload) => {
+export const signUp = async (payload) => {
   const req = await fetch(`${API_HOST}/register`, {
-    method: 'POST',
+    ...DEFAULT_POST,
     body: JSON.stringify(payload),
-    headers: { 'Content-Type': 'application/json' },
   });
   return req.status === 204;
 };

src/api/item.js

@@ -1,11 +1,10 @@
 import { API_HOST } from '../config/constants';
+import { DEFAULT_GET, DEFAULT_POST } from './utils';
 
 // payload = {email}
 export const getOwnItems = async () => {
   const req = await fetch(`${API_HOST}/own`, {
-    method: 'GET',
-    credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
+    ...DEFAULT_GET,
   });
   // eslint-disable-next-line no-console
   console.log(req);
@@ -14,10 +13,8 @@ export const getOwnItems = async () => {
 // payload = {email}
 export const createItem = async () => {
   const req = await fetch(`${API_HOST}/items`, {
-    method: 'POST',
-    credentials: 'include',
+    ...DEFAULT_POST,
     body: JSON.stringify({ name: 'myitem' }),
-    headers: { 'Content-Type': 'application/json' },
   });
   // eslint-disable-next-line no-console
   console.log(await req.json());

src/api/utils.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GET = {
+  credentials: 'include',
+  method: 'GET',
+};
+
+export const DEFAULT_POST = {
+  method: 'POST',
+  credentials: 'include',
+  headers: { 'Content-Type': 'application/json' },
+};

src/components/App.js

@@ -9,8 +9,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import Header from './layout/Header';
 import Items from './main/Items';
 import items from '../data/sample';
-import Register from './Register';
-import { REGISTER_PATH, SIGN_IN_PATH } from '../config/paths';
+import SignUp from './SignUp';
+import { SIGN_UP_PATH, SIGN_IN_PATH } from '../config/paths';
 import SignIn from './SignIn';
 
 const useStyles = makeStyles((theme) => ({
@@ -36,8 +36,8 @@ function App() {
             <Route path={SIGN_IN_PATH} exact>
               <SignIn />
             </Route>
-            <Route path={REGISTER_PATH} exact>
-              <Register />
+            <Route path={SIGN_UP_PATH} exact>
+              <SignUp />
             </Route>
             <Route path="/" exact>
               <Redirect to="/items" />

src/components/SignIn.js

@@ -8,7 +8,7 @@ import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import FormControl from '@material-ui/core/FormControl';
 import { Alert } from '@material-ui/lab';
-import { REGISTER_PATH } from '../config/paths';
+import { SIGN_UP_PATH } from '../config/paths';
 import { signIn, signOut } from '../api/authentication';
 import { isSignedIn } from '../utils/common';
 
@@ -59,7 +59,7 @@ class SignIn extends Component {
     const {
       history: { push },
     } = this.props;
-    push(REGISTER_PATH);
+    push(SIGN_UP_PATH);
   };
 
   signIn = async () => {

src/components/Register.js → src/components/SignUp.js

@@ -9,7 +9,8 @@ import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import { Alert } from '@material-ui/lab';
 import { SIGN_IN_PATH } from '../config/paths';
-import { register } from '../api/authentication';
+import { signUp } from '../api/authentication';
+import { isSignedIn } from '../utils/common';
 
 const styles = (theme) => ({
   fullScreen: {
@@ -29,7 +30,7 @@ const styles = (theme) => ({
   },
 });
 
-class Register extends Component {
+class SignUp extends Component {
   static propTypes = {
     classes: PropTypes.shape({
       fullScreen: PropTypes.string.isRequired,
@@ -47,16 +48,22 @@ class Register extends Component {
     email: '',
     name: '',
     isSuccess: null,
+    isAuthenticated: false,
   };
 
+  componentDidMount() {
+    const isAuthenticated = isSignedIn();
+    this.setState({ isAuthenticated });
+  }
+
   handleOnSignIn = () => {
     const {
       history: { push },
     } = this.props;
     push(SIGN_IN_PATH);
   };
 
-  handleemailOnChange = (e) => {
+  handleEmailOnChange = (e) => {
     this.setState({ email: e.target.value });
   };
 
@@ -66,7 +73,7 @@ class Register extends Component {
 
   register = async () => {
     const { email, name } = this.state;
-    const isSuccess = await register({ name, email });
+    const isSuccess = await signUp({ name, email });
     this.setState({ isSuccess });
   };
 
@@ -86,9 +93,56 @@ class Register extends Component {
     return null;
   };
 
+  renderForm = () => {
+    const { classes } = this.props;
+    const { email, name } = this.state;
+
+    return (
+      <>
+        <Grid item xs={12}>
+          <TextField
+            className={classes.input}
+            required
+            label="Name"
+            variant="outlined"
+            value={name}
+            onChange={this.handleNameOnChange}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            className={classes.input}
+            required
+            label="email"
+            variant="outlined"
+            value={email}
+            onChange={this.handleEmailOnChange}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Button variant="contained" color="primary" onClick={this.register}>
+            Sign Up
+          </Button>
+        </Grid>
+        <Divider variant="middle" className={classes.divider} />
+        <Button variant="text" color="primary" onClick={this.handleOnSignIn}>
+          Already have an account? Click here to sign in
+        </Button>
+      </>
+    );
+  };
+
+  renderIsAuthenticatedMessage = () => {
+    return (
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">You are already signed in.</Typography>
+      </Grid>
+    );
+  };
+
   render() {
     const { classes } = this.props;
-    const { email, name, isRequestSent } = this.state;
+    const { isRequestSent, isAuthenticated } = this.state;
 
     if (isRequestSent) {
       return <div>You will receive a email with your cookie!</div>;
@@ -98,45 +152,17 @@ class Register extends Component {
       <div className={classes.fullScreen}>
         {this.renderMessage()}
         <Typography variant="h2" component="h2">
-          Register
+          Sign Up
         </Typography>
         <Grid container className={classes.form}>
-          <Grid item xs={12}>
-            <TextField
-              className={classes.input}
-              required
-              label="Name"
-              variant="outlined"
-              value={name}
-              onChange={this.handleNameOnChange}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <TextField
-              className={classes.input}
-              required
-              label="email"
-              variant="outlined"
-              value={email}
-              onChange={this.handleemailOnChange}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <Button variant="contained" color="primary" onClick={this.register}>
-              Register
-            </Button>
-          </Grid>
+          {isAuthenticated && this.renderIsAuthenticatedMessage()}
+          {!isAuthenticated && this.renderForm()}
         </Grid>
-
-        <Divider variant="middle" className={classes.divider} />
-        <Button variant="text" color="primary" onClick={this.handleOnSignIn}>
-          Already have an account? Click here to sign in
-        </Button>
       </div>
     );
   }
 }
 
-const StyledComponent = withStyles(styles, { withTheme: true })(Register);
+const StyledComponent = withStyles(styles, { withTheme: true })(SignUp);
 
 export default withRouter(StyledComponent);

src/config/paths.js

@@ -1,2 +1,2 @@
-export const SIGN_IN_PATH = '/signin';
-export const REGISTER_PATH = '/register';
+export const SIGN_IN_PATH = '/signIn';
+export const SIGN_UP_PATH = '/signUp';