Updating text from collection


#1

Hi all, I have an item in my collection that updates from the server.

On my client side for some reason I cannot get it to be reactive…
Just wondering if any of you could help.

When the video is download the item in the collection is getting updated and I can see it in real time.
I want to be able to show this progress in the render section at the bottom as text but it just stays at 0.

The objects in the db:

  {
   "_id": "FMHk2KMtLxhS5pCyL",
  "videoId": "JByDbPn6A1o",
  "details": {
 "videoId": "JByDbPn6A1o",
 "progress": {
   "percentage": 100,
   "transferred": 41339278,
   "length": 41339278,
   "remaining": 0,
   "eta": 0,
   "runtime": 27,
   "delta": 2378322,
   "speed": 1463337.274336283
 }
},
 "complete": false
}

The error:
console.log shows this: []
and the progress value is 0 and does not increase as the value in the database does

 import React from 'react';
 import ReactDOM from 'react-dom';
 import Progress from '/imports/collections/progress/progress.js';


export default class MyPage extends React.Component{

	constructor(){
     super();
        this.state = {
            subscription: {
                progress : Meteor.subscribe("progress")
            }
        }	
    }

    getProgress(videoIdParam){
        let returnedObject = Progress.find({videoId: videoIdParam}).fetch();
        let progress = 0;
        console.log(returnedObject);
        if(returnedObject === null || returnedObject.details === undefined || returnedObject === {} || returnedObject === []){

        }else{
            progress = returnedObject.details.progress.percentage;
        }
        return progress;
    }

    
	componentWillUnmount(){
		this.state.subscription.progress.stop();
	}

    youtubeParser(url){
        if(url === null || url == undefined || url === ""){
            return "";
        }else{
            var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
            var match = url.match(regExp);
            return (match&&match[7].length==11)? match[7] : false;
        }

    }
 

    
    render(){		

    let videoId = this.youtubeParser($('#basic-url').val());


     return (  
            

            <div className="body content rows scroll-y">
      
                    <input type="text" className="form-control" id="basic-url" aria-describedby="basic-addon3"/>
                <div >
                    {this.getProgress(videoId)}
                </div>
        
            </div>

         ) 
    }
}

#2

Have you read the React - Using Meteor’s data system section of the Guide? To have your React component respond to data changes, you’ll want to use something like the react-meteor-data package. See the Guide for more info and examples.