diff --git a/package.json b/package.json index 36800b1..a5c9876 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,14 @@ "@material-ui/icons": "^4.9.1", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", + "bootstrap": "^4.5.0", "history": "^4.10.1", "react": "^16.13.1", + "react-bootstrap": "^1.0.1", "react-dom": "^16.13.1", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", + "reactstrap": "^8.4.1", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", diff --git a/src/App.css b/src/App.css index 58328e3..cc5b9b0 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ -.App { - position: relative; - width: 100%; - height: 100%; -} - +/* html, +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + background-color: rgb(245, 245, 245); +} */ diff --git a/src/_nav.js b/src/_nav.js new file mode 100644 index 0000000..bd31b71 --- /dev/null +++ b/src/_nav.js @@ -0,0 +1,28 @@ +export default { + items: [ + { + name: 'Dashboard', + url: '/dashboard' + }, + { + name: 'About', + url: '/dashboard/about' + }, + { + name: 'Donate', + url: '/dashboard/donate' + }, + { + name: 'History', + url: '/dashboard/history' + }, + { + name: 'MyAccount', + url: '/dashboard/myaccount' + }, + { + name: 'Support', + url: '/dashboard/support' + } + ] +}; diff --git a/src/components/Navigations/NavBar/index.js b/src/components/Navigations/NavBar/index.js index e8c8722..fe1bd6e 100644 --- a/src/components/Navigations/NavBar/index.js +++ b/src/components/Navigations/NavBar/index.js @@ -1,14 +1,18 @@ -/* eslint-disable linebreak-style */ /* eslint-disable no-unused-vars */ -import React from 'react'; +/* eslint-disable class-methods-use-this */ +import React, { Component, Fragment } from 'react'; +import Navbar from 'react-bootstrap/Navbar'; -import NavigationItem from '../NavigationItem'; -import classes from './style.css'; +class Index extends Component { + render() { + return ( + + + Broomy + + + ); + } +} -export default (props) => ( - -); +export default Index; diff --git a/src/components/Navigations/Sidedrawer/CustomerSidebar.js b/src/components/Navigations/Sidedrawer/CustomerSidebar.js new file mode 100644 index 0000000..b63bd02 --- /dev/null +++ b/src/components/Navigations/Sidedrawer/CustomerSidebar.js @@ -0,0 +1,17 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable class-methods-use-this */ +import React, { Component, Fragment } from 'react'; +import Side from './Side'; + +class CustomerSidebar extends Component { + render() { + const { active, items } = this.props; + return ( + + + + ); + } +} + +export default CustomerSidebar; diff --git a/src/components/Navigations/Sidedrawer/NavItem.js b/src/components/Navigations/Sidedrawer/NavItem.js new file mode 100644 index 0000000..c80371d --- /dev/null +++ b/src/components/Navigations/Sidedrawer/NavItem.js @@ -0,0 +1,22 @@ +// eslint-disable-next-line no-unused-vars +import React, { Component } from 'react'; + +class NavItem extends Component { + function handleClick (){ + const { path, onItemClick } = this.props; + onItemClick(path); + }; + + render() { + const { active } = this.props; + return ( +
+ +
+ ); + } +} + +export default NavItem; diff --git a/src/components/Navigations/Sidedrawer/Side.js b/src/components/Navigations/Sidedrawer/Side.js new file mode 100644 index 0000000..16768c7 --- /dev/null +++ b/src/components/Navigations/Sidedrawer/Side.js @@ -0,0 +1,28 @@ +// eslint-disable-next-line no-unused-vars +import React, { Fragment } from 'react'; + +export default function Side(items) { + return ( + + + { + items.map(({ + label, name, items: subItems, ...rest + }) => ( + + {label} + {Array.isArray(subItems) ? ( + + {subItems.map((subItem) => ( + + {subItem.label} + + ))} + + ) : null} + + ))} + + + ); +} diff --git a/src/components/Navigations/Sidedrawer/SideNav.js b/src/components/Navigations/Sidedrawer/SideNav.js new file mode 100644 index 0000000..7ea6b9e --- /dev/null +++ b/src/components/Navigations/Sidedrawer/SideNav.js @@ -0,0 +1,75 @@ +// // eslint-disable-next-line no-unused-vars +// import React, { Component } from 'react'; +// import { withRouter } from 'react-router-dom'; + +// class SideNav extends Component { +// constructor(props) { +// super(props); +// this.state = { +// activePath: props.location.pathname, +// items: [ +// { +// /* path is used as id to check which NavItem is active basically */ +// path: '/myaccount', +// name: 'myaccount', +// /* Key is required, else console throws error. Does this please you Mr. Browser?! */ +// key: 1 +// }, +// { +// path: '/order', +// name: 'order', +// key: 2 +// }, +// { +// path: '/donate', +// name: 'donate', +// key: 3 +// }, +// { +// path: '/history', +// name: 'history', +// key: 3 +// }, +// { +// path: '/support', +// name: 'support', +// key: 3 +// }, +// { +// path: '/about', +// name: 'about', +// key: 3 +// } +// ] +// }; +// } + +// onItemClick = (path) => { +// /* Sets activePath which causes rerender which causes CSS to change */ +// this.setState({ activePath: path }); +// }; + +// render() { +// return ( +// +// { +// /* items = just array AND map() loops thru that array AND item is param of that loop */ +// items.map((item) => ( +// /* Return however many NavItems in array to be rendered */ +// +// )) +// } +// +// ); +// } +// } + +// export default withRouter(SideNav); diff --git a/src/components/Screens/Auth/AdminDashboard.js b/src/components/Screens/Auth/AdminDashboard.js new file mode 100644 index 0000000..83f2942 --- /dev/null +++ b/src/components/Screens/Auth/AdminDashboard.js @@ -0,0 +1,29 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable class-methods-use-this */ +import React, { Component } from 'react'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Button from 'react-bootstrap/Button'; + +class AdminDashboard extends Component { + render() { + return ( + + + + + + + + + + + Hello + + + ); + } +} + +export default AdminDashboard; diff --git a/src/components/Screens/Auth/AdminLogin.js b/src/components/Screens/Auth/AdminLogin.js new file mode 100644 index 0000000..d1e4713 --- /dev/null +++ b/src/components/Screens/Auth/AdminLogin.js @@ -0,0 +1,42 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable class-methods-use-this */ +import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; + +class AdminLogin extends Component { + render() { + return ( + + + +
+ + Email address + + We'll never share your email with anyone else. + + + + Password + + + + + +
+ +
+
+ + + + ); + } +} + +export default AdminLogin; diff --git a/src/components/Screens/Auth/AgentDasboard.js b/src/components/Screens/Auth/AgentDasboard.js new file mode 100644 index 0000000..17f74b3 --- /dev/null +++ b/src/components/Screens/Auth/AgentDasboard.js @@ -0,0 +1,29 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable class-methods-use-this */ +import React, { Component } from 'react'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Button from 'react-bootstrap/Button'; + +class AgentDashboard extends Component { + render() { + return ( + + + + + + + + + + + Hello + + + ); + } +} + +export default AgentDashboard; diff --git a/src/components/Screens/Auth/AgentSignUp.js b/src/components/Screens/Auth/AgentSignUp.js new file mode 100644 index 0000000..842ba20 --- /dev/null +++ b/src/components/Screens/Auth/AgentSignUp.js @@ -0,0 +1,54 @@ +/* eslint-disable no-undef */ +/* eslint-disable linebreak-style */ +/* eslint-disable class-methods-use-this */ +/* eslint-disable no-unused-vars */ +import React, { Component } from 'react'; + +// Bootstrap +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; + +class SignUp extends Component { + render() { + return ( + + + +
+ + Company Name + + + + Country + + + + Phone Number + + + + Email address + + + + Password + + +
+ +
+
+ + + + ); + } +} + +export default SignUp; diff --git a/src/components/Screens/Auth/CustomerDashboard.js b/src/components/Screens/Auth/CustomerDashboard.js new file mode 100644 index 0000000..5d8f261 --- /dev/null +++ b/src/components/Screens/Auth/CustomerDashboard.js @@ -0,0 +1,37 @@ +/* eslint-disable no-unused-vars */ +import React, { Component, Fragment, Suspence } from 'react'; +import { Route } from 'react-router-dom'; +import { Container, Row, Col } from 'reactstrap'; + +const customer = React.lazy(() => import('../../Navigations/Sidedrawer/CustomerSidebar')); + +class CustomerDashboard extends Component { + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + this.state = {}; + } + + // eslint-disable-next-line class-methods-use-this + toggle(e) {} + + // eslint-disable-next-line class-methods-use-this + render() { + return ( + + + + + + + + + Hello + + + + ); + } +} +export default CustomerDashboard; diff --git a/src/components/Screens/Auth/Profile.js b/src/components/Screens/Auth/Profile.js new file mode 100644 index 0000000..e522b09 --- /dev/null +++ b/src/components/Screens/Auth/Profile.js @@ -0,0 +1,70 @@ +/* eslint-disable no-unused-vars */ +import React, { Component, Fragment } from 'react'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; + +class Profile extends Component { + // eslint-disable-next-line class-methods-use-this + render() { + return ( + + + + +
+
+

