Add example list screen with proper API fetch

[jamonholmgren]

I received feedback via a private message that the documentation for making and handling API calls is inadequate.

Looking at the actual code, he has a point. This is pretty awful and about the only API code in the app.

https://github.com/infinitered/ignite/blob/465f3c15a5e9f7cc29376a1d2ede6cc57c260242/boilerplate/app/screens/demo/demo-screen.tsx#L118-L124

I'd like to add another page that fetches info and displays it in a list.

Recommendation would be to fetch the data in a static JSON file hosted on Github and display the data in a listview.

[bryanstearns]

@jamonholmgren I agree that more examples would be useful (especially this one!), but we've already heard that people don't like having more stuff in generated apps that needs to be ripped out.

Expo uses a separate repo for examples - what would you think about us setting up a new ignite-examples repo and adding this there?

[syahnur197]

maybe you guys can have an example repository, i.e., a todo app? That would be useful

[jamonholmgren]

We've had example apps, but they're almost impossible to maintain properly. They end up stagnating. Thanks for the suggestion @syahnur197.

Having it in the generated app forces us to confront how things are architected and makes us stay on top of them.

I have heard the feedback that people don't like having to delete stuff, but I think as long as they're well-defined and you don't have to go through a lot of files to pull them out, it's not too big of a hardship. I'm not talking about an entire kitchen sink, but certainly the most common use cases (login form, API call) make sense.

[chrispecoraro]

@bryanstearns Minimally, the main issue here is this line, which is problematic if you're trying to demonstrate a very opinionated pattern. It should be changed and replaced with something else. I, as developer new to react native, understand, conceptually, what a the store's API could represent, but how is data stored and more importantly, how is it retrieved on another screen. // Don't do API like this, use store's API.

Also, now that I have the metadata for a user with id 1, I want to "do some async storage stuff", so how do I store it using await save.

demo.getUser("1") 
 // Let's do some async storage stuff 
 await save("Cool Name", "Boaty McBoatface") 

For context, I'm finishing up a book on Jamstack with Gatsby and the reviewers, for example, would ask me this. It's not clear if your audience is high-level React Native developers or developers from other tech stacks wanting to start into ReactJS. If it's the latter, then a more comprehensive explanation is needed. The PR above is great, though.

[vantuan88291]

The example when project was generated not useful, i always use fetch api inside model and store data inside model. All logics will be in the model and the View just display data, if you guys interested with this, i will have a Pull Request to add the example.

[jamonholmgren]

Fixed with #1608.