Merge ae95dc5 into a4d9a9c

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
     "@babel/preset-env", "@babel/preset-react"
-  ]
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.eslintrc.json

@@ -10,7 +10,7 @@
   },
   "parserOptions": {
     "ecmaFeatures": {
-    "jsx": true
+      "jsx": true
     },
     "ecmaVersion": 2018,
     "sourceType": "module"
@@ -19,5 +19,12 @@
     "react"
   ],
   "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ]
   }
 }

jest.config.js

@@ -14,10 +14,10 @@ module.exports = {
     "\\.(css|jpg|png|scss)$": "<rootDir>/ignore-css.js"
   },
   // A list of paths to directories that Jest should use to search for files in
-  roots: ["<rootDir>/tests/"],
+  roots: ["<rootDir>./src/tests/"],
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ["<rootDir>/SetupTests.js"],
+  setupFiles: ["<rootDir>./src/SetupTests.js"],
 
   // The test environment that will be used for testing
   testEnvironment: "jest-environment-jsdom",

package.json

@@ -27,26 +27,34 @@
   },
   "homepage": "https://github.com/andela/ah-frontend-prime#readme",
   "dependencies": {
+    "classnames": "^2.2.6",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "express": "^4.16.4",
+    "prettier": "^1.17.0",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
     "react-test-renderer": "^16.8.6",
     "redux": "^4.0.1",
+    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
+    "@material-ui/core": "^3.9.3",
+    "@material-ui/icons": "^3.0.2",
+    "axios": "^0.18.0",
     "babel-loader": "^8.0.5",
     "coveralls": "^3.0.3",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.12.4",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.1",
+    "moxios": "^0.4.0",
     "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/SetupTests.js

@@ -0,0 +1,4 @@
+import { configure } from "enzyme/build";
+import Adapter from "enzyme-adapter-react-16/build";
+
+configure({ adapter: new Adapter() });

src/actions/registerActions.js

@@ -0,0 +1,26 @@
+import {
+  REGISTRATION_ERROR_MESSAGE,
+  RIGISTRATION_SUCCESS_MESSAGE
+} from "../actions/types";
+import axios from "axios";
+
+export const registerUser = userData => dispatch => {
+  console.log("fetching");
+  return axios
+    .post(
+      "https://ah-backend-prime-staging.herokuapp.com/api/v1/users/register/",
+      { user: userData }
+    )
+    .then(res =>
+      dispatch({
+        type: RIGISTRATION_SUCCESS_MESSAGE,
+        payload: res.data
+      })
+    )
+    .catch(error =>
+      dispatch({
+        type: REGISTRATION_ERROR_MESSAGE,
+        payload: error.response.data
+      })
+    );
+};

src/actions/types.js

@@ -1,2 +1,2 @@
-//add your actions types here
-// export const LOGIN_USER = 'LOGIN_USER';
+export const REGISTRATION_ERROR_MESSAGE = "REGISTRATION_ERROR_MESSAGE";
+export const RIGISTRATION_SUCCESS_MESSAGE = "REGISTRATION_SUCCESS_MESSAGE";

src/components/home.js

@@ -7,6 +7,6 @@ const Home = () => {
 		  <h2>Welcome to Authors Haven</h2>
 	  </div>
 	)
-}
+};
 
 export default Home;

src/components/loginComponent.js

@@ -7,6 +7,5 @@ const Login = () => {
       <h2>Login</h2>
     </div>
 	)
-}
-
+};
 export default Login;

src/components/registerComponent.js

