I have a meteor app that allows users to update their skype name, phone number, email address, etc. To help maintain a consistent code base I have implemented an EJSON type UserModel in a common directory so it can run on the client and server.
EJSON.addType("UserModel", function fromJSONValue(value) {
return new UserModel(value);
});
UserModel.prototype = {
constructor: UserModel,
//
// EJSON Ovverrides.
//
valueOf: function() {
return JSON.parse(JSON.stringify(this), function(key, value) {
var dateFields = ["expiration", "createdAt"];
if(_.contains(dateFields, key) && typeof value === "string") {
return new Date(value);
} else {
return value;
}
});
},
typeName: function() {
return 'UserModel';
},
toJSONValue: function() {
return this.valueOf();
},
clone: function() {
return new UserModel(this.valueOf());
},
equals: function(other) {
if(!(other instanceof UserModel)) {
return false;
}
return this._id === other._id;
},
setPhoneNumbers: function(phoneNumber, queueUpdate) {
var modifier = {$set: {
'profile.phoneNumber': phoneNumber
}};
this.profile.phoneNumber = phoneNumber;
return this._saveOrQueueUpdate(modifier, queueUpdate);
},
_saveOrQueueUpdate: function(modifier, queueUpdate) {
if (!queueUpdate) {
return Meteor.users.update(this._id, modifier, function(err, res) {
});
} else {
this.pendingUpdates.push(modifier);
return true;
}
}
I call the setPhoneNumbers method on the settings page js file like so.
'blur #phonenumber':function(){
var user = Meteor.user();
var number = $("#phonenumber").val();
if(number.length){
user.setPhoneNumbers(number);
}
}
The problem with this is that whenever I call the setPhoneNumbers method, the page takes >500ms to update and locks the entire page. I looked at the docs and according to this segment, client code should never be blocking. The page only locks up when updates happen so I know it has something to do with the UserModel. Any insight to what could be causing this would be very helpful. The page is extremely slow and it is unacceptable for a production app.
Related
I work over a small React app that should store some data in local storage. And if I understand it correctly, it should keep them till clearly ordered to clear. The reason for this post is that while app data perfectly survives the refreshing page action, it disappears after closing/opening Chrome.
Here is the function which creates the storage:
export function initGlobalStorage() {
var Storage = function (options) {
options = options || {};
for (var i in options) {
this[i] = options[i];
}
};
const prefix = window.location.href;
Storage.prototype = {
storage: window.localStorage,
addPrefix: function(key){return (prefix + key); },
set: function (key, value) {
this.storage.setItem(this.addPrefix(key), JSON.stringify(value));
},
get: function (key) {
return this.storage.getItem(this.addPrefix(key));
},
remove: function (key, value) {
this.storage.remove(key, value);
},
clear: function () {
this.storage.clear();
},
key: function (index) {
return this.storage.key(index);
},
each: function (fn) {
if (typeof fn === "function") {
for (var i = 0, key; i < this.storage.length; ++i) {
key = this.storage.key(i);
fn(this.storage.getItem(key), key, i);
}
}
},
getAll:function(){
let result =[];
for(var key in this.storage){
if (key.includes(prefix)){result.push(JSON.parse(this.storage.getItem(key)))};
}
return result;
},
hasItems:function(){
console.log(this.getAll().length);
return this.getAll().length? true:false;
},
};
window.Storage = {
local: new Storage({ storage: window.localStorage }),
session: new Storage({ storage: window.sessionStorage }),
};
};
window.local.href is for distinguish 'my items' in localStorage from others that possibly exists there on client computer. BTW, currently I only test this app on localhost.
Here is how above function is applied
export function checkSupportForCache() {
return dispatch => {
if (storageAvailable('localStorage')) {
dispatch(cacheSupported());
console.warn("Storage available");
initGlobalStorage();
if (window.Storage.local.hasItems()){
console.log('Storage contains items');
dispatch(cacheNotEmpty());
}else{
console.warn("No items in storage");
}
} else {
console.warn("Storage not available");
}
};
}
storageAvailable('localStorage') is a function that checks support for localStorage in a certain browser.
As I have written, when I refresh page localStorage is still there - then I suppose code is OK.
But what happens when do close browser then? I do not consciously request for any sort of purging action. Do I unconsciously? I have checked Chrome settings and there is nothing that looks suspicious. Do I not understand anything at all as per subject? Maybe, just give me a hint.
I want to send value of result from child to parent element. I used Session.set and Session.get and it works fine but I know that is not good practice because Sessions are global. So, I wanted to try something like reactive var or reactive dict but both of them are giving me only object as a result. What should I do or how should I take specific things from that object? (I am storing JSON inside that ReactiveVar or Dict and I know that they are really bad with JSON. Thank you for help!
Template.companyCreate.helpers({
CompanyName : function () {
if (Meteor.user() || Roles.userIsInRole(Meteor.user(),['admin','adminCreator'], 'companyAdmin')) {
Meteor.call('findCompany', function(err, result) {
if (err) {
console.log(err.reason)
}
else {
//this is where I want to take result and give it to parent function
}
});
return //this is where I want to take result that was given from child function and return it to CompanyName
}
else {
Router.go('/nemate-prava')
}
},
UPDATED CODE
Template.companyCreate.onCreated(function Poruke() {
this.message = new ReactiveVar(' ');
let self = this;
let user = Meteor.user();
let companyNameHandler = Template.currentData().companyNameHandler;
self.companyName = new ReactiveVar();
if (user && Roles.userIsInRole(user,['admin','adminCreator'], 'companyAdmin')) {
Meteor.call('findCompany', function(err, result) {
if (err) {
console.log(err.reason)
}
else {
self.companyName.set(result);
companyNameHandler(result);
}
});
}
else {
Router.go('/nemate-prava')
}
});
Template.companyCreate.helpers({
message: () => { return Template.instance().message.get() },
isNotInRole : function() {
if (!Meteor.user() || !Roles.userIsInRole(Meteor.user(),['admin','adminCreator'], 'companyAdmin')) {
return true;
}
else {
return false;
}
},
CompanyName : function () {
return Template.instance().companyName.get();
}
});
Template.companyCreate.events({
'submit form': function(event, template) {
var Ime = event.target.Ime.value;
event.preventDefault();
Meteor.call('companyCheck', Ime, function(error, result) {
if (error) {
console.log(error.reason);
template.message.set(error.reason);
alert(error.reason);
}
else {
event.target.Ime.value = "";
console.log('Kompanija je uspesno kreirana!');
template.message.set("Uspesno!");
}
})
},
});
Method:
'findCompany'(){
ImeKompanije = firma.findOne({AdminID: this.userId}).ImeKompanije
if (typeof ImeKompanije == 'undefind') {
throw new Meteor.Error(err, "Greska!");
}
return ImeKompanije;
},
});
Router:
Router.route('/comp/:ImeKompanije', {
name: 'companyProfile',
template: 'companyProfile',
waitOn: function() {
return Meteor.subscribe('bazaFirmi', this.params.ImeKompanije)
},
action: function() {
this.render('companyProfile', {
data: function() {
return firma.findOne({ImeKompanije: this.params.ImeKompanije});
}
});
},
});
ok, there's a lot to unwind here. let's start with something small.
if (Meteor.user() || Roles.userIsInRole(Meteor.user(),['admin','adminCreator'], 'companyAdmin')) {
i think this line is meant to say, "if the user is an admin". but it's really saying, "if the user is logged in." if you meant the first one, then change the "||" to an "&&".
bigger issue is you're making a server call in a helper. helpers can get called over and over, so think of them as something that simply returns data. it should not have any side effects, such as making a server call or (yikes) re-routing the user.
so let's move all that side effect code to the onCreated() and capture the company name so it can be returned from the helper. We'll also get set up to return the company name to the parent.
Template.companyCreate.onCreated(function() {
let self = this;
let user = Meteor.user();
let companyNameHandler = Template.currentData().companyNameHandler;
self.companyName = new ReactiveVar();
if (user && Roles.userIsInRole(user,['admin','adminCreator'], 'companyAdmin')) {
Meteor.call('findCompany', function(err, result) {
if (err) {
console.log(err.reason)
}
else {
self.companyName.set(result);
companyNameHandler(result);
}
});
}
else {
Router.go('/nemate-prava')
}
});
now the helper is really simple, it just returns the data that was saved to the template's reactive var:
Template.companyCreate.helpers({
CompanyName : function () {
return Template.instance().companyName.get();
}
});
the last part is setting up the handler to return the data to the parent. it's bad form to have the client reaching back up to its parent, so i usually have the parent give to the child a function it can call. usually i'll do that when the child says, "i've done my work," but here we can use it to provide that data. i'll have to make some assumptions on what your parent looks like.
<template name="Parent">
{{> companyCreate companyNameHandler=getCompanyNameHandler}}
</template>
Template.Parent.helpers({
getCompanyNameHandler() {
let template = Template.instance();
return function(companyName) {
console.log(companyName);
// you can also access the parent template through the closure "template"
}
}
});
the parent's helper returns a function that is passed to the client. when the client calls it, it will execute in the parent's closure. you can see i set up a variable called "template" that would allow you to, say, access reactive vars belonging to the parent.
UPDATE: in case the handler isn't known as is inside the Meteor.call() scope, we can try using it through a reactive var.
Template.companyCreate.onCreated(function() {
let self = this;
let user = Meteor.user();
self.companyNameHandler = new ReactiveVar(Template.currentData().companyNameHandler);
self.companyName = new ReactiveVar();
if (user && Roles.userIsInRole(user,['admin','adminCreator'], 'companyAdmin')) {
Meteor.call('findCompany', function(err, result) {
if (err) {
console.log(err.reason)
}
else {
self.companyName.set(result);
let fn = self.companyNameHandler.get();
fn(result);
}
});
}
else {
Router.go('/nemate-prava')
}
});
I'm using Meteor with React. When I load a page, Iron Router creates a document in a collection. It then uses a Meteor.method to look up the user's permissions and set them on the document through and update. At the same time, the client page is loading and runs queries for the document in the collection.
It seems that the Meteor.method code is clobbering the query on the client. Through multiple queries, the document exists and I can console.log() it. Then suddenly I get "undefined". The document still exists because I can query it from another Meteor.call. I have used publish/subscribe, but the client can't see it.
Here's some of my code (files combined for simplicity):
Editors = new Mongo.Collection('editors');
if (Meteor.isServer())
Meteor.publish('editors', function (editorId) {
return Editors.find(editorId) || this.ready();
});
Meteor.methods({
setEditorMode: function (editorId, userId) {
var editor = Editors.findOne(editorId);
var role = Roles.find({
doc_id: editor.manuscriptId,
user_id: userId
}).fetch()[0];
var defaultEditorMode = "readOnly";
if (role !== null && role.role == 'owner' || role.role == 'contributor') {
defaultEditorMode = "readWriteComment";
} else if (role !== null && role.role == 'reviewer') {
defaultEditorMode = "readComment";
}
console.log(editor);
Editors.update(editor._id, {
$set: {
defaultEditorMode: defaultEditorMode,
editorMode: defaultEditorMode
}
});
console.log(Editors.findOne(editor._id);
}
});
}
if (Meteor.isClient()) {
Router.route('/documents/:id/edit', function () {
var editorId;
manuscriptId = this.params.id;
this.wait(/* Doing some work */);
if (this.ready()) {
editorId = Editors.insert({manuscriptId: manuscriptId});
Meteor.call('setEditorMode', editorId, Meteor.userId());
this.render('editor', {
data: function () {
return {
editorId: editorId
};
}
});
} else {
this.render('loading');
}
});
Editor = React.createClass({
mixins: [ReactMeteorData],
componentWillMount: function () {
Meteor.subscribe('editors', this.props.editorId);
},
getMeteorData: function () {
var editor, editorId;
editorId = this.props.editorId;
editor = Editors.findOne(editorId);
console.log(editor);
return {
editor: editor || {}
};
},
render: function () {
return <EditorContent editor={this.data.editor} />
}
});
}
I need to make the update on the server so that it can happen securely. My expectation was that any updates to the document on the server would propagate to the client. Instead, once I make the update on the server getMeteorData() gets called and the query returns "undefined".
How can I get the value I just set on the server?
Thanks to #ko0stick, I figured out that I needed to place my Meteor.subscribe code inside of getMeteorData
I'm using babel with decorator stage:0 support in my flux fluxible js project, and I want to use an authenticated decorator for my service api modules to check for a valid user session.
Googling around, there seems to be several posts that explain different variations but couldn't find one definitive docs or instructionals.
Here's what I tried so far, I know that my parameters for the authenticated function are incorrect, and not sure if I need to implement a class for my module rather than just using the exports object.
The part that I couldn't find the docs for is how to implement the decorator itself - in this case something that takes the req parameter the decorated function will receive and checking it.
// how do I change this method so that it can be implemented as a decorator
function checkAuthenticated(req) {
if (!req.session || !req.session.username)
{
throw new Error('unauthenticated');
}
}
module.exports = {
#checkAuthenticated
read: function(req, resource, params, serviceConfig, callback) {
//#authenticated decorator should allow me to move this out of this here
//checkAuthenticated(req);
if (resource === 'product.search') {
var keyword = params.text;
if (!keyword || keyword.length === 0) {
return callback('empty param', null);
} else {
searchProducts(keyword, callback);
}
}
}
};
class Http{
#checkAuthenticated
read(req, resource, params, serviceConfig, callback) {
if (resource === 'product.search') {
var keyword = params.text;
if (!keyword || keyword.length === 0) {
return callback('empty param', null);
} else {
this.searchProducts(keyword, callback);
}
}
}
searchProducts(keyword, callback) {
callback(null, 'worked');
}
}
function checkAuthenticated(target, key, descriptor) {
return {
...descriptor,
value: function(){
console.log(arguments);
const req = arguments[0];
if (!req.session || !req.session.username) {
throw new Error('unauthenticated');
}
return descriptor.value.apply(this, arguments);
}
};
}
let h = new Http();
h.read(
{ session: { username: 'user' } },
'product.search',
{ text: 'my keywords' },
null,
function(err, result) {
if (err) return alert(err);
return alert(result);
}
);
See jsbin http://jsbin.com/yebito/edit?js,console,output
I develop a mobile application using ionic. when I load a page ( using window.location.reload(); in javascript ) the application lose the information of the user (the information of authentification ) .
I m looking for a solution that allow my app to save these information even I load the page !
I use this service inside my app.js to save the data of the user and share it with controllers
.service('sharedProperties', function () {
var idpersonne,nom,prenom,login,pass,admin ;
return {
getIdpersonne: function () {
return idpersonne;
},
setIdpersonne: function(value) {
idpersonne = value;
},
getNom: function () {
return nom;
},
setNom: function(value) {
nom = value;
},
getPrenom: function () {
return prenom;
},
setPrenom: function(value) {
prenom = value;
},
getLogin: function () {
return login;
},
setLogin: function(value) {
login = value;
},
getPass: function () {
return pass;
},
setPass: function(value) {
pass = value;
},
getAdmin: function () {
return admin;
},
setAdmin: function(value) {
admin = value;
}
};
})
I suggest you to take a look into the local storage to save data easily (http://learn.ionicframework.com/formulas/localstorage/).
This article from Ionic team shows everything in details.
The basic syntax for the local storage is:
window.localStorage['name'] = 'Max';
and load the value by:
var name = window.localStorage['name'] || 'you';