I emitted the data from MerchantComponent
and subscribed via EventEmitterService from MerchantPaymentChannelComponent, its OK when route directly opens this page. But you see there is other tabs which every tab has its own components. When I change the tab to different one, then come back to this MerchantPaymentChannelComponent its not subscribe again.
NOTE: I'm doing unsubscription on NgOnDestroy event
Here is codes;
MerchantListDetailService (SHARING SERVICE VIA EVENTEMITTER)
export class MerchantListDetailService {
#Output() emittedMerchant: EventEmitter<any> = new EventEmitter();
constructor() {}
emitMerchant(data) {
this.emittedMerchant.emit(data);
}
getEmittedValue() {
return this.emittedMerchant;
}
}
MerchantComponent (TRIGGERING EMIT FROM THIS COMPONENT)
private getMerchantDetail() {
let data = {
Id: this.merchantId,
}
this.merchantsService.getMerchants(data)
.then((res) => {
// console.log(res)
if (res.Success) {
this.merchant = res.Data[0];
this.merchantListDetailService.emitMerchant(res.Data[0]);
}
})
.catch((err) => { })
}
MerchantPaymentChannelComponent (SUBSCRIBING FROM THIS COMPONENT)
ngOnInit() {
this.merchantSubscribe = this.merchantListDetailService.getEmittedValue()
.subscribe(merchant => {
this.merchant = merchant;
this.getMerchantPaymentChannels();
})
}
ngOnDestroy() {
this.merchantSubscribe.unsubscribe();
}
Related
I've got a Meteor subscription with 3 Tracker.autorun functions nested inside.
componentDidMount() {
Meteor.subscribe('programs', => {
this.myTracker1 = Tracker.autorun(() => {
// reactive data source here
});
this.myTracker2 = Tracker.autorun(() => {
// reactive data source
});
this.myTracker3 = Tracker.autorun(() => {
// reactive data source
});
});
}
I'm killing the Trackers on unmounting:
componentWillUnmount() {
this.myTracker1.stop();
this.myTracker2.stop();
this.myTracker3.stop();
}
Is this all I would need to do when the component unmounts? Would the subscription still be running? Or should I just stop the subscription by itself, like:
componentDidMount() {
this.mySubscription = Meteor.subscribe('programs', => {
this.myTracker1 = Tracker.autorun(() => {
...
...
}
componentWillUnmount() {
this.mySubscription.stop();
}
Would that stop all the Trackers? Would I need to stop the subscription and the Trackers separately?
I'm a little unsure after reading the Meteor documentation.
I just have two components, and the app is connected to firebase (firestore). The data called in ngOnInit disappears when I navigate and only appears again if I insert a Post or a User (forms).Why? Can someone help me out?
The routes:
const routes: Routes = [
{ path: "", component: HomeComponent, pathMatch: "full" },
{
path: "admin",
component: AdminComponent
},
{
path: "**",
redirectTo: "/",
pathMatch: "full"
}
];
The Service
itemsCollection: AngularFirestoreCollection<Post>;
items: Observable<Post[]>;
itemDoc: AngularFirestoreDocument<Post>;
constructor(public afs: AngularFirestore) {
this.itemsCollection = this.afs.collection('posts', ref =>
ref.orderBy('date', 'desc')
);
this.items = this.itemsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Post;
data.id = a.payload.doc.id;
return data;
});
});
}
getItems() {
return this.items;
}
Its Component and the subscription
private postService: PostsService,
) {}
ngOnInit() {
this.postService.getItems().subscribe(data => {
this.postInput = data;
});
}
Create posts property in your service.
Then subscribe to your observable in your service, set posts to what u get from firebase.
Also dont write your code inside constructor but wrap in in a function and use it in OnInit in apropriate component. And lastly create a Subject send with it the current posts and subscribe to them in onInit inside desired components
posts = Post[]
postsChanged = new Subject<Post[]>()
getItems(){
this.itemsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
return {
id: a.payload.doc.id,
...a.payload.doc.data()
}
}).subscribe(posts => {
this.posts = posts
this.postsChanged.next([...this.posts])
})
}
Based on Kase44 hints i managed to find a solution: wrapped the capture of the ID in a function, called it in the service constructor and in the ngOnInit():
The Service
export class UsersService {
usersCollection: AngularFirestoreCollection<Users>;
userDoc: AngularFirestoreDocument<Users>;
users: Observable<Users[]>;
user: Observable<Users>;
constructor(public afs: AngularFirestore) {
this.usersCollection = this.afs.collection('employees', ref =>
ref.orderBy('name', 'asc')
);
this.getUserID();
}
getUserID(){
this.users = this.usersCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Users;
data.id = a.payload.doc.id;
return data;
});
});
}
And the component:
ngOnInit() {
this.userService.getUsers().subscribe(data => {
this.emp = data;
});
this.userService.getUserID();
}
I find interesting example how transfer data from one component to another component using Subject/Observable in Service:
http://plnkr.co/edit/yMBoVkxohwhPig5COgkU?p=preview
I find it similar to broadcast event from Angular 1.X. But I notice that subscribe to data changes can only component that inishiated data change. I need somehow modify this example to get data in one component after another component changed it. Console.log dos't show any error, but data-transfer not working. Can anyone help?
Service:
#Injectable()
export class ClientsService {
private _client$: Subject<Client>;
private _clients$: Subject<Client[]>;
constructor(private http: Http) {
this._client$ = <Subject<Client>>new Subject();
this._clients$ = <Subject<Client[]>>new Subject();
}
getClients(): Promise<Client[]> {
return this.http.get('api/Client')
.toPromise()
.then(res => {
this._clients$.next(res.json());
return res.json();
})
.catch(this.handleError);
}
get client$() {
return this._client$.asObservable();
}
get clients$() {
return this._clients$.asObservable();
}
clientChangeBroadcast(objClient: Client) {
this._client$.next(objClient);
}
clientsChangeBroadcast(arrClients: Client[]) {
this._clients$.next(arrClients);
}
private handleError(error: any): Promise<any> {
return Promise.reject(error.message || error);
}
First component:
#Component({
selector: 'app',
templateUrl: './app/app.component.html'
})
export class AppComponent implements OnInit {
clients: Client[];
constructor(public clientsService: ClientsService) {
this.clients = [];
}
ngOnInit() {
}
loadClients() {
this.clientsService.getClients().then(clients => {
this.clients = clients;
this.clientsService.clientsChangeBroadcast(clients);
});
}
selectClient(objClient: Client) {
this.clientsService.getClients();
this.clientsService.clientChangeBroadcast(objClient);
}
}
Second component:
export class TestComponent implements OnInit {
client: Observable<Client>;
clients: Observable<Client[]>;
constructor(private clinetsService: ClientsService) {
}
ngOnInit() {
//this.clinetsService.getClients();
this.client = this.clinetsService.client$;
this.clients = this.clinetsService.clients$;
this.clinetsService.client$.subscribe(value => {
// try to get changes here
});
this.clinetsService.clients$.subscribe(value => {
// try to get changes here
});
}
reLoadClients() {
this.clinetsService.getClients();
}
}
I try to get data changinf in 'Second component' after data was changed by 'First component'. When I click on button for 'selectClient' method in 'First component' I expect data transfer wia service and I catch changes ob 'Second component' -> it not working. When from 'Second component' I press button for 'reLoadClients' data transfer wia service and I catch changes in all subscribe functions on 'Second component'.
I have a very large app on mobx + react, where many components call the same actions on store. For example, "delete photo", can be call from a list of photos or from a modal. But before execute the action I have, for example, to show a confirmation modal...
I end-up with this soluction, but it looks like that I'm mixin data login with view logic...
class PhotoStore {
#observable photos;
#action destroy(photo) {
if (currentUser.isGuest) {
modalStore.open('NoGuest')
return
}
modalStore.openConfirm(() => {
// some datalogic
api.delete('/photos/'+photo.id).then(() => {
notificationStore.showSuccess('your photo was deleted!')
})
})
}
}
const PhotoView = observer(({photo}) => {
return <div onClick={() => photoStore.destroy(photo)}>...</div>
})
What so you thing? is that ok to go?
thanks a lot!
To avoid UI logic with model logic, the code can be simplified as follows.
class PhotoView extends React.Component {
handleDelete() {
if (this.props.currentUser.isGuest) {
modalStore.open('NoGuest');
return;
}
modalStore.openConfirm(() => {
// some datalogic
photoStore.delete(this.props.photo).then(() => {
notificationStore.showSuccess('your photo was deleted!');
});
});
}
render() {
return <div onClick={this.handleDelete.bind(this)}>...</div>
}
}
The delete function on the PhotoStore should be modified:
#action delete(photo) {
return new Promise((res, rej) => {
api.delete('/photos/'+photo.id)
.then(res)
.catch(rej);
});
}
Instead of
notificationStore.showSuccess('your photo was deleted!')
You could add an observable to store and modify it there. Your modal code could live somewhere else and be an observer
I'd like to understand how to make Hello.js work with React.js , especially the custom event handler hello.on
As I'm new to React.js, I don't understand how to bind non React events into the app flow.
I tried putting the event handler in the componentDidMount handler
handleClick(){
hello('twitter').login();
}
componentDidMount(){
hello.on('auth.login', function(auth) {
// Call user information, for the given network
hello(auth.network).api('/me').then(function(r) {
console.log(r);
});
});
hello.init({
'twitter' : 'J1jqqO50tcLtLx8Js0VDitjZW'
},
{
redirect_uri:'/',
oauth_proxy: 'https://auth-server.herokuapp.com/proxy'
});
}
thanks
And 3 years later:
You need a class for authentication, for example:
import * as React from "react";
import * as hello from "hellojs";
import { Event } from "../interfaces/Event";
export class Authentication extends React.Component<{}, { sendEvent: boolean }> {
constructor(public props, public context) {
super(props, context);
this.state = {
sendEvent: true
};
}
public login(network) {
hello.init({
aad: {
name: "Azure Active Directory",
oauth: {
version: 2,
auth: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
grant: "https://login.microsoftonline.com/common/oauth2/v2.0/token"
},
// Authorization scopes
scope: {
// you can add as many scopes to the mapping as you want here
profile: "user.read",
offline_access: ""
},
scope_delim: " ",
login: p => {
if (p.qs.response_type === "code") {
// Let's set this to an offline access to return a refresh_token
p.qs.access_type = "offline_access";
}
},
base: "https://www.graph.microsoft.com/v1.0/",
get: {
me: "me"
},
xhr: p => {
if (p.method === "post" || p.method === "put") {
JSON.parse(p);
} else if (p.method === "patch") {
hello.utils.extend(p.query, p.data);
p.data = null;
}
return true;
},
// Don't even try submitting via form.
// This means no POST operations in <=IE9
form: false
}
});
hello.init(
{
aad: "ClientID"
},
{
redirect_uri: "YOUR REDIRECT_URI",
//redirect_uri: 'https://localhost:4321/temp/workbench.html',
scope: "user.read"
}
);
// By defining response type to code, the OAuth flow that will return a refresh token to be used to refresh the access token
// However this will require the oauth_proxy server
hello(network)
.login({ display: "none" })
.then(
authInfo => {
console.log(authInfo);
localStorage.setItem("logged", authInfo.authResponse.access_token);
},
e => {
console.error("Signin error: " + e.error.message);
}
);
}
//when the component is mounted you check the localstorage
//logged ==> undefined you call login and save a token in localstorage
//logged ==> with a token -> setEvent call a function that use graph api
public componentDidMount() {
let logged = localStorage["logged"];
if (logged === undefined) this.login("aad");
else {
if (this.state.sendEvent) {
this.props.setEvent(null);
this.props.setEvent(Event.GET_ALL_USERS);
}
}
}
public render() {
return null;
}
}
the file name is auth.tsx and you can call this class in the main react class:
export class mainClass extends React.Component{
......
......
private getEvent = (event) => {
this.setState({ event: event });
//HERE YOU recive the event when auth is ready
}
public render(){
<Authentication setEvent={this.getEvent} />
}
}