feat: packages upgrades && new react hooks

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "singleQuote": false,
+  "semi": true,
+  "trailingComma": "all"
+}

README.md

@@ -1,37 +1,43 @@
 # React Material Admin — Material-UI Dashboard Template
-Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/), [Redux](http://redux.js.org/).
+
+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.8.6, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)**
+
 [Demo](https://flatlogic.com/admin-dashboards/react-material-admin/demo). Use any credentials to log in.
 
 [![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo)
 
-
 ## Features
-* React (**16.8.2**)
-* **No jQuery and Bootstrap!**
-* Mobile friendly layout (responsive)
-* Create-react-app under the hood
-* React Router
-* Material-UI
-* Modular Architecture
-* CSS-in-JS styles
-* Webpack build
-* Stylish, clean, responsive layout
-* Authentication
+
+- React (**16.8.6**)
+- React Hooks
+- React Context
+- **No jQuery and Bootstrap!**
+- Mobile friendly layout (responsive)
+- Create-react-app under the hood
+- React Router v5
+- Material-UI v4
+- Modular Architecture
+- CSS-in-JS styles
+- Webpack build
+- Stylish, clean, responsive layout
+- Authentication
 
 ## Pages
+
 We have implemented some basic pages, so you can see our template in action.
 
-* Dashboard
-* Typography
-* Tables
-* Notifications
-* Charts
-* Icons
-* Maps
-* Login
-* Error
+- Dashboard
+- Typography
+- Tables
+- Notifications
+- Charts
+- Icons
+- Maps
+- Login
+- Error
 
 ## Quick Start
 
@@ -67,9 +73,11 @@ The build is minified and the filenames include the hashes.
 Your app is ready to be deployed!
 
 ## Support
+
 For any additional information please refer to [Flatlogic homepage](https://flatlogic.com).
 
 ## How can I support developers?
+
 - Star our GitHub repo :star:
 - [Tweet about it](https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-material-template&via=flatlogic).
 - Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
@@ -78,13 +86,15 @@ For any additional information please refer to [Flatlogic homepage](https://flat
 - Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:
 
 ## More from Flatlogic
+
 - [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application
 - [Sing App](https://github.com/flatlogic/sing-app) - 💥 Free and open-source admin dashboard template built with Bootstrap 4
 - [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✅ Pure css way to make inputs look prettier
 - [React Dashboard](https://github.com/flatlogic/react-dashboard) - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL
 - [Light Blue Dashboard](https://github.com/flatlogic/light-blue-dashboard) - 💦 Free and open-source admin dashboard template built with Bootstrap
 
 ## Premium themes
+
 Looking for premium themes and templates? Check out more [admin dashboard templates at flatlogic.com](https://flatlogic.com/admin-dashboards).
 
 ## License

package.json

@@ -1,28 +1,24 @@
 {
   "name": "flatlogic-material",
   "version": "1.0.0",
+  "private": true,
   "dependencies": {
-    "@material-ui/core": "3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "apexcharts": "^3.6.3",
+    "@material-ui/core": "^4.3.0",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/styles": "^4.3.0",
+    "apexcharts": "^3.8.3",
     "classnames": "^2.2.6",
-    "font-awesome": "4.7.0",
-    "line-awesome": "icons8/line-awesome",
-    "mui-datatables": "^2.8.0",
-    "react": "^16.8.2",
-    "react-apexcharts": "^1.3.0",
-    "react-dom": "^16.9.0",
+    "font-awesome": "^4.7.0",
+    "mui-datatables": "^2.6.4",
+    "react": "^16.8.6",
+    "react-apexcharts": "^1.3.3",
+    "react-dom": "^16.8.6",
     "react-google-maps": "^9.4.5",
-    "react-redux": "^6.0.1",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "^3.0.1",
-    "react-syntax-highlighter": "^10.3.5",
-    "react-toastify": "^4.5.2",
-    "recharts": "^1.5.0",
-    "recompose": "^0.30.0",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "3.0.1",
+    "react-syntax-highlighter": "^11.0.2",
+    "react-toastify": "^5.3.2",
+    "recharts": "^1.6.2",
     "tinycolor2": "^1.4.1"
   },
   "scripts": {
@@ -34,10 +30,16 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

src/components/App.js

@@ -1,68 +1,76 @@
-import React from 'react';
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import React from "react";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 
-import themes, { overrides } from '../themes';
-import Layout from './Layout';
-import Error from '../pages/error';
-import Login from '../pages/login';
+// components
+import Layout from "./Layout";
 
-const theme = createMuiTheme({
-    ...themes.default,
-    ...overrides,
-    typography: {
-        useNextVariants: true,
-    },});
+// pages
+import Error from "../pages/error";
+import Login from "../pages/login";
 
-const PrivateRoute = ({ component, ...rest }) => {
-  return (
-    <Route
-      {...rest} render={props => (
-      localStorage.getItem('id_token') ? (
-        React.createElement(component, props)
-      ) : (
-          <Redirect
-          to={{
-            pathname: '/login',
-            state: { from: props.location },
-          }}
-        />
-      )
-    )}
-    />
-  );
-};
+// context
+import { useUserState } from "../context/UserContext";
 
-const PublicRoute = ({ component, ...rest }) => {
-  return (
-    <Route
-      {...rest} render={props => (
-      localStorage.getItem('id_token') ? (
-        <Redirect
-          to={{
-            pathname: '/',
-          }}
-        />
-      ) : (
-        React.createElement(component, props)
-      )
-    )}
-    />
-  );
-};
+export default function App() {
+  // global
+  var { isAuthenticated } = useUserState();
 
-const App = () => (
-  <MuiThemeProvider theme={theme}>
+  return (
     <BrowserRouter>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
-        <Route exact path="/app" render={() => <Redirect to="/app/dashboard" />} />
+        <Route
+          exact
+          path="/app"
+          render={() => <Redirect to="/app/dashboard" />}
+        />
         <PrivateRoute path="/app" component={Layout} />
         <PublicRoute path="/login" component={Login} />
         <Route component={Error} />
       </Switch>
     </BrowserRouter>
-  </MuiThemeProvider>
-);
+  );
+
+  // #######################################################################
+
+  function PrivateRoute({ component, ...rest }) {
+    return (
+      <Route
+        {...rest}
+        render={props =>
+          isAuthenticated ? (
+            React.createElement(component, props)
+          ) : (
+            <Redirect
+              to={{
+                pathname: "/login",
+                state: {
+                  from: props.location,
+                },
+              }}
+            />
+          )
+        }
+      />
+    );
+  }
 
-export default App;
+  function PublicRoute({ component, ...rest }) {
+    return (
+      <Route
+        {...rest}
+        render={props =>
+          isAuthenticated ? (
+            <Redirect
+              to={{
+                pathname: "/",
+              }}
+            />
+          ) : (
+            React.createElement(component, props)
+          )
+        }
+      />
+    );
+  }
+}