beebook-mobile

Install

npm install beebook-mobile --save

or

yarn add beebook-mobile

Prerequisites

package.json

{
  "dependencies": {
    "@apollo/client": "^3.3.12",
    "@react-native-community/datetimepicker": "^3.4.3",
    "@react-native-community/masked-view": "^0.1.10",
    "@reduxjs/toolkit": "^1.5.0",
    "apollo-upload-client": "^14.1.3",
    "axios": "^0.19.2",
    "core-js": "^3.9.1",
    "formik": "^2.2.6",
    "graphql": "^15.5.0",
    "moment": "^2.24.0",
    "native-base": "^2.13.12",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-modal": "^11.7.0",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-popup-menu": "^0.15.10",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0",
    "react-navigation": "^4.4.0",
    "react-navigation-animated-switch": "^0.6.0",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "^2.9.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "rn-placeholder": "^3.0.3",
    "yup": "^0.29.0"
  }
}

App.js

import {ApolloProvider} from '@apollo/client';
import {libraryApollo, libraryApp, ModalOutOfBooks} from 'beebook-mobile';
import {Root} from 'native-base';
import React, {useContext} from 'react';
//@ts-ignore
import {MenuProvider} from 'react-native-popup-menu';
import {NavigationContext} from 'react-navigation';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import AppContainer from './navigator';
import store, {persistor} from './store';

function useNavigation() {
  return useContext(NavigationContext);
}

libraryApp.config({
  beeboxApiUrl: 'https://devapi.beebox.vn/api/v1',
  beeboxStaticImageUrl: 'https://devapi.beebox.vn/api/v1/uploads/files/image',
  graphqlUrl: 'https://api.beebooklib.tk/graphql',
  useNavigation,
});

const client = libraryApollo.getClient();

const ExampleApp = () => {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MenuProvider>
            <Root>
              <AppContainer />
            </Root>
          </MenuProvider>
          <ModalOutOfBooks />
        </PersistGate>
      </Provider>
    </ApolloProvider>
  );
};

export default ExampleApp;

store.js

// import {configureStore} from '@reduxjs/toolkit';
import {libraryReducers} from 'beebook-mobile';
import {
  AnyAction,
  applyMiddleware,
  combineReducers,
  createStore,
  Store,
} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
// import logger from 'redux-logger';
// import {FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE} from 'redux-persist';
import {persistStore} from 'redux-persist';
import {PersistPartial} from 'redux-persist/es/persistReducer';
import thunkMiddleware from 'redux-thunk';
import {LibraryCartState} from '../../src/apps/library/redux/libraryCart';
import {LibraryFavoriteState} from '../../src/apps/library/redux/libraryFavorite';
import {LibraryHistoryState} from '../../src/apps/library/redux/libraryHistory';
import {LibraryHomeState} from '../../src/apps/library/redux/libraryHome';
import {LibraryProfileState} from '../../src/apps/library/redux/libraryProfile';

// const store = configureStore({
//   reducer: {
//     ...libraryReducers,
//   },
//   middleware: getDefaultMiddleware =>
//     getDefaultMiddleware({
//       serializableCheck: {
//         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
//       },
//     }).concat(logger),
// });

function configureStore(preloadedState: any) {
  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  const enhancers = [middlewareEnhancer];
  const composedEnhancers = composeWithDevTools(...enhancers);

  const rootReducer = combineReducers(libraryReducers);

  const store = createStore(rootReducer, preloadedState, composedEnhancers);

  if (process.env.NODE_ENV !== 'production' && (module as any).hot) {
    (module as any).hot.accept('./reducers', () =>
      store.replaceReducer(rootReducer),
    );
  }

  return store;
}

const store: Store<
  {
    libraryCart: LibraryCartState & PersistPartial;
    libraryHistory: LibraryHistoryState;
    libraryHome: LibraryHomeState;
    libraryProfile: LibraryProfileState;
    libraryFavorite: LibraryFavoriteState;
  },
  AnyAction
> & {
  dispatch: unknown;
} = configureStore(undefined);

export const persistor = persistStore(store);

export default store;

navigator.js

import {
  LibraryBookDetailScreen,
  LibraryBookReturnScreen,
  LibraryBookReviewFormScreen,
  LibraryBookReviewScreen,
  LibraryByCategoryScreen,
  LibraryCartScreen,
  LibraryContributeScreen,
  LibraryFavoriteScreen,
  LibraryHistoryScreen,
  LibraryHomeScreen,
  LibraryRegulationScreen,
  LibrarySearchScreen,
  LoginScreen,
  PrivacyScreen,
} from 'beebook-mobile';
import {Icon} from 'native-base';
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';

const Tab = createBottomTabNavigator({
  LibraryHome: {
    screen: LibraryHomeScreen,
    navigationOptions: {
      tabBarLabel: 'Thư viện',
      tabBarIcon: () => <Icon type="Ionicons" name="library-outline" />,
    },
  },
  Privacy: {
    screen: PrivacyScreen,
    navigationOptions: {
      tabBarLabel: 'Chính sách',
      tabBarIcon: () => <Icon type="Ionicons" name="library-outline" />,
    },
  },
});

const MainStack = createStackNavigator(
  {
    Login: {screen: LoginScreen},
    LibraryHome: {screen: Tab},
    LibraryBookDetail: {screen: LibraryBookDetailScreen},
    LibrarySearch: {screen: LibrarySearchScreen},
    LibraryByCategory: {screen: LibraryByCategoryScreen},
    LibraryBookReview: {screen: LibraryBookReviewScreen},
    LibraryBookReviewForm: {screen: LibraryBookReviewFormScreen},
    LibraryCart: {screen: LibraryCartScreen},
    LibraryHistory: {screen: LibraryHistoryScreen},
    LibraryBookReturn: {screen: LibraryBookReturnScreen},
    LibraryFavorite: {screen: LibraryFavoriteScreen},
    LibraryContribute: {screen: LibraryContributeScreen},
    LibraryRegulation: {screen: LibraryRegulationScreen},
  },
  {
    defaultNavigationOptions: {
      headerShown: false,
    },
    initialRouteName: 'Login',
  },
);

export default createAppContainer(MainStack);

On login success

Trigger after login success or have buildingId, userId and accessToken

import {libraryApp} from 'beebook-mobile';

function LoginScreen() {
  const dispatch = useDispatch();

  const handleLoginSuccess = useCallback(
    async ({buildingId, userId, accessToken}) => {
      await libraryApp.start({
        dispatch,
        userId,
        buildingId,
        accessToken,
      });
    },
    [dispatch],
  );
}

On logout

import {libraryApp} from 'beebook-mobile';

function LogoutScreen() {
  const dispatch = useDispatch();

  const handleLogout = useCallback(async () => {
    await libraryApp.destroy({dispatch});
  }, [dispatch]);
}