React-Komposer + Flow-Router params

Question

I'm a new one with Meteor and I make a social media. What I want it's a user can visit another user profile and see the playlist from him etc. I use React-Komposer for the data and Flow-Router for the route.

Now I'm stuck with the params in my route. I give the username params for Flow-Router and that work, but don't look like working for the containers.

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor';
import { composeWithTracker, composeAll } from 'react-komposer';
import { useDeps } from 'react-simple-di';
import ProfilePages from '../../ui/pages/ProfilePages';

const composer = (pageUsername, onData) => {
  const userProfileHandle = Meteor.subscribe('user.single', pageUsername);
  if (userProfileHandle.ready()) {
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch();
    onData(null, profileUser);
  } else {
    // UI component get a prop called `loading` as true
    onData(null, { loading: true });
  }
};

export default composeAll(
  composeWithTracker(composer),
  useDeps()
)(ProfilePages);

routes.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { mount } from 'react-mounter';
import { FlowRouter } from 'meteor/kadira:flow-router';

// Load the layout
import MainLayout from '../../ui/layouts/MainLayout';
import LoginLayout from '../../ui/layouts/LoginLayout';

// Import pages
import WelcomePages from '../../ui/pages/WelcomePages';
import LoginPages from '../../ui/pages/LoginPages';
import SignUpPages from '../../ui/pages/SignUpPages';

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer';

FlowRouter.route('/', {
  name: 'default.route',
  triggersEnter: [(context, redirect) => {
    if (!Meteor.userId()) {
      redirect('/login');
    } else {
      redirect('/home');
    }
  }],
});

FlowRouter.route('/login', {
  name: 'login.route',
  action() {
    mount(LoginLayout, {
      content: (<LoginPages />),
    });
  },
});

FlowRouter.route('/signup', {
  name: 'signup.route',
  action() {
    mount(LoginLayout, {
      content: (<SignUpPages />),
    });
  },
});

FlowRouter.route('/home', {
  name: 'home.route',
  action() {
    mount(MainLayout, {
      content: (<WelcomePages />),
    });
  },
});

FlowRouter.route('/profile/:username', {
  name: 'profile.route',
  action({ username }) {
    mount(MainLayout, {
      content: (<ProfilePagesContainer />),
      pageUsername: username,
    });
  },
});

publications.js

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';

Meteor.publish('userData', function userData() {
  return Meteor.users.find({
    _id: this.userId,
  });
});

Meteor.publish('user.single', username => {
  check(username, String);
  const selector = { username };
  return Meteor.users.find({ selector }).fetch();
});

Answer 1

When I post the question I seen my error and how fix it.

First I need to subscribe to all users.

Second I need to pass the params to the container in the routes.

routes.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { mount } from 'react-mounter';
import { FlowRouter } from 'meteor/kadira:flow-router';

// Load the layout
import MainLayout from '../../ui/layouts/MainLayout';
import LoginLayout from '../../ui/layouts/LoginLayout';

// Import pages
import WelcomePages from '../../ui/pages/WelcomePages';
import LoginPages from '../../ui/pages/LoginPages';
import SignUpPages from '../../ui/pages/SignUpPages';

import ProfilePagesContainer from '../../ui/containers/ProfilePagesContainer';

FlowRouter.route('/', {
  name: 'default.route',
  triggersEnter: [(context, redirect) => {
    if (!Meteor.userId()) {
      redirect('/login');
    } else {
      redirect('/home');
    }
  }],
});

FlowRouter.route('/login', {
  name: 'login.route',
  action() {
    mount(LoginLayout, {
      content: (<LoginPages />),
    });
  },
});

FlowRouter.route('/signup', {
  name: 'signup.route',
  action() {
    mount(LoginLayout, {
      content: (<SignUpPages />),
    });
  },
});

FlowRouter.route('/home', {
  name: 'home.route',
  action() {
    mount(MainLayout, {
      content: (<WelcomePages />),
    });
  },
});

FlowRouter.route('/profile/:username', {
  name: 'profile.route',
  action({ username }) {
    mount(MainLayout, {
      content: (<ProfilePagesContainer pageUsername={username} />),
    });
  },
});

publications.js

import { Meteor } from 'meteor/meteor';
// import { check } from 'meteor/check';

Meteor.publish('userData', function userData() {
  return Meteor.users.find({
    _id: this.userId,
  });
});

// Meteor.publish('user.single', username => {
//   check(username, String);
//   const selector = { username };
//   return Meteor.users.find({ selector }).fetch();
// });

Meteor.publish('all.users', () => Meteor.users.find({}));

ProfilePagesContainer.js

import { Meteor } from 'meteor/meteor';
import { composeWithTracker, composeAll } from 'react-komposer';
import { useDeps } from 'react-simple-di';
import ProfilePages from '../../ui/pages/ProfilePages';

const composer = ({ pageUsername }, onData) => {
  const userProfileHandle = Meteor.subscribe('all.users');
  if (userProfileHandle.ready()) {
    const profileUser = Meteor.users.find({ username: pageUsername }).fetch();
    onData(null, profileUser);
  } else {
    // UI component get a prop called `loading` as true
    onData(null, { loading: true });
  }
};

export default composeAll(
  composeWithTracker(composer),
  useDeps()
)(ProfilePages);