MobX store in ReactNative - fetch data from Google Books API

Author: Qaiser Abbas

.eslintrc.js

@@ -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',

keys.json

@@ -0,0 +1,3 @@
+{
+  "GBOOKS_KEY": "YOUR_GOOGLE_BOOKS_API_KEY"
+}

package.json

@@ -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",

src/stores/book/api.js

@@ -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,
+}

src/stores/book/index.js

@@ -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
+}

src/views/book/components/Book.js

@@ -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>
+))

src/views/book/components/BookList.js

@@ -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>
+))

src/views/book/components/BookListView.js

@@ -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

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

@@ -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>
 )