React code duplication?


#1

I’m new to Meteor and currently trying to understand if I should use Blaze or React going forward. One thing that buggers me about the React solution is that it seems I have to do massive amounts of code duplication, or I might just be missing something.

According to the docs, basically every my component would have something like this code:

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import React from 'react';

import { Lists } from '/imports/api/lists.js';



export default class ListPage extends React.Component {
  render() {

    if (loading) {
      return (
        <Card fluid>
          <Card.Content>
            <Loader active />
          </Card.Content>
        </Card>
      )
    }

    return (
      ...
  );
  }

}

ListPage.propTypes = {
  list: React.PropTypes.object,
  todos: React.PropTypes.array,
  loading: React.PropTypes.bool,
  listExists: React.PropTypes.bool,
};

export default ListPageContainer = withTracker(({ id }) => {
  const todosHandle = Meteor.subscribe('todos.inList', id);
  const loading = !todosHandle.ready();
  const list = Lists.findOne(id);
  const listExists = !loading && !!list;
  return {
    loading,
    list,
    listExists,
    todos: listExists ? list.todos().fetch() : [],
  };
})(ListPage);

which strikes me as odd. Is there no better way to do this in a centralized way? Shouldn’t I be able to say somewhere (e.g. router definition or such) “hey, on this page I need these subscriptions and also on every page show a loader until all subscriptions are ready” ?

What obvious thing am I missing?


#2

Sure, just include the loading check in the top level component and leave it out of all of it’s children.
Only render the children when the data is ready


#3

Have a look at pup by @themeteorchef - covers a lot of how to strucutre the boilerplate nicely for a spa.


#4

where in pup can I find the solution to my question? I’ve looked at pup but it’s overwhelming at first.


#5

Thanks for sharing! @00tom, you can find Pup here: https://github.com/cleverbeagle/pup and the docs here https://cleverbeagle.com/pup.