Merge pull request #12 from aichner/improve-quality-ba1

Improve code quality to master

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-mdb-firebase-template",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "(EUPL-1.2)",
   "homepage": ".",
   "dependencies": {
     "firebase": "^7.2.0",
     "gh-pages": "^2.2.0",
+    "js-sha256": "^0.9.0",
     "mdbreact": "^4.25.5",
     "node-sass": "^4.13.0",
     "react-redux": "^7.1.1",

src/App.js

@@ -10,7 +10,7 @@ import { BrowserRouter as Router } from "react-router-dom";
  * Footer: Global Footer
  * Navbar: Global navigation bar
  */
-import { Footer, Navbar } from "./components/molecules";
+import { Footer, Navbar, CookieModal } from "./components/molecules";
 // Starts the page on top when reloaded or redirected
 import { ScrollToTop } from "./components/atoms";
 
@@ -20,6 +20,26 @@ import Routes from "./Routes";
 
 //#region > Components
 class App extends React.Component {
+  componentDidMount = () => {
+    this.checkCookies();
+  };
+
+  saveCookie = () => {
+    this.checkCookies();
+  };
+
+  checkCookies = () => {
+    // Create custom user id for tracking
+    let userId = localStorage.getItem("userId");
+
+    if (!userId) {
+      const sha256 = require("js-sha256");
+
+      userId = sha256.create();
+      localStorage.setItem("userId", userId);
+    }
+  };
+
   render() {
     return (
       <Router>
@@ -28,6 +48,7 @@ class App extends React.Component {
             <Navbar />
             <main>
               <Routes />
+              <CookieModal saveCookie={this.saveCookie} />
             </main>
             <Footer />
           </div>

src/Routes.js

@@ -1,3 +1,4 @@
+//#region > Imports
 //> React
 // Contains all the functionality necessary to define React components
 import React from "react";
@@ -14,7 +15,9 @@ import {
   LoginPage,
   ProfilePage,
 } from "./components/pages";
+//#endregion
 
+//#region > Components
 class Routes extends React.Component {
   render() {
     return (
@@ -36,8 +39,11 @@ class Routes extends React.Component {
     );
   }
 }
+//#endregion
 
+//#region > Exports
 export default Routes;
+//#endregion
 
 /**
  * SPDX-License-Identifier: (EUPL-1.2)

src/components/molecules/CookieModal/cookie.scss

@@ -0,0 +1,22 @@
+.cookie-modal {
+  .form-check-input[type="checkbox"].filled-in:checked + label:after,
+  label.btn input[type="checkbox"].filled-in:checked + label:after {
+    background-color: #1976d2;
+    border: 2px solid #1976d2;
+  }
+  .form-check-input[type="checkbox"]:disabled:checked + label:after,
+  label.btn input[type="checkbox"]:disabled:checked + label:after {
+    background-color: lighten(#1976d2, 35%);
+    border: 2px solid lighten(#1976d2, 35%);
+  }
+  .btn {
+    i {
+      margin-right: 0.3rem;
+    }
+  }
+}
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2020 Werbeagentur Christian Aichner
+ */

src/components/molecules/CookieModal/index.jsx

@@ -0,0 +1,146 @@
+//#region > Imports
+//> React
+// Contains all the functionality necessary to define React components
+import React from "react";
+
+//> MDB
+// "Material Design for Bootstrap" is a great UI design framework
+import {
+  MDBBtn,
+  MDBModal,
+  MDBModalBody,
+  MDBIcon,
+  MDBFormInline,
+  MDBRow,
+  MDBCol,
+  MDBInput,
+} from "mdbreact";
+
+//> CSS
+import "./cookie.scss";
+//#endregion
+
+//#region > Components
+class ModalPage extends React.Component {
+  state = {
+    modal1: localStorage.getItem("cookie") ? false : true,
+    essential: true,
+    statistics: false,
+    marketing: false,
+  };
+
+  checkBoxCheck(e) {
+    this.setState({ [e.target.name]: e.target.isChecked });
+  }
+
+  checkAll() {
+    this.setState({ essential: true, statistics: true, marketing: true }, () =>
+      this.save()
+    );
+  }
+
+  save() {
+    localStorage.setItem(
+      "cookie",
+      JSON.stringify({
+        essential: this.state.essential ? true : false,
+        statistics: this.state.statistics ? true : false,
+        marketing: this.state.marketing ? true : false,
+      })
+    );
+
+    this.setState({ modal1: false }, () => this.props.saveCookie());
+  }
+
+  toggle = (nr) => () => {
+    let modalNumber = "modal" + nr;
+
+    this.setState(
+      {
+        [modalNumber]: !this.state[modalNumber],
+      },
+      () => {
+        if (!localStorage.getItem("cookie")) {
+          localStorage.setItem("cookie", true);
+        }
+      }
+    );
+  };
+
+  render() {
+    return (
+      <MDBModal
+        isOpen={this.state.modal1}
+        toggle={this.toggle(1)}
+        disableFocusTrap={false}
+        keyboard={false}
+        className="cookie-modal"
+      >
+        <MDBModalBody className="text-center py-4">
+          <h2>Cookie Settings</h2>
+          <p className="text-muted">
+            We use cookies on our website to improve the user experience. Some
+            of them are essential for the operation of the website.
+          </p>
+          <div className="my-4">
+            <MDBFormInline className="d-flex justify-content-center">
+              <MDBInput
+                label="Essential"
+                filled
+                checked={this.state.essential}
+                disabled
+                type="checkbox"
+                id="cookieEssenziell"
+                containerClass="mr-5"
+              />
+              <MDBInput
+                label="Personalized experience"
+                filled
+                checked={this.state.marketing}
+                name="marketing"
+                color="primary"
+                type="checkbox"
+                id="cookieMarketing"
+                containerClass="mr-5"
+                onChange={(e) => this.checkBoxCheck(e)}
+              />
+              <MDBInput
+                label="Statistics"
+                filled
+                checked={this.state.statistics}
+                name="statistics"
+                type="checkbox"
+                id="cookieStatistiken"
+                containerClass="mr-5"
+                onChange={(e) => this.checkBoxCheck(e)}
+              />
+            </MDBFormInline>
+          </div>
+          <MDBRow className="justify-content-center align-items-center">
+            <MDBCol md="6">
+              <MDBBtn color="success" onClick={() => this.checkAll()}>
+                <MDBIcon icon="check-circle" />
+                Accept all
+              </MDBBtn>
+            </MDBCol>
+            <MDBCol md="6">
+              <MDBBtn color="white" onClick={() => this.save()}>
+                Save and close
+              </MDBBtn>
+            </MDBCol>
+          </MDBRow>
+        </MDBModalBody>
+      </MDBModal>
+    );
+  }
+}
+//#endregion
+
+//#region > Exports
+export default ModalPage;
+//#endregion
+
+/**
+ * SPDX-License-Identifier: (EUPL-1.2)
+ * Copyright © 2020 Werbeagentur Christian Aichner
+ */

src/components/molecules/index.js

@@ -2,10 +2,11 @@
 // Import all components to export them for easy access from parent components
 import Footer from "./Footer";
 import Navbar from "./Navbar";
+import CookieModal from "./CookieModal";
 //#endregion
 
 //#region > Exports
-export { Footer, Navbar };
+export { Footer, Navbar, CookieModal };
 //#endregion
 
 /**

src/components/pages/LoginPage/index.jsx

@@ -18,7 +18,6 @@ import {
   MDBRow,
   MDBCol,
   MDBAlert,
-  MDBInput,
   MDBBtn,
   MDBIcon,
 } from "mdbreact";

src/components/pages/ProfilePage/index.jsx

@@ -3,11 +3,7 @@
 // Contains all the functionality necessary to define React components
 import React from "react";
 // Router
-import { Link, Redirect, withRouter } from "react-router-dom";
-
-//> Additional modules
-// Firebase
-import firebase from "firebase";
+import { Redirect, withRouter } from "react-router-dom";
 
 //> Redux
 // Connect
@@ -33,7 +29,7 @@ class ProfilePage extends React.Component {
   state = {};
 
   render() {
-    const { auth, profile, users } = this.props;
+    const { auth, profile } = this.props;
     // Check if firebase has loaded profile data
     if (!profile.isLoaded) {
       return (

src/store/reducers/rootReducer.js

@@ -12,9 +12,10 @@ import { firestoreReducer } from "redux-firestore";
 import { firebaseReducer } from "react-redux-firebase";
 
 const rootReducer = combineReducers({
-  auth: authReducer,
   firestore: firestoreReducer,
-  firebase: firebaseReducer, // Authentication
+  firebase: firebaseReducer,
+  /* Authentication */
+  auth: authReducer,
 });
 
 export default rootReducer;