flatlogic / react-material-admin Goto Github PK
View Code? Open in Web Editor NEW☄️React Material Admin is a React template built with Material-UI
Home Page: https://flatlogic.com/admin-dashboards/react-material-admin/demo
License: MIT License
☄️React Material Admin is a React template built with Material-UI
Home Page: https://flatlogic.com/admin-dashboards/react-material-admin/demo
License: MIT License
The amount of total dependencies in this project is astronomical, latest yarn install pulled 60,000 packages with a 400MB node_modules folder
The Dot component will only show named colors in the palette although I believe the intent is to support rgb values as well.
To see the issue, in the Dashboard page, set one of the Dot colors to an rgb value
<Dot color="#990000" />
The Dot will appear grey (the default color).
The code in Dot that sets the color tries to set the "most appropriate" value
backgroundColor: color && theme.palette[color] && theme.palette[color].main,
But if color has a non-null value this will always evaluate the second element and this may return null.
Suggest to first check for the theme color and if null then use the color value
backgroundColor: (theme.palette[color] && theme.palette[color].main) || color,
Can we display images on the tables. If yes,can anyone tell me how to do it?It will be a great help.
Hi guys, thank you for sharing this theme!
I have taken the time to look at the implementation, you can find my feedback in the following list:
mui-datatables
I was chatting with the author of this dependency, maybe you should consider material-table
. We have started to promote them: https://next.material-ui.com/demos/tables/#material-table.recompose
this package was soft deprecated. With the growing React hooks trend, it will soon no longer be needed.-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton, Typography } from '@material-ui/core';
tinycolor2
if you want to minimize bundle size, Material-UI has a colorManipular.js module. It's kind of private but we want to provide an official solution, we have expored using polished last week, we didn't move forward for bundle size concern.package.json
in each folder approach, interesting.-<Typography component="span" variant="h5" color="primary" className={classes.textRow}>Oops. Looks like the page you're looking for no longer exists</Typography>
+<Typography variant="h5" color="primary" className={classes.textRow}>Oops. Looks like the page you're looking for no longer exists</Typography>
<Tab label="Login" classes={{ root: classes.tab }} />
I would probably just use the classsName, it's more idiomatic.I hope it helps :)
I do have a quick question. When I try to run and test the UI myself, I got the warning.
Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.
I don't see anywhere in the codebase that has createFactory(). Do you know where that might be?
And seems like the library recharts
has many warnings
Hello, are you planning to upgrade the material ui version to 5?
I guess redux is not part of this UI (which is fine) but do you have some best practice suggestions to load data from a server?
I installed node-sass and then bootstrap and imported bootstrap.css file in index.js file. Now I have a component which is importing it's own .scss file in it, which overrides some bootstrap classes. but the override is not working, when i inspected i found that the bootstrap's <style> comes after the component's <style> in the chrome's dev inspector.
As per the docs of create-react-app the component's .css/.scss should take the precedence over the .css imported in index.js file.
hi
How to make the admin panel Right to Left direction ?
in function loginUser if you write like this
if (!!username && !!password) {
setTimeout(() => {
localStorage.setItem('id_token', 1)
dispatch({ type: 'LOGIN_SUCCESS' })
setError(null)
setIsLoading(false)
histroy.push('/app/dashboard')
}, 2000)
}
may call a warning likes Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
but write like this
if (!!username && !!password) {
setTimeout(() => {
localStorage.setItem('id_token', 1)
setError(null)
setIsLoading(false)
dispatch({ type: 'LOGIN_SUCCESS' })
histroy.push('/app/dashboard')
}, 2000)
it will not.
As we know,
In Login file, using React userState hook for controll and display UI in view
But in page, we using loginUser function, from UserContext
This function using 6 parameter userDispatch, loginValue, passwordValue, props.history, setIsLoading, setError
Some of this is arror function to change some state in Login Component
But I think a problem in it:
In "loginUser" function store in UserContext file
When call loginUser => we make change some of that state (Ex: error, isLoading, userDispatch)
this make warning render, because this work maybe Asynchronous ;
so browser could not optimization for render
And if setError(true) (before setIsLoading(false); or dispatch()) in loginUser
this browser render will not display error messenger
Hi, I am getting npm install
errors.
Error: Unexpected end of JSON input while parsing near '...Pkk8OU+8JJQhOT\nWDXdg'
What could be the reason?
This is a question not an issue :)
I like the design patterns and code structure of this admin dash board ( Using React Context, React Hooks, Material UI Theme modification and lot more ). I want to follow the project coding structure as much as I can.
I started to call APIs in this dash board and add hook base fetch approach ( I used SWR) .
First place to call API login functionality.
So, I have add API call to the UserContext.js
file and changed loginUser
function.
function loginUser(dispatch, login, password, history, setIsLoading, setError) {
....useSWR('/api/login'); ...
But I face the error:
React Hook "useSWR" is called in function "loginUser" which is neither a React
function component or a custom React Hook function react-hooks/rules-of-hooks
If I want to have a correct design pattern, how can I fix it. The "loginUser" seemed the best place for calling login APIs but it seems that I can not put it here.
Thanks 😀
{
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"apexcharts": "^3.6.3",
"axios": "^0.18",
"classnames": "^2.2.6",
"cross-env": "^5.1",
"font-awesome": "4.7.0",
"laravel-mix": "^4.0.7",
"line-awesome": "icons8/line-awesome",
"lodash": "^4.17.5",
"mui-datatables": "^2.0.0-beta.58",
"popper.js": "^1.12",
"react": "^16.8.2",
"react-apexcharts": "^1.3.0",
"react-dom": "^16.8.2",
"react-google-maps": "^9.4.5",
"react-redux": "^6.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-syntax-highlighter": "^10.2.0",
"react-toastify": "^4.5.2",
"recharts": "^1.5.0",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"tinycolor2": "^1.4.1"
}
Please add layouts / examples because any back office app uses Forms.
Thanks!
yarn install
yarn install v1.21.1
error An unexpected error occurred: "E:\Dev\WebMap\package.json: Unexpected token p in JSON at position 1".
info If you think this is a bug, please open a bug report with the information provided in "E:\Dev\WebMap\geowebappreact\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.