238 comments found.
Hi, How to start project with Restful Api ?
Thanks.
Hi khairurrijal31,
Terimaksih telah membeli Enlite Prime.
Untuk backend API bisa di dalam Component nya. Yaitu menggunakan function componentDidMount atau useEffect
Berikut referensinya https://ichi.pro/id/bagaimana-mengambil-data-dari-api-menggunakan-useeffect-react-hook-126453162297458 https://medium.com/@ri7nz/3-cara-fetch-data-di-reactjs-aaa064ccf5e9Salam.
Why doesn’t one level menu change to active after clicking it in the big sidebar navigation layout?
Hi Narayananbtech,
There’s an issue, I will check and update it soon.
Regards.
Hi Narayananbtech,
Here’s the update.
- Add the single menu that redirect to new page inapp/api/ui/menu.js Example for localhost:3000/app/blank-single
{
key: 'blank_single',
name: 'Blank Page',
icon: 'ion-ios-document-outline',
linkParent: '/app/blank-single',
}
- In /app/components/SidebarBig/MainMenuBig.js add this function
const handleLoadSingleMenu = () => {
setSelectedMenu([]);
closeDrawer();
};
- in /app/components/SidebarBig/MainMenuBig.js update the last ButtonBase in const getMenus function
const getMenus = menuArray => menuArray.map((item, index) => {
if (item.key === 'menu_levels') {
...
}
if (item.child) {
...
}
return (
<ButtonBase
...
activeClassName={classes.active}
onClick={() => handleLoadSingleMenu(item.key)}
>
...
</ButtonBase>
);
}
- In reducer app/redux/modules/ui.js update CLOSE_MENU and OPEN_SUBMENU action.
case CLOSE_MENU:
mutableState.set('subMenuOpen', List([]));
case OPEN_SUBMENU:
const path = action.initialLocation.split('/');
if (path.length <= 3) {
mutableState.set('sidebarOpen', false);
}
I will make a patch for this in next update.
Hope this can help.
Regards.
Hi, Thanks for the amazing template. Recently I have purchased this template and started customization for my project. I’m using authReducer state to detect whether the user login or not but if the user reloads the page reducer state also reset. so I’m not able to detect login status. I would like to know a better approach while using this template. I have two solutions either I can store it in local storage so that I can check the login condition when the page refresh. and another approach is using store subscribe logic combine with local storage. can you confirm which is the best way to check if the user refreshes the page? Is there any logic that you predefined in this template to keep auth reducer state after reloading the page?
Hi Narayananbtech,
Thanks for purchasing and the appreciation.
You can use local storage for simple response auth, but for more advance with complex data you can use subscribe with local storage.
Feel free if you have any further queries.
Regards.
Hi ilhammeidi,
I need help with login page, i put an image on left side page, here is the result:
http://dev-admin.sandaliaria.com.br/The problem is… depending on internet connection the image show big before adjust on screen, to you simulate it is recommend put in slow internet connection in Google chrome dev tools, you will see the left side image with a womam show big before auto adjust.
Can you help me fix that ?
Hi,
I think it’s not about connection, I saw the page has 2 background images, that from inline style style="background-image: url("/96176a9ced1e45480d1ce15b89f14490.jpg");" and from external style background-image: url(http://dev-admin.sandaliaria.com.br/a7ad8c403e23c32488df4016d5f13188.jpg);
It’s look like connection problem, because the second image was inlined style, so it loaded later. You can use one background only by replacing with the second image in external jss style.
Regards.
Hello,
I’m looking to set another parameter in authReducer, for example, “verified” as part of firebase auth process. So I add it to state, default null. Then set up saga action, constant and reducer accordingly.
Logic: If firebase auth is successful, verifyUser* saga gets the user.email property and validates email via axios API to check if the user is “active” server side. API tested, returns true or false.
The idea is instead of validating “loggedIn” flag in withAuthorizationRouter, I then validate that “verified” is set to true. This is successful upon login.
However following any page refreshes, SYNC_USER saga is called, it seems to reset state to null. The page then of course goes into the loading state, while withAuthorizationRouter waits for a boolean value.
I assumed “verified” would be inherited in SYNC_USER reducer from …state . (Perhaps my understanding is wrong?).
Observations: In Redux tools, I notice a LOCATION_CHANGE action followed by null values.
Any idea what I could be doing wrong, spent 3 full days on it. I have a work around for now, so not urgent. Just need to resolve this for my own understanding – and cleaner code.
Hope this is clear.
Thank you!
K
Hi krlwbstr,
By default after page reload the state will resets to default value because redux state only handle front-end side.
With firebase, the basic user data should be synced in local storage as IndexedDB. But If you create custom state like “verified”, you need to flag in local storage.
I think need to create relation between logged user from firebaseAuth and “verifyUser”. It’s like add another role in firebaseAuth https://firebase.google.com/docs/auth/admin/custom-claims#set_and_validate_custom_user_claims_via_the_admin_sdk
Or another way is to put the “verified” status in local storage https://felixgerschau.com/react-localstorage/
Hope this can help.
Regards.
Hello,
I’ve followed the auth steps firebase and the app (build running as prod ) still allows direct access to app .
Could you advise what I may have missed.
Thanks. K
Fixed, found answer in previous comment!
index.js:
import withAuthorizationRouter from ’../Session/withAuthorizationRouter’; <Route path=”/app” component={withAuthorizationRouter(Application)} />
For others reading, I wanted the entire app locked down so did it at index level. You can wrap withAuthorizationRouter on specific route components in Application.js if preferred.
Thanks, K
Hi krlwbstr,
Thanks for purchasing.
Yes you can use withAuthorizationRouter.
Just for info, in the demo it’s not used as top level routes to make visitor easier to access other pages.
Feel free if you have any further queries.
Regards.
Hello, thank you for your work!
Please assist if possible: I have an existing project. What is best option of starting using your work in the existing code base?
i already found that you answered that before, no need to reply 
This is the audit report after running npm install
70 vulnerabilities (14 low, 31 moderate, 24 high, 1 critical)
This is the audit report after running npm audit fix
71 vulnerabilities (14 low, 31 moderate, 25 high, 1 critical)
Ok we’ll check it.
Hi karelcardona,
This template has been updated. You can download in your themforest account. That should be no critical and high vulnerabilities.
And there’s a few low and medium vulnerabilities that cannot be fixed because webpack version. If it still not proper for you, you can raise the refund.
Regards.
Thank you very much for the update . This is a great script
all the best
Your’e welcome. And I hope you can adjust the review rating.
Since your’e support has been expired maybe I can’t help much, so I offer you to submit a refund request.
Regards.
Hello, I know my support has expired, but please how do I get data like lat lng or center from google maps Drawing Manager with onCircleComplete function
Hi,
To get center for circle you can usegetCenter(). Here’e the complete method and props name
https://tomchentw.github.io/react-google-maps/#circle
And here’s some additional docs for google maps API
https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en https://developers.google.com/maps/documentation/javascript/examples/rectangle-event?hl=enRegards.
Hello,
Firstly, love the Enlite 16 dashboard theme. It’s fantastic!
Just been getting stuck into React over the last month so fairly new to it – please bear with me. Also trying to make sense of Redux!
Anyway, I’ve followed the instructions and have the app running in the browser but keep getting hundreds of messages in the console relating to various modules such as the following
“DevTools failed to load source map: Could not load content for webpack://%5Bname%5D/node_modules/@material-ui/pickers/dist/material-ui-pickers.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME”
Was wondering what the “%5Bname%5D” is, the 5B and 5D translate into “[” and “]” – so looks malformed, but I have no idea how to fix! Have just purchased extended support in the hope you can help.
Thank you, Karl
Hi Karl,
Thanks for purchasing and the appreciation.
Don’t worry about that. Means the browser try to get source map from packages from node_modules/. But mostly 3rd party packages doesn’t have(include) the source map in distribution version.
You can ignore or hide it by open Developer Tools, go to “Settings” for Developer Tools, then uncheck Enable JavaScript Sourcemaps under the “Sources” settings.
Here’s the detail https://stackoverflow.com/questions/35002087/disable-source-maps-in-chrome-devtoolsFeel free if you have any further queries.
Regards.
Hi ilhammeidi,
I have an another issue here is the same from @sendanapp, i have a Dialog componente, and… inside that Dialog i have the Select component, when the select componente stay on the bottom of the dialog the dropdown is not visible correctly, i will send a image:
Here is the issue: https://ibb.co/mGBhFYg Here is the expected: https://ibb.co/52QZGBBThanks
Hi fbenevides,
Please try to use default menu from react-select. Example in /app/containers/Forms/demos/SelectSuggestions.js<
const components = {
Control,
// Menu, => remove this
MultiValue,
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer,
};
Add styles in selectStyles
const selectStyles = {
//...rest code
menu: (provided) => ({
...provided,
background: theme.palette.background.paper
})
};
Finally add menuPlacement=”auto” Also add maxMenuHeight if needed
<Select
menuPlacement="auto"
maxMenuHeight={200}
Regards.
Hi ilhammeidi, Its still not working but the fixed heigth of
root: {
flexGrow: 1,
height: 250,
},
from useStyles give me an another problem, the heigth stay very big and on the form the components that stay bellow from select and i get a big white space, and when i put heigth: “auto”, de dropdrown still have an issue, i will show the images.
Here i make just your adjusts: https://ibb.co/ckW0jnZ https://ibb.co/K50XR8r
Here i remove the height: 250 on root from useStyles, but still not working, the dropdown stay on top: https://ibb.co/NWw9MMs
Hi ilhammeidi,
I have tried using the Material UI Autocomplete from here: https://material-ui.com/components/autocomplete/ the dropdown works fine… but i just style that is broken, do you think is better fiixed this ?
Image using AutoComplete: https://ibb.co/kBjw2zk
If yes, can you send me the code of autocomplete styled, to use on this template ?
Hi,
Here’s the styling:
autocompleteRoot: {
paddingTop: theme.spacing(3),
},
autocompleteTag: {
padding: '0 !important'
}
and component
<Autocomplete
classes={{
inputRoot: classes.autocompleteRoot,
tag: classes.autocompleteTag,
}}
{...rest code}
/>
Kind regards.
HI ilhammeidi,
Thanks for your answer, now its working, but still need some styles, look at the result… https://ibb.co/rKhNf3B Thanks…
1. When the select is multiple, and when i fill the entire row with the tags the dropdown arrow go to bottom left, how can i keep in rigth side ?
Here the screenshoot: https://ibb.co/W39NLcD
I need somthing like this: https://ibb.co/HBX6dvC
2. When the select is not multiple the space between label and value is to big, how can i adjust it ?
Here screenshot: https://ibb.co/tXD7Q7J
The padding top is theme.padding(3), but when its a single select the blank space is to big.
Thanks again.
Hi,
1. For this issue I can’t reproduce, I’m not sure maybe you’ve made styling modification before. So in Autocomplete element you can add additional class for arrow icon endAdornment: classes.arrow
<Autocomplete
classes={{
{...rest code},
endAdornment: classes.arrow
}}
{...rest code}
/>
And here’s the style
arrow: {
top: 'calc(50% - 34px)'
right: 0
position: 'absolute',
}
2. Please use the classes.autocompleteRoot, and classes.autocompleteTag, for multiple autocomplete only not for all autocomplete types
Regards.
Hi ilhammeidi,
I trying to build the project but the build lock on 92% and some seconds after that o got message: JavaScript heap out of memory
Can you help me ?
Hi,
This template default need RAM 2 – 2.5 gb to compile production build. Then maybe need more if you add more pages or components.
Regards.
Hey, Issue with select dropdown items positions, When dropdown at the bottom of the screen , list should be populated on up side as it’s getting hidden if the dropdown is the bottom element of the page.
https://drive.google.com/file/d/1iUywDdFfqwPyuWwEDtxq1zxNxicKo9eJ/view?usp=sharing
Hi sendanapp,
Thanks for the reported issue.
For autocomplete with selectbox please use the latest practice from the latest Material UI docs (version ^4.11) https://material-ui.com/components/autocomplete/#combo-box It use material-ui/lab so it should be more flexible.
I will update this template in next update.
Regards.
Hey, I am using the react-select customized as given in example, Can u pls look how to fix that.
Hi sendanapp,
Please try to use default menu from react-select. Example in /app/containers/Forms/demos/SelectSuggestions.js<
const components = {
Control,
// Menu, => remove this
MultiValue,
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer,
};
Add styles in selectStyles
const selectStyles = {
//...rest code
menu: (provided) => ({
...provided,
background: theme.palette.background.paper
})
};
Finally add menuPlacement=”auto” Also add maxMenuHeight if needed
<Select
menuPlacement="auto"
maxMenuHeight={200}
Regards.
Purchase code : 2f53dcf4-1d4e-4417-8976-48ad74e57113 – 13 Oct 2020 REGULAR LICENSE
Hi,
We are facing issue in integrating one npm package(pdftron – https://www.pdftron.com/documentation/web/get-started/npm/) in Enlite Prime react template (https://themeforest.net/item/enlite-prime-reactjs-fullstack-website-template/23803960?gclid=Cj0KCQjw0K-HBhDDARIsAFJ6UGi8d5txHeyV0DKp9BoqEpk_b3QTGgFFpcB6eFBxF5f4iConZp1UIg8aApjVEALw_wcB)
This package works locally fine but when we try to build the app and upload the build to cloud, pdftron module not working. The main reason of this issue is webpack configuration issue which is not supporting pdftron npm package.
So we need your help in integrating the pdftron npm package in Enlite Prime React template.
PDFTron https://www.pdftron.com Enlite Prime – React Admin Dashboard Template For Full-Stack Developer https://themeforest.netHi ajayzharotia,
Thanks for purchasing.
Regarding the pdftron docs above on step.2, please copy the static assets to public/ folder in root project not inside build/ filder.
And then for usage (step.3), please change the path to /webviewer just without /public
WebViewer({
path: '/webviewer',
// rest code
Hope this can help. Feel free if you have any further queries.
Regards.
Hi, in safari browser i am not able to see the Sidebar. BigSidebar is showing properly but Sidebar is not. This problem is also in your demo link. please let me know how it can be fixed.
Hi darshanjain07,
Thanks for reported issue.
To fix it in app/components/Sidebar/sidebar-jss.js in drawer: line:12 adjust the code bellow
drawer: {
width: drawerWidth,
'& > div': {
position: 'relative',
border: 'none',
background: 'none'
}
},
Hope this can help. I will make a patch for this issue in the next update.
Regards.
I’m about to buy your template. Wondering if it’s possible to run build for IIS. When I go for npm run build it generates me a static build with broken links to files. Tried to update package.json with “homepage”: ”.” what normally helps. Can you advice how to prepare a build for IIS?
Him
Thanks for visiting my portfolio. I haven’t try with IIS. I recommend to use this template in node server by following the documentation. Because if running as static sites, there’s maybe some issue like routing and caching.
Hi there,
I bought the app .my code – f18caf62-985d-484a-afc4-96737a6672b9
Post installation the code is failing when i do npm run build:dll and npm start is giving blank page.
Hi msnimbal,
Thanks for purchasing.
The npm run build:dll will automatic running after npm install, or by manually after install new package.
Please try some options bellow before run npm install.
- Delete node_module/ folder then npm install again
- Clear node cache with npm cache clean --force to verify and clean up your npm. Then try npm install again
Feel free if you have any further queries.
Regards.
thank. you. it. worked
Hi there,
Am planning. to buy this template, I would like to know if the application can do CRUD to firebase?
Thanks, Manju
Hi msnimbal,
Thanks for visiting our portfolio. Enlite Prime uses firebas for authentication and sample apps. Please check the demo and sample-project for detail.
Regards.
Hi thanks for making this nice template. i am getting a issue in redux form. as i am not able to upload photos. i am new in react. i tried so many things but after submitting the form, file field is coming with blank object other fields are showing values, but file field not. please help.
my purchase code: b60b10c9-0e05-4d8b-b971-74e69d260db2
Hi darshanjain07,
Thanks for purchasing and the appreciation.
The redux-form only get value like string, number, boolean from field. For files type you can store it separately as local state or constant, then send together with another values. The example like sample Contact App:
/app/containers/SampleFullstackApps/Contact/index.js /app/components/Contact/AddContact.js
Feel free if you have any further queries.
Regards.
Thanks for replying, i tried to upload photo but getting this error in console. and photo is not uploading error: react_devtools_backend.js:2560 Warning: Failed prop type: The prop `imgAvatar` is marked as required in `AddContactForm`, but its value is `undefined`. in AddContactForm (created by Form(AddContactForm))
Hi darshanjain07,
I cannot reproduce that issue in local or live demo. If you’ve made changes, please try to debugging before submit (on drop file) with console.log in /app/components/Contact/AddContact.js in function const onDrop = (filesVal) => { .
If value still empty please make sure you drop the valid image format and file size. For image acceptance, please check in app/components/Contact/AddContactForm.js
Hope this can help.
Regards.
Thanks, ilhammeidi for your reply. issue is resolved. i am facing another issue i.e i want to run my app in sub-directory like “http://example.com/myfolder”. i tried to add <base href=”/myfolder/”> and added homepage: “http://example.com/myfolder”. and tried to build the app. but nothing is working for me. I am using nginx server, i also added the location path in nginx default config file. ...could you plz help me
Hi darshanjain07,
By default this template all assets paths will point to the main domain. If you want to deploy with subfolders, you need to change the path to src = ”/file.js” to be src = ”./file.js”
So ininternals/webpack/webpack.prod.babel.js
// line: 20 - In the output add a public path './'
output: {
publicPath: './'
}
// line: 96 - In OfflinePlugin set relativePaths to true
new OfflinePlugin({
relativePaths: true,
)}
After running the npm run build, please to make sure build/index.html and build/sw.js should be the path to src = "./ file.js".
For other static assets such as the favicon and images in app/index.html, the path must be changed manually.
If there are still problems, I recommend using the subdomain dashboard.example.com because like in the demo example, so far there have been no problems using a subdomain.
Regards.
Thanks its working 
Hi, I just purchased a license and failed to add it in a existing Project. I just want to use components and styles,
Hi aljamhi2008,
Thanks for purchasing.
To take out the components, containers, and styling, please try to copy the main components.
1. Components: app/components/ All components is necessary for Dashboard page
2. Containers: app/containers/
- Routing: app/containers/App/index.js
- UI Redux: app/containers/App/ThemeWrapper.js
- Dashboard template: app/containers/Templates/Dashboard.js and app/containers/Templates/layouts/*.js
This template is recommended to use with redux. But if not you can hardcoded the props value and use void function () => {}. And latter you need to create adjustment by use local state and set function by following /app/redux/modules/uiReducer.js initialState and each action type
3. Style: app/styles/ – MaterialUI Custom: app/styles/theme/applicationTheme.js – The rest is scss for vendor plugin styling and color palette.
4. Image and assets: /public/ – Images & favicons
Also please check template structure diagram https://ilhammeidi.github.io/enlite-docs/#code_basic
For external UI components and styling references: – Material UI https://material-ui.com/ – JSS (CSS in JS) https://cssinjs.org/
Feel free if you have any further queries.
Regards.
It gives me tones of error. do you solve issues remotely and hourly paid. or I can’t complete with this great theme. I reach to the edge of the road. Regards
If yes please contact me by email aljamhi2008@gmail,com
Hi aljamhi2008,
About the support I’m not available for hire and only available via comment or private message in https://themeforest.net/user/ilhammeidi
Also for this case I sent to your mail to open discuss.
Regards.