stub frontend requests to auth endpoints

play-node-go/.flowconfig

@@ -7,18 +7,23 @@
 .*/server/test/.*
 .*/server/knexfile\.js
 .*/public/.*
+.*\.scss
+.*\.css
+.+\.s?css
 
 [include]
+.*/src/components/
+.*/src/pages/.*
+.*/src/reducers/.*
+.*/src/utils/.*
+.*/App.js
 
 [libs]
 
 [lints]
 
 [options]
-; all=true 
 
 [strict]
 
 [untyped]
-.*\.scss
-.*\.css

play-node-go/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@mars/heroku-js-runtime-env": "^3.0.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.1",
     "flow-bin": "^0.114.0",
     "node-sass": "^4.13.0",
     "react": "^16.12.0",
@@ -18,7 +19,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "flow": "./node_modules/.bin/flow flow",
+    "flow": "./node_modules/.bin/flow",
     "predeploy": "REACT_APP_ENVIRONMENT=production npm run build",
     "postinstall": "react-scripts build"
   },

play-node-go/src/App.js

@@ -1,8 +1,8 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect, useReducer} from 'react';
 import './App.scss';
 import config from './config';
 
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
 
 import socketIOClient from 'socket.io-client';
 
@@ -17,39 +17,56 @@ export const socket = socketIOClient(config.apiAddress);
 function App() {
   const [fetchData, setFetchData] = useState();
   const [socketData, setSocketData] = useState();
-  fetch(config.apiAddress).then(res => res.text()).then(data => setFetchData(data));
+  const [error, setError] = useState([]);
-  socket.emit('connect');
+
-  socket.on('connected', data => setSocketData(data.message));
+  useEffect(() => {
+    fetch(config.apiAddress)
+    .then(res => res.text())
+    .catch(err => setError([...error, err]))
+    .then(data => setFetchData(data))
+  })
+  useEffect(() => {
+    
+    socket.emit('connect');
+    socket.on('connect', data => setSocketData('socket connected'));
+    socket.on('connect_error', err => setError([...error, err]));
+    socket.on('error', err => setError([...error, err]))
+  })
+  
   return (
-    <div className="App">
+    <Router>
-      <h1>React Boilerplate</h1>
-      {fetchData ? <p>{fetchData}</p> : <></>}
-      {socketData ? <p>{socketData}</p> : <></>}
-      <Switch>
       
-        <Route path="/account">
+      <div data-testid="App" className="App">
-          <Account />
+        <h1>React Boilerplate</h1>
-        </Route>
+        {fetchData ? <p>{fetchData}</p> : <></>}
+        {socketData ? <p>{socketData}</p> : <></>}
+        {error ? error.map(err => <p>{err}</p>): <></>}
+        <Switch>
 
-        <Route path="/rooms">
+          <Route path="/account">
-          <Room />
+            <Account />
-        </Route>
+          </Route>
 
-        <Route path="/games">
+          <Route path="/rooms">
-          <Game />
+            <Room />
-        </Route>
+          </Route>
 
-        <Route path="/news">
+          <Route path="/games">
-          <News />
+            <Game />
-        </Route>
+          </Route>
         
-        <Route path="/">
+          <Route path="/news">
-          {/* Add ternary for login */}
+            <News />
-          <Home />
+          </Route>
-        </Route>
         
-      </Switch>
+          <Route path="/">
-    </div>
+            {/* Add ternary for login */}
+            <Home />
+          </Route>
+
+        </Switch>
+      </div>
+    </Router>
   );
 }
 

play-node-go/src/App.test.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders app without crashing', () => {
-  const { getByText } = render(<App />);
+  const { getByTestId } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  const AppDiv = getByTestId('App');
-  expect(linkElement).toBeInTheDocument();
+  expect(AppDiv).toBeInTheDocument();
 });

play-node-go/src/components/Login/Login.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import './Login.scss';
+
+const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <div className="Login" data-testid="Login">
+
+    </div>
+  );
+}
+ 
+export default Login;

play-node-go/src/components/Login/Login.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Login from './Login';
+
+test('renders app without crashing', () => {
+  const { getByTestId } = render(<Login />);
+  const LoginDiv = getByTestId('Login');
+  expect(LoginDiv).toBeInTheDocument();
+});

play-node-go/src/components/Signup/Signup.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import './Signup.scss';
+
+const Signup = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+
+  return (
+    <div className="Signup" data-testid="Signup">
+      
+    </div>
+  );
+}
+ 
+export default Signup;

play-node-go/src/components/Signup/Signup.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Signup from './Signup';
+
+test('renders app without crashing', () => {
+  const { getByTestId } = render(<Signup />);
+  const SignupDiv = getByTestId('Signup');
+  expect(SignupDiv).toBeInTheDocument();
+});

play-node-go/src/index.js

@@ -3,12 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.scss';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { BrowserRouter as Router } from 'react-router-dom';
 
 ReactDOM.render(
-  <Router>
+  <App />
-    <App />
-  </Router>
   , document.getElementById('root')
 );
 

play-node-go/src/services/authServices.js

@@ -0,0 +1,27 @@
+import config from '../config';
+import Axios from 'axios';
+
+const authEndpoint = `${config.apiAddress}/auth`;
+const signupEndpoint = `${authEndpoint}/signup`
+const loginEndpoint = `${authEndpoint}/login`
+
+const loginService = () => {
+
+}
+
+const signupService = async (formData) => {
+  const response = await Axios.post(signupEndpoint, {
+    ...formData
+  }).then(res => {
+    return res;
+  }).catch(err => {
+    return err;
+  });
+  console.log(response)
+  return response;
+}
+
+module.exports = {
+  loginService,
+  signupService
+}

play-node-go/src/services/authServices.test.js

@@ -0,0 +1,25 @@
+import authServices from './authServices';
+
+const signupService = authServices.signupService;
+const loginService = authServices.loginService;
+
+const newUserFormData = {
+  username:'newUser',
+  password:'password',
+  passwordConfirm:'password',
+  email:'user@example.com'
+}
+
+describe('signupService', () => {
+  it('signup returns 200', async () => {
+    const response = await signupService(newUserFormData);
+    console.log(response)
+    expect(response.status).equal('200');
+  });
+});
+
+describe('loginService', () => {
+  it('', () => {
+
+  });
+});