Update the UI on tab change

Author: Qaiser Abbas

src/stores/book/index.js

@@ -1,5 +1,5 @@
 import { types as t, flow, getEnv } from 'mobx-state-tree'
-import bookApi from './api'
+import bookApi from './mock-api/api'
 
 let store = null
 
@@ -49,6 +49,7 @@ export const BookStore = t
  }
 
  const loadBooks = flow(function* loadBooks() {
+ if (self.books.length > 0) return
  try {
  const books = yield self.api.fetchBooks()
  updateBooks(books)

src/views/book/components/BookListView.js

@@ -1,16 +1,26 @@
 import React, { Component } from 'react'
-import BookStore from '../../../stores/book'
+import { View } from 'react-native'
+import { observer } from 'mobx-react'
+
+import BkStore from '../../../stores/book'
 import BookList from './BookList'
+import Title from '../../../components/Title'
 
 class BookListView extends Component {
  async componentWillMount() {
- this.store = BookStore()
+ this.store = BkStore()
  await this.store.loadBooks()
  }
 
  render() {
- return <BookList books={this.store.books} />
+ const { routeName } = this.props.navigation.state
+ return (
+ <View>
+ <Title text={`${routeName} Books`} />
+ <BookList books={this.store.sortedBooks} />
+ </View>
+ )
  }
 }
 
-export default BookListView
+export default observer(BookListView)

src/views/book/components/book-type-tabs.js

@@ -1,13 +1,24 @@
 import { createBottomTabNavigator } from 'react-navigation'
+import { observer } from 'mobx-react'
 
-import {
- AllBooksTab,
- FictionBooksTab,
- NonfictionBooksTab,
-} from './components/book-type-tabs'
+import BkStore from '../../stores/book'
+import BookListView from './components/BookListView'
 
-export default createBottomTabNavigator({
- 'All Books': AllBooksTab,
- Fiction: FictionBooksTab,
- Nonfiction: NonfictionBooksTab,
-})
+export default observer(
+ createBottomTabNavigator(
+ {
+ All: BookListView,
+ Fiction: BookListView,
+ Nonfiction: BookListView,
+ },
+ {
+ navigationOptions: ({ navigation }) => ({
+ tabBarOnPress: () => {
+ const { routeName } = navigation.state
+ const store = BkStore()
+ store.setGenre(routeName)
+ },
+ }),
+ }
+ )
+)