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.

Hi I would like to use the CrudTable component to add a new item to my database, but I not available to make it work, I already use finishEditRow to get the item I just add to the table but is not working, do you have any documentation about CrudTableDemo use?

Example:

``` <CrudTable finishEditRow={() => this.postPatients(item, branch)} items={this.state.pacientes} anchorTable={anchorTable} />```

Hi nievesjesus,

Thanks for purchasing,

This CrudTable components use redux to manipulate the data in front-end side. Here’ the online docs about redux structure https://ilhammeidi.github.io/dandelion-docs/#code_basic > Template Architecture > go to Slide 3

And for finishEditRow just put like thisfinishEditRow={this.postPatients} without parameter. Then the function itself:

postPatients(data, branch) {
    console.log(data.toJS());
    console.log(branch);
 }

The result will generated as immutable object. So you need to convert as plain object with toJS before save to DB.

Here’s the console.log result more less like this:
{id: "k8j2i9oo", category: "Electronics", price: "2", date: Fri Apr 03 2020 01:01:35 GMT+0700 (Western Indonesia Time), time: Fri Apr 03 2020 01:01:35 GMT+0700 (Western Indonesia Time), …}id: "k8j2i9oo"category: "Electronics"price: "2"date: Fri Apr 03 2020 01:01:35 GMT+0700 (Western Indonesia Time) {}time: Fri Apr 03 2020 01:01:35 GMT+0700 (Western Indonesia Time) {}name: "Janet Doe"available: trueedited: true__proto__: Object
EditableCellDemo.js?19f5:146 crudTableDemo

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

Regards.

Hi, im trying to dispatch some async actions and im not able to add my custom saga. I never used redux-saga before and so far i have tried everything i could find on https://redux-saga.js.org/ and also tried this https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/redux-saga.md with no luck. Any advice is appreciated.

PS: In case i have to replace redux-saga with redux-thunk, is there something important to consider in your opinion?

Thanks!

Hi firaizoz,

Thanks for purchasing.

For sample redux saga configuration, please take a look at:

- https://github.com/react-boilerplate/react-boilerplate/blob/master/app/configureStore.js

- https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/saga.js

- https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/index.js

Or you can check our another project with redux-saga implementation https://github.com/ilhammeidi/enlite-starter The project structure is more less same as Dandelion Pro.

For redux-thunk, we haven’t try it before. But for the configuration itself should be same in /app/redux/configureStore.js

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

Regards.

Hi there

I am curious when do you plan to update your template more prominent dependencies like react and such to latest version and fix the deprecated warnings like react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

I know I can ignore this for now or just execute npx to update the naming but I would prefer to have a cleaner starter project. In the future update it would be also prudent to reduce the code size of components by moving away from class based to function based implementation and utilizing hooks.

Hi derelictx,

Thanks for purchasing.

We will update the dependencies and fix the warning between April or beginning of May. After that we will start to migrate to react hooks and then release it gradually. We estimate should be finished migrate all pages and features by this year.

Thanks for the advice and feel free if you have any further queries.

Regards.

Hi ilhammeidi

I went ahead and updated all project dependencies without a problem with the exception of the following ones: “react-intl”: “2.8.0”, // updating this breaks building reactBoilerplateDeps “react-ionicons”: “2.1.6” // removed entirely and used Mui core icons “react-syntax-highlighter”: “7.0.0” // breaks build this is exclusively demo dependency shouldn’t exist in skeleton project

// dev deps “css-loader”: “2.1.1”, “sass-loader”: “7.1.0”

I also flagged deprecated methods as UNSAFE_ for now. So far I have my skeleton project fixed for what I need it for but will be looking forward to updated versions down the road.

Hello! Do you have a full .sketch (or Adobe XD) file of your “Dandelion Pro” template? It is necessary for me to create prototypes in future.

Hi igorfors,

Thanks for visiting our portfolio.

We don’t have full sketch or any static ui version, we only provide landing page, cards, table and forms components.

Regards.

