WIP: Referral system prototype

src/App.js

@@ -6,6 +6,7 @@ import Footer from './components/footer';
 import ReactRouter from './components/router';
 
 import { Provider as PasswordContext } from './context/PasswordContext';
+import { Provider as UserContext } from './context/UserContext';
 
 import BitcoinImage from './css/background-coins/bitcoin2.svg';
 import EtherImage from './css/background-coins/Eth2.svg';
@@ -18,11 +19,13 @@ function App() {
       <div className='App'>
         <img className='bg-bitcoin-image' src={BitcoinImage} alt='bitcoin' />
         <img className='bg-ether-image' src={EtherImage} alt='ethereum' />
-        <PasswordContext>
-          <Header />
-          <ReactRouter />
-          <Footer />
-        </PasswordContext>
+        <UserContext>
+          <PasswordContext>
+            <Header />
+            <ReactRouter />
+            <Footer />
+          </PasswordContext>
+        </UserContext>
       </div>
     </HashRouter>
   );

src/components/footer/index.js

@@ -27,9 +27,13 @@ const Footer = () => {
   const [isPasswordIncorrect, setIsPasswordIncorrect] = useState(false);
   const password = usePassword();
 
+  if (location.pathname === '/') {
+    return null;
+  }
+
   const buttonHandler = () => {
     return {
-      '/': () => {
+      '/questions': () => {
         new Emitter().emitAll('startButler');
       },
 

src/components/header/index.js

@@ -22,7 +22,7 @@ const Header = () => {
       <div className='img-wrapper'>
         <img className='logo' src={Logo} alt='logo' />
       </div>
-      {location.pathname !== '/' && (
+      {location.pathname !== '/' && location.pathname !== '/questions' && (
         <div className='nav-links-wrapper'>
           <button
             className={`${location.pathname === '/terminal' ? 'active' : null}`}
@@ -40,6 +40,13 @@ const Header = () => {
           </button>
         </div>
       )}
+      {location.pathname !== '/' && (
+        <div className='nav-links-wrapper'>
+          <button onClick={navigateTo} name='/referrals'>
+            Referrals
+          </button>
+        </div>
+      )}
     </div>
   );
 };

src/components/pages/Authentication/Authentication.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import axios from 'axios';
+
+import { Register } from './Register/Register';
+import { Login } from './Login/Login';
+
+import { useUpdateUser } from '../../../context/UserContext';
+
+import './style.scss';
+
+const TABS = {
+  REGISTER: 'Register',
+  LOGIN: 'Login',
+};
+
+const { REGISTER, LOGIN } = TABS;
+
+export const Authentication = () => {
+  const [tab, setTab] = useState(REGISTER);
+
+  const history = useHistory();
+  const updateUser = useUpdateUser();
+
+  const changeTab = tabToOpen => {
+    setTab(tabToOpen);
+  };
+
+  const authenticateUser = async (endPoint, state) => {
+    try {
+      const { data } = await axios.post('http://localhost:9000' + endPoint, state);
+
+      if (data.success && endPoint === '/login') {
+        updateUser(data.user);
+        history.push('/questions');
+      }
+    } catch (error) {
+      console.log('Error', endPoint, error);
+    }
+  };
+
+  return (
+    <div className='authentication-wrapper'>
+      <div className='title'>
+        <h1>Welcome to the Butler!</h1>
+      </div>
+      <div className='authentication-tabs'>
+        <p onClick={() => changeTab(REGISTER)}>{REGISTER}</p>
+        <p onClick={() => changeTab(LOGIN)}>{LOGIN}</p>
+      </div>
+      {(() => {
+        switch (tab) {
+          case REGISTER:
+            return <Register authenticateUser={authenticateUser} />;
+          case LOGIN:
+            return <Login authenticateUser={authenticateUser} />;
+          default:
+            return null;
+        }
+      })()}
+    </div>
+  );
+};

src/components/pages/Authentication/Login/Login.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Button from '../../../common/Button';
+
+const LOGIN_MODEL = {
+  email: '',
+  password: '',
+};
+
+export const Login = ({ authenticateUser }) => {
+  const [state, setState] = useState(LOGIN_MODEL);
+
+  const handleInputOnChange = event => {
+    event.persist();
+
+    const {
+      target: { name, value },
+    } = event;
+
+    setState(prevState => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  const submitForm = () => {
+    authenticateUser('/login', state);
+  };
+
+  return (
+    <div className='authentication-wrapper'>
+      {Object.keys(LOGIN_MODEL).map(key => (
+        <div key={key}>
+          <label>{key}</label>
+          <input name={key} value={state[key]} onChange={handleInputOnChange} />
+        </div>
+      ))}
+      <div>
+        <Button btnText='Login' onClick={submitForm} />
+      </div>
+    </div>
+  );
+};

src/components/pages/Authentication/Register/Register.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import Button from '../../../common/Button';
+import axios from 'axios';
+
+const REGISTER_MODEL = {
+  email: 'test',
+  password: 'test',
+  confirmPassword: 'test',
+  referralCode: 'test1',
+};
+
+export const Register = ({ authenticateUser }) => {
+  const [state, setState] = useState(REGISTER_MODEL);
+  const [emailMessage, setEmailMessage] = useState('');
+  const [referralMessage, setReferralMessage] = useState('');
+
+  const handleInputOnChange = event => {
+    event.persist();
+
+    const {
+      target: { name, value },
+    } = event;
+
+    setState(prevState => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  const handleOnBlur = async event => {
+    event.persist();
+
+    const {
+      target: { name, value },
+    } = event;
+
+    if (name !== 'email') return;
+
+    try {
+      await axios.get('http://localhost:9000/email/' + value);
+
+      setEmailMessage('Email is available');
+    } catch (error) {
+      setEmailMessage('Email is taken');
+    }
+  };
+
+  const handleOnKeyUp = async event => {
+    event.persist();
+
+    const {
+      target: { name, value },
+    } = event;
+
+    if (name !== 'referralCode' || value.length < 5) {
+      return;
+    }
+
+    try {
+      await axios.get('http://localhost:9000/referralCode/' + value);
+
+      setReferralMessage('Valid referral code');
+    } catch (error) {
+      setReferralMessage('Invalid referral code');
+    }
+  };
+
+  const submitForm = () => {
+    const { confirmPassword, ...rest } = state;
+
+    authenticateUser('/register', rest);
+  };
+
+  return (
+    <div className='authentication-wrapper'>
+      {Object.keys(REGISTER_MODEL).map(key => (
+        <div key={key}>
+          <label>{key}</label>
+          <input
+            name={key}
+            value={state[key]}
+            onChange={handleInputOnChange}
+            onBlur={handleOnBlur}
+            onKeyUp={handleOnKeyUp}
+          />
+        </div>
+      ))}
+      {emailMessage && <p>{emailMessage}</p>}
+      {referralMessage && <p>{referralMessage}</p>}
+      <div>
+        <Button btnText='Register' onClick={submitForm} />
+      </div>
+    </div>
+  );
+};

src/components/pages/Authentication/style.scss

@@ -0,0 +1,17 @@
+.authentication-wrapper {
+  height: 450px;
+  width: 100%;
+  background-color: #e4e4e4;
+  font-size: 1.2rem;
+  text-align: center;
+
+  .authentication-tabs {
+    margin-top: 3rem;
+    margin: 3rem auto 0 auto;
+    width: 40%;
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: #2fa1d0;
+  }
+}