zoom-mt

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset", "babel-preset-expo", "@babel/preset-env", "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx-source",
    "@babel/plugin-proposal-class-properties",
    [
      "module-resolver",
      {
        "root": [
          "./"
        ],
        "alias": {
          "$assets": "./assets",
          "$zoomht": "./src/js",
          "$srcjs": "./src/js",
          "$test": "./src/test",
          "$theme": "./native-base-theme"
        }
      }
    ]
  ],
  "ignore": [
    "*.png",
    "node_modules",
    "./node_modules",
    "./lib"
  ]
}

ActionTypes.js

import keyMirror from 'keymirror'

export default keyMirror({
  USER_AUTHENTICATED: null,
  SET_USER_DATA: null,

  SET_CAMERA_PERMISSION: null,
  SET_LOCATION_PERMISSION: null,

  SET_NETWORK_CONNECTION_STATUS: null,

  FETCH_BIKE_RACKS: null,
  FETCH_BIKE_RACKS_SUCCESS: null,
  FETCH_BIKE_RACKS_FAILED: null,

  BIKE_CHECKOUT: null,
  BIKE_CHECKOUT_SUCCESS: null,
  BIKE_CHECKOUT_FAILED: null,
  CLEAR_BIKE_CHECKOUT_STATUS: null,

  BIKE_CHECKIN: null,
  BIKE_CHECKIN_SUCCESS: null,
  BIKE_CHECKIN_FAILED: null,
  CLEAR_BIKE_CHECKIN_STATUS: null,

  FETCH_CURRENT_RENTAL: null,
  FETCH_CURRENT_RENTAL_SUCCESS: null,
  FETCH_CURRENT_RENTAL_FAILED: null
})

App.js

import Expo from 'expo'
import * as Font from 'expo-font'
import { Asset } from 'expo-asset'
import Constants from 'expo-constants'
import React from 'react'
import { Image, StatusBar } from 'react-native'
import { Provider } from 'react-redux'
import { StyleProvider, Container, View } from 'native-base'
import getTheme from './native-base-theme/components'
import createHistory from 'history/createMemoryHistory'
import Router from './src/js/Router'
import createStore from './src/js/utils/createStore'

import commonColor from './native-base-theme/variables/commonColor'
import { isIOS } from './src/js/utils/platform'

const { brandPrimary } = commonColor

console.log('Inside the App.js')
const history = createHistory()
const store = createStore({}, history)
console.debug("Here in App.js")

export default class App extends React.Component {
  constructor (args) {
    super(args)
    this.state = {
      isReady: false
    }
  }

  async componentWillMount () {
    await Font.loadAsync({
      Roboto: require('./assets/Fonts/Roboto.ttf'),
      Roboto_medium: require('./assets/Fonts/Roboto_medium.ttf'),
      Ionicons: require('./assets/Fonts/Ionicons.ttf'),
      MaterialCommunityIcons: require('./assets/Fonts/MaterialCommunityIcons.ttf'),
      'Material Design Icons': require('./assets/Fonts/MaterialCommunityIcons.ttf'),
      MaterialIcons: require('./assets/Fonts/MaterialIcons.ttf'),
      'Material Icons': require('./assets/Fonts/MaterialIcons.ttf')
    })

    this.setState({ isReady: true })
  }

  renderStatusBarPadding () {
    if (!isIOS()) return <View />

    return (
      <View
        style={{
          backgroundColor: brandPrimary,
          height: Constants.statusBarHeight,
          width: '100%'
        }}
      />
    )
  }

  render () {
    if (!this.state.isReady) {
      return (
        <Expo.AppLoading
          startAsync={this._cacheResourcesAsync}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      )
    }

    return (
      <StyleProvider style={getTheme(commonColor)}>
        <Container>
          {this.renderStatusBarPadding()}
          <StatusBar backgroundColor={brandPrimary} barStyle="light-content" />
          <Container style={{ backgroundColor: '#ffffff' }}>
            <Provider store={store}>
              <Router history={history} />
            </Provider>
          </Container>
        </Container>
      </StyleProvider>
    )
  }

  async _cacheResourcesAsync () {
    const images = [require('./assets/zoomht.png')]

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync()
    })
    return Promise.all(cacheImages)
  }
}

AppContainer.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-native'
// import { Switch, Route } from 'react-router'

import RequestStatus from '../api/constants/RequestStatus'
import { getUserFetchStatus } from '../auth/selectors/userFetchStatusSelectors'

