Home screen with data fetched from database

Part ɪɪɪ: Connect UI to API │Story 04 : Update Home screen to connect to redux, fetch data from db; add View, Edit and Delete word functionality

GIT : Repo| Feature/Story branch | PR

In the previous post, we added Amplify’s Auth.federatedSignIn method to our UserSignIn component to connect our app to AWS Cognito Identity pool and get authenticated from AWS. With this, we can now access the authorized AWS resources, like we able to make queries to serverless API.

In this post, we would update our Home screen to connect it with API/database via redux, replace the static list of words that we had so far on the screen with a dynamic list of words fetched from database and add View, Edit and delete words features.

We have already defined the redux store, actions, reducers for all CRUD operations with word data in this previous post.

To connect Home screen with redux:
📝 Create a file HomeConnected.js under src/screens/Home folder 👇

Update src/screens/Home/HomeScreen.js 👇

With above updates to Home screen component, we removed the static list of words and replaced it with list of words in user’s vocab collection that we fetch from database, below is a summary of changes we made:

– In componentDidMount method, we trigger fetchUserVocabWords action to fetch the user’s words collection from database.

– We also subscribed to react navigator’s didFocus event (this event is triggered by the react-navigation whenever this component would be activated and brought up on the device screen). In this event as well we trigger fetchUserVocabWords action to get the most updated list of words.

– In render method, we are rendering AppHeader, the screen’s main contents, a fab button to allow us to go to AddEditWord screen and also a Delete confirmation/alert box that will be shown whenever user would press delete button on any word in the list.

– renderContent method would render a loading/activity indicator if the app’s is in the state of fetching word from database and once the words are fetched, it would render list of the words.

– other helper methods to render other things like Fab button or delete confirmation box and callback functions for various events on screen.

– Notice the method onListItemPress: In this method, after triggering the redux action selectWordToView, we navigate the user to ‘Word’ screen. This screen component is not ready yet, we’ll add it next.

Update src/screens/index.js to export HomeConnected component for Home screen👇

export { default as HomeScreen } from './Home/HomeConnected';
export { default as SignInScreen } from './SignIn/SignIn';
export { default as AddEditWordScreen } from './AddEditWord/AddEditWordConnected';

Screen to view a selected word

Next, we’ll add a screen to show the selected word details like its meaning, example and comments. From Home screen, when user taps on a word in his/her vocabulary, this screen would be shown.

📂 Create a folder Word under src/screens
📝 Create a file Word.js under src/screens/Word folder 👇

📝 Create a file WordConnected.js under src/screens/Word folder 👇

📝 Create styles.js under src/screens/Word folder 👇

Update src/screens/index.js to export WordConnected component for Home screen👇

export { default as HomeScreen } from './Home/HomeConnected';
export { default as SignInScreen } from './SignIn/SignIn';
export { default as AddEditWordScreen } from './AddEditWord/AddEditWordConnected';
export { default as WordScreen } from './Word/WordConnected';

Add WordScreen to the app’s stack navigator,

Update src/routes/AppStackNavigator.js as below:

👆Lint # 9 we added Word screen to the app’s stack navigator.

NoteWordy App with all features:

Finally we have everything implemented to Create, Read/View, Update/Edit and Delete word data. Lets see if everything is working as expected

Reload or rerun the app on iOS:

$ react-native run-ios  

and on Android:

$ react-native run-android

1. Read/View Words

2. Add a word

3. Edit a word

4. Delete a word: 👇

Yay!!!! Congratulations!! Our app is ready to go live.

That concludes this 3-part series:

In Part-I, we built and deployed serverless API to AWS.

In Part-II, we developed our react-native application and added Google Sing-in to it for user authentication.

And finally in Part-III, we connected our react-native app to AWS using the AWS Cognito Identity pool to authenticate and authorize our app’s requests to the serverless API deployed in AWS.

As stated earlier, the purpose of this series was to demonstrate how to develop a full stack application using Google Sign-in, React-Native, AWS Authentication and AWS Serverless API/lambdas and how these different technologies connect together. We didn’t cover unit testing and making apps production ready to publish to Apple or android stores. Stay tuned for Push Notifications feature.

Thank you!!! Hope you enjoyed the series and would found it helpful. Feedback, comments and suggestions are welcome.

Credits, references and useful resources

← Prev:AWS Signin ┈🏠┈Next:Push Notifications(stay tuned)→