Migrating to React

help
22

So far:

  • I mode all my subscriptions into Blaze templates.
  • I removed Iron Router and Added:
  • meteorhacks:picker,
  • kadira:flow-router,
  • kadira:blaze-layout,
  • arillo:flow-router-helpers.
  • I changed a lot of layout and links
  • I converted all but on server side routes to methods

So far so good.

The only issue I’m now having is with my one server side route I can’t get rid of – my paypal route. And this is where I’m having an issue.

Specifically once I converted my Iron Router route to a Picker route I get an error.

Here’s the Iron Router code that worked:

Router.route('/pp', function (req, res) {
  var params = req.body || {};

  // STEP 1: read POST data
  // Must respond to PayPal IPN request with an empty 200 first
  req.statusCode = 200;
  res.end('OK');

  // Step 2: POST IPN data back to PayPal to validate
  Transactions.verify_org(params, {'allow_sandbox': false}, function callback(err, mes) {
    if (err) {
      console.log(err);
    }
    else {
      if (params.payment_status == 'Completed') {
        Fiber(function () {
          if (params.payment_status === 'Completed') {
            // can run this meteor call because it's inside a fiber
            // do stuff with params
            }
          }
        }).run();
      }
    }
  });
}, {where: 'server'});

This is the first version of the Picker.route that doesn’t work. I basically just took what I had in IR.

if (Meteor.isServer) {
  Picker.route('/pp', function (params, req, res, next) {
  var params = req.body || {};

  req.statusCode = 200;
  res.end('OK');

  Transactions.verify_org(params, {'allow_sandbox': false}, function callback(err, mes) {
    if (err) console.log(err);
    else {
      if (params.payment_status == 'Completed') {
        Fiber(function () {
         // do stuff with params
        }).run();
      }
    }
  });
 });
}

With the above I get the following error:

Posting back to paypal
[Error: IPN Verification status: INVALID]
23

After switching from Iron Router to Picker, my solution for PayPal IPN verifications no longer worked. But this post on SO has the answer if you’re using Picker & IR.

Now that I’ve migrated my router, I think I can finally take my first crack at React.

24

One thing I’d like to understand is, with Flow Router, why do I get this extra /#!/ before all my routes? For example in IR I would have a route name /come-here. I the url bar it would look like this ‘mywebsite.com/come-here’. But in Flow Router its like this 'mywebsite.com/#!/come-here instead. I can’t find reference to this in the docs.

25

Also where can I find a good primer on how imports work within Meteor? For example, right now I have no imports in any of my files. But it seems from the Meteor docs I should move to have all my file with imports. Why do things work without imports and why should I add in imports?

26

Files in your /imports or /packages directories are not imported automatically. Everything else is. I think that’s basically what you need to know. In other words, if you want to use imports you’d move your code to the imports directory.

The short answer to “why should I use imports?” is “because smart people say it’s better”. But you don’t have to, for example for Telescope it took me a while before finally getting rid of all globals, even after switching to React.

27

Just to test out a small section:

Will someone please help me on this one? I’m on Meteor 1.3.5.1. I installed:

npm install --save react react-dom
meteor add react-template-helper

This should be all I need to get started right?

I created a folder for my react components, and I’m also showing where the target template is located in relation in case it matters somehow with imports:

\app
  \client
    \react
      \components
        hello.jsx
    \views
      \messages
        messages-helpers.js
        messages.html

In my hello.jsx file. In the official Meteor guide, there is no example I could find where it showed the actual component definition that was added to a Blaze template, so I took this from an example further up the page.

import React from 'react';

export default class HelloWorld extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

Relevant code within the Blaze helper. Here, I do not have ANY import in any helpers so far. This is the first as I’m just following the Meteor guide. Do I actually need the import { Template }?

import { Template } from 'meteor/templating';

import './messages.html';
import HelloWorld from './react/components/hello.jsx';

Template.messages.helpers({
  HelloWorld() {
    return HelloWorld;
  },
  ...

And messages.html.

<template name="messages">
 ...
<li>
 {{> React component=HelloWorld}}
</li>
 ...

I have added the id=“app” in to my body’s HTML somewhere. I really don’t know if I need this or what this means actually.

<body>
  ...
  {{> meteorStatus showLink=false}}
  {{> sAlert}}
   <div id="app"></div>
</body>

It’s not working. I don’t get any errors. Just nothing renders.

Any help or pointers are appreciated!