Uilanding

package.json

@@ -37,8 +37,10 @@
     "@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",

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);
+} */

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 (
+      <Fragment>
+        <Navbar bg="dark" variant="dark" expand="lg">
+          <Navbar.Brand href="#home">Broomy</Navbar.Brand>
+        </Navbar>
+      </Fragment>
+    );
+  }
+}
 
-export default (props) => (
-    <ul className={classes.Links}>
-        <NavigationItem link="/">Home which is same as Landing Page here</NavigationItem>
-        <NavigationItem link="/orders">If you wanna go to orders page</NavigationItem>
-        <NavigationItem link="/sign-in">If you wanna go to orders page</NavigationItem>
-    </ul>
-);
+export default Index;

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 (
+      <Fragment>
+        <Side items={items} />
+      </Fragment>
+    );
+  }
+}
+
+export default CustomerSidebar;

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 (
+      <div className="list-group" active={active}>
+        <button type="button" className="list-group-item list-group-item-action">
+          <Link to={this.props.path} onClick={handleClick}></Link>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default NavItem;

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 (
+    <Fragment>
+      <ListGroup variant="flush">
+        {
+        items.map(({
+          label, name, items: subItems, ...rest
+        }) => (
+          <ListGroup.Item style={{ paddingLeft: 18 }} key={name} button {...rest}>
+            {label}
+            {Array.isArray(subItems) ? (
+              <ListGroup>
+                {subItems.map((subItem) => (
+                  <ListGroup.Item key={subItem.name} button>
+                    {subItem.label}
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            ) : null}
+          </ListGroup.Item>
+        ))}
+      </ListGroup>
+    </Fragment>
+  );
+}

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 (
+//       <Col className="w-25">
+//         {
+//           /* 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 */
+//             <NavItem
+//               path={item.path}
+//               name={item.name}
+//               onItemClick={this.onItemClick}
+//               /* Simply passed an entire function to onClick prop */
+
+//               active={item.path === activePath}
+//               key={item.key}
+//             />
+//           ))
+//         }
+//       </Col>
+//     );
+//   }
+// }
+
+// export default withRouter(SideNav);

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 (
+      <Container>
+        <Row>
+          <Col className="w-25">
+            <Button href="#">my account</Button>
+            <Button href="#">pickups</Button>
+            <Button href="#">donate</Button>
+            <Button href="#">history</Button>
+            <Button href="#">support</Button>
+            <Button href="#">about</Button>
+          </Col>
+          <Col className="w-75">Hello</Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default AdminDashboard;

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 (
+      <Container>
+        <Row>
+          <Col className="mt-5">
+            <Form>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label>Email address</Form.Label>
+                <Form.Control type="email" placeholder="Enter email" />
+                <Form.Text className="text-muted">We'll never share your email with anyone else.</Form.Text>
+              </Form.Group>
+
+              <Form.Group controlId="formBasicPassword">
+                <Form.Label>Password</Form.Label>
+                <Form.Control type="password" placeholder="Password" />
+              </Form.Group>
+              <Form.Group controlId="formBasicCheckbox">
+                <Form.Check type="checkbox" label="Check me out" />
+              </Form.Group>
+              <div className="d-flex justify-content-center">
+                <Button variant="primary" type="submit">
+                  Submit
+                </Button>
+              </div>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default AdminLogin;

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 (
+      <Container>
+        <Row>
+          <Col className="w-25">
+            <Button href="#">my account</Button>
+            <Button href="#">pickups</Button>
+            <Button href="#">donate</Button>
+            <Button href="#">history</Button>
+            <Button href="#">support</Button>
+            <Button href="#">about</Button>
+          </Col>
+          <Col className="w-75">Hello</Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default AgentDashboard;

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 (
+      <Container>
+        <Row>
+          <Col className="mt-5">
+            <Form>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label>Company Name</Form.Label>
+                <Form.Control type="text" placeholder="Enter first name" />
+              </Form.Group>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label>Country</Form.Label>
+                <Form.Control type="text" placeholder="Enter location" />
+              </Form.Group>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label>Phone Number</Form.Label>
+                <Form.Control type="number" placeholder="Enter phone number" />
+              </Form.Group>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label>Email address</Form.Label>
+                <Form.Control type="email" placeholder="Enter email" />
+              </Form.Group>
+              <Form.Group controlId="formBasicPassword">
+                <Form.Label>Password</Form.Label>
+                <Form.Control type="password" placeholder="Password" />
+              </Form.Group>
+              <div className="d-flex justify-content-center">
+                <Button variant="primary" type="submit" className="mx-auto">
+                  Signup
+                </Button>
+              </div>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default SignUp;

src/components/Screens/Auth/CustomerDashboard.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+import React, { Component, Fragment } from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import CustomerSidebar from '../../Navigations/Sidedrawer/CustomerSidebar';
+
+class CustomerDashboard extends Component {
+  render() {
+    return (
+      <Fragment>
+        <Container className="mt-5">
+          <Row>
+            <Col className="w-25">
+              <CustomerSidebar />
+            </Col>
+            <Col className="w-75">Hello</Col>
+          </Row>
+        </Container>
+      </Fragment>
+    );
+  }
+}
+export default CustomerDashboard;