Discussion on Dandelion Pro - React Admin Dashboard Template

Discussion on Dandelion Pro - React Admin Dashboard Template

Cart 1,492 sales
Well Documented

ilhammeidi supports this item

Supported

This author's response time can be up to 1 business day.

443 comments found.

hello, do u familiare with clojurescript, i want to integrate with your theme in my cljs project, but i don’t know how to

Hi vinursy,

For autoprefixer configuration can check in here https://github.com/browserslist/browserslist-example#autoprefixer

Feel free if You have any further queries.

Kind regards.

it seems to change - autoprefixer({ browsers: ‘last 2 versions’ }) + autoprefixer() in postcss.config.js

Yes, we also put the autoprefixer setting in postcss.config.js

I’d like to implement jwt authentication. I have a server, let’s just say “example.com/login” that returns an expiring 1 hour jwt token.

How can I implement this login/register with my jwt url ? Any help is appreciated. Thank you!

Hi roykesserwani,

Thanks for purchasing.

Here’s tutorial to implement JWT with redux-saga https://www.freecodecamp.org/news/login-using-react-redux-redux-saga-86b26c8180e/


And here’s the sample repo: https://github.com/zafar-saleem/react-login


The expiration setup is in: https://github.com/zafar-saleem/react-login/blob/master/src/components/loginPage.js

setCookie('token', this.props.response.login.response.token, 1);

Feel free if you have any further queries.

Kind regards

Hi ilhammeidi I would like to congratulate that the topic is very beautiful and functional.

I try tirelessly to be able to log in with the rest of the API, but I give up, you may be able to help me with a functional “demo.” (I’m a newbie in React.JS) however, I currently have a code with CRA, but I can’t make it work with your theme

Can you help me what will I do? Thanks Alvaro

Hi Alvaro thanks for purchasing and the appreciation.

To create rest API with this theme, you have to put in /server/index.js

Then call the API in components with Axios i.e

- Load source code form js files: /app/components/SourceReader/SourceReader.js


- Load Icons collections form txt: /app/containers/UiElements/Icons.js


- And form database: https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/

Hope this can help. Feel free if you have any further queries.

Kind regards.

i want override import { ContactList, ChatRoom } from ‘dan-components’; but i can’t find this

Hi Jaskkit,

Thanks for purchasing.

For ContactList is in /app/components/Contact/ContactList.js And for ChatRoom /app/components/Chat/ChatRoom.js

Feel free if You have any further queries.

Kind regards.

how to deploy production

Hi Jaskkit,

The deployment step is already in documentation, section Setup > Deployment.

Here’s the online docs https://ilhammeidi.github.io/dandelion-docs/

Feel free if You have any further queries.

Kind regards.

Hi. Any plans to upgrade to material-ui v4?

Hi checklist,

Thanks for visiting our portfolio.

We are still work on upgrading to material ui v4. We will publish on next month.

Kind regards.

hello, first i would thank you for your beautiful template ( dandelion ), and i wanna buy it , but i want to have rtl design layout because i will use it with system support arabic language , so please tell me the template support that or not ? thank you :)

Hi mostafa_elshenawy,

Thanks for visiting our portfolio.

This template not supported for RTL yet. But we will implement RTL feature on next month.

Kind regards.

thank you ,sorry last thing :) if i buy it now i will get the update next month for free or i should wait for the update ?

Hi mostafa_elshenawy,

If you buy now you can download free updates forever from envato and technical support for 6 month (by default).

FYI: Currently this template use material-ui v3, If you want to implement RTL soon, you can follow this documentation https://v3.material-ui.com/guides/right-to-left/

Then put the RTL setup config in /app/styles/theme/applicationTheme.js and /app/containers/App/ThemeWrapper.js

Kind Regards.

Hi, just bought the Template and have two questions

1. How do I get rid of the theme selector? 2. How can I add a new Google Font? I tried the usual way (link) but does not work

Thanks!

Another question, I’m trying to add qrcode.react but it fails

>npm install qrcode.react

And in the container: import { QRCode } from ‘qrcode.react’;

<QRCode id=”123456” value=”123456” size={290} />

