Hey guys I have an aurelia class “component”, but I will . like to integrated into one of my react components, but I’m not getting anything if someone could help me.
Thanks.
// AddressAvailability.js
import { EventAggregator } from 'aurelia-event-aggregator';
import { BindingEngine, bindable, inject } from 'aurelia-framework';
import { AddressValidator } from 'utilities/address-validator';
import { BookingsStore } from 'stores/bookings';
@inject(AddressValidator, BindingEngine, EventAggregator, BookingsStore)
export class AddressAvailability {
@bindable() state = {};
observedProperties = ['streetAddress', 'postcode', 'city', 'country'];
constructor(addressValidator, bindingEngine, eventAggregator, store) {
this.addressValidator = addressValidator;
this.bindingEngine = bindingEngine;
this.eventAggregator = eventAggregator;
this.store = store;
this.bookingSubscriptions = [];
this.addressSubscriptions = [];
}
attached() {
this.subscribeBookingObservers();
this.subscribeAddressObservers();
this.checkAvailability();
}
detached() {
this.disposeBookingObservers();
this.disposeAddressObservers();
}
subscribeBookingObservers() {
this.bookingSubscriptions.push(
this.bindingEngine.propertyObserver(this.state.booking, 'address').subscribe(() => {
this.disposeAddressObservers();
this.subscribeAddressObservers();
this.checkAvailability();
}),
this.bindingEngine.propertyObserver(this.state.booking, 'regionalService').subscribe(() => {
this.checkAvailability();
})
);
}
disposeBookingObservers() {
this.bookingSubscriptions.forEach(subscription => subscription.dispose());
}
subscribeAddressObservers() {
this.observedProperties.forEach((propertyName) => {
const subscription = this.bindingEngine
.propertyObserver(this.state.booking.address, propertyName)
.subscribe(() => this.checkAvailability());
this.addressSubscriptions.push(subscription);
});
}
disposeAddressObservers() {
this.addressSubscriptions.forEach(subscription => subscription.dispose());
}
checkAvailability() { // I want to access this method inside a react component
console.log(`This is the store: ${this.store}`);
this.store.dispatch({
type: 'CHECK_BOOKING_ADDRESS_AVAILABILITY',
booking: this.state.booking
});
// console.log(`This is the state: ${state}`);
// console.log(`This is the state: ${booking}`);
}
checkRequiredProperties() {
return this.state.booking.regionalService &&
this.state.booking.address.streetAddress &&
this.state.booking.address.postcode &&
this.state.booking.address.city &&
this.state.booking.address.country;
}
get isLoading() {
return this.state.isCheckingAddressAvailability ||
this.state.isFetchingRegion ||
this.state.isFetchingRegionalServices;
}
}