Merge branch 'develop' into 'master'

Add config decorator

See merge request !1

App.js

@@ -3,7 +3,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import HomeScreen from './screens/HomeScreen';
 import DetailsScreen from './screens/DetailScreen';
-import LibaryScreen from './screens/LibaryScreen';
+import LibraryScreen from './screens/LibaryScreen';
 
 const Stack = createStackNavigator();
 
@@ -17,7 +17,7 @@ function App() {
         }}>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Detail" component={DetailsScreen} />
-        <Stack.Screen name="Libary" component={LibaryScreen} />
+        <Stack.Screen name="Library" component={LibraryScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

api/BookApi.js

@@ -16,7 +16,7 @@ const addBook = () => {
 
 const removeBook = (id) => {
   return request({
-    url: `https://5ec39d77628c160016e706f3.mockapi.io/book/`,
+    url: 'https://5ec39d77628c160016e706f3.mockapi.io/book/',
     method: 'POST',
   }).then((data) => data);
 };

jsconfig.json

+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

mobx/LibaryStore.js → mobx/LibraryStore.js

@@ -10,21 +10,21 @@ const Book = types.model({
   author: types.string,
 });
 
-const LibaryStore = types
-  .model('libaryStore', {
+const LibraryStore = types
+  .model('libraryStore', {
     listBooks: types.array(Book),
     loading: false,
   })
   .views((self) => {
     return {
-      checkBookExistOnLibary(id) {
-        const check = self.listBooks.find((book) => book.id == id);
+      checkBookExistOnLibrary(id) {
+        const check = self.listBooks.find((book) => book.id === id);
         return check && check.id === id ? true : false;
       },
     };
   })
   .actions((self) => {
-    const addBookToLibary = flow(function* (book) {
+    const addBookToLibrary = flow(function* (book) {
       self.loading = true;
       try {
         const response = yield bookApi.addBook();
@@ -42,7 +42,7 @@ const LibaryStore = types
       return self.listBooks;
     });
 
-    const removeBookInLibary = flow(function* (id) {
+    const removeBookInLibrary = flow(function* (id) {
       self.loading = true;
       try {
         const response = yield bookApi.removeBook(id);
@@ -61,9 +61,9 @@ const LibaryStore = types
       return self.listBooks;
     });
     return {
-      addBookToLibary,
-      removeBookInLibary,
+      addBookToLibrary,
+      removeBookInLibrary,
     };
   });
 
-export default LibaryStore.create({});
+export default LibraryStore.create({});

screens/DetailScreen.js

 import React, {Component} from 'react';
 import {View, Text, Image, ScrollView, StyleSheet} from 'react-native';
 import {Button, Icon} from 'react-native-elements';
-import LibaryStore from '../mobx/LibaryStore';
+import LibraryStore from '../mobx/LibraryStore';
 import {observer} from 'mobx-react';
 import Loading from '../components/LoadingComponent';
 
 @observer
 class DetailScreen extends Component {
-  handleAddBookToLibary(book) {
-    LibaryStore.addBookToLibary(book);
+  handleAddBookToLibrary(book) {
+    LibraryStore.addBookToLibrary(book);
   }
   render() {
     const {navigation, route} = this.props;
@@ -16,7 +16,7 @@ class DetailScreen extends Component {
 
     return (
       <View style={styles.container}>
-        <Loading loading={LibaryStore.loading} />
+        <Loading loading={LibraryStore.loading} />
         <View style={styles.screen1}>
           <View style={styles.parentBntBack}>
             <Button
@@ -58,11 +58,11 @@ class DetailScreen extends Component {
           <Button
             titleStyle={[styles.titleStyleButton, styles.titleBtnAdd]}
             buttonStyle={[styles.btnAdd]}
-            title="Add to Libary"
+            title="Add to Library"
             onPress={() => {
-              this.handleAddBookToLibary(book);
+              this.handleAddBookToLibrary(book);
             }}
-            disabled={LibaryStore.checkBookExistOnLibary(book.id)}
+            disabled={LibraryStore.checkBookExistOnLibrary(book.id)}
           />
         </View>
       </View>

screens/HomeScreen.js

@@ -88,7 +88,7 @@ class HomeScreen extends Component {
           <Button
             buttonStyle={[styles.buttonAction]}
             onPress={() => {
-              navigation.navigate('Libary');
+              navigation.navigate('Library');
             }}
             icon={
               <Icon color="#FC8B55" size={40} name="book" type="font-awesome" />

screens/LibaryScreen.js

@@ -8,26 +8,26 @@ import {
   StyleSheet,
 } from 'react-native';
 import {Button, Icon} from 'react-native-elements';
-import LibaryStore from '../mobx/LibaryStore';
+import LibraryStore from '../mobx/LibraryStore';
 import {observer} from 'mobx-react';
 import Loading from '../components/LoadingComponent';
 
 const screenWidth = Dimensions.get('window').width;
 
 @observer
-class LibaryScreen extends Component {
+class LibraryScreen extends Component {
   handleRemoveBook(id) {
-    LibaryStore.removeBookInLibary(id);
+    LibraryStore.removeBookInLibrary(id);
   }
 
   render() {
     const {navigation} = this.props;
-    const {listBooks} = LibaryStore;
+    const {listBooks} = LibraryStore;
     console.log(JSON.stringify(listBooks));
 
     return (
       <View style={styles.all}>
-        <Loading loading={LibaryStore.loading} />
+        <Loading loading={LibraryStore.loading} />
         <View style={styles.categoryBook}>
           <Text style={[styles.textCategory]}>Trending</Text>
           <Text style={[styles.textCategory, styles.textCategoryActive]}>
@@ -218,4 +218,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default LibaryScreen;
+export default LibraryScreen;