The error is : Warning: React.createElement: type is invalid—expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Hi alexpuig

Regarding qrcode.react docs. Please use import from default export instead like this:

 import QRCode from ‘qrcode.react’;

Hope this can help. Feel free if you have any further queries.

Kind regards.

Hi Again,

Did the template include the PSD files?

Best regards,

Hi supapo,

This template not include PSD just some Sketch files only for landing pages, table and form.

Regards.

Hello, I would like to congratulate the dandelion react theme is very beautiful and functional. However, we are having a problem with the total file size. In our platform, it downloads on the device of the 42mb client, being https://hospedae.app/vendors~main.chunk.js with 30mb. See on pingdom please. This is too much for our customers, and the system gets very slow on the first upload. Would you like to know if you have how to compact or reduce this load to the client, maintaining the quality and beauty of the template? thank you.

Hi hospedae,

Thank you so much for purchasing and the appreciation.

After we investigated your file, that compressed already so it difficult to find what exactly excess. So may we know your’e package json dependencies ad devDependencies?

Kin regards.

Hi! Can I use the template without React? Maybe you have html/css version of this amazing template?

Hi poremchuk,

Thanks for visiting our portfolio.

Unfortunately we haven’t create HTML version yet. Only the react version.

Kind regards.

when I install mysql, I got error.

$ yarn add mysql

ERROR in ./node_modules/mysql/lib/Connection.js Module not found: Error: Can’t resolve ‘net’ in ’/Volumes/Data/work/react-native/AU/Warranty/node_modules/mysql/lib’ @ ./node_modules/mysql/lib/Connection.js 3:23-37 @ ./node_modules/mysql/index.js @ dll reactBoilerplateDeps

ERROR in ./node_modules/mysql/lib/Connection.js Module not found: Error: Can’t resolve ‘tls’ in ’/Volumes/Data/work/react-native/AU/Warranty/node_modules/mysql/lib’ @ ./node_modules/mysql/lib/Connection.js 4:23-37 @ ./node_modules/mysql/index.js @ dll reactBoilerplateDeps

how can I fix it?

Hi polarislee1984,

Thanks for purchasing.

Those error happens when install new backend plugin/module, because usually the webpack:dll process can’t go through.

But don’t worry the apps should working as well. To remove that error message please open

- /internals/config.js then add mysql in exclude array

- package.json same as above: add mysql in dllPlugin > exclude array

When you do fresh installation those error will not show anymore.

Hope this can help. Feel free if you have any further queries.

Kind regards.

Dear:

I’m working with Docker and Nginx. When compiling the project, it was completed successfully, then I copied the compilation folder (compiled previously) to the nginx production folder ”/ var / www / html” but, when I opened the project in the ip with my browser, there were resources that they were not available (404 error) as for example: the loader.gif. I think you are not compiling all the files in the public / project folder.

Do you have any other solution other than “npm run build: prod”? since I want to leave it as a nginx service

[PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 sample-prod1 | [PM2] PM2 Successfully daemonized sample-prod1 | [PM2] Starting /app/server in fork_mode (1 instance) sample-prod1 | [PM2] Done. sample-prod1 | sample-prod1 | Use `pm2 show <id|name>` to get more details about an app sample-prod1 exited with code 0.

this CMD [“pm2”, “start”, “server”] does not work

I solve it. thx

Awesome :thumb and your’e welcome

Is there any plan to support RTL layout?

Hi supapo,

Thanks for visiting our portfolio.

Yes we weill add RTL support for this template on next month.

Regards.

We can add dandelion template to our the UI template of our platform. There can be two sets of templates at the same time.

Hi salwenlo,

Thanks for purchasing.

Dandelion Pro can use for multiple site at the same time. But each application must in different port. To change the port please open /server/port.js By default this template run in port 3000. In example you can change it to port 3001

module.exports = parseInt(argv.port || process.env.PORT || '3001', 10);
Feel free if You have any further queries.

Kind regards.

How do I use with Django? I’m with a nginx+gunicorn+django setup already working. I would like to use django + react as this tuto (http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/) says, but the folders in Dandelions’s starter-project are too different.

Have you a Github with such implementation?

tk v much! It´s gret your template!

Hi falamarcao,

Thanks for purchasing and the appreciation.

As your article tutorial, here’s the important file to be integrated with djanggo:

- config/webpack*: /internals/webpack

- Main App (src/App): /app/containers/App/index.js

- config/paths.js: This template not have this file. So can create as new file in webpack directory /internals/webpack/

- And need install webpack-bundle-tracker and load it in webpack.dev.babel as plugin

And also please take a look for this repo: https://github.com/scottwoodall/django-react-template This template structure is similar like Dandelion Pro with redux and immutable.js

Hope this can help. Feel free if you have any further queries.

Kind regards.

if i buy can you provide me only HTML theme it’s possible

Hi 96pgoel,

Thanks for visiting our portfolio.

Unfortunately we don’t have html version. It’s only react.js version.

Regards.

what is diff. b/w html(Angular js) v/s react js

Hi 96pgoel

Here is the article about react angular comparassion https://programmingwithmosh.com/react/react-vs-angular/

Regards

Hi,

Thank you for your awesome product, I like how it’s build, but I have a question … is it possible to use it with create react app ??

Hi goldleon,

First you need to configure webpack from CRA by eject it npm run eject

If you have ejected you can set the alias in the Webpack configuration in config/webpack.config.dev.js files and be able to import like you want:

resolve: {
  alias: {
    'dan-components': '/app/components/',
    'dan-api': 'app/api/'
  }
},

Hope this can help. Feel free if You have any further queries.

Kind regards.

Thank you for your reply, but their is no other solution without ejecting the app?

Hi goldleon,

For alternative you can setup root path by add(if not exist) .env file in root project and add NODE_PATH=app (because all components and containers put in app/ folder).

After that search from app/ folder: dan-components, dan-actions, dan-api and so on, then replace all files to components/, actions/, api/ and so on.

Another alternative can try next.js. It similiar like CRA and has easier webpack configuration.

Hope this can help. Feel free if You have any further queries.

Kind regards.

Hi, I want to modify sidebar. Which component should i change?

Thanks

Hi restlessblaze,

Thanks for purchasing,

For sidebar menu : app\api\ui\menu.js

For sidebar template can see in : Left Sidebarapp\containers\Templates\layouts\LeftSidebarLayout.js and Right Sidebar: app\containers\Templates\layouts\LeftSidebarLayout.js

And for the components: app/components/Sidebar/SidebarContent.js

For the template structure can see in https://ilhammeidi.github.io/dandelion-docs/#code_basic

Feel free if You have any further queries.

Kind regards.

Hi, I am trying to load data from an api by axios using the Data Table example “AdvTable” but does not show the information, if I make a console.log the information is there correctly … I did test using the “Basic Table” example data are loaded normally.

Here’s my example:

import React from ‘react’; import { Helmet } from ‘react-helmet’; import { PapperBlock, AdvTable } from ‘dan-components’; import brand from ‘dan-api/dummy/brand’; import { withStyles } from ’@material-ui/core/styles’; import Axios from ‘axios’;

const styles = ({ root: { flexGrow: 1, } });

class QualificacaoCadastral extends React.Component { state = { dados: [], order: ‘asc’, orderBy: ‘NOME’, selected: [], columnData: [ { id: ‘NOME’, numeric: false, disablePadding: true, label: ‘Nome’ }, { id: ‘CPF’, numeric: false, disablePadding: false, label: ‘CPF’ }, { id: ‘NIS’, numeric: false, disablePadding: false, label: ‘NIS’ }, { id: ‘DN’, numeric: false, disablePadding: false, label: ‘Data Nascimento’ }, ], page: 0, rowsPerPage: 25, defaultPerPage: 5, filterText: ’’, }; }

componentDidMount = () => {
  Axios.get('https://localhost:5001/api/QualificacaoCadastral').then(result => this.setState({
    dados: result.data
  }));
}
render() {
  const title = brand.name;
  const description = brand.desc;
}
const {
  dados,
  order,
  orderBy,
  selected,
  page,
  rowsPerPage,
  defaultPerPage,
  filterText,
  columnData
} = this.state;
console.log(dados);
return (
   
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
    </Helmet>
    <PapperBlock title="Listar Segurado(s)" whiteBg desc="">
       
        <AdvTable
          order={order}
          orderBy={orderBy}
          selected={selected}
          data={dados}
          page={page}
          rowsPerPage={rowsPerPage}
          defaultPerPage={defaultPerPage}
          filterText={filterText}
          columnData={columnData}
        />
       
    </PapperBlock>
   
);

export default withStyles(styles)(QualificacaoCadastral); import React from ‘react’; import { Helmet } from ‘react-helmet’; import { PapperBlock, AdvTable } from ‘dan-components’; import brand from ‘dan-api/dummy/brand’; import { withStyles } from ’@material-ui/core/styles’; import Axios from ‘axios’;

const styles = ({ root: { flexGrow: 1, } });

class QualificacaoCadastral extends React.Component { state = { dados: [], order: ‘asc’, orderBy: ‘NOME’, selected: [], columnData: [ { id: ‘NOME’, numeric: false, disablePadding: true, label: ‘Nome’ }, { id: ‘CPF’, numeric: false, disablePadding: false, label: ‘CPF’ }, { id: ‘NIS’, numeric: false, disablePadding: false, label: ‘NIS’ }, { id: ‘DN’, numeric: false, disablePadding: false, label: ‘Data Nascimento’ }, ], page: 0, rowsPerPage: 25, defaultPerPage: 5, filterText: ’’, }; }

componentDidMount = () => {
  Axios.get('https://localhost:5001/api/QualificacaoCadastral').then(result => this.setState({
    dados: result.data
  }));
}
render() {
  const title = brand.name;
  const description = brand.desc;
}
const {
  dados,
  order,
  orderBy,
  selected,
  page,
  rowsPerPage,
  defaultPerPage,
  filterText,
  columnData
} = this.state;
console.log(dados);
return (
   
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
    </Helmet>
    <PapperBlock title="Listar Segurado(s)" whiteBg desc="">
       
        <AdvTable
          order={order}
          orderBy={orderBy}
          selected={selected}
          data={dados}
          page={page}
          rowsPerPage={rowsPerPage}
          defaultPerPage={defaultPerPage}
          filterText={filterText}
          columnData={columnData}
        />
       
    </PapperBlock>
   
);

export default withStyles(styles)(QualificacaoCadastral);

Hi agricioribeiro,

The component and state structute is correct. Maybe the problem from data structure from API.

Please try by using static data without axios first to test it. And May we know the data structure form your response?

Hello, with static data works because the data is already set in the state, but when implemented in componentDidMount the data is not shown in the table.

Here’s an example of how data from api axios is returned:

[ { “IDORIGEM”: 2, “NAME”: “TEST 1”, “CPF”: “111.111.111-11”, “NIS”: “111.11111.11.1”, “DN”: “01/01/2019” }, { “IDORIGEM”: 5, “NAME”: “TEST 2”, “CPF”: “222.222.222-22”, “NIS”: “222.22222.22.2”, “DN”: “01/01/2019” }, { “NAME”: “TEST 3”, “CPF”: “333.333.333-33”, “NIS”: “333.33333.33.3”, “DN”: “01/01/2019” } ]

Hi agricioribeiro,

We use state.data in AdvTable component. Please check the code in /app/components/Tables/AdvTable.js We push the props.data in to state.data. So it seems the state.data not fulfilled yet and need to check the availability of props.data.

Please add an additional checking in constructor. Here’s sample code:

this.state = {
  data: data !== null ? data.sort((a, b) => (a.calories < b.calories ? -1 : 1)) : null,
}

Or can try another way by use componentWillMount() as well

this.state = {
  data: null
}

componentWillMount() {
    this.setState({
      data: this.props.data
    });
  }

Hope this can help. Feel free if You’ve any futher queries.

Kind regards.

Hello, I would like to know if this template uses redux saga.

Hi agricioribeiro,

Thanks for purchasing.

We not implement the redux-saga, but this template has redux-saga configuration. And the configuration is in app/redux/configureStore.js

FYI: This template built with react-boilerplate.

Feel free if you have any further queries.

Kind regards.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey