Calling methods on a react component


#1

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;
  }
}