Merge a130f78 into 40ba268

andela · Apr 11, 2019 · 03331c1 · 03331c1
2 parents 40ba268 + a130f78
commit 03331c1
Show file tree

Hide file tree

Showing 33 changed files with 19,035 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,5 +21,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 #idea
-.idea/
-package-lock.json
+.idea/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "coveralls": "^3.0.3",
+    "dotenv": "^7.0.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
@@ -14,6 +16,7 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
     "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "watch": "^1.0.2"
   },
@@ -44,15 +47,16 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "node-sass": "^4.11.0",
-    "npm-run-all": "^4.1.5",
-    "eslint-plugin-react": "^7.12.4",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "prettier": "^1.16.4"
+    "eslint-plugin-react": "^7.12.4",
+    "node-sass": "^4.11.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.16.4",
+    "redux-mock-store": "^1.5.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Authors Haven</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/logo.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+  <title>Authors Haven</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -21,5 +27,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/actions/action_types.js b/src/actions/action_types.js
@@ -0,0 +1,7 @@
+export const REGISTER_USER = 'REGISTER_USER';
+
+export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
+
+export const REGISTER_ERROR = 'REGISTER_ERROR';
+
+export const REGISTER_SUMBITTABLE = 'REGISTER_SUBMITTABLE';
diff --git a/src/actions/index.js b/src/actions/index.js
diff --git a/src/actions/register.js b/src/actions/register.js
@@ -0,0 +1,41 @@
+import axios from 'axios';
+import axiosHeader from '../axios_config';
+import * as actionTypes from './action_types';
+
+export const submitStatus = submitState => (dispatch) => {
+  return dispatch({ type: actionTypes.REGISTER_SUMBITTABLE, payload: submitState });
+};
+
+export const registerSuccess = () => (dispatch) => {
+  return dispatch({ type: actionTypes.REGISTER_SUCCESS, payload: true });
+};
+
+export const registerUser = userdata => async (dispatch) => {
+  const postData = JSON.stringify({ user: userdata });
+  await axios
+    .post(`${process.env.REACT_APP_BASE_URL}/users/`, postData, axiosHeader)
+    .then((result) => {
+      dispatch({ type: actionTypes.REGISTER_USER, payload: result.data.user });
+      dispatch(registerSuccess());
+      setTimeout(() => {
+        window.location.href = '/login';
+      }, 3000);
+    })
+    .catch((error) => {
+      const retData = error.response.data.errors;
+      if (!('username' in retData)) {
+        retData.username = [];
+      }
+
+      if (!('email' in retData)) {
+        retData.email = [];
+      }
+
+      if (!('password' in retData)) {
+        retData.password = [];
+      }
+
+      dispatch(submitStatus(true));
+      return dispatch({ type: actionTypes.REGISTER_ERROR, payload: retData });
+    });
+};
diff --git a/src/axios_config.js b/src/axios_config.js
@@ -0,0 +1,9 @@
+const token = localStorage.getItem('token') || '';
+const axiosHeader = {
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: token,
+  },
+};
+
+export default axiosHeader;
diff --git a/src/components/Home/App.css b/src/components/Home/App.css
@@ -1,10 +1,9 @@
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  margin-top: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
-}
+  color: white; }
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import NavbarInstance from '../Navbar/Navbar';
-import '../../App.css';
-import '../../css/bootstrap.min.css';
+import Footer from '../static/Footer';
+import './App.css';
 
 const App = () => (
   <div className="App">
+    <NavbarInstance />
     <header className="App-header">
-      <NavbarInstance />
       <p>WELCOME TO AUTHORS HAVEN</p>
     </header>
+    <Footer />
   </div>
 );
 

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,30 +1,77 @@
 import React from 'react';
 import {
-  Button, Container, Form, FormControl, Image, Nav, Navbar, Row,
+  Button,
+  Container,
+  Form,
+  FormControl,
+  Image,
+  Nav,
+  Navbar,
+  NavItem,
 } from 'react-bootstrap';
 
-import authors from '../../img/authors.png';
+import logo from '../../img/logo.png';
+import './navbar.scss';
 
 const NavbarInstance = () => (
-  <Navbar bg="light" expand="lg" className="navbar navbar-expand-lg navbar-dark bg-dark" fixed="top">
-    <Image src={authors} alt="logo" width="90" responsive="true" />
+  <Navbar
+    bg="light"
+    expand="lg"
+    className="navbar navbar-expand-lg navbar-dark bg-dark"
+    fixed="top"
+  >
+    <Image src={logo} alt="logo" className="navbar-brand" responsive="true" />
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Container>
-        <Row>
-          <Nav className="mr-auto">
-            <Nav.Link href="#home">Home</Nav.Link>
-            <Nav.Link href="#top">Newest</Nav.Link>
-            <Nav.Link href="#top">Technology</Nav.Link>
-            <Nav.Link href="#top">Local</Nav.Link>
+        <div className="row">
+          <div className="col-sm-2 col-0" />
+          <div className="col-sm-7 col-12">
+            <Form inline>
+              <FormControl
+                type="text"
+                placeholder="Search"
+                className="col-sm-8 col-md-9 col-12"
+              />
+              <Button
+                className="btn col-sm-4 col-md-3 col-12"
+                variant="outline-success"
+              >
+                <i className="fa fa-search" />
+                Search
+              </Button>
+            </Form>
+          </div>
+          <div className="col-sm-3 col-12 justify-content-end">
+            <a href="login" className="btn btn-secondary">
+              Login
+            </a>
+            &nbsp; &nbsp;
+            <a href="register" className="btn btn-secondary">
+              Register
+            </a>
+          </div>
+        </div>
+        <br />
+        <div>
+          <Nav fill variant="pills" className="justify-content-center mr-auto">
+            <NavItem>
+              <Nav.Link href="#home" className="active">
+                Home
+              </Nav.Link>
+            </NavItem>
+            <NavItem>
+              <Nav.Link href="#top">Newest</Nav.Link>
+            </NavItem>
+            <NavItem>
+              <Nav.Link href="#top">Technology</Nav.Link>
+            </NavItem>
+            <NavItem>
+              <Nav.Link href="#top">Local</Nav.Link>
+            </NavItem>
           </Nav>
-          <Form inline>
-            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-            <Button variant="outline-success">Search</Button>
-          </Form>
-        </Row>
+        </div>
       </Container>
-
     </Navbar.Collapse>
   </Navbar>
 );