443 comments found.
Hi, I would like to ask about uploadInputImgFile.
(1) How does it collect the file data for us to send it to the backend? Because i would like to take the file data, encode it to base 64 and send to backend as a json string.
(2) How can i combine both uploadInputImg and Form togther to submit both form field and image together in a json object to send to backend?
Thank you
Hi bernicecpz,
1. For upload you can see sample in /app/containers/Pages/Contact/index.js and /app/components/Contact/AddContactForm.js Basically the dropzone get then convert images as base64 already. Here’s full docs for react-dropzone
2. To combine them with custom redux-form field, you can take a look this sample: https://github.com/BBB/dropzone-redux-form-example/blob/master/src/App.js
But in current dandelion-pro still separate input file and form. We store the image to the state first, and then push them together with all form values.
Hope this can helps. Feel free if you have any further queries.
Kind regards.
Hi, we are getting two errors: On the browser console:Source map error: TypeError: index.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/react-ionicons/lib/index.js? Source Map URL: index.js.map[Learn More] Source map error: TypeError: icons.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/react-ionicons/lib/icons.js? Source Map URL: icons.js.map[Learn More] Source map error: TypeError: SVG.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/react-ionicons/lib/SVG.js? Source Map URL: SVG.js.map[Learn More] Source map error: TypeError: popper.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/popper.js/dist/umd/popper.js? Source Map URL: popper.js.map[Learn More] Source map error: TypeError: index.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/index.js? Source Map URL: index.js.map[Learn More] Source map error: TypeError: combineReducers.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/combineReducers.js? Source Map URL: combineReducers.js.map[Learn More] Source map error: TypeError: index.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/utilities/index.js? Source Map URL: index.js.map[Learn More] Source map error: TypeError: getStateName.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/utilities/getStateName.js? Source Map URL: getStateName.js.map[Learn More] Source map error: TypeError: getUnexpectedInvocationParameterMessage.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/utilities/getUnexpectedInvocationParameterMessage.js? Source Map URL: getUnexpectedInvocationParameterMessage.js.map[Learn More] Source map error: TypeError: validateNextState.js.map is not a valid URL. Resource URL: webpack://%5Bname%5D/./node_modules/redux-immutable/dist/utilities/validateNextState.js? Source Map URL: validateNextState.js.map[Learn More]
on the build cycle: WARNING in ./node_modules/moment/src/lib/locale/locales.js Module not found: Error: Can’t resolve ’./locale’ in ‘C:\Users\IG\Desktop\Projects\imm-app-base\imm-app\node_modules\moment\src\lib\locale’ @ ./node_modules/moment/src/lib/locale/locales.js @ ./node_modules/moment/src/lib/create/from-anything.js @ ./node_modules/moment/src/lib/create/utc.js @ ./node_modules/moment/src/lib/units/month.js @ ./node_modules/moment/src/lib/moment/get-set.js @ ./node_modules/moment/src/lib/units/day-of-month.js @ ./node_modules/moment/src/lib/units/units.js @ ./node_modules/moment/src/moment.js @ ./node_modules/@date-io/moment/build/index.js @ dll reactBoilerplateDeps
Even though moment.js is isntalled
Hi emrexhepi,
Thanks for the feedback.
1. For ionicon issue please use version react-ionicons@2.1.6 or react-ionicons@3.0.0 Because the latest version 3.0.1 has a lot difference to use
2. This one actually just warning, because webpack dll cannot go through to moment, so the templates should working well. It can be removed, by open webpack.base.bable.js and add this to plugin section,
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
})
})
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi ilhammeidi,
I’m trying to access web service – different url but there is an error when I inspect element from the browser.
“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:44362/api/User/UserGetAll?page=1&pageSize=100. (Reason: CORS request did not succeed)”
Can you help me what will I do? How to work on CORS in application.
Thanks, Christian
Hi Christian,
Thanks for purchasing.
I think it because you access APIs Locally. Here’s the article about CORS issue in browser https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/
Hope this can help. Feel free if you have any further queries.
Regards.
Hi ilhammeidi,
Thank you for your response. I tried fixing cors in API itself and it is now working and already get json data.
Now, my problem is I don’t know how to display it in table. I want to try using the “TableEdit” aka EditableCellFrmDemo.js
I keep on exploring but it takes time to understand the structure.
Can you teach me or give me some guidelines. Or if you already have the function to call an API to display in “TableEdit”.
Regards, chrisab1234
Hello Christian,
For Edit table with form need 2 things from API there are anchorTable and dataInit.
- anchorTable: for table columns
- dataInit: for table data
const anchorTable = [
{
name: 'id',
label: 'Id',
initialValue: '',
hidden: true
}, {
name: 'text',
label: 'Text Field',
initialValue: null,
width: 'auto',
hidden: false
}, {
name: 'email',
label: 'Email Field',
initialValue: null,
width: 'auto',
hidden: false
}, {
name: 'radio',
label: 'Radio Option',
initialValue: 'option1',
width: '80',
hidden: false
}, {
name: 'selection',
label: 'Selection',
initialValue: 'option1',
width: '80',
hidden: false
}, {
name: 'onof',
label: 'On/Of Input',
initialValue: true,
width: '80',
hidden: false
}, {
name: 'checkbox',
label: 'Checkbox',
initialValue: true,
width: '80',
hidden: false
}, {
name: 'textarea',
label: 'Text Area',
initialValue: 'This is default text',
width: 'auto',
hidden: false
}, {
name: 'edited',
label: '',
initialValue: '',
hidden: true
}, {
name: 'action',
label: 'Action',
initialValue: '',
hidden: false
},
]
const dataApi = [
{
id: '1',
text: 'Just write',
email: 'mail@dandelion.com',
radio: 'option2',
selection: 'option1',
onof: false,
checkbox: true,
textarea: 'Lorem ipsum dolor sit amet',
edited: false,
}, {
id: '2',
text: 'Some text',
email: 'mail@material.com',
radio: 'option2',
selection: 'option2',
onof: false,
checkbox: false,
textarea: 'Lorem ipsum dolor sit amet',
edited: false,
}, {
id: '3',
text: 'Because it is a TextField',
email: 'mail@admin.com',
radio: 'option1',
selection: 'option3',
onof: false,
checkbox: false,
textarea: 'Lorem ipsum dolor sit amet',
edited: false,
}]
An then just put those both to the components
<CrudTableForm dataInit={dataApi} anchor={anchorTable} {...rest}>
Also don’t forget to add Form and the Fields inside <CrudTableForm /> The field name must be same as anchorTable.name. So when do an action (add/update), the new data will be placed into target cell correctly.
Hope this can help. Feel free if you have any further queries.
Kind Regards.
Hi ilhammeidi,
Yes it will display because the data is already in static.
What if the data is coming from the database? I use fetch function. I tried using state and setState.
When trying to display by putting in dataInit={this.state.data} no display but no error. Field names are same with anchorTable.name as you mention before.
Tried to inspect elements in browser by putting “console.logs(this.state.data)” inside render() seems it called 3 times with zero values. And the 4th time log, json data has now its values but does not display in <CrudTableForm />.
I think not getting the proper timing to display. Can you give me advise please?
Here is my code added:
constructor(props) { super(props); this.state = { data: [] } }
// Method async jsonResult() { try { let response = await fetch(‘http://localhost:8081/api/User/UserGetAll?page=1&pageSize=100'); let json = await response.json(); this.setState({ data: json.responseData }) //console.log(this.state.data); } catch (e) { console.log(‘Error!’, e); } }
// Call Method componentDidMount() { this.jsonResult(); }
Hello Christian,
The data from API must in array format, please make sure that first. Or may I know what value given from api?
Also you can messages me via my profile, so we can talk via email or hangout privately if needed.
Regards.
Hi ilhammeidi,
Yes the result is array.
Sample: [{ user_id: 1, user_name: “christian” }, { user_id: 2, user_name: “rodel” }]
Do you have skype? Add me “tian_dev”
Regards, chrisab1234
Hi ilhammeidi,
It’s working with your given code:
render ( { dataApi !== undefined && ( <CrudTableForm dataInit={dataApi} anchor={anchorTable} {...rest} ) } );
Thank you very much! My problem is solved. 
Regards, chrisab1234
Hi Christian,
Happy to hear that. And will be better to handle async process with redux-saga, redux-thunk or something like that. We are still upgrading the template by use redux-saga for fetching data, hope can be done by this month.
Regards.
Hi, we would like to ask the following questions regarding the template. We are currently using Java EE for backend, React-Redux for our frontend.
Our concern is regarding how to utilize file structure in your template 1. While we know how to create new container & component from the documentation, how can we add our API calling files into your file structures to use your Redux containers & components, without breaking your architecture?
2. How do we call the API such that your containers & components are reusable for our project?
3. How do we populate the data for objects with associations into your template?
4. How do we disable certain text field in the Redux Form?
5. How do we use the React Moment inside the template? Currently, we can’t change the date in the template with moment.
6. If we want to create 2 separated forms with different fields, using the same Redux form, how do we reuse the components efficiently? How do we find out the entire dependencies for each component?
7. How can we upload image with Redux? Which component in the template can we use to upload images?
Thanks
This is our purchase code 4b4e0156-282f-41ae-bef9-097bc02419b7
Hi bernicecpz,
Thanks for purchasing
1. If you have backend already, you can fetch api with JSON format. We recommend to call the API in containers/YourComponent. In example please take a look/app/containers/Pages/Calendar/index.js we use redux (fetchEventsData) to fetch the data. Or will better if implement redux-saga or redux-thunk to sync the API continuously.
2. The answer similar like above. We separate components and containers. The api only face with containers directly then pass to components. So the components can reusable and filled with any variant data
3. You can use map function like this getItem = dataArray => dataArray.map((item, index) => ( <Component key={index.toString()} attribute={item.value} /> ));
4. Just put disable attribute in Field component <Field disable {…restProps} />
5. We’re not sure about this, because we can change the date with @date-io/moment as well. Or for alternative you can try date-fns
6. Redux form get value from name attribute Field as the anchor. And the your component itself is wrapped inside Field (from redux-form/immutable) component. So just make sure the Field has unique name.
7. For upload sample can see in http://dandelion.ux-maestro.com/app/pages/contact or http://dandelion.ux-maestro.com/app/pages/contact http://dandelion.ux-maestro.com/app/pages/email We use drop zone plugin and put it inside redux-form custom field. And here’s the sample source /app/components/Contact/AddContactForm.js and /app/components/Email/ComposeEmailForm.js
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi, I am having issues installing this template in a simple docker setup. I see that the template has a lot of configuration and also a backend side. Do you happen to have a docker setup that you can share so I can use it? Maybe a dockerfile that I can copy/paste?
Hi cgenius90,,
Thanks for purchasing,
Here’s the example Dockerfile for react-boilerplate https://gist.github.com/JuHwon/93c212fb4cd2b8e9970762f5e37ffdff
FYI: This template built with react boilerplate and it seems don’t have any docker config or documentation yet. If You have any need to discuss fell free to email me via my profile messages.
Kind regards.
HI There,
I have purchased this theme. When i am publishing this then Router switch is not working in the production build.
the same issue is exists in the demo preview site also.
http://dandelion.ux-maestro.com:3000/loginAt login page Create new account and signup page account already exists links are not working so please help me out with this.
Thanks in advance.
Hi anbum,
Thanks for purchasing and the feedback.
Currently we are working on this issue. It’s because the redux-connect wrap the routes then the routing gone wrong. We will make update as fast as possible.
And the temporary solution for now is back to basic link by use href in A tag or document.location instead react-router-dom.
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hello again anbum,
We have got better solution by keeping use react-router. Please open /app/containers/Templates/Outer.js and also /app/containers/Templates/Blog.js (blog page If needed). Then add …state inside mapStateToProps constant like this:
const mapStateToProps = state => ({
gradient: state.getIn([reducer, 'gradient']),
decoration: state.getIn([reducer, 'decoration']),
...state
});
And run npm run build then npm run start:prod to test in local.
We will push this fix in next upcoming updates.
Thank you.
Hi. The jest test suite is broken with the temple including the starter project. This is unfortunate as it works great on the react-boilerplate. Is there a version with working tests?
Thanks, Chris
Hi Chris,
Thanks for purchasing.
In this template we’re not including the test yet. We removed first the test script from original react-boilerplate. Currently we’re still making test unit for all of our react.js products. And will published next time.
Feel free if You have any further queries.
Kind regards.
Hi Ilham, I purchased the Dandelion theme yesterday, and I’m having a few problems on installation. Actually I have a React frontend application that is rendered from a elixir backend, I would like install Dandelion on same repository, For this, I moved my app for new folder and create another folder to store Dandelion App and merged package.js. My question: What you think about this installation? would be great if you could make the two applications coexist. - Att, Bruno
Hi Bruno,
Thanks for purchasing.
I think that method is fine, but need to check the node module dependencies first. Because maybe your current apps has different version. After that You can take a look in package.json then adjust the scripts to run, build or test the project.
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi,
first of all, let me congratulate you on your fantastic template. We’ve just bought it for our next project!
However, I honestly have to say, I’m really disappointed with the included Sketch file. It is a bare minimum of UI-elements and pages included, which does not even come close to the full template. Crucial elements and pages are missing, which will require a long time to recreate. That is really disappointing, our expectation was that what we can see in your preview will also be included in Sketch.
Best Regards,
Gabriel
Hi Gabriel,
Thanks for purchasing. We really appreciate your feedback. And we’ll try to improve the quality of our products.
Regards.
Great Template!
Thank you eaglemann
Hi just purchased your theme Dandelion. It is really cool but I have a problem. The starter pack comes really bloated with NodeJS server side. What i really just need is plain design. I just need the theme and the components that I can use with react-create-app don’t nee all this setup. Do you have this flavor ?
Hi emrexhepi,
Thanks for purchasing.
If want to take out components to another starter-pack like create-react-app, you need to move the content of folder app/ to new starter-pack
Pages, components and routing 1. app/components 2. app/containers 3. app/styles *some of components load data as js object from app/api like menu and color palette
Redux and api utilities 1. app/redux/modules 2. app/actions 3. app/api
And alias folder settings in 1.internals/webpack/webpack.babel.base:182.
Hope this can help. Feel free if You have any further queries.
Kind regards.
@ilhammeidi thanks trying to do this on NextJS the thing is now I can not install the package “dan-components” that is needed for GuideSlider.
Hi emrexhepi,
Actually the dan-components is alias folder for absolute path that refer to app/components/index.js. So for call dandelion components just call import { AnyComponents } from ‘dan-component’ instead ../../../bla2/app/components
The setting itself for alias folder already described in our previous comment and documentation.
Feel free if You have any further queries.
Kind regards.
Thank you for your fast response
Hi,
I bought the template yesterday and let me tell you there is not enough documentation. And your code is not documented/commented at all. This is very unpleasant …
It will take me some time understand the logic, variables names and how to merge specific component to my own personal project.
The documentation is really important in this kind of project when you divide a basic component in 4 to 6 slices like App / Tables / Editable-Cell
Do you have skype or direct message to help us through this !
thanks
Hi Seifoufa,
Thanks for purchasing.
Sorry for the inconveniences. You can email us by message/email in profile page https://themeforest.net/user/ilhammeidi
Then we can discuss more in google hangout. For fast response we will available at 10am – 5pm GMT+7.
Kind regards.
I just send you an email friend, I said what I said in the first comment, that’s only what I didn’t like.
But for the rest, it’s a good job, it’s just amazing. I discovered this lately, I could be happier if I knew the existence of your awesome work before beginning my personal project.
Hi Seifoufa,
Thanks for your feedback and the appreciation. We will always listen to all feedback and try to improve the quality of our products.
Regards.
asalammualaikum….
saya ingin bertanya ini bisa di pakai untuk react versi berapa?
Hi dedystyawan,
Terimakasih telah berkunjung. Dandelion Pro menggunakan React.js versi 16.6 dan Redux versi 4.0.1
apakah harus dengan redux?
Hi dedystyawan,
Semua fitur utama template ini dihandle dengan redux. Jadi tentu redux adalah bagian penting template ini.
Salam.
hello, I have a question, I have an application developed in the nodes as I can integrate this template with this template. Thanks for your help!
Hi javela,
Thanks for purchasing.
Dandelion Pro built with react js and running in node server. So can integrate with you app. You can check documentation to know about the structure. Then might need adjustment for you’re current project.
Just let us know if you have anything need to discuss by reply this messages or send email privately via messages my profile.
Kind regards.
How do you make it so you cannot scroll right on the corporate landing home page? It just goes to a white background! Thank you
Hi JohnnyZ91,
In landing page we can scroll and navigate it as well. Could you explain more how to reproduce?
Thank you.
Sorry that was not very clear. If you swipe horizontal on the mac touch pad on the corporate home page it tries to slide the entire page. This is the result https://imgur.com/a/GiFT5ix as it is easier to explain
Hi JohnnyZ91,
We just try it in Macbook with OSX 10.14 with safari and other modern browser. The swipe horizontal is mac behaviour to back and forward in browser, and cannot be overridden. It should be back after finger release from touchpad.
Feel free if You have any further queries.
Kind regards.
Great theme but I think the div after the header is too big so the app starts with so much space from the top, even in mobile this is more notorius. Any way to solve this or remove that ?
Hi mediis,
Thanks for the feedback.
This template is editable and can modify to be anything with react jsx and css in js inside.
Regards.
Hi do you have eaxmple docker file for run this project? I try to run it with docker but show error only
thank you for your response 
best regard
Hi batmintun13,
Thanks for purchasing,
Here’s the example Dockerfile for react-boilerplate https://github.com/stern-shawn/keystone-react-boilerplate/blob/master/Dockerfile
FYI: This template built with react boilerplate and it seems don’t have any docker config or documentation yet. If You have any need to discuss about this error or anything fell free to email me via my profile messages.
Kind regards.
Hi,
I am having a bad time trying to use MaskedInput (react-text-mask) with a redux form. Values never goes to the form state and the input format has no CSS applied.
Also, I was not able to find any example in the downloaded files to this scenario 
Hi greciobeline,
For input masking with redux form You need to make custom field first, then prop it in field component. Please take a look this docs https://redux-form.com/6.0.2/docs/api/field.md/ or can try this plugin https://www.npmjs.com/package/redux-form-input-masks.
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi, I am interested in buying your template. I noticed though that there some issues in the demo with regards to scroll and speed. The animations occasionally stutter and the scroll is slow. Why is that? Have you controlled the scroll speed? Will that translate into our product as well if I use the template?
Hi prahlad_turftown,
Thanks for purchasing and the feedback.
This template optimized for the latest modern browser Firefox, Safari, Opera, Chrome, Edge. So will work smoothly across those browser. But we will always improve the performance in every release.
Actually this template not including multi language/translate support yet. But since it built base on react-boilerplate by default you can enable multi language/translate feature.
To apply the multi language settings can see this refernce: https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/i18n.md And the sample starter project how to use it https://github.com/react-boilerplate/react-boilerplate
Feel free if you have any further query.
Kind regards.
Request for real dark theme: although it contains graytheme, but it still not a real black theme, is it possible to release the `blackTheme` palette ?
Hi caspar_chou,
Thanks for purchasing and the Feedback
Yeah for the darkTheme may still pale a bit not really dark, we can update it latter. And for the custom theme you can add more in app/api/pallete/lightPalette and app/api/pallete/darkPalette. Then register them in app/redux.modules/ui.js
Kind regards.
