Hi golfexodus,

his problem is usually solved by using server side pagination. It should work something like this:

Open page with data table and you fetch first 20 items (or whatever size of a page is). You send /api/tableData?offset=0&limit=20. This will only return first 20 items.

User clicks on next page, you fetch the second page using /api/tableData?offset=20&limit=20. This will return items with id 21-40.

User clicks on next page, you fetch the third page using /api/tableData?offset=20&limit=20

For mui-datatables NPM, it has option serverSide and it helps you to do it easily. Chjeck Remote Data section in the documentation of MUI datatables package https://www.npmjs.com/package/mui-datatables#remote-data.

But if you are sure about your use case and you don’t want to do server side pagination, you can use Web Worker. The problem in your application is that JSON.parse for such a huge collection takes way too long. With Web Worker, you can start another thread that will not block the UI thread. In the worker thread, you will start parsing the collection and when you finish parsing, you will send the data back to the UI thread. Web workers were designed for exactly this use case. You can learn about it more here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Hope this can help.

Regards.

Hi tony-artanis,

Thanks for purchasing and the appreciation.

Here’s the guide to migrate jsx to typescript https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/ and here’s the converter tool https://github.com/lyft/react-javascript-to-typescript-transform

And for monorepo in node.js you can try to use lerna https://lerna.js.org/#getting-started

Feel free if you have any further queries.

Kind regards.

this is my vendor.chunk.js https://ibb.co/DkWWp43

Hallo langgan_id,

Terimakasih telah membeli template kami.

Untuk filesize issue, berikut beberapa cara untuk optimasinya.

import { object, object2, object3 } from 'plugin/objects';

usahakan menjadi

import object from 'plugin/objects/object';
import object2 from 'plugin/objects/object2';
import object3 from 'plugin/objects/object3';

2. Anda bisa memulai project dari starter-project dan pindahkan components sesuai kebutuhan dari enlite-prime

Semoga bisa membantu.

Salam.

thank you for replying to my question, so I can make the project from scratch, and move redux, routing and components from enlite to my new project.

because right now I didn’t make the project from scratch, but I edited the enlite project that I downloaded, so when it was built, my project size was this big

Hi golfexodus,

You can try to add acceptedFiles attribute in input tag, like this https://www.codeproject.com/Questions/763540/How-to-browse-only-xls-and-xlsx-file-in-html-file

Hope this can help.

Regards.

Hi golfexodus,

If you use TextFieldRedux component, it must be redux-form. And It cannot use value attribute to show the data.

So the value must be filled with initialValues from reduce state. You can see the example usage in app/components/Contact/AddContactForm.js and /app/containers/SampleApps/Contact/reducers/contactReducer.js

Here’s the docs about initialValue for redux-form https://redux-form.com/8.2.2/examples/initializefromstate/

Hope this can help.

Regards.

Hi Alexix,

Thanks for purchasing,

To run react without node server is possible, but need some adjustment, like change import components/module to constant or load the script in header. Here’s an example https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html

If you have backend system already, we suggest to use 2 server (front end for react with node) and backend, so no need to changea the template structure.

Feel free if you have any further queries.

Kind Regards.

Hi,

About onPlacesChanged, why the return value is always js func, it because it’s unregistered gmap developer. To get lang-lat should be const nextCenter = _.get(nextMarkers, '0.position', this.state.center); or this.state.center

Hope this can help.

Regards.

Thank you, will do for now. Please do let me know of any updates. Great job by the way

Your’e welcome and thanks for the appreciation.

We’ve replied to your another message.

Hi golfexodus,

Thanks for purchasing,

The issue is about columns state. There’s should be no “field” attribute, please follow the correct format or copy from https://github.com/gregnb/mui-datatables

[
 {
  name: "name",
  label: "Name",
  options: {
   filter: true,
   sort: true,
  }
 },
 {
  name: "company",
  label: "Company",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "city",
  label: "City",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "state",
  label: "State",
  options: {
   filter: true,
   sort: false,
  }
 },
]

Feel free if you have any further queries.

Regards.

Now working… thanks

Hi zarkasb,

Thanks for purchasing,

Here’s folders and files for main of the configuration and skeleton:

UI Components and Wrapper
- /app/components/Header/
- /app/components/Sidebar/
- /app/components/SidebarBig/
- /app/containers/App/ThemeWrapper.js
- /app/containers/Templates/

