Fetch inside Settings/index.jsx

[davinche]

I was wondering if there's a way to dynamically fetch a list of data to be used with the onAutocomplete prop for the <TextInput> component inside the settings file?

[davinche]

More Context:

I'm building a cryptocurrency ticker app and I want to allow users to curate their own list of coins they want to keep a watch on. The documentation seems to indicate that all user customization should live inside the settings page. The <AdditiveList> component appears to be what I am looking for. The documentation demonstrates that I should use the <TextInput> component to allow users to add values  to the list.

I want to be able to dynamically grab the list of coins to autocomplete from one of the coinmarketcap APIs. It's possible for me to just download this list and statically include it in the app, but given that new coins are added every day, having the ability to dynamically poll for the latest coins seems to be a better approach.

Example user scenario: User wants to track Bitcoin prices. User navigates to the app settings. When the users inputs "B" in the <TextInput> component, it should filter and suggest "BTC, BCH" etc.

[BrianEnders]

Hi!

In my crypto app, the coins are hard coded with coinbase as the spot price source.

For your use, you can probably just use a predetermined list of textinputs that a user can add the Coinmarketcap ticker symbol into. That way when you use the tile list widget, you can remove unused tiles. I know there is no way to dynamically create a view, so it limits the choices of the user to the max number of textinputs you make it. There might be a better way though...

[davinche]

Yeah... seems like the SDK is not fully fleshed out yet. There seems to be a lot of limitations in what you can do.

[davinche · Accepted solution]

Ended up just using fetch in the companion file, then storing the list via settingsStorage to be consumed by the settings page.

[Gondwana]

I found that I had to use fetch() like that too.

[osv]

To follow up on this, you can indeed use the fetch API in settings and then return a promise with the results you'd like to render. This is what the native Weather app seems to do.

Here's an end-to-end example of what fetching a list of items from an API with bearer authentication might look like:

<TextInput
  label="Add item"
  action="Add"
  onAutocomplete={async value => {
    const token = JSON.parse(props.settings.api_token as any).name;
    const headers = new Headers({
      'Authorization': 'Bearer ' + token,
      'Accept': 'application/json',
    });
    const res = await fetch("https://example.com/api/items", {headers});
    const body = await res.json();
    return body.items.map(({name}) => ({name}));
  }}
/>

Note that the remote server needs to have a CORS policy configured to allow https://app-settings.fitbitdevelopercontent.com (which is kind of annoying -- ideally the Chromium instance would just disable web security so that this isn't needed, psst. Fitbit devs).