meteormeteor-blazeflow-router

Template won't be rendered in Meteor FlowRouter


I need your help to figure out what's wrong with my code. I have a HomeLayout devided to 3 sections;

  1. header
  2. side
  3. main

enter image description here

I have a conversation list ; it will be rendered in the main section and it contain a subsection called One_Conversation : when I click on conversation it's rendered enter image description here

well right here it's ok : my problem that when I click on another conversation , the template won't be rendered

this is my code : /routes.js

FlowRouter.route('/conversation', {
    name: 'Conversation',

    action(){
        BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list'});
    }
});
FlowRouter.route('/conversation/:idConversation', {
    name: 'oneConversation',
    action(){
        BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list', conversation: 'One_conversation'});
    }
});

/HomeLayout.html

<template name="HomeLayout">

        <div class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
            {{> Header}}

            <div class="app-body">
                <div class="sidebar">
                    {{> Template.dynamic template=side }}
                </div>
                <main class="main">
                    <div class="container-fluid">
                        {{> Template.dynamic template=main }}
                    </div>
                </main>

            </div>
            {{> Footer}}
        </div>
</template>

/Conversation_list.html

<template name="Conversation_list">
<div class="messages">
////code
////code
////...
</div>
 <conversation class="content">
            {{> Template.dynamic template=conversation }}
        </conversation>
</template>

and finnaly in my Conversation_list.events when I click to conversation

FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});

this is /OneConversation.html Template

