Merge pull request #1 from idonov8/sample-ui

Sample ui

App/App.js

@@ -3,8 +3,6 @@ import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 import createStore from './Stores'
 import RootScreen from './Containers/Root/RootScreen'
-import { Button } from 'react-native'
-import { AndroidForegroundService } from './Services/AndroidForegroundService'
 
 const { store, persistor } = createStore();
 
@@ -24,7 +22,6 @@ export default class App extends Component {
          */}
         <PersistGate loading={null} persistor={persistor}>
           <RootScreen />
-          <Button title="Stop working in background" onPress={AndroidForegroundService.stopForegroundService}></Button>
         </PersistGate>
       </Provider>
     )

App/Components/SampleBody.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Text, View, Image } from 'react-native'
+import Button from 'react-native-really-awesome-button/src/themes/rick';
+import { Helpers, Fonts, Images, Metrics } from '../Theme';
+
+export default function SampleBody(props) {
+  const { btnTitle, btnAction, helperText  } = props;
+
+  return (
+    <View
+      style={[
+        Helpers.fillColCenter,
+        Helpers.mainSpaceAround
+      ]}
+    >
+      <View key="text-view"
+        style={[
+          Helpers.colCenter,
+          Helpers.mainSpaceAround
+        ]}
+      >
+        <Text style={[
+          Fonts.h1,
+          Metrics.bottomMargin
+        ]}>
+          זהירות קורונה!
+        </Text>
+        <Text style={[
+          Fonts.h4,
+          Helpers.textCenter,
+          Metrics.horizontalPadding
+        ]}>
+          {
+            helperText 
+          }
+        </Text>
+      </View>
+      <Button 
+        width={150}
+        onPress={btnAction}
+      >
+        {btnTitle}
+      </Button>
+      <Image source={Images.Location}></Image>
+      <Text style={[
+          Fonts.h4,
+          Helpers.textCenter,
+          Metrics.horizontalPadding
+        ]}>
+          {`תודה על שיתוף הפעולה.\nאם נתקלתם בבאגים או כל בעיה, אנא דווחו לצוות באומן`}
+      </Text>
+    </View>
+  );
+}

