1

I have two separate files, the first being a component (List.js) that uses the second (APIService.js) to fetch different APIs. To correct fetch, the URL needs to receive global variables. Right now, I am trying to redefine these variables from a function in the APIService file without success. Variables are being redefined in APIService.js just before the API calls comment.

I have two questions:

  • Why is the global variable naptanId not being redefined?
  • Would be possible to define and pass these variables from the component?

Pseudo-code

  • Detects beacon
  • Redefine naptanId
  • Component fetch API using recently defined variable
  • API call is done
  • Data is passed back to Component
  • Set states

List.js

componentDidMount() {
    // Executes first function
    APIService._fetchStopPoint((resp1) => {
        console.log("Stoppoint", resp1)
        // ... and set the bus state with the first response
        this.setState({
            bus: resp1
        });

        // ... based on the response, convert array to string
        const lines = (resp1.lines.map((line) => line.name)).toString()

        // ... pass lines to sencond function
        APIService._fetchArrivalTimes(lines, (resp2) => {
            // .. and set the tube state with the second response
            this.setState({
                isLoading: false,
                tube: resp2
            });
        });
    });
}

APIService.js

// Variables 
// ***********************************************************************
let naptanId = undefined
let lines = undefined

let ice = '59333'
let mint = '57011'
let blueberry = '27686'

let nearestBeacon = undefined;
let newBeaconId = undefined;

let setIce = false;
let setBlueberry = false;
let setMint = false;


// Beacon detection
// ***********************************************************************
const region = {
    identifier: 'Estimotes',
    uuid: '354A97D8-9CAF-0DC7-CE0E-02352EBE90CD',
};

// Request for authorization while the app is open
Beacons.requestWhenInUseAuthorization();
Beacons.startMonitoringForRegion(region);
Beacons.startRangingBeaconsInRegion(region);
Beacons.startUpdatingLocation();

// Listen for beacon changes
const subscription = DeviceEventEmitter.addListener('beaconsDidRange', (data) => {

    const ibeacons = data.beacons

    // var lowestAccuracySeen = 0.5;
    let lowestAccuracySeen = "immediate"

    // Check if beacons are updating
    if (ibeacons && ibeacons.length > 0) {
        // Loop through beacons array
        for (var i = 0; i < ibeacons.length ; i++) { 
            // Find beacons with same minor ...
            var foundBeacon = ibeacons.find(function(closestBeacon) {
                // ... and return the beacon the lowest accuracy seen
                // return closestBeacon.accuracy.toFixed(2) < lowestAccuracySeen;
                return closestBeacon.proximity == lowestAccuracySeen
            });
            // If found ...
            if (foundBeacon)    {
                // ... define the lowest accuracy and the nearest beacon
                lowestAccuracySeen = foundBeacon.accuracy;
                nearestBeacon = foundBeacon;

                // Identify what component to render against nearest beacon
                setIce = nearestBeacon.minor == ice ? true : false;
                setMint = nearestBeacon.minor == mint ? true : false;
                setBlueberry = nearestBeacon.minor == blueberry ? true : false;

                if (setIce) {

                    // THESE VARIABLES CANNOT BE REDEFINED
                    naptanId = "490004936E" 
                    lines = "55"

                } else if (setMint) {

                } else if (setBlueberry) {

                };
            }
        }
    }
});

// API calls 
// ***********************************************************************
class APIService {


    // Fecth stop point info
    static _fetchStopPoint(cb) {
        console.log(naptanId, lines)


        fetch(`https://api.tfl.gov.uk/StopPoint/${naptanId}`)
            .then(stopData => {
                try {
                    stopData = JSON.parse(stopData._bodyText); // Converts data to a readable format
                    cb(stopData, naptanId);
                } catch(e) {
                    cb(e);
                }
            })
            .catch(e => cb(e));
    }

    // Fetch arrival times info
    static _fetchArrivalTimes(lines, cb) {

        fetch(`https://api.tfl.gov.uk/Line/${lines}/Arrivals/${naptanId}`)
            .then(arrivalData => {
                try {
                    arrivalData = JSON.parse(arrivalData._bodyText);
                    arrivalTime = arrivalData
                    cb(arrivalData);
                } catch(e) {
                    cb(e);
                }
            })
            .catch(e => cb(e));
    }

    // Fetch status info
    static _fetchStatus(lines) {

        fetch(`https://api-argon.digital.tfl.gov.uk/Line/${lines}/Status`)
            .then(statusData => {
                try {
                    statusData = JSON.parse(statusData._bodyText); // Converts data to a readable format
                    cb(statusData);
                } catch(e) {
                    cb(e);
                }
            })
            .catch(e => cb(e));
    }

}

module.exports = APIService;

1 Answer 1

1

The simplest approach to handle these global variables (cross different components) is to use AsyncStorage:

let response = await AsyncStorage.getItem('listOfTasks');  //get, in any components
AsyncStorage.setItem('listOfTasks', 'I like to save it.'); //set, in any components

For more performance critical global vars, you can also consider Realm Database (Like CoreData, SQLite in both iOS and Android).

Sign up to request clarification or add additional context in comments.

2 Comments

David thank you for the reply. I am not familiar with AsyncStorage, but I will try it.
Can I also pass the AsyncStorage from a Component to Class? Let's say I define the AsyncStorage on my List.js component, but then I want to retrieve it in APIService.js from inside the class APIService. Is that possible?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.