<template name="One_conversation">
    {{#with oneConversation}}

            <div class="contact-profile">
                {{#if isDefault}}
                    <img src="{{contact.profile_pic}}" alt="" />
                    <p>{{contact.first_name}} {{contact.last_name}}</p>

                {{else}}
                    <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                    <p>{{contactLiveChat.first_name}} {{contactLiveChat.last_name}}</p>
                {{/if}}
                <div class="social-media">
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                    <i class="fa fa-instagram" aria-hidden="true"></i>
                </div>

            </div>
            <div class="messages">
                {{#each allMessagesOfConversation}}
                    <ul>
                        {{#if isFirst}}

                            <li class="replies">
                                <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                                <p>{{message}} </p>
                            </li>
                        {{else}}

                            <li class="sent">
                                <img src="{{contactM.profile_pic}}" alt="" />
                                <p>{{message}}</p>
                            </li>
                        {{/if}}
                    </ul>
                {{/each}}
            </div>


            <div class="message-input">
                <div class="wrap">
                    <input type="text" placeholder="Write your message..." />
                    <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
                    <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                </div>
            </div>
    {{/with}}
</template>

and this is /OneConversation.js

import { Template } from ‘meteor/templating’;

import ‘./One_conversation.html’;
import {Meteor} from “meteor/meteor”;
var idConversation=’’;
var typeConversation=’’;
var token=’’;
var psid=’’;
Template.One_conversation.onCreated(function One_conversationOnCreated() {
idConversation = FlowRouter.getParam(“idConversation”);
// typeConversation= Session.get(‘typeConversation’);
//
//
// token= Session.get(‘token’);
// psid= Session.get(‘psid’);
// console.log("OneConversation psid: ",psid);
// console.log("OneConversation token: ",token);
//
// psid= FlowRouter.getParam(“psid”);
// console.log("OneConversation psid liveChat: ",psid);

Meteor.subscribe('allConversations');
Meteor.subscribe('allMessages');
Meteor.subscribe('allContacts');
Meteor.subscribe('allHotels');
Meteor.subscribe('allImMessenger');
});

Template.One_conversation.rendered = function () {

};

Template.One_conversation.helpers({
allMessagesOfConversation: function() {

    return Messages.find({idConversation: idConversation},{sort: {createdAt: 1}}).map(function(message) {

        if (message.typeMessage ==="1") {
            message.isFirst=true;
            return message;
        }else {
            return message;

        }
    });

},
oneConversation: function() {

    return Conversations.findOne({_id: idConversation});


},
});

Template.One_conversation.events({
‘click .submit’(event,instance) {

    const message = $(".message-input input").val();
    if($.trim(message) === '') {
        return false;
    }

    if(Session.get('typeConversation') ==='facebook'){
        Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
            if (er) {
                console.log("send message problem");
                console.log(er);
            } else {
                console.log("message sended successfully");
                $(".message-input input").val('');
            }
        });
    }else{
        var newMessageInfo = {
            idSender: Session.get('psid'),
            message: message,
            type: "liveChat",
            createdAt: new Date(),
            idConversation: Session.get('idConversation'),
            status: "seen",
            typeMessage: '1'
        };
        Meteor.call('insertMessages', newMessageInfo, function (er) {
            if (er) {
                console.log("insert problem");
                console.log(er);

            } else {
                console.log("message added successfully", "success");
                $(".message-input input").val('');

            }

        });
    }
},
});

what am I doing wrong ?


Solution

  • Well it's fixed , my problem was in the idConversation ;

    i set the id of the conversation in a session conversationList.events and get it in the oneConversation Helper so the code become like this

    /Conversation_list.js
    
    import { Template } from 'meteor/templating';
    import './conversationList.html';
    import {Meteor} from "meteor/meteor";
    
        Template.conversationList.onCreated(function conversationListOnCreated() {
            Meteor.subscribe('allConversations');
            Meteor.subscribe('allMessages');
            Meteor.subscribe('allContacts');
            Meteor.subscribe('allHotels');
            Meteor.subscribe('allImMessenger');
        });
        var psid="";
        var token="";
    
        Template.conversationList.rendered = function () {
        };
    
        Template.conversationList.helpers({
            toUpperCase: function(str) {
                return str.toUpperCase();
            },
            allMessagesOfConversation: function() {
                return Messages.find({idConversation: Session.get('conversationId')},{sort: {createdAt: 1}}).map(function(message) {
                    if (message.typeMessage ==="1") {
                        message.isFirst=true;
                        return message;
                    }else {
                        return message;
                    }
                });
            },
            oneConversation: function() {
                return Conversations.findOne({_id: Session.get('conversationId')});
            },
    
            allConversations: function() {
                return Conversations.find({idHotel: Hotels.findOne({contractId: Meteor.users.findOne({_id: Meteor.userId()}).profile.contractId})._id,archived:false},{sort: {createdAt: -1}}).map(function(conversation, index) {
                    if (index === 0) {
                        conversation.isFirst = true;
                    }
                    if(conversation.typeConversation === 'facebook'){
                        conversation.isDefault = true;
                    }
                    return conversation;
                });
            },
        });
    
        Template.conversationList.events({
            'click #archive'(event){
                Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {
                    if(err){
                        console.log(err);
                    }else{
                        FlowRouter.go('/conversation');
                    }
                })
            },
            'click .contact'(event,instance) {
                event.preventDefault();
                if($("#contact_active").hasClass("active")){
                    $("#contact_active").removeClass("active");
                    $("#contact").addClass("active");
                }else{
                    $("#contact").removeClass("active");
                    $("#contact_active").addClass("active");
    
                }
                Session.set('typeConversation',this.typeConversation);
                if(this.typeConversation === 'facebook'){
                    const pageId = this.idPage;
                    console.log(pageId);
                    token = ImMessenger.findOne({pageId: pageId}).pageAccessToken;
                    Session.set('token', token);
    
    
                    psid = this.contact().idFacebook;
                    Session.set('psid', psid);
    
                    Session.set('conversationId', this._id);
    
                }else{
                    psid = this.contactLiveChat()._id;
                    Session.set('idContactLiveChat', psid);
                    Session.set('conversationId', this._id);
                }
    
                FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});
                Session.set('idOneConversation',this._id);
    
            },
            'click .profile-img'(event) {
                event.preventDefault();
                $("#status-options").toggleClass("active");
            },
            'click .expand-button'(event) {
                event.preventDefault();
                $("#status-options").toggleClass("active");
            },
            'click .status-options ul li'(event) {
                event.preventDefault();
                $("#profile-img").removeClass();
                $("#status-online").removeClass("active");
                $("#status-away").removeClass("active");
                $("#status-busy").removeClass("active");
                $("#status-offline").removeClass("active");
                $(this).addClass("active");
    
                if($("#status-online").hasClass("active")) {
                    $("#profile-img").addClass("online");
                } else if ($("#status-away").hasClass("active")) {
                    $("#profile-img").addClass("away");
                } else if ($("#status-busy").hasClass("active")) {
                    $("#profile-img").addClass("busy");
                } else if ($("#status-offline").hasClass("active")) {
                    $("#profile-img").addClass("offline");
                } else {
                    $("#profile-img").removeClass();
                };
                $("#status-options").removeClass("active");
            },
        });
    

    and this is

    /oneConversation.js
    
    import { Template } from 'meteor/templating';
    import './oneConversation.html';
    import {Meteor} from "meteor/meteor";
    var idOneConversation='';
    var typeConversation='';
    var token='';
    var psid='';
    Template.oneConversation.onCreated(function oneConversationOnCreated() {
        idOneConversation = FlowRouter.getParam("idConversation");
        Session.set('idOneConversation',idOneConversation);
    
        Meteor.subscribe('allConversations');
        Meteor.subscribe('allMessages');
        Meteor.subscribe('allContacts');
        Meteor.subscribe('allHotels');
        Meteor.subscribe('allImMessenger');
    });
    
    Template.oneConversation.rendered = function () {
    
    };
    
    Template.oneConversation.helpers({
        allMessagesOfConversation: function() {
    
            return Messages.find({idConversation: Session.get('idOneConversation')},{sort: {createdAt: 1}}).map(function(message) {
    
                if (message.typeMessage ==="1") {
                    message.isFirst=true;
                    return message;
                }else {
                    return message;
    
                }
            });
    
        },
        oneConversation: function() {
    
            return Conversations.findOne({_id: Session.get('idOneConversation')});
    
    
        },
    });
    
    Template.oneConversation.events({
        'click #archive'(event){
            Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {
    
            })
        },
        'click .submit'(event,instance) {
    
            const message = $(".message-input input").val();
            if($.trim(message) === '') {
                return false;
            }
    
            if(Session.get('typeConversation') ==='facebook'){
                Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
                    if (er) {
                        console.log("send message problem");
                        console.log(er);
                    } else {
                        console.log("message sended successfully");
                        $(".message-input input").val('');
                    }
                });
            }else{
                var newMessageInfo = {
                    idSender: Session.get('idContactLiveChat'),
                    message: message,
                    type: "liveChat",
                    createdAt: new Date(),
                    idConversation: Session.get('idOneConversation'),
                    status: "seen",
                    typeMessage: '1'
                };
                Meteor.call('insertMessages', newMessageInfo, function (er) {
                    if (er) {
                        console.log("insert problem");
                        console.log(er);
    
                    } else {
                        console.log("message added successfully", "success");
                        $(".message-input input").val('');
    
                    }
    
                });
            }
        },
    });