Skip to content
Permalink
Browse files

Book Detail screen

  • Loading branch information...
Qaiser Abbas Qaiser Abbas
Qaiser Abbas authored and Qaiser Abbas committed May 18, 2018
1 parent feeebe5 commit 0a40ffd056eb160e07e24a0dd83ada953776c703
@@ -18,6 +18,7 @@ const sortFn = (a, b) => (a.title > b.title ? 1 : a.title === b.title ? 0 : -1)
export const BookStore = t
.model('BookStore', {
books: t.array(Book),
selectedBook: t.maybe(t.reference(Book)),
filter: t.optional(
t.enumeration('FilterEnum', ['All', 'Fiction', 'Nonfiction']),
'All'
@@ -43,7 +44,7 @@ export const BookStore = t
pageCount: book.volumeInfo.pageCount,
authors: book.volumeInfo.authors,
publisher: book.volumeInfo.publisher,
image: book.volumeInfo.imageLinks.smallThumbnail,
image: book.volumeInfo.imageLinks.thumbnail,
})
})
}
@@ -62,9 +63,14 @@ export const BookStore = t
self.filter = genre
}

const selectBook = book => {
self.selectedBook = book
}

return {
loadBooks,
setGenre,
selectBook,
}
})

@@ -2,10 +2,11 @@ import React from 'react'
import { ListItem } from 'react-native-elements'
import { observer } from 'mobx-react'

export default observer(({ book }) => (
export default observer(({ book, showBookDetail }) => (
<ListItem
avatar={{ uri: book.image }}
title={book.title}
subtitle={`by ${book.authors.join(', ')}`}
onPress={() => showBookDetail(book)}
/>
))
@@ -0,0 +1,32 @@
import React from 'react'
import { View, Text, Image } from 'react-native'
import { Card } from 'react-native-elements'
import { observer } from 'mobx-react'

import BkStore from '../../../stores/book'

export default observer(() => {
const store = BkStore()
const book = store.selectedBook

return (
<View>
<View>
<Card title={book.title}>
<View>
<Image
resizeMode="cover"
style={{ width: '60%', height: 300 }}
source={{ uri: book.image }}
/>
<Text>Title: {book.title}</Text>
<Text>Genre: {book.genre}</Text>
<Text>No of pages: {book.pageCount}</Text>
<Text>Authors: {book.authors.join(', ')}</Text>
<Text>Published by: {book.publisher}</Text>
</View>
</Card>
</View>
</View>
)
})
@@ -3,6 +3,14 @@ import { View } from 'react-native'
import { observer } from 'mobx-react'
import Book from './Book'

export default observer(({ books }) => (
<View>{books.map(book => <Book key={book.id} book={book} />)}</View>
export default observer(({ books, showBookDetail }) => (
<View>
{books.map(book => (
<Book
key={book.id}
book={book}
showBookDetail={showBookDetail}
/>
))}
</View>
))
@@ -14,10 +14,19 @@ class BookListView extends Component {

render() {
const { routeName } = this.props.navigation.state

const showBookDetail = book => {
this.store.selectBook(book)
this.props.navigation.navigate('BookDetail')
}

return (
<View>
<Title text={`${routeName} Books`} />
<BookList books={this.store.sortedBooks} />
<BookList
books={this.store.sortedBooks}
showBookDetail={showBookDetail}
/>
</View>
)
}
@@ -1,10 +1,14 @@
import { createBottomTabNavigator } from 'react-navigation'
import {
createBottomTabNavigator,
createStackNavigator,
} from 'react-navigation'
import { observer } from 'mobx-react'

import BkStore from '../../stores/book'
import BookListView from './components/BookListView'
import BookDetailView from './components/BookDetailView'

export default observer(
const BookListTabs = observer(
createBottomTabNavigator(
{
All: BookListView,
@@ -22,3 +26,8 @@ export default observer(
}
)
)

export default createStackNavigator({
BookList: BookListTabs,
BookDetail: BookDetailView,
})

0 comments on commit 0a40ffd

Please sign in to comment.
You can’t perform that action at this time.