Login to Observe API

App.js

@@ -23,6 +23,7 @@ import AuthorizationManager from './app/components/AuthorizationManager'
 import Drawer from './app/components/Drawer'
 import Notification from './app/components/Notification'
 import UploadManager from './app/components/UploadManager'
+import ObserveAPIAuthManager from './app/components/ObserveAPIAuthManager'
 import CameraScreen from './app/screens/CameraScreen'
 import SaveTrace from './app/screens/SaveTrace'
 
@@ -147,6 +148,7 @@ export default class App extends Component {
             <AppContainer persistenceKey={persistenceKey} />
             <Notification />
             <AuthorizationManager />
+            <ObserveAPIAuthManager />
             <UploadManager />
           </ReduxNetworkProvider>
         </PersistGate>

__tests__/actions/observeApi.test.js

@@ -0,0 +1,26 @@
+/* global it, expect, describe */
+
+import {
+  setObserveAPIToken
+} from '../../app/actions/observeApi'
+import thunk from 'redux-thunk'
+import configureStore from 'redux-mock-store'
+
+const middlewares = [thunk]
+const mockStore = configureStore(middlewares)
+
+describe('observe api actions', () => {
+  it('should emit setObserveAPIToken action correctly', () => {
+    const store = mockStore({
+      observeApi: {
+        token: null
+      }
+    })
+    store.dispatch(setObserveAPIToken('abcd'))
+    const actions = store.getActions()
+    expect(actions[0]).toEqual({
+      type: 'SET_OBSERVE_API_TOKEN',
+      token: 'abcd'
+    })
+  })
+})

__tests__/reducers/observeApi.test.js

@@ -0,0 +1,20 @@
+/* global describe, it, expect */
+
+import reducer from '../../app/reducers/observeApi'
+
+const initialState = {
+  token: null
+}
+
+describe('test for observe api reducer', () => {
+  it('should handle SET_OBSERVE_API_TOKEN', () => {
+    const action = {
+      type: 'SET_OBSERVE_API_TOKEN',
+      token: 'abcd'
+    }
+    const newState = reducer(initialState, action)
+    expect(newState).toEqual({
+      token: 'abcd'
+    })
+  })
+})

android/app/src/main/AndroidManifest.xml

@@ -34,6 +34,12 @@
             <category android:name="android.intent.category.BROWSABLE"/>
             <data android:scheme="observe"/>
         </intent-filter>
+        <intent-filter android:label="filter_react_native">
+          <action android:name="android.intent.action.VIEW" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <category android:name="android.intent.category.BROWSABLE" />
+          <data android:scheme="observe" android:host="apilogin" />
+        </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>

app/actions/actionTypes.js

@@ -89,3 +89,5 @@ export const TRACE_UPLOAD_STARTED = 'TRACE_UPLOAD_STARTED'
 export const TRACE_UPLOADED = 'TRACE_UPLOADED'
 export const TRACE_UPLOAD_FAILED = 'TRACE_UPLOAD_FAILED'
 export const TRACE_STOP_SAVING = 'TRACE_STOP_SAVING'
+
+export const SET_OBSERVE_API_TOKEN = 'SET_OBSERVE_API_TOKEN'

app/actions/observeApi.js

@@ -0,0 +1,8 @@
+import * as types from './actionTypes'
+
+export function setObserveAPIToken (token) {
+  return {
+    type: types.SET_OBSERVE_API_TOKEN,
+    token
+  }
+}

app/components/ObserveAPIAuthManager.js

@@ -0,0 +1,32 @@
+import { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { Linking } from 'react-native'
+import { setObserveAPIToken } from '../actions/observeApi'
+
+class ObserveAPIAuthManager extends PureComponent {
+  componentDidMount () {
+    Linking.addEventListener('url', this.handleOpenURL)
+  }
+
+  handleOpenURL = (urlObj) => {
+    const url = urlObj.url
+    const { setObserveAPIToken } = this.props
+    if (!url.includes('apilogin')) return
+    const token = url.split('accessToken=')[1]
+    setObserveAPIToken(token)
+  }
+
+  render () {
+    return null
+  }
+}
+
+const mapStateToProps = state => ({
+
+})
+
+const mapDispatchToProps = {
+  setObserveAPIToken
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ObserveAPIAuthManager)

app/reducers/index.js

@@ -13,6 +13,7 @@ import EditReducer from './edit'
 import NotificationReducer from './notification'
 import CameraReducer from './camera'
 import TracesReducer from './traces'
+import ObserveAPIReducer from './observeApi'
 
 const authorizationPersistConfig = {
   key: 'authorization',
@@ -55,7 +56,8 @@ const rootReducer = combineReducers({
   network,
   notification: NotificationReducer,
   photos: CameraReducer,
-  traces: persistReducer(tracesPersistConfig, TracesReducer)
+  traces: persistReducer(tracesPersistConfig, TracesReducer),
+  observeApi: ObserveAPIReducer
 })
 
 export default rootReducer

app/reducers/observeApi.js

@@ -0,0 +1,17 @@
+import * as types from '../actions/actionTypes'
+
+const initialState = {
+  token: null
+}
+
+export default function (state = initialState, action) {
+  switch (action.type) {
+    case types.SET_OBSERVE_API_TOKEN: {
+      return {
+        ...state,
+        token: action.token
+      }
+    }
+  }
+  return state
+}

app/screens/Settings.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components/native'
-
+import { Linking } from 'react-native'
+import Config from 'react-native-config'
 import { purgeCache, purgeStore } from '../actions/about'
 import { purgeAllEdits } from '../actions/edit'
 import { startTrace, endTrace } from '../actions/traces'
@@ -46,6 +47,12 @@ class Settings extends React.Component {
     }
   }
 
+  apiLogin = () => {
+    const redirectURL = 'observe://apilogin'
+    const loginURL = `${Config.OBSERVE_API_URL}/login?redirect=${redirectURL}`
+    Linking.openURL(loginURL).catch(e => console.log('error opening url', e))
+  }
+
   render () {
     const { navigation } = this.props
 
@@ -89,6 +96,13 @@ class Settings extends React.Component {
               disabled={!this.props.currentTrace}
             />
           </ButtonWrapper>
+          <ButtonWrapper>
+            <Button
+              onPress={this.apiLogin}
+              title='Login to Observe API'
+              color={colors.primary}
+            />
+          </ButtonWrapper>
           <Text>
             Observe-{version}
           </Text>