import Main from './Main'
import ReportDamageView from '../report-damage/components/ReportDamageView'
import MaintenanceDetailView from '../maintenance/components/MaintenanceDetailView'
import UserData, { isEmpty } from '../auth/records/UserData'
import { login } from '../constants/urls'
// import console = require('console');

const { FAILED } = RequestStatus

class AppContainer extends React.Component {
  componentWillMount () {
    const { userDataFetchStatus, userData, history } = this.props

    if (isEmpty(userData) && userDataFetchStatus === FAILED) {
      history.replace(login)
    }
  }

  render () {
    return (
      <Switch>
        <Route exact={true} path="/" component={Main} />
        <Route path="/report-damage" component={ReportDamageView} />
        <Route path="/maintenance" component={MaintenanceDetailView} />
      </Switch>
    )
  }
}

AppContainer.PropTypes = {
  history: PropTypes.object.isRequired,
  userData: PropTypes.instanceOf(UserData),
  fetchBikeRacksIfEmpty: PropTypes.func,
  fetchCurrentRentalIfNotAlready: PropTypes.func,
  userDataFetchStatus: PropTypes.oneOf(Object.keys(RequestStatus))
}

const stateSelectors = state => {
  return {
    userData: state.userData,
    userDataFetchStatus: getUserFetchStatus(state)
  }
}

export default connect(
  stateSelectors,
  {}
)(AppContainer)

index.js

import { registerRootComponent } from 'expo'
import { View, YellowBox } from 'react-native'
import App from './App'

YellowBox.ignoreWarnings(['Require cycle:', 'Remote debugger'])
registerRootComponent(App)

package.json

{
  "main": "./index.js",
  "scripts": {
    "start": "expo start --lan",
    "android": "expo start --android --lan",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "clean": "rimraf node_modules",
    "cleanto": "react-native-clean-project",
    "lint:all": "eslint .",
    "prettier": "prettier -c --single-quote --trailing-comma es5",
    "prettier:write": "prettier -- --write \"./src/**/*.js\"",
    "precommit": "lint-staged",
    "build-android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.bundle.map --assets-dest android/app/src/main/res/",
    "build-ios-bundle": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ./ios/main.jsbundle --sourcemap-output ./ios/main.jsbundle.map --assets-dest ./ios",
    "detach": "expo detach && react-native link",
    "build": "babel src/js -d lib/",
    "prepublish": "yarn run build",
    "watch": "nodemon --exec npm run android",
    "bexpo": "expo build:android -t app-bundle",
    "login": "expo login",
    "postinstall": "rndebugger-open",
    "metrobuild": "metro build index.js -O index.android.bundle"
  },
  "lint-staged": {
    "*.js": [
      "prettier ",
      "eslint ."
    ]
  },
  "prepush": {
    "tasks": [
      "yarn lint-all"
    ]
  },
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|Expo|expo|native-base-shoutem-theme|react-native-easy-grid|react-native-drawer|react-router-native|@expo/vector-icons|native-base/node_modules/react-native-vector-icons))"
    ],
    "preset": "react-native"
  },
  "resolutions": {
    "react-native-svg": "9.6.2"
  },
  "dependencies": {
    "@hs/transmute": "^2.1.0",
    "@turf/turf": "^5.1.6",
    "babel-plugin-module-resolver": "^3.2.0",
    "core-js": "^3.2.1",
    "core-util-is": "^1.0.2",
    "expo": "^34.0.4",
    "expo-asset": "^6.0.0",
    "expo-constants": "^6.0.0",
    "expo-font": "^6.0.1",
    "expo-secure-store": "^6.0.0",
    "global": "^4.4.0",
    "history": "^4.9.0",
    "immutable": "^4.0.0-rc.12",
    "keymirror": "^0.1.1",
    "moment": "^2.24.0",
    "moment-duration-format": "^2.3.2",
    "native-base": "^2.13.4",
    "native-base-shoutem-theme": "^0.3.1",
    "prop-types": "^15.7.2",
    "query-string": "^6.8.2",
    "react": "^16.9.0",
    "react-dom": "16.9.0",
    "react-native": "^0.60.5",
    "react-native-check-box": "^2.1.7",
    "react-native-root-toast": "^3.1.2",
    "react-native-svg": "^9.6.2",
    "react-native-web": "^0.11.6",
    "react-redux": "^7.1.0",
    "react-router-native": "^5.0.1",
    "react-router-redux": "^4.0.8",
    "redux": "^4.0.4",
    "redux-actions": "^2.6.5",
    "redux-persist": "^5.10.0",
    "redux-persist-expo-securestore": "^2.0.0",
    "redux-persist-transform-immutable": "^5.0.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "topo": "^3.0.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.5.5",
    "babel-eslint": "^10.0.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-expo": "^5.2.0",
    "babel-preset-react-native": "^4.0.1",
    "color": "^3.1.2",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-native": "^3.7.0",
    "eslint-plugin-standard": "^4.0.0",
    "fbemitter": "^2.1.1",
    "husky": "^3.0.3",
    "jest": "^24.8.0",
    "jest-expo": "^34.0.0",
    "jest-serializer-enzyme": "^1.0.0",
    "lint-staged": "^9.2.1",
    "lodash": "^4.17.15",
    "metro-react-native-babel-preset": "^0.56.0",
    "minimatch": "^3.0.4",
    "nodemon": "^1.19.1",
    "pre-push": "^0.1.1",
    "prepush": "^3.1.11",
    "prettier": "^1.18.2",
    "react-addons-test-utils": "^15.6.2",
    "react-devtools": "^3.6.3",
    "react-native-clean-project": "^3.2.4",
    "react-native-debugger-open": "^0.3.19",
    "react-native-reanimated": "^1.2.0",
    "react-native-typescript-transformer": "^1.2.13",
    "typescript": "^3.5.3"
  },
  "private": true
}

