Skip to content

Commit 7241baa

Browse files
michaeldainekamichaeldaineka
committed
feat: React Material Admin v1.1.0
2 parents 378fc3c + a8056fe commit 7241baa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+7469
-5413
lines changed

‎.prettierrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"tabWidth": 2,
3+
"singleQuote": false,
4+
"semi": true,
5+
"trailingComma": "all"
6+
}

‎README.md

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,43 @@
11
# React Material Admin — Material-UI Dashboard Template
2-
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/).
2+
3+
Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/).
34
**No jQuery and Bootstrap!**
45

6+
**This version uses React 16.8.6, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)**
7+
58
[Demo](https://flatlogic.com/admin-dashboards/react-material-admin/demo). Use any credentials to log in.
69

710
[![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo)
811

9-
1012
## Features
11-
* React (**16.8.2**)
12-
* **No jQuery and Bootstrap!**
13-
* Mobile friendly layout (responsive)
14-
* Create-react-app under the hood
15-
* React Router
16-
* Material-UI
17-
* Modular Architecture
18-
* CSS-in-JS styles
19-
* Webpack build
20-
* Stylish, clean, responsive layout
21-
* Authentication
13+
14+
- React (**16.8.6**)
15+
- React Hooks
16+
- React Context
17+
- **No jQuery and Bootstrap!**
18+
- Mobile friendly layout (responsive)
19+
- Create-react-app under the hood
20+
- React Router v5
21+
- Material-UI v4
22+
- Modular Architecture
23+
- CSS-in-JS styles
24+
- Webpack build
25+
- Stylish, clean, responsive layout
26+
- Authentication
2227

2328
## Pages
29+
2430
We have implemented some basic pages, so you can see our template in action.
2531

26-
* Dashboard
27-
* Typography
28-
* Tables
29-
* Notifications
30-
* Charts
31-
* Icons
32-
* Maps
33-
* Login
34-
* Error
32+
- Dashboard
33+
- Typography
34+
- Tables
35+
- Notifications
36+
- Charts
37+
- Icons
38+
- Maps
39+
- Login
40+
- Error
3541

3642
## Quick Start
3743

@@ -67,9 +73,11 @@ The build is minified and the filenames include the hashes.
6773
Your app is ready to be deployed!
6874

6975
## Support
76+
7077
For any additional information please refer to [Flatlogic homepage](https://flatlogic.com).
7178

7279
## How can I support developers?
80+
7381
- Star our GitHub repo :star:
7482
- [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).
7583
- 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
7886
- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:
7987

8088
## More from Flatlogic
89+
8190
- [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application
8291
- [Sing App](https://github.com/flatlogic/sing-app) - 💥 Free and open-source admin dashboard template built with Bootstrap 4
8392
- [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✅ Pure css way to make inputs look prettier
8493
- [React Dashboard](https://github.com/flatlogic/react-dashboard) - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL
8594
- [Light Blue Dashboard](https://github.com/flatlogic/light-blue-dashboard) - 💦 Free and open-source admin dashboard template built with Bootstrap
8695

8796
## Premium themes
97+
8898
Looking for premium themes and templates? Check out more [admin dashboard templates at flatlogic.com](https://flatlogic.com/admin-dashboards).
8999

90100
## License

‎package.json

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
11
{
22
"name": "flatlogic-material",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
4+
"private": true,
45
"dependencies": {
5-
"@material-ui/core": "3.9.2",
6-
"@material-ui/icons": "^3.0.2",
7-
"apexcharts": "^3.6.3",
6+
"@material-ui/core": "^4.3.0",
7+
"@material-ui/icons": "^4.2.1",
8+
"@material-ui/styles": "^4.3.0",
9+
"apexcharts": "^3.8.3",
810
"classnames": "^2.2.6",
9-
"font-awesome": "4.7.0",
10-
"line-awesome": "icons8/line-awesome",
11-
"mui-datatables": "^2.8.0",
12-
"react": "^16.8.2",
13-
"react-apexcharts": "^1.3.0",
14-
"react-dom": "^16.9.0",
11+
"font-awesome": "^4.7.0",
12+
"mui-datatables": "^2.6.4",
13+
"react": "^16.8.6",
14+
"react-apexcharts": "^1.3.3",
15+
"react-dom": "^16.8.6",
1516
"react-google-maps": "^9.4.5",
16-
"react-redux": "^6.0.1",
17-
"react-router": "^4.3.1",
18-
"react-router-dom": "^4.3.1",
19-
"react-scripts": "^3.0.1",
20-
"react-syntax-highlighter": "^10.3.5",
21-
"react-toastify": "^4.5.2",
22-
"recharts": "^1.5.0",
23-
"recompose": "^0.30.0",
24-
"redux": "^4.0.1",
25-
"redux-thunk": "^2.3.0",
17+
"react-router-dom": "^5.0.1",
18+
"react-scripts": "3.0.1",
19+
"react-syntax-highlighter": "^11.0.2",
20+
"react-toastify": "^5.3.2",
21+
"recharts": "^1.6.2",
2622
"tinycolor2": "^1.4.1"
2723
},
2824
"scripts": {
@@ -34,10 +30,16 @@
3430
"eslintConfig": {
3531
"extends": "react-app"
3632
},
37-
"browserslist": [
38-
">0.2%",
39-
"not dead",
40-
"not ie <= 11",
41-
"not op_mini all"
42-
]
33+
"browserslist": {
34+
"production": [
35+
">0.2%",
36+
"not dead",
37+
"not op_mini all"
38+
],
39+
"development": [
40+
"last 1 chrome version",
41+
"last 1 firefox version",
42+
"last 1 safari version"
43+
]
44+
}
4345
}

‎src/components/App.js

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,76 @@
1-
import React from 'react';
2-
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
3-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
1+
import React from "react";
2+
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
43

5-
import themes, { overrides } from '../themes';
6-
import Layout from './Layout';
7-
import Error from '../pages/error';
8-
import Login from '../pages/login';
4+
// components
5+
import Layout from "./Layout";
96

10-
const theme = createMuiTheme({
11-
...themes.default,
12-
...overrides,
13-
typography: {
14-
useNextVariants: true,
15-
},});
7+
// pages
8+
import Error from "../pages/error";
9+
import Login from "../pages/login";
1610

17-
const PrivateRoute = ({ component, ...rest }) => {
18-
return (
19-
<Route
20-
{...rest} render={props => (
21-
localStorage.getItem('id_token') ? (
22-
React.createElement(component, props)
23-
) : (
24-
<Redirect
25-
to={{
26-
pathname: '/login',
27-
state: { from: props.location },
28-
}}
29-
/>
30-
)
31-
)}
32-
/>
33-
);
34-
};
11+
// context
12+
import { useUserState } from "../context/UserContext";
3513

36-
const PublicRoute = ({ component, ...rest }) => {
37-
return (
38-
<Route
39-
{...rest} render={props => (
40-
localStorage.getItem('id_token') ? (
41-
<Redirect
42-
to={{
43-
pathname: '/',
44-
}}
45-
/>
46-
) : (
47-
React.createElement(component, props)
48-
)
49-
)}
50-
/>
51-
);
52-
};
14+
export default function App() {
15+
// global
16+
var { isAuthenticated } = useUserState();
5317

54-
const App = () => (
55-
<MuiThemeProvider theme={theme}>
18+
return (
5619
<BrowserRouter>
5720
<Switch>
5821
<Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
59-
<Route exact path="/app" render={() => <Redirect to="/app/dashboard" />} />
22+
<Route
23+
exact
24+
path="/app"
25+
render={() => <Redirect to="/app/dashboard" />}
26+
/>
6027
<PrivateRoute path="/app" component={Layout} />
6128
<PublicRoute path="/login" component={Login} />
6229
<Route component={Error} />
6330
</Switch>
6431
</BrowserRouter>
65-
</MuiThemeProvider>
66-
);
32+
);
33+
34+
// #######################################################################
35+
36+
function PrivateRoute({ component, ...rest }) {
37+
return (
38+
<Route
39+
{...rest}
40+
render={props =>
41+
isAuthenticated ? (
42+
React.createElement(component, props)
43+
) : (
44+
<Redirect
45+
to={{
46+
pathname: "/login",
47+
state: {
48+
from: props.location,
49+
},
50+
}}
51+
/>
52+
)
53+
}
54+
/>
55+
);
56+
}
6757

68-
export default App;
58+
function PublicRoute({ component, ...rest }) {
59+
return (
60+
<Route
61+
{...rest}
62+
render={props =>
63+
isAuthenticated ? (
64+
<Redirect
65+
to={{
66+
pathname: "/",
67+
}}
68+
/>
69+
) : (
70+
React.createElement(component, props)
71+
)
72+
}
73+
/>
74+
);
75+
}
76+
}

‎src/components/AppContainer.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)