Merged PR 29: cleanup

.env

@@ -0,0 +1,2 @@
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=True

.env.production

@@ -0,0 +1,3 @@
+PUBLIC_URL=/cdn-admin/
+REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
+REACT_APP_ENABLE_TEMPLATE_CONTENT=False

.gitignore

@@ -22,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache

.prettierrc

@@ -2,5 +2,5 @@
   "tabWidth": 2,
   "singleQuote": false,
   "semi": true,
-  "trailingComma": "all"
+  "trailingComma": "none"
 }

LICENSE.txt

@@ -1,21 +0,0 @@
-The MIT License
-
-Copyright (c) 2019 Flatlogic LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

README.md

@@ -1,24 +1,18 @@
-# React Material Admin — Material-UI Dashboard Template
+# CDN Admin — CDN Administration application
 
 Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/).
-**No jQuery and Bootstrap!**
 
 **This version uses React 16.14.0, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)**
 
-[View Demo](https://flatlogic.com/templates/react-material-admin/demo) | [Download](https://github.com/flatlogic/react-material-admin/archive/master.zip) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)
+[View Demo](https://toodle.ddns.net/cdn-admin-demo) | [Download](https://dev.azure.com/tstanciu94/CDN) | [More projects](https://toodle.ddns.net/heimdall) | [Support forum](https://toodle.ddns.net/forum)
 
 [![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo)
 
-## Full Version
-
-This is a limited version of [**Full React Material Admin**](https://flatlogic.com/templates/react-material-admin-full/demo) with more components, pages and theme support.
-
 ## Features
 
 - React (**16.14.0**)
 - React Hooks
 - React Context
-- **No jQuery and Bootstrap!**
 - Mobile friendly layout (responsive)
 - Create-react-app under the hood
 - React Router v5

changelog.md

@@ -1,67 +0,0 @@
-# Changelog
-
-# [1.3.2]
-
-### Updated
-- Packages updated
-- Edited README.md
-
-# [1.3.1]
-
-### Updated
-- Added link to flatlogic on login and register pages
-
-# [1.3.0]
-
-### Updated
-- Update packages
-
-### Fixed
-- Header button on md adjusting
-- Dashboard page make more responsive
-- Notification page fix
-- Tables page fix TableBody paddings
-
-# [1.2.3]
-
-### Updated
-- Fixed security vulnerabilities in dependencies
-
-# [1.2.2]
-
-### Updated
-- Packages updated
-
-# [1.2.1]
-
-### Updated
-- Packages updated
-
-### Fixed
-- Sign up name type of input
-- Dot component size prop
-- Performance errors
-
-# [1.2.0]
-
-### Updated
-- Packages update
-- Link to Full version
-
-### Fixed
-- User login state improvements
-
-## [1.1.0]
-
-### New Feactures
-
-- React v16.8.6
-- React Router v5
-- new React Hooks
-- Material UI v4.3
-
-Bug fixes
-
-## [1.0.0]
-
-Initial version of the project

docs/asset-manifest.json

@@ -1,25 +0,0 @@
-{
-  "files": {
-    "main.js": "./static/js/main.fc3e922e.chunk.js",
-    "main.js.map": "./static/js/main.fc3e922e.chunk.js.map",
-    "runtime-main.js": "./static/js/runtime-main.4862f1b0.js",
-    "runtime-main.js.map": "./static/js/runtime-main.4862f1b0.js.map",
-    "static/css/2.637eb612.chunk.css": "./static/css/2.637eb612.chunk.css",
-    "static/js/2.af6eef2b.chunk.js": "./static/js/2.af6eef2b.chunk.js",
-    "static/js/2.af6eef2b.chunk.js.map": "./static/js/2.af6eef2b.chunk.js.map",
-    "index.html": "./index.html",
-    "precache-manifest.9910cad913c1899724ce0a968a9630a0.js": "./precache-manifest.9910cad913c1899724ce0a968a9630a0.js",
-    "service-worker.js": "./service-worker.js",
-    "static/css/2.637eb612.chunk.css.map": "./static/css/2.637eb612.chunk.css.map",
-    "static/js/2.af6eef2b.chunk.js.LICENSE.txt": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt",
-    "static/media/font-awesome.min.css": "./static/media/fontawesome-webfont.fee66e71.woff",
-    "static/media/google.svg": "./static/media/google.09aea0f5.svg",
-    "static/media/logo.svg": "./static/media/logo.3d432ca2.svg"
-  },
-  "entrypoints": [
-    "static/js/runtime-main.4862f1b0.js",
-    "static/css/2.637eb612.chunk.css",
-    "static/js/2.af6eef2b.chunk.js",
-    "static/js/main.fc3e922e.chunk.js"
-  ]
-}

docs/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./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="./manifest.json"/><title>React Material Admin</title><meta name="description" content="React Material Admin is a React Template built with Material-UI"><meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard"><meta name="author" content="Flatlogic LLC."><link href="./static/css/2.637eb612.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([])</script><script src="./static/js/2.af6eef2b.chunk.js"></script><script src="./static/js/main.fc3e922e.chunk.js"></script></body></html>

docs/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React Material Admin",
-  "name": "React Material Admin is a React Template built with Material-UI",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#536DFE",
-  "background_color": "#ffffff"
-}

docs/precache-manifest.9910cad913c1899724ce0a968a9630a0.js

@@ -1,54 +0,0 @@
-self.__precacheManifest = (self.__precacheManifest || []).concat([
-  {
-    "revision": "e5348224acfeb02d7e11ea3c1731985e",
-    "url": "./index.html"
-  },
-  {
-    "revision": "b12e029207b94b413809",
-    "url": "./static/css/2.637eb612.chunk.css"
-  },
-  {
-    "revision": "b12e029207b94b413809",
-    "url": "./static/js/2.af6eef2b.chunk.js"
-  },
-  {
-    "revision": "7d02737b1000ff1e4aedf1ef380f6e7b",
-    "url": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt"
-  },
-  {
-    "revision": "41a71acbec3f321f5a82",
-    "url": "./static/js/main.fc3e922e.chunk.js"
-  },
-  {
-    "revision": "f6f2b74c08f9ec6d372d",
-    "url": "./static/js/runtime-main.4862f1b0.js"
-  },
-  {
-    "revision": "674f50d287a8c48dc19ba404d20fe713",
-    "url": "./static/media/fontawesome-webfont.674f50d2.eot"
-  },
-  {
-    "revision": "912ec66d7572ff821749319396470bde",
-    "url": "./static/media/fontawesome-webfont.912ec66d.svg"
-  },
-  {
-    "revision": "af7ae505a9eed503f8b8e6982036873e",
-    "url": "./static/media/fontawesome-webfont.af7ae505.woff2"
-  },
-  {
-    "revision": "b06871f281fee6b241d60582ae9369b9",
-    "url": "./static/media/fontawesome-webfont.b06871f2.ttf"
-  },
-  {
-    "revision": "fee66e712a8a08eef5805a46892932ad",
-    "url": "./static/media/fontawesome-webfont.fee66e71.woff"
-  },
-  {
-    "revision": "09aea0f59807f6f4f66af7f5719cba9e",
-    "url": "./static/media/google.09aea0f5.svg"
-  },
-  {
-    "revision": "3d432ca2badb7e0130b379f9162b99b1",
-    "url": "./static/media/logo.3d432ca2.svg"
-  }
-]);

docs/service-worker.js

@@ -1,39 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-importScripts(
-  "./precache-manifest.9910cad913c1899724ce0a968a9630a0.js"
-);
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-
-workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
-  
-  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
-});

docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt

@@ -1,102 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
-  * $script.js JS loader & dependency manager
-  * https://github.com/ded/script.js
-  * (c) Dustin Diaz 2014 | License MIT
-  */
-
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-/*!
- * ApexCharts v3.20.0
- * (c) 2018-2020 Juned Chhipa
- * Released under the MIT License.
- */
-
-/*! decimal.js-light v2.5.0 https://github.com/MikeMcl/decimal.js-light/LICENCE */
-
-/*! svg.draggable.js - v2.2.2 - 2019-01-08
-* https://github.com/svgdotjs/svg.draggable.js
-* Copyright (c) 2019 Wout Fierens; Licensed MIT */
-
-/*! svg.filter.js - v2.0.2 - 2016-02-24
-* https://github.com/wout/svg.filter.js
-* Copyright (c) 2016 Wout Fierens; Licensed MIT */
-
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
-/** @license React v0.19.1
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**!
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.16.1-lts
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */

docs/static/js/runtime-main.4862f1b0.js

@@ -1,2 +0,0 @@
-!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([]);
-//# sourceMappingURL=runtime-main.4862f1b0.js.map

docs/static/media/google.09aea0f5.svg

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
-	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
-	C103.821,274.792,107.225,292.797,113.47,309.408z"/>
-<path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
-	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
-	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/>
-<path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
-	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
-	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/>
-<path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
-	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
-	C318.115,0,375.068,22.126,419.404,58.936z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

docs/static/media/logo.3d432ca2.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
-    <title>logo_white</title>
-    <desc>Created with Sketch.</desc>
-    <g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
-            <path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
-            <path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
-            <path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
-        </g>
-    </g>
-</svg>

package-lock.json

@@ -10469,9 +10469,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
+      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -15869,9 +15869,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "0.7.23",
+      "version": "0.7.28",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
-      "integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA=="
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
     },
     "unbox-primitive": {
       "version": "1.0.1",

public/index.html

@@ -22,12 +22,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Material Admin</title>
+    <title>CDN Admin</title>
-    <meta name="description" content="React Material Admin is a React Template built with Material-UI">
+    <meta name="description" content="CDN administration application" />
-    <meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard">
+    <meta name="keywords" content="CDN, cdn admin" />
-    <meta name="author" content="Flatlogic LLC.">
+    <meta name="author" content="Tudor Stanciu" />
   </head>
-  <body style="font-family: 'Roboto', sans-serif;">
+  <body style="font-family: 'Roboto', sans-serif">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React Material Admin",
+  "short_name": "CDN Admin",
-  "name": "React Material Admin is a React Template built with Material-UI",
+  "name": "CDN administration application",
   "icons": [
     {
       "src": "favicon.ico",

src/components/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
 
 // components
-import Layout from "./Layout";
+import Layout from "./Layout/Layout";
 
 // pages
 import Error from "../pages/error";
@@ -16,7 +16,7 @@ export default function App() {
   var { isAuthenticated } = useUserState();
 
   return (
-    <HashRouter>
+    <HashRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
         <Route
@@ -31,13 +31,11 @@ export default function App() {
     </HashRouter>
   );
 
-  // #######################################################################
-
   function PrivateRoute({ component, ...rest }) {
     return (
       <Route
         {...rest}
-        render={props =>
+        render={(props) =>
           isAuthenticated ? (
             React.createElement(component, props)
           ) : (
@@ -45,8 +43,8 @@ export default function App() {
               to={{
                 pathname: "/login",
                 state: {
-                  from: props.location,
+                  from: props.location
-                },
+                }
               }}
             />
           )
@@ -59,11 +57,11 @@ export default function App() {
     return (
       <Route
         {...rest}
-        render={props =>
+        render={(props) =>
           isAuthenticated ? (
             <Redirect
               to={{
-                pathname: "/",
+                pathname: "/"
               }}
             />
           ) : (

src/components/Header/Header.js

@@ -6,8 +6,7 @@ import {
   InputBase,
   Menu,
   MenuItem,
-  Fab,
+  Fab
-  Link
 } from "@material-ui/core";
 import {
   Menu as MenuIcon,
@@ -16,7 +15,7 @@ import {
   Person as AccountIcon,
   Search as SearchIcon,
   Send as SendIcon,
-  ArrowBack as ArrowBackIcon,
+  MenuOpen as MenuOpenIcon
 } from "@material-ui/icons";
 import classNames from "classnames";
 
@@ -24,7 +23,7 @@ import classNames from "classnames";
 import useStyles from "./styles";
 
 // components
-import { Badge, Typography, Button } from "../Wrappers";
+import { Badge, Typography } from "../Wrappers";
 import Notification from "../Notification/Notification";
 import UserAvatar from "../UserAvatar/UserAvatar";
 
@@ -32,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
 import {
   useLayoutState,
   useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";
 import { useUserDispatch, signOut } from "../../context/UserContext";
 
@@ -42,29 +41,29 @@ const messages = [
     variant: "warning",
     name: "Jane Hew",
     message: "Hey! How is it going?",
-    time: "9:32",
+    time: "9:32"
   },
   {
     id: 1,
     variant: "success",
     name: "Lloyd Brown",
     message: "Check out my new Dashboard",
-    time: "9:18",
+    time: "9:18"
   },
   {
     id: 2,
     variant: "primary",
     name: "Mark Winstein",
     message: "I want rearrange the appointment",
-    time: "9:15",
+    time: "9:15"
   },
   {
     id: 3,
     variant: "secondary",
     name: "Liana Dutti",
     message: "Good news from sale department",
-    time: "9:09",
+    time: "9:09"
-  },
+  }
 ];
 
 const notifications = [
@@ -73,20 +72,20 @@ const notifications = [
     id: 1,
     color: "success",
     type: "info",
-    message: "What is the best way to get ...",
+    message: "What is the best way to get ..."
   },
   {
     id: 2,
     color: "secondary",
     type: "notification",
-    message: "This is just a simple notification",
+    message: "This is just a simple notification"
   },
   {
     id: 3,
     color: "primary",
     type: "e-commerce",
-    message: "12 new orders has arrived today",
+    message: "12 new orders has arrived today"
-  },
+  }
 ];
 
 export default function Header(props) {
@@ -113,42 +112,35 @@ export default function Header(props) {
           onClick={() => toggleSidebar(layoutDispatch)}
           className={classNames(
             classes.headerMenuButtonSandwich,
-            classes.headerMenuButtonCollapse,
+            classes.headerMenuButtonCollapse
           )}
         >
           {layoutState.isSidebarOpened ? (
-            <ArrowBackIcon
+            <MenuOpenIcon
               classes={{
-                root: classNames(
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
               }}
             />
           ) : (
             <MenuIcon
               classes={{
-                root: classNames(
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
               }}
             />
           )}
         </IconButton>
         <Typography variant="h6" weight="medium" className={classes.logotype}>
-          React Material Admin
+          CDN Admin
         </Typography>
         <div className={classes.grow} />
-        <Button component={Link} href="https://flatlogic.com/templates/react-material-admin-full" variant={"outlined"} color={"secondary"} className={classes.purchaseBtn}>Unlock full version</Button>
         <div
           className={classNames(classes.search, {
-            [classes.searchFocused]: isSearchOpen,
+            [classes.searchFocused]: isSearchOpen
           })}
         >
           <div
             className={classNames(classes.searchIcon, {
-              [classes.searchIconOpened]: isSearchOpen,
+              [classes.searchIconOpened]: isSearchOpen
             })}
             onClick={() => setSearchOpen(!isSearchOpen)}
           >
@@ -158,7 +150,7 @@ export default function Header(props) {
             placeholder="Search…"
             classes={{
               root: classes.inputRoot,
-              input: classes.inputInput,
+              input: classes.inputInput
             }}
           />
         </div>
@@ -166,7 +158,7 @@ export default function Header(props) {
           color="inherit"
           aria-haspopup="true"
           aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
             setNotificationsMenu(e.currentTarget);
             setIsNotificationsUnread(false);
           }}
@@ -183,7 +175,7 @@ export default function Header(props) {
           color="inherit"
           aria-haspopup="true"
           aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
             setMailMenu(e.currentTarget);
             setIsMailsUnread(false);
           }}
@@ -201,7 +193,7 @@ export default function Header(props) {
           color="inherit"
           className={classes.headerMenuButton}
           aria-controls="profile-menu"
-          onClick={e => setProfileMenu(e.currentTarget)}
+          onClick={(e) => setProfileMenu(e.currentTarget)}
         >
           <AccountIcon classes={{ root: classes.headerIcon }} />
         </IconButton>
@@ -227,7 +219,7 @@ export default function Header(props) {
               {messages.length} New Messages
             </Typography>
           </div>
-          {messages.map(message => (
+          {messages.map((message) => (
             <MenuItem key={message.id} className={classes.messageNotification}>
               <div className={classes.messageNotificationSide}>
                 <UserAvatar color={message.variant} name={message.name} />
@@ -238,7 +230,7 @@ export default function Header(props) {
               <div
                 className={classNames(
                   classes.messageNotificationSide,
-                  classes.messageNotificationBodySide,
+                  classes.messageNotificationBodySide
                 )}
               >
                 <Typography weight="medium" gutterBottom>
@@ -268,7 +260,7 @@ export default function Header(props) {
           className={classes.headerMenu}
           disableAutoFocusItem
         >
-          {notifications.map(notification => (
+          {notifications.map((notification) => (
             <MenuItem
               key={notification.id}
               onClick={() => setNotificationsMenu(null)}
@@ -303,7 +295,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Profile
@@ -311,7 +303,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Tasks
@@ -319,7 +311,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Messages

src/components/Header/HeaderView.js

@@ -1,456 +0,0 @@
-import React from "react";
-import {
-  AppBar,
-  Toolbar,
-  IconButton,
-  InputBase,
-  Menu,
-  MenuItem,
-  Fab,
-  withStyles
-} from "@material-ui/core";
-import {
-  Menu as MenuIcon,
-  MailOutline as MailIcon,
-  NotificationsNone as NotificationsIcon,
-  Person as AccountIcon,
-  Search as SearchIcon,
-  Send as SendIcon,
-  ArrowBack as ArrowBackIcon
-} from "@material-ui/icons";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import classNames from "classnames";
-
-import { Badge, Typography } from "../Wrappers";
-import Notification from "../Notification";
-import UserAvatar from "../UserAvatar";
-
-const messages = [
-  {
-    id: 0,
-    variant: "warning",
-    name: "Jane Hew",
-    message: "Hey! How is it going?",
-    time: "9:32"
-  },
-  {
-    id: 1,
-    variant: "success",
-    name: "Lloyd Brown",
-    message: "Check out my new Dashboard",
-    time: "9:18"
-  },
-  {
-    id: 2,
-    variant: "primary",
-    name: "Mark Winstein",
-    message: "I want rearrange the appointment",
-    time: "9:15"
-  },
-  {
-    id: 3,
-    variant: "secondary",
-    name: "Liana Dutti",
-    message: "Good news from sale department",
-    time: "9:09"
-  }
-];
-
-const notifications = [
-  { id: 0, color: "warning", message: "Check out this awesome ticket" },
-  {
-    id: 1,
-    color: "success",
-    type: "info",
-    message: "What is the best way to get ..."
-  },
-  {
-    id: 2,
-    color: "secondary",
-    type: "notification",
-    message: "This is just a simple notification"
-  },
-  {
-    id: 3,
-    color: "primary",
-    type: "e-commerce",
-    message: "12 new orders has arrived today"
-  }
-];
-
-const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
-  <AppBar position="fixed" className={classes.appBar}>
-    <Toolbar className={classes.toolbar}>
-      <IconButton
-        color="inherit"
-        onClick={toggleSidebar}
-        className={classNames(
-          classes.headerMenuButton,
-          classes.headerMenuButtonCollapse
-        )}
-      >
-        {isSidebarOpened ? (
-          <ArrowBackIcon
-            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse)
-            }}
-          />
-        ) : (
-          <MenuIcon
-            classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse)
-            }}
-          />
-        )}
-      </IconButton>
-      <Typography variant="h6" weight="medium" className={classes.logotype}>React Material Admin</Typography>
-      <div className={classes.grow} />
-      <div
-        className={classNames(classes.search, {
-          [classes.searchFocused]: props.isSearchOpen
-        })}
-      >
-        <div
-          className={classNames(classes.searchIcon, {
-            [classes.searchIconOpened]: props.isSearchOpen
-          })}
-          onClick={props.toggleSearch}
-        >
-          <SearchIcon classes={{ root: classes.headerIcon }} />
-        </div>
-        <InputBase
-          placeholder="Search…"
-          classes={{
-            root: classes.inputRoot,
-            input: classes.inputInput
-          }}
-        />
-      </div>
-      <IconButton
-        color="inherit"
-        aria-haspopup="true"
-        aria-controls="mail-menu"
-        onClick={props.openNotificationsMenu}
-        className={classes.headerMenuButton}
-      >
-        <Badge
-          badgeContent={
-            props.isNotificationsUnread ? notifications.length : null
-          }
-          colortheme="warning"
-        >
-          <NotificationsIcon classes={{ root: classes.headerIcon }} />
-        </Badge>
-      </IconButton>
-      <IconButton
-        color="inherit"
-        aria-haspopup="true"
-        aria-controls="mail-menu"
-        onClick={props.openMailMenu}
-        className={classes.headerMenuButton}
-      >
-        <Badge
-          badgeContent={props.isMailsUnread ? messages.length : null}
-          color="secondary"
-        >
-          <MailIcon classes={{ root: classes.headerIcon }} />
-        </Badge>
-      </IconButton>
-      <IconButton
-        aria-haspopup="true"
-        color="inherit"
-        className={classes.headerMenuButton}
-        aria-controls="profile-menu"
-        onClick={props.openProfileMenu}
-      >
-        <AccountIcon classes={{ root: classes.headerIcon }} />
-      </IconButton>
-      <Menu
-        id="mail-menu"
-        open={Boolean(props.mailMenu)}
-        anchorEl={props.mailMenu}
-        onClose={props.closeMailMenu}
-        MenuListProps={{ className: classes.headerMenuList }}
-        className={classes.headerMenu}
-        classes={{ paper: classes.profileMenu }}
-        disableAutoFocusItem
-      >
-        <div className={classes.profileMenuUser}>
-          <Typography variant="h4" weight="medium">
-            New Messages
-          </Typography>
-          <Typography
-            className={classes.profileMenuLink}
-            component="a"
-            color="secondary"
-          >
-            {messages.length} New Messages
-          </Typography>
-        </div>
-        {messages.map(message => (
-          <MenuItem key={message.id} className={classes.messageNotification}>
-            <div className={classes.messageNotificationSide}>
-              <UserAvatar color={message.variant} name={message.name} />
-              <Typography size="sm" color="textSecondary">
-                {message.time}
-              </Typography>
-            </div>
-            <div
-              className={classNames(
-                classes.messageNotificationSide,
-                classes.messageNotificationBodySide
-              )}
-            >
-              <Typography weight="medium" gutterBottom>
-                {message.name}
-              </Typography>
-              <Typography color="textSecondary">{message.message}</Typography>
-            </div>
-          </MenuItem>
-        ))}
-        <Fab
-          variant="extended"
-          color="primary"
-          aria-label="Add"
-          className={classes.sendMessageButton}
-        >
-          Send New Message
-          <SendIcon className={classes.sendButtonIcon} />
-        </Fab>
-      </Menu>
-      <Menu
-        id="notifications-menu"
-        open={Boolean(props.notificationsMenu)}
-        anchorEl={props.notificationsMenu}
-        onClose={props.closeNotificationsMenu}
-        className={classes.headerMenu}
-        disableAutoFocusItem
-      >
-        {notifications.map(notification => (
-          <MenuItem
-            key={notification.id}
-            onClick={props.closeNotificationsMenu}
-            className={classes.headerMenuItem}
-          >
-            <Notification {...notification} typographyVariant="inherit" />
-          </MenuItem>
-        ))}
-      </Menu>
-      <Menu
-        id="profile-menu"
-        open={Boolean(props.profileMenu)}
-        anchorEl={props.profileMenu}
-        onClose={props.closeProfileMenu}
-        className={classes.headerMenu}
-        classes={{ paper: classes.profileMenu }}
-        disableAutoFocusItem
-      >
-        <div className={classes.profileMenuUser}>
-          <Typography variant="h4" weight="medium">
-            John Smith
-          </Typography>
-          <Typography
-            className={classes.profileMenuLink}
-            component="a"
-            color="primary"
-            href="https://flatlogic.com"
-          >
-            Flalogic.com
-          </Typography>
-        </div>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Profile
-        </MenuItem>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Tasks
-        </MenuItem>
-        <MenuItem
-          className={classNames(
-            classes.profileMenuItem,
-            classes.headerMenuItem
-          )}
-        >
-          <AccountIcon className={classes.profileMenuIcon} /> Messages
-        </MenuItem>
-        <div className={classes.profileMenuUser}>
-          <Typography
-            className={classes.profileMenuLink}
-            color="primary"
-            onClick={props.signOut}
-          >
-            Sign Out
-          </Typography>
-        </div>
-      </Menu>
-    </Toolbar>
-  </AppBar>
-);
-
-const styles = theme => ({
-  logotype: {
-    color: "white",
-    marginLeft: theme.spacing.unit * 2.5,
-    marginRight: theme.spacing.unit * 2.5,
-    fontWeight: 500,
-    fontSize: 18,
-    whiteSpace: "nowrap",
-    [theme.breakpoints.down("xs")]: {
-      display: "none"
-    }
-  },
-  appBar: {
-    width: "100vw",
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    })
-  },
-  toolbar: {
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2
-  },
-  hide: {
-    display: "none"
-  },
-  grow: {
-    flexGrow: 1
-  },
-  search: {
-    position: "relative",
-    borderRadius: 25,
-    paddingLeft: theme.spacing.unit * 2.5,
-    width: 36,
-    backgroundColor: fade(theme.palette.common.black, 0),
-    transition: theme.transitions.create(["background-color", "width"]),
-    "&:hover": {
-      cursor: "pointer",
-      backgroundColor: fade(theme.palette.common.black, 0.08)
-    }
-  },
-  searchFocused: {
-    backgroundColor: fade(theme.palette.common.black, 0.08),
-    width: "100%",
-    [theme.breakpoints.up("md")]: {
-      width: 250
-    }
-  },
-  searchIcon: {
-    width: 36,
-    right: 0,
-    height: "100%",
-    position: "absolute",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: theme.transitions.create("right"),
-    "&:hover": {
-      cursor: "pointer"
-    }
-  },
-  searchIconOpened: {
-    right: theme.spacing.unit * 1.25
-  },
-  inputRoot: {
-    color: "inherit",
-    width: "100%"
-  },
-  inputInput: {
-    height: 36,
-    padding: 0,
-    paddingRight: 36 + theme.spacing.unit * 1.25,
-    width: "100%"
-  },
-  messageContent: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  headerMenu: {
-    marginTop: theme.spacing.unit * 7
-  },
-  headerMenuList: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  headerMenuItem: {
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.primary.main,
-      color: "white"
-    }
-  },
-  headerMenuButton: {
-    marginLeft: theme.spacing.unit * 2,
-    padding: theme.spacing.unit / 2
-  },
-  headerMenuButtonCollapse: {
-    marginRight: theme.spacing.unit * 2
-  },
-  headerIcon: {
-    fontSize: 28,
-    color: "rgba(255, 255, 255, 0.35)"
-  },
-  headerIconCollapse: {
-    color: "white"
-  },
-  profileMenu: {
-    minWidth: 265
-  },
-  profileMenuUser: {
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.spacing.unit * 2
-  },
-  profileMenuItem: {
-    color: theme.palette.text.hint
-  },
-  profileMenuIcon: {
-    marginRight: theme.spacing.unit * 2,
-    color: theme.palette.text.hint
-  },
-  profileMenuLink: {
-    fontSize: 16,
-    textDecoration: "none",
-    "&:hover": {
-      cursor: "pointer"
-    }
-  },
-  messageNotification: {
-    height: "auto",
-    display: "flex",
-    alignItems: "center",
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.background.light
-    }
-  },
-  messageNotificationSide: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    marginRight: theme.spacing.unit * 2
-  },
-  messageNotificationBodySide: {
-    alignItems: "flex-start",
-    marginRight: 0
-  },
-  sendMessageButton: {
-    margin: theme.spacing.unit * 4,
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    textTransform: "none"
-  },
-  sendButtonIcon: {
-    marginLeft: theme.spacing.unit * 2
-  }
-});
-
-export default withStyles(styles)(Header);

src/components/Header/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Header",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Header.js"
-}

src/components/Layout/Content.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { Route, Switch, Redirect } from "react-router-dom";
+import classnames from "classnames";
+
+// pages
+import Dashboard from "../../pages/dashboard/Dashboard";
+import Typography from "../../pages/typography/Typography";
+import Notifications from "../../pages/notifications/Notifications";
+import Maps from "../../pages/maps/Maps";
+import Tables from "../../pages/tables/Tables";
+import Icons from "../../pages/icons/Icons";
+import Charts from "../../pages/charts/Charts";
+import ContentFooter from "./ContentFooter";
+
+// context
+import { useLayoutState } from "../../context/LayoutContext";
+
+// styles
+import useStyles from "./styles";
+
+const Content = () => {
+  // global
+  var layoutState = useLayoutState();
+  var classes = useStyles();
+
+  return (
+    <div
+      className={classnames(classes.content, {
+        [classes.contentShift]: layoutState.isSidebarOpened
+      })}
+    >
+      <div className={classes.fakeToolbar} />
+      <Switch>
+        <Route path="/app/dashboard" component={Dashboard} />
+        <Route path="/app/typography" component={Typography} />
+        <Route path="/app/tables" component={Tables} />
+        <Route path="/app/notifications" component={Notifications} />
+        <Route
+          exact
+          path="/app/ui"
+          render={() => <Redirect to="/app/ui/icons" />}
+        />
+        <Route path="/app/ui/maps" component={Maps} />
+        <Route path="/app/ui/icons" component={Icons} />
+        <Route path="/app/ui/charts" component={Charts} />
+      </Switch>
+      <ContentFooter />
+    </div>
+  );
+};
+
+export default Content;

src/components/Layout/ContentFooter.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { Box, IconButton, Link } from "@material-ui/core";
+import Icon from "@mdi/react";
+
+//icons
+import {
+  mdiFacebook as FacebookIcon,
+  mdiTwitter as TwitterIcon,
+  mdiGithub as GithubIcon
+} from "@mdi/js";
+
+// styles
+import useStyles from "./styles";
+
+const ContentFooter = () => {
+  var classes = useStyles();
+
+  return (
+    <Box
+      mt={5}
+      width={"100%"}
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent="space-between"
+    >
+      <div>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Toodle
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          About Us
+        </Link>
+        <Link
+          color={"primary"}
+          href={"https://toodle.ddns.net/heimdall"}
+          target={"_blank"}
+          className={classes.link}
+        >
+          Blog
+        </Link>
+      </div>
+      <div>
+        <Link href={"https://www.facebook.com"} target={"_blank"}>
+          <IconButton aria-label="facebook">
+            <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://twitter.com"} target={"_blank"}>
+          <IconButton aria-label="twitter">
+            <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+        <Link href={"https://dev.azure.com/tstanciu94"} target={"_blank"}>
+          <IconButton aria-label="github" style={{ marginRight: -12 }}>
+            <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
+          </IconButton>
+        </Link>
+      </div>
+    </Box>
+  );
+};
+
+export default ContentFooter;

src/components/Layout/Layout.js

@@ -1,147 +1,23 @@
 import React from "react";
-import {
+import { withRouter } from "react-router-dom";
-  Route,
-  Switch,
-  Redirect,
-  withRouter,
-} from "react-router-dom";
-import classnames from "classnames";
-import {Box, IconButton, Link} from '@material-ui/core'
-import Icon from '@mdi/react'
 
-//icons
+// components
-import {
+import Header from "../Header/Header";
-  mdiFacebook as FacebookIcon,
+import Sidebar from "../Sidebar";
-  mdiTwitter as TwitterIcon,
+import Content from "./Content";
-  mdiGithub as GithubIcon,
-} from '@mdi/js'
 
 // styles
 import useStyles from "./styles";
 
-// components
-import Header from "../Header";
-import Sidebar from "../Sidebar";
-
-// pages
-import Dashboard from "../../pages/dashboard";
-import Typography from "../../pages/typography";
-import Notifications from "../../pages/notifications";
-import Maps from "../../pages/maps";
-import Tables from "../../pages/tables";
-import Icons from "../../pages/icons";
-import Charts from "../../pages/charts";
-
-// context
-import { useLayoutState } from "../../context/LayoutContext";
-
 function Layout(props) {
   var classes = useStyles();
 
-  // global
-  var layoutState = useLayoutState();
-
   return (
     <div className={classes.root}>
       <>
         <Header history={props.history} />
         <Sidebar />
-          <div
+        <Content />
-            className={classnames(classes.content, {
-              [classes.contentShift]: layoutState.isSidebarOpened,
-            })}
-          >
-            <div className={classes.fakeToolbar} />
-            <Switch>
-              <Route path="/app/dashboard" component={Dashboard} />
-              <Route path="/app/typography" component={Typography} />
-              <Route path="/app/tables" component={Tables} />
-              <Route path="/app/notifications" component={Notifications} />
-              <Route
-                exact
-                path="/app/ui"
-                render={() => <Redirect to="/app/ui/icons" />}
-              />
-              <Route path="/app/ui/maps" component={Maps} />
-              <Route path="/app/ui/icons" component={Icons} />
-              <Route path="/app/ui/charts" component={Charts} />
-            </Switch>
-            <Box
-              mt={5}
-              width={"100%"}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent="space-between"
-            >
-              <div>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  Flatlogic
-                </Link>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/about'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  About Us
-                </Link>
-                <Link
-                  color={'primary'}
-                  href={'https://flatlogic.com/blog'}
-                  target={'_blank'}
-                  className={classes.link}
-                >
-                  Blog
-                </Link>
-              </div>
-              <div>
-                <Link
-                  href={'https://www.facebook.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton aria-label="facebook">
-                    <Icon
-                      path={FacebookIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-                <Link
-                  href={'https://twitter.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton aria-label="twitter">
-                    <Icon
-                      path={TwitterIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-                <Link
-                  href={'https://github.com/flatlogic'}
-                  target={'_blank'}
-                >
-                  <IconButton
-                    aria-label="github"
-                    style={{marginRight: -12}}
-                  >
-                    <Icon
-                      path={GithubIcon}
-                      size={1}
-                      color="#6E6E6E99"
-                    />
-                  </IconButton>
-                </Link>
-              </div>
-            </Box>
-          </div>
       </>
     </div>
   );

src/components/Layout/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Layout",
-  "version": "1.0.0",
-  "private": true,
-  "main": "Layout.js"
-}

src/components/Notification/index.js

@@ -0,0 +1,2 @@
+import Notification from "./Notification";
+export default Notification;

src/components/Notification/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Notification",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Notification.js"
-}

src/components/PageTitle/index.js

@@ -0,0 +1,2 @@
+import PageTitle from "./PageTitle";
+export default PageTitle;

src/components/PageTitle/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "PageTitle",
-  "version": "0.0.0",
-  "private": true,
-  "main": "PageTitle.js"
-}

src/components/Sidebar/Sidebar.js

@@ -1,16 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Drawer, IconButton, List } from "@material-ui/core";
-import {
+import { MenuOpen as MenuOpenIcon } from "@material-ui/icons";
-  Home as HomeIcon,
-  NotificationsNone as NotificationsIcon,
-  FormatSize as TypographyIcon,
-  FilterNone as UIElementsIcon,
-  BorderAll as TableIcon,
-  QuestionAnswer as SupportIcon,
-  LibraryBooks as LibraryIcon,
-  HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
-} from "@material-ui/icons";
 import { useTheme } from "@material-ui/styles";
 import { withRouter } from "react-router-dom";
 import classNames from "classnames";
@@ -20,67 +10,15 @@ import useStyles from "./styles";
 
 // components
 import SidebarLink from "./components/SidebarLink/SidebarLink";
-import Dot from "./components/Dot";
 
 // context
 import {
   useLayoutState,
   useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";
 
-const structure = [
+import menu from "./menu";
-  { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
-  {
-    id: 1,
-    label: "Typography",
-    link: "/app/typography",
-    icon: <TypographyIcon />,
-  },
-  { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
-  {
-    id: 3,
-    label: "Notifications",
-    link: "/app/notifications",
-    icon: <NotificationsIcon />,
-  },
-  {
-    id: 4,
-    label: "UI Elements",
-    link: "/app/ui",
-    icon: <UIElementsIcon />,
-    children: [
-      { label: "Icons", link: "/app/ui/icons" },
-      { label: "Charts", link: "/app/ui/charts" },
-      { label: "Maps", link: "/app/ui/maps" },
-    ],
-  },
-  { id: 5, type: "divider" },
-  { id: 6, type: "title", label: "HELP" },
-  { id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
-  { id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
-  { id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
-  { id: 10, type: "divider" },
-  { id: 11, type: "title", label: "PROJECTS" },
-  {
-    id: 12,
-    label: "My recent",
-    link: "",
-    icon: <Dot size="small" color="warning" />,
-  },
-  {
-    id: 13,
-    label: "Starred",
-    link: "",
-    icon: <Dot size="small" color="primary" />,
-  },
-  {
-    id: 14,
-    label: "Background",
-    link: "",
-    icon: <Dot size="small" color="secondary" />,
-  },
-];
 
 function Sidebar({ location }) {
   var classes = useStyles();
@@ -93,7 +31,7 @@ function Sidebar({ location }) {
   // local
   var [isPermanent, setPermanent] = useState(true);
 
-  useEffect(function() {
+  useEffect(function () {
     window.addEventListener("resize", handleWindowWidthChange);
     handleWindowWidthChange();
     return function cleanup() {
@@ -106,28 +44,28 @@ function Sidebar({ location }) {
       variant={isPermanent ? "permanent" : "temporary"}
       className={classNames(classes.drawer, {
         [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
+        [classes.drawerClose]: !isSidebarOpened
       })}
       classes={{
         paper: classNames({
           [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
+          [classes.drawerClose]: !isSidebarOpened
-        }),
+        })
       }}
       open={isSidebarOpened}
     >
       <div className={classes.toolbar} />
       <div className={classes.mobileBackButton}>
         <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
-          <ArrowBackIcon
+          <MenuOpenIcon
             classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse),
+              root: classNames(classes.headerIcon, classes.headerIconCollapse)
             }}
           />
         </IconButton>
       </div>
       <List className={classes.sidebarList}>
-        {structure.map(link => (
+        {menu.map((link) => (
           <SidebarLink
             key={link.id}
             location={location}

src/components/Sidebar/SidebarView.js

@@ -1,140 +0,0 @@
-import React from 'react';
-import {
-  Drawer,
-  IconButton,
-  List,
-  withStyles } from "@material-ui/core";
-import {
-  Home as HomeIcon,
-  NotificationsNone as NotificationsIcon,
-  FormatSize as TypographyIcon,
-  FilterNone as UIElementsIcon,
-  BorderAll as TableIcon,
-  QuestionAnswer as SupportIcon,
-  LibraryBooks as LibraryIcon,
-  HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
-} from "@material-ui/icons";
-import classNames from 'classnames';
-
-import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
-import Dot from './components/Dot';
-
-const structure = [
-  { id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
-  { id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
-  { id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
-  { id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
-  {
-    id: 4,
-    label: 'UI Elements',
-    link: '/app/ui',
-    icon: <UIElementsIcon />,
-    children: [
-      { label: 'Icons', link: '/app/ui/icons' },
-      { label: 'Charts', link: '/app/ui/charts' },
-      { label: 'Maps', link: '/app/ui/maps' },
-    ],
-  },
-  { id: 5, type: 'divider' },
-  { id: 6, type: 'title', label: 'HELP' },
-  { id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
-  { id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
-  { id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
-  { id: 10, type: 'divider' },
-  { id: 11, type: 'title', label: 'PROJECTS' },
-  { id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
-  { id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
-  { id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
-];
-
-const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
-  return (
-    <Drawer
-      variant={isPermanent ? 'permanent' : 'temporary'}
-      className={classNames(classes.drawer, {
-        [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
-      })}
-      classes={{
-        paper: classNames(classes.drawer, {
-          [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
-        }),
-      }}
-      open={isSidebarOpened}
-    >
-      <div className={classes.mobileBackButton}>
-        <IconButton
-          onClick={toggleSidebar}
-        >
-          <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
-        </IconButton>
-      </div>
-      <List className={classes.sidebarList}>
-        {structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
-      </List>
-    </Drawer>
-  );
-}
-
-const drawerWidth = 240;
-
-const styles = theme => ({
-  menuButton: {
-    marginLeft: 12,
-    marginRight: 36,
-  },
-  hide: {
-    display: 'none',
-  },
-  drawer: {
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: 'nowrap',
-    top: theme.spacing.unit * 8,
-    [theme.breakpoints.down("sm")]: {
-      top: 0,
-    }
-  },
-  drawerOpen: {
-    width: drawerWidth,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  drawerClose: {
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    overflowX: 'hidden',
-    width: theme.spacing.unit * 7 + 40,
-    [theme.breakpoints.down("sm")]: {
-      width: drawerWidth,
-    }
-  },
-  toolbar: {
-    ...theme.mixins.toolbar,
-    [theme.breakpoints.down("sm")]: {
-      display: 'none',
-    }
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing.unit * 3,
-  },
-  mobileBackButton: {
-    marginTop: theme.spacing.unit * .5,
-    marginLeft: theme.spacing.unit * 3,
-    [theme.breakpoints.only("sm")]: {
-      marginTop: theme.spacing.unit * .625,
-    },
-    [theme.breakpoints.up("md")]: {
-      display: 'none',
-    }
-  }
-});
-
-export default withStyles(styles, { withTheme: true })(SidebarView);

src/components/Sidebar/components/SidebarLink/SidebarLink.js

@@ -6,7 +6,7 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
-  Typography,
+  Typography
 } from "@material-ui/core";
 import { Inbox as InboxIcon } from "@material-ui/icons";
 import { Link } from "react-router-dom";
@@ -26,7 +26,7 @@ export default function SidebarLink({
   location,
   isSidebarOpened,
   nested,
-  type,
+  type
 }) {
   var classes = useStyles();
 
@@ -36,19 +36,19 @@ export default function SidebarLink({
     link &&
     (location.pathname === link || location.pathname.indexOf(link) !== -1);
 
+  if (type === "divider") return <Divider className={classes.divider} />;
   if (type === "title")
     return (
       <Typography
         className={classnames(classes.linkText, classes.sectionTitle, {
-          [classes.linkTextHidden]: !isSidebarOpened,
+          [classes.linkTextHidden]: !isSidebarOpened
         })}
       >
         {label}
       </Typography>
     );
 
-  if (type === "divider") return <Divider className={classes.divider} />;
+  if (link && link.includes("http")) {
-  if (link && link.includes('http')) {
     return (
       <ListItem
         button
@@ -56,15 +56,15 @@ export default function SidebarLink({
         classes={{
           root: classnames(classes.linkRoot, {
             [classes.linkActive]: isLinkActive && !nested,
-            [classes.linkNested]: nested,
+            [classes.linkNested]: nested
-          }),
+          })
         }}
         disableRipple
       >
         <a className={classes.externalLink} href={link}>
           <ListItemIcon
             className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+              [classes.linkIconActive]: isLinkActive
             })}
           >
             {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
@@ -73,15 +73,16 @@ export default function SidebarLink({
             classes={{
               primary: classnames(classes.linkText, {
                 [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
+                [classes.linkTextHidden]: !isSidebarOpened
-            }),
+              })
             }}
             primary={label}
           />
         </a>
       </ListItem>
-    )
+    );
   }
+
   if (!children)
     return (
       <ListItem
@@ -92,24 +93,24 @@ export default function SidebarLink({
         classes={{
           root: classnames(classes.linkRoot, {
             [classes.linkActive]: isLinkActive && !nested,
-            [classes.linkNested]: nested,
+            [classes.linkNested]: nested
-          }),
+          })
         }}
         disableRipple
       >
         <ListItemIcon
           className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+            [classes.linkIconActive]: isLinkActive
           })}
         >
-          {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
+          {nested ? icon || <Dot color={isLinkActive && "primary"} /> : icon}
         </ListItemIcon>
         <ListItemText
           classes={{
             primary: classnames(classes.linkText, {
               [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
+              [classes.linkTextHidden]: !isSidebarOpened
-            }),
+            })
           }}
           primary={label}
         />
@@ -128,7 +129,7 @@ export default function SidebarLink({
       >
         <ListItemIcon
           className={classnames(classes.linkIcon, {
-            [classes.linkIconActive]: isLinkActive,
+            [classes.linkIconActive]: isLinkActive
           })}
         >
           {icon ? icon : <InboxIcon />}
@@ -137,8 +138,8 @@ export default function SidebarLink({
           classes={{
             primary: classnames(classes.linkText, {
               [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
+              [classes.linkTextHidden]: !isSidebarOpened
-            }),
+            })
           }}
           primary={label}
         />
@@ -151,7 +152,7 @@ export default function SidebarLink({
           className={classes.nestedList}
         >
           <List component="div" disablePadding>
-            {children.map(childrenLink => (
+            {children.map((childrenLink) => (
               <SidebarLink
                 key={childrenLink && childrenLink.link}
                 location={location}
@@ -167,8 +168,6 @@ export default function SidebarLink({
     </>
   );
 
-  // ###########################################################
-
   function toggleCollapse(e) {
     if (isSidebarOpened) {
       e.preventDefault();

src/components/Sidebar/index.js

@@ -0,0 +1,2 @@
+import Sidebar from "./Sidebar";
+export default Sidebar;

src/components/Sidebar/menu.js

@@ -0,0 +1,132 @@
+import {
+  Dashboard as DashboardIcon,
+  NotificationsNone as NotificationsIcon,
+  FormatSize as TypographyIcon,
+  FilterNone as UIElementsIcon,
+  BorderAll as TableIcon,
+  QuestionAnswer as SupportIcon,
+  LibraryBooks as LibraryIcon,
+  HelpOutline as FAQIcon,
+  Image as ImageIcon,
+  Build as BuildIcon,
+  Settings as SettingsIcon,
+  NetworkCheck as NetworkCheckIcon
+} from "@material-ui/icons";
+import Dot from "./components/Dot";
+
+let menu = [
+  {
+    id: 0,
+    label: "Dashboard",
+    link: "/app/dashboard",
+    icon: <DashboardIcon />
+  },
+  {
+    id: 1,
+    label: "Resources",
+    link: "/app/resources",
+    icon: <ImageIcon />
+  },
+
+  { id: 2, type: "divider" },
+  { id: 3, type: "title", label: "System" },
+  {
+    id: 4,
+    label: "Admin",
+    link: "/app/admin",
+    icon: <BuildIcon />
+  },
+  {
+    id: 5,
+    label: "Settings",
+    link: "/app/settings",
+    icon: <SettingsIcon />,
+    children: [
+      {
+        id: 50,
+        label: "Notifications",
+        link: "/app/notifications",
+        icon: <NotificationsIcon />
+      }
+    ]
+  },
+  {
+    id: 6,
+    label: "Health",
+    link: "/app/health",
+    icon: <NetworkCheckIcon />
+  },
+  { id: 7, type: "divider" },
+  { id: 8, type: "title", label: "Community" },
+  {
+    id: 9,
+    label: "Library",
+    link: "https://dev.azure.com/tstanciu94/CDN",
+    icon: <LibraryIcon />
+  },
+  {
+    id: 10,
+    label: "Support",
+    link: "https://toodle.ddns.net/forum",
+    icon: <SupportIcon />
+  },
+  {
+    id: 11,
+    label: "FAQ",
+    link: "https://toodle.ddns.net/forum",
+    icon: <FAQIcon />
+  }
+];
+
+const enableTemplateContent =
+  process.env.REACT_APP_ENABLE_TEMPLATE_CONTENT === "True";
+
+if (enableTemplateContent) {
+  menu.push(
+    { id: 12, type: "divider" },
+    {
+      id: 13,
+      label: "Template",
+      children: [
+        {
+          id: 14,
+          label: "Typography",
+          link: "/app/typography",
+          icon: <TypographyIcon />
+        },
+        { id: 15, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
+        {
+          id: 16,
+          label: "UI Elements",
+          link: "/app/ui",
+          icon: <UIElementsIcon />,
+          children: [
+            { label: "Icons", link: "/app/ui/icons" },
+            { label: "Charts", link: "/app/ui/charts" },
+            { label: "Maps", link: "/app/ui/maps" }
+          ]
+        },
+        {
+          id: 17,
+          label: "My recent",
+          link: "",
+          icon: <Dot size="small" color="warning" />
+        },
+        {
+          id: 18,
+          label: "Starred",
+          link: "",
+          icon: <Dot size="small" color="primary" />
+        },
+        {
+          id: 19,
+          label: "Background",
+          link: "",
+          icon: <Dot size="small" color="secondary" />
+        }
+      ]
+    }
+  );
+}
+
+export default menu;

src/components/Sidebar/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Sidebar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Sidebar.js"
-}

src/components/UserAvatar/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "UserAvatar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "UserAvatar.js"
-}

src/components/Widget/Widget.js

@@ -4,7 +4,7 @@ import {
   IconButton,
   Menu,
   MenuItem,
-  Typography,
+  Typography
 } from "@material-ui/core";
 import { MoreVert as MoreIcon } from "@material-ui/icons";
 import classnames from "classnames";
@@ -32,14 +32,21 @@ export default function Widget({
   var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
 
   return (
-    <div className={classes.widgetWrapper} style={style && {...style}}>
+    <div className={classes.widgetWrapper} style={style && { ...style }}>
-      <Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, {
+      <Paper
+        className={classes.paper}
+        classes={{
+          root: classnames(classes.widgetRoot, {
             [classes.noWidgetShadow]: noWidgetShadow
-        }) }}>
+          })
-        <div className={classnames(classes.widgetHeader, {
+        }}
+      >
+        <div
+          className={classnames(classes.widgetHeader, {
             [classes.noPadding]: noHeaderPadding,
             [headerClass]: headerClass
-        })}>
+          })}
+        >
           {header ? (
             header
           ) : (
@@ -65,7 +72,7 @@ export default function Widget({
         <div
           className={classnames(classes.widgetBody, {
             [classes.noPadding]: noBodyPadding,
-            [bodyClass]: bodyClass,
+            [bodyClass]: bodyClass
           })}
         >
           {children}

src/components/Widget/index.js

@@ -0,0 +1,2 @@
+import Widget from "./Widget";
+export default Widget;

src/components/Widget/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Widget",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Widget.js"
-}

src/components/Wrappers/Wrappers.js

@@ -3,18 +3,18 @@ import {
   withStyles,
   Badge as BadgeBase,
   Typography as TypographyBase,
-  Button as ButtonBase,
+  Button as ButtonBase
 } from "@material-ui/core";
 import { useTheme, makeStyles } from "@material-ui/styles";
 import classnames from "classnames";
 
 // styles
-var useStyles = makeStyles(theme => ({
+var useStyles = makeStyles((theme) => ({
   badge: {
     fontWeight: 600,
     height: 16,
-    minWidth: 16,
+    minWidth: 16
-  },
+  }
 }));
 
 function Badge({ children, colorBrightness, color, ...props }) {
@@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
   var theme = useTheme();
   var Styled = createStyled({
     badge: {
-      backgroundColor: getColor(color, theme, colorBrightness),
+      backgroundColor: getColor(color, theme, colorBrightness)
-    },
+    }
   });
 
   return (
     <Styled>
-      {styledProps => (
+      {(styledProps) => (
         <BadgeBase
           classes={{
-            badge: classnames(classes.badge, styledProps.classes.badge),
+            badge: classnames(classes.badge, styledProps.classes.badge)
           }}
           {...props}
         >
@@ -57,7 +57,7 @@ function Typography({
       style={{
         color: getColor(color, theme, colorBrightness),
         fontWeight: getFontWeight(weight),
-        fontSize: getFontSize(size, props.variant, theme),
+        fontSize: getFontSize(size, props.variant, theme)
       }}
       {...props}
     >
@@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {
 
   var Styled = createStyled({
     root: {
-      color: getColor(color, theme),
+      color: getColor(color, theme)
     },
     contained: {
       backgroundColor: getColor(color, theme),
@@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
       color: `${color ? "white" : theme.palette.text.primary} !important`,
       "&:hover": {
         backgroundColor: getColor(color, theme, "light"),
-        boxShadow: theme.customShadows.widgetWide,
+        boxShadow: theme.customShadows.widgetWide
       },
       "&:active": {
-        boxShadow: theme.customShadows.widgetWide,
+        boxShadow: theme.customShadows.widgetWide
-      },
+      }
     },
     outlined: {
       color: getColor(color, theme),
-      borderColor: getColor(color, theme),
+      borderColor: getColor(color, theme)
     },
     select: {
       backgroundColor: theme.palette.primary.main,
-      color: "#fff",
+      color: "#fff"
-    },
+    }
   });
 
   return (
@@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
           classes={{
             contained: classes.contained,
             root: classes.root,
-            outlined: classes.outlined,
+            outlined: classes.outlined
           }}
           {...props}
           className={classnames(
             {
-              [classes.select]: props.select,
+              [classes.select]: props.select
             },
-            className,
+            className
           )}
         >
           {children}
@@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) {
 }
 
 function createStyled(styles, options) {
-  var Styled = function(props) {
+  var Styled = function (props) {
     const { children, ...other } = props;
     return children(other);
   };

src/components/Wrappers/index.js

@@ -0,0 +1 @@
+export { Badge, Typography, Button } from "./Wrappers";

src/components/Wrappers/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "Wrappers",
-  "version": "0.0.0",
-  "private": true,
-  "main": "Wrappers.js"
-}
-  

src/pages/tables/Tables.js

@@ -28,14 +28,14 @@ const datatableData = [
   ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
   ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
   ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
-  ["Gaston Festus", "Example Inc.", "Tampa", "FL"],
+  ["Gaston Festus", "Example Inc.", "Tampa", "FL"]
 ];
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   tableOverflow: {
-    overflow: 'auto'
+    overflow: "auto"
   }
-}))
+}));
 
 export default function Tables() {
   const classes = useStyles();
@@ -49,12 +49,17 @@ export default function Tables() {
             data={datatableData}
             columns={["Name", "Company", "City", "State"]}
             options={{
-              filterType: "checkbox",
+              filterType: "checkbox"
             }}
           />
         </Grid>
         <Grid item xs={12}>
-          <Widget title="Material-UI Table" upperTitle noBodyPadding bodyClass={classes.tableOverflow}>
+          <Widget
+            title="Material-UI Table"
+            upperTitle
+            noBodyPadding
+            bodyClass={classes.tableOverflow}
+          >
             <Table data={mock.table} />
           </Widget>
         </Grid>