aboutsummaryrefslogtreecommitdiff
path: root/src/shared
diff options
context:
space:
mode:
authorIndrajith K L2019-12-12 19:31:50 +0530
committerIndrajith K L2019-12-12 19:31:50 +0530
commit8883eacd2a5e2f3f5637a6b71123dfcb2a64c3d5 (patch)
treefe0fb8f601f2272f9bf2a7d2b365c7812acb6e63 /src/shared
parentf41d980fd83ab7da5804efd8aa7e914e820797d6 (diff)
downloadreact-redux-saga-starter-8883eacd2a5e2f3f5637a6b71123dfcb2a64c3d5.tar.gz
react-redux-saga-starter-8883eacd2a5e2f3f5637a6b71123dfcb2a64c3d5.tar.bz2
react-redux-saga-starter-8883eacd2a5e2f3f5637a6b71123dfcb2a64c3d5.zip
:fire: :zap: Major Update
* Adds Actions, Redicers and Middlewares * Adds Http Service * Adds Cancel option for Http Service * Adds HOC's for API Loader, Sidebar and Headers * Adds Random key generator for Routes
Diffstat (limited to 'src/shared')
-rw-r--r--src/shared/footer.css13
-rw-r--r--src/shared/footer.hoc.js35
-rw-r--r--src/shared/header.hoc.js0
-rw-r--r--src/shared/header_footer.hoc.js39
-rw-r--r--src/shared/loader.css48
-rw-r--r--src/shared/loader.hoc.js16
-rw-r--r--src/shared/sidebar.css6
-rw-r--r--src/shared/sidebar.hoc.js36
8 files changed, 193 insertions, 0 deletions
diff --git a/src/shared/footer.css b/src/shared/footer.css
new file mode 100644
index 0000000..048b0c6
--- /dev/null
+++ b/src/shared/footer.css
@@ -0,0 +1,13 @@
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 95%;
+ height: 60px;
+ line-height: 60px;
+ background-color: #f5f5f5;
+}
+
+.footer>.container {
+ padding-right: 15px;
+ padding-left: 15px;
+} \ No newline at end of file
diff --git a/src/shared/footer.hoc.js b/src/shared/footer.hoc.js
new file mode 100644
index 0000000..535a52d
--- /dev/null
+++ b/src/shared/footer.hoc.js
@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import { connect } from "react-redux";
+import { compose } from "redux";
+import './footer.css';
+
+const Footer = (HocComponent) => {
+ return class FooterComponent extends Component {
+
+ render() {
+ return (
+ <React.Fragment>
+ <HocComponent {...this.props} />
+ <footer className="footer">
+ <div className="container">Footer</div>
+ </footer>
+
+ </React.Fragment>
+ );
+ }
+ }
+}
+
+
+const mapStateToProps = state => {
+ return {
+
+ };
+};
+
+const WithFooter = compose(
+ connect(mapStateToProps, null),
+ Footer
+)
+export default WithFooter; \ No newline at end of file
diff --git a/src/shared/header.hoc.js b/src/shared/header.hoc.js
deleted file mode 100644
index e69de29..0000000
--- a/src/shared/header.hoc.js
+++ /dev/null
diff --git a/src/shared/header_footer.hoc.js b/src/shared/header_footer.hoc.js
new file mode 100644
index 0000000..0c093a6
--- /dev/null
+++ b/src/shared/header_footer.hoc.js
@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import { connect } from "react-redux";
+import { compose } from "redux";
+
+const HeaderFooter = (HocComponent) => {
+ return class HeaderFooterComponent extends Component {
+
+ render() {
+ return (
+ <React.Fragment>
+ <nav className="nav">
+ <Link className="nav-link" to={"/dashboard"} >Dashboard</Link>
+ <Link className="nav-link" to={"/superadmin"} >Superadmin</Link>
+ <Link className="nav-link" to={"/admin"} >Admin</Link>
+ <Link className="nav-link" to={"/login"} >Login</Link>
+ </nav>
+ <HocComponent {...this.props} />
+ <footer className="footer">
+ <div className="container">Footer</div>
+ </footer>
+ </React.Fragment>
+ );
+ }
+ }
+}
+
+
+const mapStateToProps = state => {
+ return {
+
+ };
+};
+
+const WithHeaderFooter = compose(
+ connect(mapStateToProps, null),
+ HeaderFooter
+)
+export default WithHeaderFooter; \ No newline at end of file
diff --git a/src/shared/loader.css b/src/shared/loader.css
new file mode 100644
index 0000000..2ee47a2
--- /dev/null
+++ b/src/shared/loader.css
@@ -0,0 +1,48 @@
+.loader {
+ position: absolute;
+ z-index: 6;
+ top: 0px;
+ left: 0;
+ height: 4px;
+ width: 100%;
+ overflow: hidden;
+ background-color: #ddd;
+ }
+
+ .loader:before {
+ display: block;
+ position: absolute;
+ content: "";
+ left: -200px;
+ width: 200px;
+ height: 4px;
+ background-color: #ff8373;
+ animation: loading 2s linear infinite;
+ }
+
+ @keyframes loading {
+ from {
+ left: -200px;
+ width: 30%;
+ }
+
+ 50% {
+ width: 30%;
+ }
+
+ 70% {
+ width: 70%;
+ }
+
+ 80% {
+ left: 50%;
+ }
+
+ 95% {
+ left: 120%;
+ }
+
+ to {
+ left: 100%;
+ }
+ } \ No newline at end of file
diff --git a/src/shared/loader.hoc.js b/src/shared/loader.hoc.js
new file mode 100644
index 0000000..c60089e
--- /dev/null
+++ b/src/shared/loader.hoc.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import "./loader.css";
+const WithLoader = HocComponent => {
+ return function ({ ...props }) {
+ return (
+ <div className="loader-container">
+ {props.isLoading && (
+ <div className="loader"></div>
+ )}
+ <HocComponent {...props} />
+ </div>
+ );
+ };
+};
+
+export default WithLoader; \ No newline at end of file
diff --git a/src/shared/sidebar.css b/src/shared/sidebar.css
new file mode 100644
index 0000000..cfb3e02
--- /dev/null
+++ b/src/shared/sidebar.css
@@ -0,0 +1,6 @@
+.sidebar{
+ background: #cccc;
+ width: 92px;
+ height: calc(100vh);
+ position: absolute;
+} \ No newline at end of file
diff --git a/src/shared/sidebar.hoc.js b/src/shared/sidebar.hoc.js
new file mode 100644
index 0000000..30a18a3
--- /dev/null
+++ b/src/shared/sidebar.hoc.js
@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import { connect } from "react-redux";
+import { compose } from "redux";
+import './sidebar.css';
+
+const Sidebar = (HocComponent) => {
+ return class SidebarComponent extends Component {
+
+ render() {
+ return (
+ <React.Fragment>
+ <div className="sidebar">
+ Sidebar
+ </div>
+ <div className="content">
+ <HocComponent {...this.props} />
+ </div>
+ </React.Fragment>
+ );
+ }
+ }
+}
+
+
+const mapStateToProps = state => {
+ return {
+
+ };
+};
+
+const WithSidebar = compose(
+ connect(mapStateToProps, null),
+ Sidebar
+)
+export default WithSidebar; \ No newline at end of file