Hello. I’m trying to protect my /app routes with a private route. I created it, and it works almost perfect. The thing is I’m trying to pass some state when the user is not logged in (the URL that got blocked, to know where to send the user later). I’m doing like this:
<Route
                path="/app" 
                render={(props) => (isLogged() ?<Application {...props} changeMode={changeMode} />
                  :
                    <Redirect
                      to={{
                        pathname: "/",
                        state: { referrer: "location test" }
                      }}
                />)}
              />
It does redirect to / (which is my login page), but inside I can’t get this.props.location, it says it is undefined. I tried using useLocation also, but when I do
const location = useLocation();
it gives me “Login.js?f3c5:17 Uncaught TypeError: Object(...) is not a function” and the page doesn’t get rendered. What am I missing here?

Hi pwxti,

Thanks for purchasing.

To handle this please try to wrap the private page/component in routing app/containers/App/index.js

<Route path="/app/pages/authenticated-page" component={withAuthorizationRouter(AuthenticatedPage)} />

And here’s the withAuthorizationRouter component https://gist.github.com/ilhammeidi/08ce99fe89d7fbdd7f6fa7606122bdee

This component is an example for authenticated user. You can pass the state user logged in to the isAuthenticated props.

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

Kind regards.

hello thanks for everything, I am a little confused on how to change the state of a Field, I see that it calls ReduxFormMUI but I don’t know how to update the state of my variable, I stay tuned thanks!

Hi javela,

Here’s the docs for the redux-form related set the field value/state https://redux-form.com/8.3.0/examples/initializefromstate/

And here’s Dandelion reducer structure.https://ilhammeidi.github.io/dandelion-docs/#code_basic > Template Architecture > please go to Slide 3 (Redux Structure).

Regards.

Hello friend, I already understand better the structure of the reducer in the project, but what I don’t understand is how I integrate the sagas into login

Hello friend, I have already created my saga, my reducer, but I don’t know how to link these new ones to the store? how do i please !!!! thanks

Hi javela,

To connect the saga should be in app/redux/configureStore.js. To run saga

  sagaMiddleware.run(sagas);

Here’s for the example https://github.com/ilhammeidi/enlite-starter/blob/master/app/redux/configureStore.js

Regards.

Dear team,

Hope you guys are doing very well.

In some pages when we scroll down or up some contents in those pages like tables or lists keep jumping up and down for few times.

Can you please let us know how we can fix this issue?

Thanks, Edi

Hi Edi,

Thanks for purchasing and the reported issue.

It seem’s your’e using top menu template. So in /app/containers/Templates/Dashboard.js in appFrameInner please adjust the height with window.innerHeight + 112px (header height) with css inline.

state = {
 appHeight: 0
}

componentDidMount = () => {
  this.setState({ appHeight: window.innerHeight + 112 })
}

render() {
  const { appHeight } = this.state;
  return (
    <div style="{minHeight:" appheight="" classname="{
" classnames="" classes.appframeinner="" layout="==" classes.topnav="" :="" classes.sidenav="" mode="==">
     ...content
  </div>
  )
}

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

Regards.

Thanks team, your proposed solution worked well…. Thank you again guys!!!

Your’e welcome, we’re happy to hear that.

Have a nice day!

Hi! I would like to know if you have any plans on creating a version of Dandelion Pro with Angular. Thanks.

Hi rvlira,

Thanks for visiting our portfolio. Unfortunately we don’t have plan to build with angular version.

Regards.

Hello, I am implementing the app / pages / user-profile page in the starter-project but I get an error is Check the rendering method of `UserProfile`

Hi javela,

In profile page uses some components like About, Connection, etc. The checking tabs state use to load components. If any error probably the components are missing. So please copy/import the required components to starter-project as well

Regards.

Hello, I am implementing the app / pages / user-profile page in the starter-project but I get an error is Check the rendering method of `UserProfile`

Hi javela,

In profile page uses some components like About, Connection, etc. The checking tabs state use to load components. If any error probably the components are missing. So please copy/import the required components to starter-project as well

Regards.

Hello,at first, your project is beautiful and awesome! and I wonder that is your project has a editor compoent which the best support markdown.

Hi feyan7,

Thanks for purchasing and the appreciation.

This template just has components code viewer which cannot editable. For detail you can see in the docs https://ilhammeidi.github.io/dandelion-docs/#code

