tomredox / simplecrm Goto Github PK

How to solve this problem ?

We're currently using React.createClass, the v1.3 guide uses React.Component ES6 syntax (http://guide.meteor.com/v1.3/react.html).

This seems to explain the differences it very well: https://toddmotto.com/react-create-class-versus-component/
Ending with:

Facebook does suggest the future removal of React.createClass completely in favour of ES6 classes. For now, use what makes sense, they’re both just syntax with different semantics that do the same thing - they’re both classes!

Discuss!

Need logging that we can switch on to track code execution, the currently commented out console.log statements are located where we would want that logging to occur. Need to work out how people do logging in JS. Should we tie this into the Redux logging?

This looks useful: http://elijahmanor.com/grunt-away-those-pesky-console-log-statements/

Will need to be on beta 12 for this by the looks of things, see notes here: https://forums.meteor.com/t/a-first-implementation-of-meteor-app-testing-for-1-3/17097/46?u=tomredox

Automatically clients won't be able to call db methods

Had to run meteor npm install --save react-addons-pure-render-mixin

Need to not render the DevTools control and also not ship the redux-devtools npm modules to the client. The second part of that is trickier. We need to change the modules to devDependencies in package.json (which is fine, just npm remove and then install again with npm save-dev) but then we want conditionally import those modules in the code.

The original imports look like this:

import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
import { createDevTools } from 'redux-devtools';

I tried this:

if (debugOnly) {
    require('redux-devtools').default
    require('redux-devtools-log-monitor').default
    require('redux-devtools-dock-monitor').default
}

And that compiles, but the code doesn't run as we still need the named createDevTools constant. Can't work out how to get that with a conditional require.

The Guide doesn't help here: http://guide.meteor.com/v1.3/structure.html

Node Env is now available, so that may be an option: https://forums.meteor.com/t/meteor-1-3-early-beta-now-available/14723/312?u=tomredox.

ffxSams boilerplate has a good example of using NODE_ENV in meteor here: https://github.com/ffxsam/ffx-meteor-react-boilerplate/blob/master/client/store.js

Your publications have similar structure, I'd try and see if you can write some helper functions

Should be able to do this with Mocha and the ReactTestUtils library I think.

This fully worked example has some react unit tests using Mocha and JSDom: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html#unit-testing-support

See @ffxsam's comment here: ffxsam/ffx-meteor-react-boilerplate#8 (comment).

This probably relates to the separate issue of whether we should be bringing knowledge of the routing into Redux too so that restoring a previous state would then restore the page that goes with that state too.

@Gaereon recommends looking at this article in comments on a github gist here. That example is using JSON Web Tokens (JWTs) (which is an open source standard) and a paid authentication service auth0.

Need to think about how all this would tie into Meteor's existing security structure.

Only return and write data for logged in users (i.e. if there is a userid)

Just use npm install and imports

Think this is a bootswatch issue that is now fixed, but the bootswatch:paper package we are using is not using the latest version of bootswatch. Tried to change to point straight to the cdn instead of using the package, but couldn't get that working and really we also want those font files locally for offline use while developing. Could just add the bootswatch style files to the project.

Don't need to send all your data to the client

I copied that code from the MDG examples, but what is the reason for doing it? Remove it if it's not doing anything.

Abhi's comment: "I don't think you should extend Mongo.Collection. You gain nothing. And may confuse people who don't know what his new collection generator is."

Preferably something "pure" that will play nicely with Redux.
There is a React version of s-alert

There's a bigger question here about whether the collapsible panel is using the container pattern correctly

Do we need a currentlyDisplayedMessage in Redux? Or can it be excluded from State?

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 5203465 bytes) in /home/linweb38/r/redox-software.co.uk/user/htdocs/libraries/joomla/cache/storage/file.php on line 129

I downloaded the ZIP file and ran it via the "meteor" command. In the browser console, I see:

Cannot find module 'redux'

What NPM install commands are required prior to running simpleCRM-material-ui?

Thanks very much in advance for the info.

When an incorrect password is entered, there is no message/alert displayed to the user.
We can just see in console

Object { stack: "Meteor.makeErrorType/errorClass@htt…", error: 403, reason: "Incorrect password", details: undefined, message: "Incorrect password [403]", errorType: "Meteor.Error" }

Add package chrismbeckett:toastr, and in import/ui/security/login.jsx

Meteor.loginWithPassword( emailAddress, password, ( error ) => {
        if ( error ) {
          console.log(error);
          toastr.error(error.message);
        } else {
          FlowRouter.go( 'Home' );
        }
      });

At the moment I'm just copying the CSS files into ./client/css which is nasty.

I tried adding
import '../node_modules/react-s-alert/dist/s-alert-default.css'; or import 'react-s-alert/dist/s-alert-default.css'; to the main.js file but unsurprisingly that doesn't work.

It looks like this is maybe a known issue with Meteor 1.3 at present: https://forums.meteor.com/t/meteors-future-and-css-modules/18684

Abhi's comment "Be more descriptive with you actions, what is upsert? So many questions when reading that. Makes me have to go to the server Api and see which of the 2 you were talking about."

I was doing it like that as that's how MDG have done it in the guide. Review that decision and see if it's right for this project.

As per meteor/guide#263 (comment), @ffxsam said:

I only took a quick glance, but I would make a few suggestions with regards to conventions/syntax.

For thunks, IMO it's best to have a pattern like this:

Thunk: USER_REQUEST_[action name]
Succeed: USER_[action name]SUCCEEDED
Failed: USER[action name]_FAILED
Also, I might have missed something (likely, since I didn't look in detail), but I'm not sure why you're using thunks this way:

https://github.com/tomRedox/simpleCRM/blob/master/imports/ui/redux/customer-list-actions.jsx

.. when there's no async actions being performed?

He gives a great explanation and example of how to do thunks here:
https://github.com/ffxsam/ffx-meteor-react-boilerplate/blob/example/client/actions/colors.js

I had originally done the thunks like that following @gaearon's examples here https://github.com/reactjs/redux/blob/master/examples/shopping-cart/actions/index.js. He appears to be using that syntax despite not all of the code wrapped being async, I guess maybe he's doing that for consistency and to allow for async or additional stages later.

What had led me to the shopping cart example in the first place was the need to access the state in my actions and so i needed the getState property. I think I thought that I had to format my thunks like that to get it, but that may not be the case.