Skip to content

Commit

Permalink
feat: React Material Admin v1.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
michaeldaineka committed Aug 12, 2019
2 parents 378fc3c + a8056fe commit 7241baa
Show file tree
Hide file tree
Showing 75 changed files with 7,469 additions and 5,413 deletions.
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"tabWidth": 2,
"singleQuote": false,
"semi": true,
"trailingComma": "all"
}
54 changes: 32 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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:
Expand All @@ -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
Expand Down
54 changes: 28 additions & 26 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
{
"name": "flatlogic-material",
"version": "1.0.0",
"version": "1.1.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": {
Expand All @@ -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"
]
}
}
116 changes: 62 additions & 54 deletions src/components/App.js
Original file line number Diff line number Diff line change
@@ -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)
)
}
/>
);
}
}
12 changes: 0 additions & 12 deletions src/components/AppContainer.js

This file was deleted.

Loading

0 comments on commit 7241baa

Please sign in to comment.