And then for markdown support, this template use react-markdown https://github.com/rexxars/react-markdown That you can see in example blog detail http://dandelion.ux-maestro.com/blog/article

Feel free if you have any further queries.

Regards.

module.exports = { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'] } }; It’s my babel.config.js but it fail when i build:dll

Hi louisnguyen171,

Please try to remove node_modules/ folder and run npm install again. Here the installation docs https://ilhammeidi.github.io/dandelion-docs/#install.

Also please make sure to use node version 10.x. And if still got problem, it’s probably from your os or system, please try to install it in other computer to make sure.

Hope this can help.

Regards.

When i run “Yarn build” have error about React Hooks ERROR in ./provider/appContext.js 53:4 Module parse failed: Unexpected token (53:4) You may need an appropriate loader to handle this file type. | }, []); | return ( > <AppContext.Provider value={{ ...appState, ref }}> | {children} | </AppContext.Provider> @ ./app/app.js 28:0-45 54:47-54 @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

Hi otfund,

You can message us via email in here https://themeforest.net/user/ilhammeidi Then we will reply from our email to your email that use themeforest account.

Regards.

I sent. Thanks!

Hi otfund,

We just reply you’r email.

Thanks.

this.props.match.params. undefined

i am unable to access params from url, it says undefined so it there any specific workaround for this case in the theme…?

Hi keystrokedev1,

Thanks for purchasing.

This template use react-router-dom v5. And for example in routing /app/containers/App/ArticleNews.js you can try like this

<Blog history={history} changeMode={changeMode}>
        <Switch>
          <Route exact path="/blog" component={BlogHome} />
          <Route path="/blog/article:slug"/>
             <Article />
          </Route>
        </Switch>
      </Blog>

Here’s the guide from the official site https://reacttraining.com/blog/react-router-v5-1/

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

Regards.

Hi Team,

We have a problem here with buttons in the main menu. For instance, In your top navigation layout we click on “Application” and then click on “Email” and if we get back and click on “Application” again it won’t work and we have to at least click twice on “application” till it works. Please let us know how we can fix this issue.

Thanks, Edi

Hi Edi,

Thanks for purchasing and thanks for the reported issue.

To fix this you can open /app/components/Header/DropListMenu.js then in handleOpenMenu function, around line:44 please change the openMenu state value with [key].

handleOpenMenu = (event, key, keyParent) => {
    const { openSubMenu } = this.props;
    openSubMenu(key, keyParent);
    this.setState({ anchorEl: event.currentTarget });
    setTimeout(() => {
      this.setState({
        openMenu: [key] // change this value
      });
    }, 50);
  };

We will make a patch update for this template soon.

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

Regards.

Thanks team for your prompt response. Your solution worked and we appreciate that.

Pls keep up the good job :)

We are really happy to hear that. Thank you very much for choosing Dandelion Pro and happy coding.

Hello, great theme! I have encountered the following problems in “Dandelion PRO”: - In the main menu, if there are no “children”, the icons of the main item are not visible; how can I solve? - In the “Edit Redux table”, the “ADD NEW” button does not work if less than 8 columns are defined; - In WeatherWidget I can’t replace the background image of 1050×700 size. I ask for your help… Thank you!

Hi pietrax,

Thanks for purchasing and the appreciation.

Here’s our answer bellow:

1) The sidebar has designed that icon only for parent(has children) menu. So you need make a modification a bit like this example
// app/api/ui/menu.js
// add parent menu with linkParent property

{
    key: 'home2',
    name: 'Home',
    icon: 'ios-home-outline',
    linkParent: '/home2',
  },

// app/components/Sidebar/MainMenu.js
// make menu type condition in getMenus constant
if (item.child || item.linkParent) {
        return (
          <div key="{index.toString()}">
            <ListItem
              component={LinkBtn}
              to={item.linkParent ? item.linkParent : '#'}
              button
              className={
                classNames(
                  classes.head,
                  item.icon ? classes.iconed : '',
                  open.indexOf(item.key) > -1 ? classes.opened : '',
                )
              }
              onClick={() => openSubMenu(item.key, item.keyParent)}
            >
              {item.icon && (
                <ListItemIcon className={classes.icon}>
                  <Ionicon icon={item.icon} />
                </ListItemIcon>
              )}
              <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
              { !item.linkParent && (
                <span>
                  { open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> }
                </span>
              )}
            </ListItem>
            { !item.linkParent && (
              <Collapse
                component="div" 
                className={classNames(
                  classes.nolist,
                  (item.keyParent ? classes.child : ''),
                )}
                in={open.indexOf(item.key) > -1}
                timeout="auto" 
                unmountOnExit
              >
                <List className={classes.dense} component="nav" dense>
                  { getMenus(item.child, 'key') }
                </List>
              </Collapse>
            )}
          </div>
        );
      }