Profile

+
+
+
+
    +
  • + First Name: Broomy{' '} +
    • +
  • + Last Name: Clean +
    • +
  • + Email Address: broomyclean@broomy.com +
    • +
  • + Phone Number: 08070006900 +
    • +
  • + Address: cadastral zone wuse +
    • +
  • + Country: Nigeria +
    • +
+
+
+ Card image +
+
+
+
+

order

+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+

map

+
+
+
+ + + + + ); + } +} + +export default Profile; diff --git a/src/components/Screens/Auth/SignIn.js b/src/components/Screens/Auth/SignIn.js deleted file mode 100644 index 6280d68..0000000 --- a/src/components/Screens/Auth/SignIn.js +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable linebreak-style */ -/* eslint-disable no-unused-vars */ -/* eslint-disable class-methods-use-this */ -import React, { Component, Fragment } from 'react'; -import withStyles from '@material-ui/core/styles/withStyles'; -import history from '../../../history'; - -const styles = (theme) => ({ - ...theme.spreadthis -}); - -export class login extends Component { - render() { - return ( - -
This is the sign in page
- - - ); - } -} - -export default withStyles(styles)(login); diff --git a/src/components/Screens/Auth/Signup.js b/src/components/Screens/Auth/Signup.js new file mode 100644 index 0000000..73f3210 --- /dev/null +++ b/src/components/Screens/Auth/Signup.js @@ -0,0 +1,64 @@ +/* eslint-disable no-undef */ +/* eslint-disable linebreak-style */ +/* eslint-disable class-methods-use-this */ +/* eslint-disable no-unused-vars */ +import React, { Component } from 'react'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; + +class Signup extends Component { + render() { + return ( + + + +

signup

+ + + + +
+ + First Name + + + + Last Name + + + + Email address + + + + Country + + + + Phone Number + + + + Password + + +
+ +
+ Loading... +
+
+
+ + + + ); + } +} + +export default Signup; diff --git a/src/containers/LandingPage/index.js b/src/containers/LandingPage/index.js index e4c1a83..63b98b2 100644 --- a/src/containers/LandingPage/index.js +++ b/src/containers/LandingPage/index.js @@ -1,23 +1,114 @@ +/* eslint-disable class-methods-use-this */ +/* eslint-disable no-undef */ +/* eslint-disable max-len */ /* eslint-disable linebreak-style */ /* eslint-disable no-unused-vars */ -/* eslint-disable class-methods-use-this */ + import React, { Component, Fragment } from 'react'; -import withStyles from '@material-ui/core/styles/withStyles'; -import history from '../../history'; +import { Link } from 'react-router-dom'; -const styles = (theme) => ({ - ...theme.spreadthis -}); +// Bootstrap +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import Jumbotron from 'react-bootstrap/Jumbotron'; +import NavBar from '../../components/Navigations/NavBar/index'; +import './styles.css'; -export class LandingPage extends Component { +class LandingPage extends Component { render() { + const customer = ( + +
+ + Email address + + We'll never share your email with anyone else. + + + + Password + + + + + +
+ +
+
+ + ); + const admin = ( + +
+ + Email address + + We'll never share your email with anyone else. + + + + Password + + + + + +
+ +
+ Loading... +
+
+
+ + ); return ( -
This is Landing Page
- + + + + + +

Cleaner city initiative!

+

support Broomy in the cleaning of a community.

+

+ +

+ + + +
+

+ customer | admin +

+
+
{customer}
+
+
+ forgot password + click here + or + signup +
+
+ + + ); } } -export default withStyles(styles)(LandingPage); +export default LandingPage; diff --git a/src/containers/LandingPage/styles.css b/src/containers/LandingPage/styles.css index e69de29..34a9e3e 100644 --- a/src/containers/LandingPage/styles.css +++ b/src/containers/LandingPage/styles.css @@ -0,0 +1,16 @@ +.wrapper { + width: '1200'; + margin: '100px auto 0 auto'; + display: flex; + justify-content: center; + flex-direction: row; +} + +.columnWrapper { + flex-grow: 1; + flex-basis: 600; +} + +.input { + display: block; +} diff --git a/src/hoc/AppHeader.js b/src/hoc/AppHeader.js new file mode 100644 index 0000000..754eae9 --- /dev/null +++ b/src/hoc/AppHeader.js @@ -0,0 +1,100 @@ +// eslint-disable-next-line no-unused-vars +import React, { Fragment, useState } from 'react'; + +function AppHeader() { + const [isOpen, setIsOpen] = useState(false); + + const toggle = () => setIsOpen(!isOpen); + return ( + + + reactstrap + + + + + + + ); +} + +export default AppHeader; diff --git a/src/hoc/AppSidebar.js b/src/hoc/AppSidebar.js new file mode 100644 index 0000000..9b09890 --- /dev/null +++ b/src/hoc/AppSidebar.js @@ -0,0 +1,23 @@ +// eslint-disable-next-line no-unused-vars +import React, { Fragment } from 'react'; +// eslint-disable-next-line no-unused-vars +import { Nav, NavItem, NavLink } from 'reactstrap'; + +// eslint-disable-next-line no-unused-vars +const AppSidebar = ({ navConfig, ...props }) => { + return ( + + + + ); +}; + +export default AppSidebar; diff --git a/src/index.html b/src/index.html index 744d096..09cadee 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,8 @@ + +