I'm in a Ionic2 project using Meteor.
In my Component I declare Meteor with declare let Meteor;.
After that I can get the user with Meteor.user(); within my source-code.
But I'm not able to to the same in my html-code *ngIf="Meteor.userId() or {{Meteor.user().username}}.
I get the error Cannot read property 'userId' of undefined.
Can someone tell me how to access Meteor in the html-source? Thank you
...
declare let Meteor;
export class NewMyPage {
M = Meteor;
...
...
After that I can user *ngIf="M.userId() or {{M.user().username}} in my html-source.
Related
How can I get values from local storage in next.js?When i give localStorage.getItem() in console,it is prnting the values.But when I assign this to a variable it is giving LocalStorage is not defined error.I have also added redux-persist in my localstorage
localStorage.getItem('id')
Local Storage is a Web API native to modern web browsers. It allows websites/apps to store data in the browser, making that data available in future browser sessions.
There are two React lifecycle methods we can use in our component to save/update the browsers localStorage when the state changes:
componentDidMount()
componentDidUpdate()
componentDidMount will run once your component has become available and loaded into the browser. This is when we gain access to localStorage. Since localStorage doesn’t reside in Node.js/Next.js since there is no window object, we will have to wait until the component has mounted before checking localStorage for any data. So If you want to assign the local storage value into a variable, please do this inside the componentDidMount method.
componentDidMount() {
const data = localStorage.getItem('id')
console.log(data);
if(data) {
//here you can set your state if it is necessary
}
}
And If we want to update our local storage value through the state we can easily update the localStorage value with our changes value by using componentDidUpdate. This method gets run each time the state changes so we can simply replace the data in localStorage with our new state.
componentDidUpdate() {
localStorage.setItem('id', JSON.stringify(this.state))
}
localStorage is a property of object window. It belongs to the browser, not next.js nor React, and accessing localStorage is not possible until React component has been mounted. So you need to ensure that your React app is mounted before calling localStorage, e.g. calling localStorage.getItem inside componentDidMount.
When working with a framework like Next.js that executes code on the server side, using localStorage produces an error like "localStorage is not defined" or "window is not defined"
To fix this, check to see if window is defined so that the code will run only when it's available.
This is a great article that explains more: https://blog.logrocket.com/using-localstorage-react-hooks/
See the section called, "Problems accessing localStorage for an SSR application"
You can create a file called "useLocalStorage.tsx" or whatever, and it would contain something like this:
import { useState, useEffect } from "react";
function getStorageValue(key, defaultValue) {
// getting stored value
if (typeof window !== 'undefined') {
const saved = localStorage.getItem(key);
return saved || defaultValue;
}
}
export const useLocalStorage = (key, defaultValue) => {
const [value, setValue] = useState(() => {
return getStorageValue(key, defaultValue);
});
useEffect(() => {
// storing input name
localStorage.setItem(key, value);
}, [key, value]);
return [value, setValue];
};
Then you can just import it into the file you want to use it in like this:
import { useLocalStorage } from './useLocalStorage'
Then you can call it to get the "id" from localStorage:
const [id, set_id] = useLocalStorage("id", "");
First think to take a note is, localStorage has nothing to do with next.js or redux-persist. localStorage is the internal window object and can be directly accessible without any definition.
I think you are trying to access the localStorage before it is being set, so you get that error.
Simple solution to this is to use Conditional (ternary) operator
,
const id = localStorage.getItem('id') ? localStorage.getItem('id') : "set your own default value";
console.log(id);
I want to use Meteor.userId() inside of a viewmodel using Mobx for state management.
i.e
#observable isLoggedIn = Boolean(Meteor.userId());
The issue is, I receive this error when I attempt to do this
"Error running template:
`Error: Meteor.userId can only be invoked in method calls or publications."`
I don't believe createContainer is applicable here as it's designed for React components and this is just a standard es6 JS class.
I probably could use createContainer on my main App component and just set the loggedIn observable in an ApplicationModel or something of that sort. But that just feels hacky.
Any ideas or solutions would be greatly appreciated!
Thanks!
Attempt to wrap the entire Meteo class in an persistent observable array:
import {observable, toJS} from 'mobx';
import {persist} from 'mobx-persist';
#persist #observable _meteo = Meteo
You can then call the state when required by the component:
const {_meteo } = props.store
_meteo.userId()
..else review the toJS() data!
I want a function to be called whenever a new child is added to "chat". I know this can be done using "child_added" event. However, from that function, I want to modify the newly created child.
So suppose a new child "123456" is added to chat and I want to update the "123456" object in the DB. I think I could solve the problem if I somehow manage to get the key (in this case it's 123456) of the newly added object. Is there a way to achieve this?
That should do the trick:
ref.on('child_added', function(childSnapshot, prevChildKey) {
var key = childSnapshot.key;
...
});
You will find more info at:
https://firebase.google.com/docs/reference/js/firebase.database.Query#on
u can also use firebase cloud functions as well by putting a trigger, so that this can be handled by server.
export const onNewChatTrigger = functions.database.ref('chat/{chatId}').onCreate(event => {
let key = event.params.chatId;
let data = event.data.val();
...
});
Is there anyone who has experience using Polymer?
What I have:
A sqlite database storing an array data with some objects inside.
A polymer app displaying the objects from the database using the dom-repeat web component.
What I need to do:
Displaying from the database only those objects based on a filtering.
In my app I have a "filter" form with some options to be checked, and depending on which option gets checked (they are checkboxes), it should return only those objects from the database that match my selection.
I know you can use the a "filter" element in the dom-repeat component that accepts a value which is a callback function. And in the app to check if an option has been checked we can insert checked="{{hostChecked::change}}". From the Polymer documentation I also know that you can insert observers to look for changes in the app. I got this far, but can't manage to figure out how to put all these findings together.
I'm pretty knew to Polymer and an experience help would be hugely appreciated.
Thanks in advance
Try this:
<my-app>
<my-checkbox checked="{{prop1}}">
<my-checkbox checked="{{prop2}}">
...
</my-app>
then:
static get properties() {
return {
prop1: Boolean,
prop2: Boolean,
filter: {
computed: '_computeFilter(prop1, prop2,...)'
}
};
}
_computeFilter(prop1, prop2,...) {
return function(item) {
return (item.prop1 === prop1 && item.prop2 === prop2 && ...)
}
}
and:
<template is="dom-repeat" items="{{sqldata}}" filter="{{filter}}">
As I understand you're more concerned about changes to the app checkboxes than to sqldata changing at runtime.
I am new to Polymer and I am stuck on setting the database data. I manged to make email authentication work and I need to save user data after user creation. I initialize the app with firebase-app element.
Here is the important part:
this.$.auth.createUserWithEmailAndPassword(email, pass).then(function (user) {
user.sendEmailVerification();
document.getElementById("emaildialog").toggle();
var view = document.getElementById("r_view");
firebase.database().ref('/user/' + user['uid']).set({
name: view.name,
surname: view.surName
}).catch(function (err) {
console.log(err.message);
});
})
User is successfully created but the user data won't get saved and
firebase.database is not a function"
error is thrown. I guess it's because I don't have access to firebase.database function in the scope. I found many ways how to solve the issue using pure JavaScript, but I'm not sure what is the official "Polymer way".
EDIT:
I still can't get it to work. i managed to get a reference of app object but it seems like there is no database method available. I wrote a simple function for debugging:
debugFunction: function () {
if (!!this.user) {
var fb = this.$.auth.app;
console.log(!!fb); // Output is true,
var database = fb.database();
}
}
I get the "Uncaught TypeError: fb.database is not a function(…)" once more.
Thanks in advance, Jan
You can get the reference of the firebase app inside your firebase-auth element. Make sure you do this outside of the callback function so you won't have to deal with getting the proper scope of this. If you must, you can do .bind or arrow functions.
var app = this.$.auth.app;
Then after that you can do app.database() as a replacement for the firebase one.