@@ -0,0 +1,148 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import { withStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import "../styles/register.scss";
+
+const styles = themes => ({
+  floatingLabelFocusStyle: {
+    color: "black",
+    fontFamily: "Quantico",
+    fontSize: "15px",
+    fontWeight: "bold"
+  }
+});
+export const RegisterComponent = props => {
+  const {
+    classes,
+    password,
+    username,
+    email,
+    handleOnChange,
+    errors,
+    error_message,
+    handleOnSubmit
+  } = props;
+
+  return (
+    <div>
+      <Grid container spacing={24}>
+        <Grid item lg={2} md={2} />
+        <Grid item lg={8} md={8}>
+          <Paper className="Paper">
+            <h3>Join Authors Haven Today</h3>
+            <p>
+              A social that Creates a community of like minded authors to foster
+              inspiration and
+              <br />
+              innovation by leveraging the modern web.
+            </p>
+            <Grid container spacing={24}>
+              <Grid item lg={6} md={6}>
+                <div className="button-collective">
+                  <Button className="face-book">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/facebook.png"
+                      width="=40px"
+                      height="40px"
+                      alt="facebook"
+                    />{" "}
+                    Register with Facebook
+                  </Button>
+                  <Button className="twitter">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/twitter-circled.png"
+                      width="=40px"
+                      height="40px"
+                      alt="twitter"
+                    />
+                    Register with Twitter
+                  </Button>
+                  <Button className="google">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/google-logo.png"
+                      width="=40px"
+                      height="40px"
+                      alt="google"
+                    />
+                    Register with Google
+                  </Button>
+                </div>
+              </Grid>
+              <Grid item lg={6} md={6} className="grid-register">
+                <form method="post" onSubmit={handleOnSubmit} id="registerForm">
+                  <TextField
+                    InputLabelProps={{
+                      className: classes.floatingLabelFocusStyle
+                    }}
+                    id="username"
+                    label="enter username"
+                    name="username"
+                    type="text"
+                    className="textField"
+                    value={username}
+                    onChange={handleOnChange}
+                  />
+                  <p>
+                    {errors.username.length > 0 ? (
+                      <span className="form-errors">{errors.username}</span>
+                    ) : (
+                      ""
+                    )}
+                  </p>
+                  <TextField
+                    InputLabelProps={{
+                      className: classes.floatingLabelFocusStyle
+                    }}
+                    id="email"
+                    label="enter email"
+                    name="email"
+                    type="text"
+                    className="textField"
+                    value={email}
+                    onChange={handleOnChange}
+                  />
+                  <p>
+                    {errors.email.length > 0 ? (
+                      <span className="form-errors">{errors.email}</span>
+                    ) : (
+                      ""
+                    )}
+                  </p>
+                  <TextField
+                    InputLabelProps={{
+                      className: classes.floatingLabelFocusStyle
+                    }}
+                    id="password"
+                    label="enter password"
+                    name="password"
+                    type="password"
+                    className="textField"
+                    value={password}
+                    onChange={handleOnChange}
+                  />
+                  <p>
+                    {errors.password.length > 0 ? (
+                      <span className="form-errors">{errors.password}</span>
+                    ) : (
+                      ""
+                    )}
+                  </p>
+                  <Button type="submit" className="button-success">
+                    Register
+                  </Button>
+                  <p>{console.log(error_message.errors)}</p>
+                </form>
+              </Grid>
+            </Grid>
+            <p>Already have an Account? login </p>
+          </Paper>
+        </Grid>
+        <Grid item lg={2} md={2} />
+      </Grid>
+    </div>
+  );
+};
+export default withStyles(styles)(RegisterComponent);

src/components/routes.js

@@ -1,22 +1,21 @@
-import React, { Component } from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
-
-
-import Login from './loginComponent';
-import Home from './home';
-
-
+import React, { Component } from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Login from "./loginComponent";
+import Home from "./home";
+import RegisterContainer from "../containers/registerContainer";
 
 class Routes extends Component {
-
-  render(){
+  render() {
     return (
       <BrowserRouter>
-			  <Route exact path="/" component={Home} />
-			  <Route path="/login" component={Login} />
+        <Switch>
+          <Route path="/" component={Home} exact={true} />
+          <Route path="/login" component={Login} />
+          <Route path="/register" component={RegisterContainer} />
+        </Switch>
       </BrowserRouter>
     );
-  };
+  }
 }
 
 export default Routes;

src/containers/app.js

@@ -1,17 +1,12 @@
 import React, { Component } from 'react';
-import { Provider } from 'react-redux';
-import store  from '../store';
 import '../styles/app.scss';
-import Routes from '../components/routes';
-
 class App extends Component{
   render() {
 	return(
-    <Provider store={store}>
-			<Routes/>
-		</Provider>
+		<div>
+			<p> the default element</p>
+		</div>
 	)
   }
 }
-
 export default App;