Router.js

import Expo from 'expo'
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Route, Switch, BackButton } from 'react-router-native'
import { NetInfo } from 'react-native'
import { ConnectedRouter } from 'react-router-redux'

import RequestStatus from './api/constants/RequestStatus'

import AppContainer from './app/AppContainer'
import LoginContainer from './login/components/Login'
import { networkConnectionChange as networkConnectionChangeAction } from './api/actions/networkActions'
import { getUserFetchStatus } from './auth/selectors/userFetchStatusSelectors'
import { fetchUserData as fetchUserDataAction } from './auth/actions/userDataActions'

/*
 * So react router v4 is kinda dumb and doesn't allow nested routes.
 * In order to match that functionality, their recommendation is to make a wrapper
 * component, in this case AppContainer, and add your child routes there.
 * So because of this, most of the routing for the app is in AppContainer.
 */

const { PENDING, UNITIALIZED } = RequestStatus

class Router extends React.Component {
  static propTypes = {
    fetchUserData: PropTypes.func,
    doLogin: PropTypes.func,
    userDataFetchStatus: PropTypes.oneOf(Object.keys(RequestStatus)),
    networkConnectionChange: PropTypes.func,
    history: PropTypes.object
  };

  constructor (props) {
    super(props)
    this.handleConnectivityChange = this.handleConnectivityChange.bind(this)
  }

  componentWillMount () {
    const { fetchUserData } = this.props
    fetchUserData()
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleConnectivityChange
    )
  }

  componentWillUnmount () {
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this.handleConnectivityChange
    )
  }

  handleConnectivityChange (isConnected) {
    const { networkConnectionChange } = this.props
    networkConnectionChange(isConnected)
  }

  render () {
    const { doLogin, userDataFetchStatus, history } = this.props

    if (
      userDataFetchStatus === PENDING ||
      userDataFetchStatus === UNITIALIZED
    ) {
      return <Expo.AppLoading />
    }

    return (
      <ConnectedRouter history={history}>
        <BackButton>
          <Switch>
            <Route
              path="/login"
              render={props => <LoginContainer doLogin={doLogin} {...props} />}
            />
            <Route component={AppContainer} />
          </Switch>
        </BackButton>
      </ConnectedRouter>
    )
  }
}

const mapStateToProps = state => {
  return {
    _userDataFetchStatus: getUserFetchStatus(state),
    get userDataFetchStatus () {
      return this._userDataFetchStatus
    },
    set userDataFetchStatus (value) {
      this._userDataFetchStatus = value
    }
    //, fetchUserData: fetchUserDataAction.apply,
    // networkConnectionChange: networkConnectionChangeAction
  }
}

export default connect(
  mapStateToProps,
  {
    fetchUserData: fetchUserDataAction,
    networkConnectionChange: networkConnectionChangeAction
  }
)(Router)