Skip to content
Permalink
Browse files

MobX store in ReactNative - fetch data from Google Books API

  • Loading branch information...
Qaiser Abbas Qaiser Abbas
Qaiser Abbas authored and Qaiser Abbas committed May 13, 2018
1 parent f029d09 commit ad23749ed9ed8ba157fade215ce20df0c2312ede
@@ -11,7 +11,7 @@ module.exports = {
{
singleQuote: true,
bracketSpacing: true,
trailingComma: 'all',
trailingComma: 'es5',
semi: false,
},
],
@@ -21,6 +21,7 @@ module.exports = {
'react/jsx-closing-tag-location': 'off',
'react/no-multi-comp': 'off',
'no-use-before-define': 'off',
'no-param-reassign': 'off',
'react/jsx-closing-bracket-location': 'off',
'react/jsx-curly-spacing': 'off',
'react/jsx-equals-spacing': 'off',
@@ -0,0 +1,3 @@
{
"GBOOKS_KEY": "YOUR_GOOGLE_BOOKS_API_KEY"
}
@@ -30,12 +30,18 @@
"jest": {
"preset": "jest-expo",
"setupTestFrameworkScriptFile": "<rootDir>/jestSetup.js",
"snapshotSerializers": ["enzyme-to-json/serializer"]
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"dependencies": {
"axios": "^0.18.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"expo": "^27.0.1",
"mobx": "^4.2.1",
"mobx-react": "^5.1.2",
"mobx-state-tree": "^2.0.5",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-dom": "16",
@@ -0,0 +1,11 @@
import axios from 'axios'

const baseUrl = `https://www.googleapis.com/books/v1/volumes`
const { GBOOKS_KEY } = require('../../../keys')

const fetchBooks = () =>
axios.get(`${baseUrl}?q=books&printType=books&key=${GBOOKS_KEY}`)

export default {
fetchBooks,
}
@@ -0,0 +1,52 @@
import { types as t, flow } from 'mobx-state-tree'
import api from './api'

let store = null

const Book = t.model('Book', {
id: t.identifier(),
title: t.string,
pageCount: t.number,
authors: t.array(t.string),
image: t.maybe(t.string),
inStock: t.optional(t.boolean, true),
})

const BookStore = t
.model('BookStore', {
books: t.array(Book),
})
.actions(self => {
function updateBooks(books) {
books.items.forEach(book => {
self.books.push({
id: book.id,
title: book.volumeInfo.title,
pageCount: book.volumeInfo.pageCount,
authors: book.volumeInfo.authors,
publisher: book.volumeInfo.publisher,
image: book.volumeInfo.imageLinks.smallThumbnail,
})
})
}

const loadBooks = flow(function* loadBooks() {
try {
const books = yield api.fetchBooks()
updateBooks(books)
} catch (err) {
console.error('Failed to load books ', err)
}
})

return {
loadBooks,
}
})

export default () => {
if (store) return store

store = BookStore.create({ books: [] })
return store
}
@@ -0,0 +1,9 @@
import React from 'react'
import { Text } from 'react-native'
import { observer } from 'mobx-react'

export default observer(({ book }) => (
<Text>
{book.title} by {book.authors[0]}
</Text>
))
@@ -0,0 +1,8 @@
import React from 'react'
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>
))
@@ -0,0 +1,16 @@
import React, { Component } from 'react'
import BookStore from '../../../stores/book'
import BookList from './BookList'

class BookListView extends Component {
async componentWillMount() {
this.store = BookStore()
await this.store.loadBooks()
}

render() {
return <BookList books={this.store.books} />
}
}

export default BookListView
@@ -1,19 +1,12 @@
import React from 'react'
import { View, Button } from 'react-native'
import { View } from 'react-native'
import Title from '../../../components/Title'
import BookListView from './BookListView'

export const AllBooksTab = ({ navigation }) => (
<View>
<Title text="All Books" />
<Button
onPress={() => navigation.navigate('Authors')}
title="Go to Authors"
/>
<Button
onPress={() => navigation.navigate('NonfictionBooksTab')}
title="Go to NonfictionBooksTab"
/>
<Button onPress={() => navigation.openDrawer()} title="Open Drawer" />
<BookListView />
</View>
)

0 comments on commit ad23749

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