Template Config
- /app/utils/
- /internals/
- /server/

If any updates we will note the file changes in change log of the documentation.

Feel free if you have any further queries.

Regards.

Hi NCtrl,

Hope your’e doing well.

To put images into build/ folder you can use import in react components. If the image is larger than 10KB it will put in build folder, else the images will be generated as base64 format inside js file.

Or you can try this webpack plugin https://github.com/webpack-contrib/copy-webpack-plugin You implement that in /internals/webpack/webpack.prod.babel.js

But we recommend to use CDN store the image assets to make image load faster.

Feel free if you have any further queries.

Regards.

Hi NCtrl,

Thanks for purchasing.

Yes you can modify app/components/SidebarBig/MainMenuBig.js First please remove sub menu container renderChildMenu

<nav className={classNames(classes.listMenu, !drawerPaper && classes.drawerPaperClose)}>
          {renderChildMenu()}
 </nav>

Then in app/api/ui/menu.js create menu object with link attribute, but without child attribute. like this

{
    key: 'no_child',
    name: 'One Level Menu',
    icon: 'ios-document-outline',
    link: '/app/pages/blank-page',
  }

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

Regards.

I can read the data in the ContactList and ContactDetail Component , however I can’t read the data on the AddContactForm component. I passed this to the Field component

<Field name=”metadata.note” ..

This doesn’t work

best reagards Karel

Hi Karel,

For attr field name only accept string format. You’re nested form can be wrapped with FormSection https://redux-form.com/8.3.0/docs/api/formsection.md/

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

Regards.

Hi,

Thanks for visiting our portfolio.

This template is using Firebase Realtime DB.

Regards.

How hard would it be to get this to work with the Firestore Version?

Hi ctag,

We’re not sure about firestore, because we haven’t try it. If you’d like you can check Enlite starter version https://github.com/ilhammeidi/enlite-starter

Regards.

Hi XEBsoft_Technologies,

We’ve replied in Dandelion comment.

Regards

Thank you very much. The console log returned undefined on the AddContactInit function . In the contactReducer.js returned all data ok . I don’t what I’m missing , I copy the container and componend from the demo to the starter project . I can Add and remove contacts ok but not Edit .

all the best.

I fixed the problem .

I changed:

initialValues: state.getIn(['contact', 'formValues'])

TO

initialValues: state.getIn(['contactFullstack', 'formValues']),

and now is working fine.

Thank you very much

Glad to hear that and happy coding

Hi achorval,

You can try to use nodemon https://www.npmjs.com/package/nodemon. For usage nodemon server localhost 3000.

Then for front-end changes, we suggest to use default command npm start

Hope this can help.

Regards.

Hi ilhammeidi,

I have installed nodemon and tried to use it but the changes do not reflect immediately. The below is the ‘start’ in my package.json.

“start”: “cross-env NODE_ENV=development node server nodemon server localhost 3001”,

Hi achorval,

"start": "cross-env NODE_ENV=development node server",

The nodemon will do auto-restart the server, so no need run npm start again. The changes effects might take a time, because need to compile the front-end script as well.

We suggest to separate the api server and front-end side. So the api-server process will faster.

Hope this can help.

Regards.

Hi Vitor,

Thanks for purchasing and the review.

The sidebar has designed that icon only for parent(has children) menu. For one menu level can be applied for sidebar-layout. So you need make a modification a bit like this sidebar example.

// add parent menu with linkParent property

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

// make menu type condition in getMenus constant
if (item.child || item.linkParent) {
        return (
          <div key="{index.toString()}">
             {/************** Attention to this  ****************/}
            <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} />
               {/************** Attention to this   ****************/}
              { !item.linkParent && (
                <span>
                  { open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> }
                </span>
              )}
            </ListItem>
           {/************** Attention to this   ****************/}
            { !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>
        );
      }

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

Regards.

Hi littlejack001,

Thanks for purchasing.

We haven’t to integrate with spring boot backend service. After we research we got tutorial to work with react, please take a look this link https://spring.io/guides/tutorials/react-and-spring-data-rest/

Hope this can help.

Regards.

Hi nentangonline,

Thanks for purchasing.

Unfortunately this tempalate doesn’t have html version just a react.js.

Feel free if you have any further queries.

Regards.