App/Containers/ScanningScreen/ScanningScreen.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { View, Button } from 'react-native'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Helpers } from 'App/Theme'
+import SampleBody from '../../Components/SampleBody'
+import SampleActions from '../../Stores/Samples/Actions';
+
+class ScanningScreen extends React.Component {
+  render() {
+    const { isScanning, startSampling, stopSampling } = this.props;
+
+    const helperText = isScanning ? 
+      'לא לשכוח ללחוץ ביציאה!' : 'לחצו על הכפתור כשאתם נכנסים לבסיס וכשאתם יוצאים\n\nככה נוודא שלא נחשפתם לנגיף'
+
+    return (
+      <View
+        style={[
+          Helpers.fillColMain
+        ]}
+      >
+        <SampleBody
+          helperText={helperText}
+          btnTitle={isScanning ? 'יצאתי': 'נכנסתי'}
+          btnAction={isScanning ? stopSampling : startSampling}/>
+      </View>
+    )
+  }
+}
+
+ScanningScreen.propTypes = {
+  isScanning: PropTypes.bool.isRequired,
+  startSampling: PropTypes.func.isRequired,
+  stopSampling: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = (state) => ({
+  isScanning: state.samples.isSampling,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  startSampling: () => dispatch(SampleActions.startSample()),
+  stopSampling: () => dispatch(SampleActions.stopSample())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScanningScreen)

App/Navigators/AppNavigator.js

@@ -1,7 +1,7 @@
 import { createAppContainer, createStackNavigator } from 'react-navigation'
 import NoPermissionsScreen from '../Containers/NoPermissionsScreen/NoPermissionsScreen'
 import SplashScreen from '../Containers/SplashScreen/SplashScreen'
-import ScanningScreen from '../Containers/ScaningScreen/ScanningScreen'
+import ScanningScreen from '../Containers/ScanningScreen/ScanningScreen'
 
 
 /**
@@ -13,7 +13,7 @@ const StackNavigator = createStackNavigator(
   {
     // Create the application routes here (the key is the route name, the value is the target screen)
     SplashScreen: SplashScreen,
-    // Make main screen is an empty stub for now
+    // Make main screen is ScanningScreen
     MainScreen: ScanningScreen,
     NoPermissionsScreen,
   },

App/Sagas/SamplesSaga.js

@@ -2,18 +2,32 @@ import { race, take, select, put, all, delay, fork, cancel, call } from 'redux-s
 import GpsActions, { GpsTypes } from '../Stores/Gps/Actions';
 import { NEXT_SAMPLE_DELAY } from '../Consts';
 import WifiActions, { WifiTypes } from '../Stores/Wifi/Actions';
-import SampleActions from '../Stores/Samples/Actions';
+import SampleActions, { SamplesTypes } from '../Stores/Samples/Actions';
 import { gpsService } from '../Services/GpsService';
 import { wifiService } from '../Services/WifiService';
 import { dbService } from '../Services/DbService';
 import { phoneService } from '../Services/PhoneService';
+import { AndroidForegroundService } from '../Services/AndroidForegroundService';
 
 const wifiListSelector = (state) => !state.wifi.sampleSent && state.wifi.wifiList;
 const gpsLocationSelector = (state) => !state.gps.sampleSent && state.gps.gpsLocation;
 const roomIdSelector = (state) => state.samples.roomId;
 
 const DELAY = NEXT_SAMPLE_DELAY;
 
+export function* startSampling(isBg = true) {
+  const task = yield fork(sampleData);
+
+  // Make app work in background
+  if (isBg) yield call(AndroidForegroundService.startForegroundService);
+
+  yield take(SamplesTypes.STOP_SAMPLE);
+
+  if (task) yield cancel(task);
+
+  if (isBg) yield call(AndroidForegroundService.stopForegroundService)
+}
+
 export function* sampleData() {
   while (true) {
     const task = yield fork(sampleDataOnce);

App/Sagas/StartupSaga.js

@@ -2,18 +2,13 @@ import { put, call, select } from 'redux-saga/effects'
 import PermissionsActions from '../Stores/Permissions/Actions'
 import { permissionsService } from '../Services/PermissionsService'
 import NavigationService from '../Services/NavigationService'
-import { Platform } from 'react-native'
-import { AndroidForegroundService } from '../Services/AndroidForegroundService'
 
 /**
  * The startup saga is the place to define behavior to execute when the application starts.
  */
 export function* startup() {
   // Splash screen is shown till navigateAndReset is called at permissionsUpdate saga
   yield put(PermissionsActions.permissionsRequest());
-
-  // Make app work in background
-  yield call(AndroidForegroundService.initForegroundService);
 }
 
 export function* permissionsRequest() {

App/Sagas/index.js

@@ -6,7 +6,7 @@ import { startup, permissionsUpdate, permissionsRequest } from './StartupSaga'
 import { fetchWifiList } from './WifiSaga'
 import { fetchGpsLocation } from './GpsSaga'
 import { GpsTypes } from '../Stores/Gps/Actions'
-import { sampleData } from './SamplesSaga'
+import { startSampling } from './SamplesSaga'
 import { SamplesTypes } from '../Stores/Samples/Actions';
 
 export default function* root() {
@@ -20,6 +20,6 @@ export default function* root() {
     takeLatest(PermissionsTypes.PERMISSIONS_UPDATE, permissionsUpdate),
     takeLatest(WifiTypes.FETCH_WIFI_LIST, fetchWifiList),
     takeLatest(GpsTypes.FETCH_GPS_LOCATION, fetchGpsLocation),
-    takeLatest(SamplesTypes.START_SAMPLE, sampleData)
+    takeLatest(SamplesTypes.START_SAMPLE, startSampling)
   ])
 }

App/Services/AndroidForegroundService.js

@@ -5,6 +5,14 @@ const TASK_NAME = 'dataSample';
 let resolveFunc;
 
 const initForegroundService = async () => {
+  // TODO: add build foreground service to run just once on startup.
+  // For now we get all kinds of warinings due to starting and stopping 
+  // foreground service and re-registering task
+  // thats why we need to implement this func and run once on startup
+  // (and that's it) or even make this service a class
+}
+
+const startForegroundService = async () => {
   const foregroundTask = async (data) => {
     console.log('foregrondTask initialized');
     return new Promise((resolve) => {
@@ -44,6 +52,6 @@ const stopForegroundService = async () => {
 }
 
 export const AndroidForegroundService = {
-  initForegroundService,
+  startForegroundService,
   stopForegroundService
 }

App/Stores/Samples/Actions.js

@@ -2,6 +2,7 @@ import { createActions } from 'reduxsauce'
 
 const { Types, Creators } = createActions({
   startSample: null,
+  stopSample: null,
   sampleSent: null,
   setRoomId: ['id'],
   clearRoomId: null,

App/Stores/Samples/InitialState.js

@@ -3,4 +3,5 @@
  */
 export const INITIAL_STATE = {
   roomId: null,
+  isSampling: false
 }

App/Stores/Samples/Reducers.js

@@ -8,17 +8,29 @@ import { INITIAL_STATE } from './InitialState'
 import { createReducer } from 'reduxsauce'
 import { SamplesTypes } from './Actions'
 
-export const setRoomId = (state, {id}) => ({
+const setRoomId = (state, {id}) => ({
   ...state,
   roomId: id,
 });
 
-export const clearRoomId = (state) => ({
+const clearRoomId = (state) => ({
   ...state,
   roomId: INITIAL_STATE.roomId,
 });
 
+const startSampling = (state) => ({
+  ...state,
+  isSampling: true,
+});
+
+const stopSamping = (state) => ({
+  ...state,
+  isSampling: false,
+});
+
 export const reducer = createReducer(INITIAL_STATE, {
   [SamplesTypes.SET_ROOM_ID]: setRoomId,
   [SamplesTypes.CLEAR_ROOM_ID]: clearRoomId,
+  [SamplesTypes.START_SAMPLE]: startSampling,
+  [SamplesTypes.STOP_SAMPLE]: stopSamping,
 })

README.md

@@ -1,2 +1,2 @@
 # HospiTrack-client
-The client app for tracking people, the gathered data will be used for קpidemiological investigations.
+The client app for tracking people, the gathered data will be used for epidemiological investigations.