2) If remove some columns please make sure to remove dataInit object in reducer /app/redux/modules/crudTableForm.js as well

3) For weather widget, you can change the background style in /app/components/Widget/widget-jss.js Line: 676 and 680
'&$sun': {
      backgroundImage: `url(${images[9]})`,
      backgroundPosition: '0 -120px'
    },
    '&$cloud': {
      backgroundImage: `url(${images[18]})`,
      backgroundPosition: '0 -120px'
    }

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

Kind regards.

Please I want to change the sidebar menu in the starter template top megamenu, please can you provide documentation or step by step on how to do that

Hi alimaxion,

To change routing like that, in /app/containers/App/index.js remove the path=”/app”

<Route render={(props) => <Application {...props} changeMode {changeMode} />} />

and in the /app/containers/App/Application.js

<Route path="/dashboard" component={PersonalDashboard} />
          <Route path="/crm-dashboard" component={CrmDashboard} />
          <Route path="/crypto-dashboard" component={CryptoDashboard} />
...and so on

Then you can access dashboard from localhost:3000/dashboard

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

Regards.

It works, thanks

Your’e welcome, happy to hear that :)

Hi There,

I am trying to integrate MaterialDropZone in the Redux Form. One comment you advise as below:

You check this example code https://codesandbox.io/s/8kywn8q9xl

And for DropzoneField component, since this template use react-dropzone v10, please use the standard syntax same as in /app/components/Forms/MaterialDropZone.js

I tried this example and trying but the issue of example is it alert preview: https://cl.ly/448ba0624fe6

but I need a file object, so I can send that file to the server through a multipart/form-data API call. https://cl.ly/00a73c4cc457

Thank you.

Hi ervishu83

The demo is uses DropZone old version. The when use dropzone v10 in this template, the return result will be as object. The usage is same as usual:

constructor(props) {
    super(props);

    this.state = {
      files: [],
    };
  }
render() {
    const { files } = this.state;
return (
  <Field
                    name="fieldname" 
                    component={MaterialDropZone}
                    files={files}
            showPreviews="false
            maxSize={5000000}
            filesLimit={5}
            text="Drag and drop file(s) here or click" 
                  />
);
  }

Regards.

Hi ilhammeidi,

I have tried this code in this theme with redux-form page, on submit still getting preview and not a file object.

https://share.getcloudapp.com/geur9bby

I have 2 fields for file upload on the form.

Hi ervishu83,

You can get the file object once file dropped or selected from local. And then put it inside local state before submit together with other reduxform-field values. So actually the dropzone and redux-form need to be separated, because of this issue.

You can see the example usage in /app/components/Contact/AddContact.js and /app/components/Contact/AddContactForm.js

Also here’s the another method by use HTML input file https://github.com/erikras/redux-form/issues/1989#issuecomment-287552919

Hope this can help and regards.

Hello, I’m using your theme but got so many bug. How can I ignore them. For example in Login and Register Form I cannot clear input value once fill. If you want to see I can send you a video

Hi adair89,

You can try to use Starter-Project to develop app from scratch without without being distracted from innate feature/components.

About deletion file, before you remove the components, please make sure there’s no other containers or pages that use those components, by search the component import in whole projects. And if you want to remove unnecessary things, we recommend to start by removing the containers or pages first (not the components).

Hope this can help.

Regards.

Thank you it work! anyways i bought two template from you because i like the to do list on the elite template. is it possible to copy the component over to this template?

Hi adair 89,

Glad to hear that. And yes of course you can cross over the components. The enlite and dandelion use same source code, and the mostly components designed independent.

Best 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