Feature/feature timer component

android/app/build.gradle

@@ -78,9 +78,9 @@ import com.android.build.OutputFile
  */
 
 project.ext.vectoricons = [
-    iconFontNames: [ 'FontAwesome.ttf' ] // Name of the font files you want to copy
+        iconFontNames: ['FontAwesome.ttf']
 ]
- 
+
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 project.ext.react = [

app/components/SettingsCell.js

@@ -10,6 +10,7 @@ const SettingsCell = ({
   title,
   onCellPress,
   onSwitchValueChange,
+  switchValue,
   titleNumLines,
   iconName,
 }) => {
@@ -29,7 +30,7 @@ const SettingsCell = ({
         </Text>
         <View style={innerContent}>
           {onCellPress == null ? (
-            <Switch onValueChange={switchValueChanged} />
+            <Switch onValueChange={switchValueChanged} value={switchValue} />
           ) : (
             <Icon style={icon} name={iconName} />
           )}

app/components/TimerButton.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import config, { colors, vectorIcons } from '../config'
+import { AnimatedCircularProgress } from 'react-native-circular-progress'
+import { useDispatch } from 'react-redux'
+import { addWashTime } from '../state/WashTimeHistory'
+
+const TimerButton = ({ timerStart, image, text }) => {
+  const dispatch = useDispatch()
+  const timerDefault = config.timerDefault
+  const [timer, setCounter] = useState(timerDefault)
+  const [bottomText, setBottomText] = useState(text)
+  const [timerStartNew, setTimerStart] = useState(timerStart)
+
+  const timerCounter = () => setCounter(timer - 1)
+
+  useEffect(() => {
+    if (timerStartNew) {
+      if (timer <= 0) {
+        setBottomText('Well Done')
+        setTimerStart(false)
+        dispatch(addWashTime({ datetime: Date.now() }))
+        return
+      }
+      const id = setInterval(timerCounter, 1000)
+      return () => {
+        clearInterval(id)
+      }
+    }
+  }, [timer])
+
+  const fill = timerStart ? 100 - (timer * 100) / timerDefault : 0
+
+  const { FontAwesome } = vectorIcons
+  const { white, green } = colors
+  const {
+    container,
+    textSeconds,
+    textSecondName,
+    viewStyle,
+    progressStyle,
+  } = styles
+
+  return (
+    <View style={container}>
+      <AnimatedCircularProgress
+        style={progressStyle}
+        size={200}
+        width={10}
+        fill={fill}
+        rotation={0}
+        tintColor={green}
+        backgroundColor={white}
+      >
+        {() => (
+          <View style={viewStyle}>
+            {timerStartNew ? (
+              <Text style={textSeconds}>{timer}</Text>
+            ) : (
+              <FontAwesome name={image} size={30} color={white} />
+            )}
+
+            <Text style={textSecondName}>{bottomText}</Text>
+          </View>
+        )}
+      </AnimatedCircularProgress>
+    </View>
+  )
+}
+
+export default TimerButton
+
+const { white, circleBackground } = colors
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textSeconds: { fontSize: 30, color: white },
+  textSecondName: { color: white, marginTop: 25, fontSize: 18 },
+  viewStyle: { alignItems: 'center', justifyContent: 'center' },
+  progressStyle: {
+    backgroundColor: circleBackground,
+    borderRadius: 100,
+  },
+  circularView: {
+    height: 190,
+    width: 190,
+    borderRadius: 100,
+    backgroundColor: circleBackground,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

app/components/index.js

@@ -1,5 +1,6 @@
-import InstructionCell from './InstructionCell'
+import TimerButton from './TimerButton'
 import MedicBleepLogo from './MedicBleepLogo'
 import SettingsCell from './SettingsCell'
+import InstructionCell from './InstructionCell'
 
-export { MedicBleepLogo, SettingsCell, InstructionCell }
+export { MedicBleepLogo, SettingsCell, TimerButton, InstructionCell }

app/config/index.js

@@ -4,9 +4,11 @@ import production from './production'
 import colors from './colors'
 import { store, persistor } from './store'
 import routes from './routes'
+import vectorIcons from './vectorIcons'
 
 let config = {
   colors,
+  timerDefault: 20,
 }
 
 if (__DEV__) {
@@ -23,5 +25,5 @@ if (__DEV__) {
   }
 }
 
-export { colors, store, persistor, routes }
+export { colors, routes, store, vectorIcons, persistor }
 export default config

app/config/vectorIcons.js

@@ -0,0 +1,7 @@
+import FontAwesome from 'react-native-vector-icons/FontAwesome'
+
+const vectorIcons = {
+  FontAwesome,
+}
+
+export default vectorIcons

app/navigations/MainNavigation.js

@@ -1,6 +1,6 @@
 import { createStackNavigator } from '@react-navigation/stack'
 import React from 'react'
-import { Settings, TimerScreen, HomeScreen } from '../screens'
+import { HomeScreen, SettingsScreen, TimerScreen } from '../screens'
 import { routes, colors } from '../config'
 
 const { SETTINGS_SCREEN, TIMER_SCREEN, HOME_SCREEN } = routes
@@ -28,7 +28,7 @@ const MainNavigation = () => (
     />
     <Stack.Screen
       name={SETTINGS_SCREEN}
-      component={Settings}
+      component={SettingsScreen}
       options={{ title: 'Settings' }}
     />
     <Stack.Screen

app/screens/HomeScreen.js

@@ -5,19 +5,36 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  Image,
   FlatList,
 } from 'react-native'
 import WashTimeCell from '../components/WashTimeCell'
-import { colors, routes } from '../config'
-import logo from '../assets/images/logo.png'
+import { colors, routes, vectorIcons } from '../config'
 import ShiftView from '../components/ShiftView'
 import { startShift } from '../state/Shift'
 import { useSelector, useDispatch } from 'react-redux'
 import { selectShiftStarted } from 'app/state/Shift'
 import { getWashTimes } from '../state/WashTimeHistory'
+import { TimerButton } from '../components'
 
 export const HomeScreen = ({ navigation }) => {
+  const { FontAwesome } = vectorIcons
+  const { white } = colors
+  const { settingButtonStyle } = styles
+  navigation.setOptions({
+    headerRight: () => (
+      <View>
+        <TouchableOpacity onPress={() => {}}>
+          <FontAwesome
+            style={settingButtonStyle}
+            name={'gear'}
+            size={25}
+            color={white}
+          />
+        </TouchableOpacity>
+      </View>
+    ),
+  })
+
   const dispatch = useDispatch()
   const started = useSelector(selectShiftStarted)
   const washTimes = useSelector(getWashTimes)
@@ -54,7 +71,7 @@ export const HomeScreen = ({ navigation }) => {
           style={washButtonViewStyle}
           onPress={washButtonClicked}
         >
-          <Image source={logo} />
+          <TimerButton timerStart={false} image="gear" text="Wash" />
         </TouchableOpacity>
       </View>
       <Text style={historyTextViewStyle}>HISTORY</Text>
@@ -79,6 +96,7 @@ export default HomeScreen
 const styles = StyleSheet.create({
   mainViewStyle: {
     flex: 1,
+    backgroundColor: colors.white,
   },
   washButtonBgViewStyle: {
     marginTop: 25,
@@ -109,4 +127,5 @@ const styles = StyleSheet.create({
     marginTop: 15,
     color: colors.white,
   },
+  settingButtonStyle: { marginRight: 15 },
 })

app/screens/Settings.js → app/screens/SettingsScreen.js

@@ -1,16 +1,28 @@
 import React from 'react'
-import { View, StyleSheet, SafeAreaView } from 'react-native'
+import { View, StyleSheet, SafeAreaView, Linking } from 'react-native'
 import MedicBleepLogo from '../components/MedicBleepLogo'
 import { SettingsCell } from '../components'
 import { colors } from '../config'
+import { storeHistory, shiftReminders } from '../state/Settings'
+import { useSelector, useDispatch } from 'react-redux'
+import { selectStoreHistory, selectShiftReminders } from 'app/state/Settings'
 
 const { white } = colors
 
-const Settings = ({ started }) => {
-  const storeHistoryValueChanged = (value) => {}
-  const shiftReminderValueChanged = (value) => {}
-  const aboutMbCellPressed = () => {}
-  const followCellPressed = () => {}
+const medicBleepAboutUsUrl = 'https://www.medicbleep.com/about.html'
+const medicBleepFollowTwitterUrl = 'https://twitter.com/MedicBleep'
+
+const SettingsScreen = ({}) => {
+  const dispatch = useDispatch()
+  const isStoreHistory = useSelector(selectStoreHistory)
+  const isShiftRemindersAllow = useSelector(selectShiftReminders)
+
+  const storeHistoryValueChanged = (value) =>
+    isStoreHistory !== value ? dispatch(storeHistory(value)) : null
+  const shiftReminderValueChanged = (value) =>
+    isShiftRemindersAllow !== value ? dispatch(shiftReminders(value)) : null
+  const aboutMbCellPressed = () => Linking.openURL(medicBleepAboutUsUrl)
+  const followCellPressed = () => Linking.openURL(medicBleepFollowTwitterUrl)
 
   const { container, contentWrapper } = styles
   return (
@@ -20,13 +32,15 @@ const Settings = ({ started }) => {
           title={'Store History'}
           onCellPress={null}
           onSwitchValueChange={storeHistoryValueChanged}
+          switchValue={isStoreHistory}
           titleNumLines={1}
           iconName={null}
         />
         <SettingsCell
           title={'Two Hour On Shift Reminders'}
           onCellPress={null}
           onSwitchValueChange={shiftReminderValueChanged}
+          switchValue={isShiftRemindersAllow}
           titleNumLines={2}
           iconName={null}
         />
@@ -50,7 +64,7 @@ const Settings = ({ started }) => {
   )
 }
 
-export default Settings
+export default SettingsScreen
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: white },

app/screens/TimerScreen.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, SafeAreaView, StyleSheet, FlatList } from 'react-native'
-import { InstructionCell } from '../components'
+import { InstructionCell, TimerButton } from '../components'
+import { colors } from '../config'
 
 const TimerScreen = ({ navigation }) => {
   const data = [
@@ -43,6 +44,7 @@ const TimerScreen = ({ navigation }) => {
   return (
     <SafeAreaView style={safeAreaStyle}>
       <View style={container}>
+        <TimerButton timerStart={true} image="thumbs-up" text="Seconds" />
         <FlatList
           style={flatListStyle}
           data={data}
@@ -53,12 +55,13 @@ const TimerScreen = ({ navigation }) => {
     </SafeAreaView>
   )
 }
-
 export default TimerScreen
 
+const { white } = colors
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: white,
   },
   flatListStyle: {
     flex: 1,

app/screens/index.js

@@ -1,5 +1,5 @@
 import TimerScreen from './TimerScreen'
 import HomeScreen from './HomeScreen'
-import Settings from './Settings'
+import SettingsScreen from './SettingsScreen'
 
-export { HomeScreen, Settings, TimerScreen }
+export { HomeScreen, SettingsScreen, TimerScreen }

app/state/Settings.js

@@ -0,0 +1,37 @@
+const initialState = {
+  isToStoreHistory: false,
+  isToAllowShiftReminders: false,
+}
+
+// Types
+export const STORE_HISTORY = 'store_history'
+export const SHIFT_REMINDERS = 'shift_reminders'
+
+// Reducer
+export default (state = initialState, action = {}) => {
+  switch (action.type) {
+    case STORE_HISTORY:
+      return { ...state, isToStoreHistory: action.payload }
+    case SHIFT_REMINDERS:
+      return { ...state, isToAllowShiftReminders: action.payload }
+    default:
+      return state
+  }
+}
+
+// Action creators
+export const storeHistory = (isStoreHistory) => ({
+  type: STORE_HISTORY,
+  payload: isStoreHistory,
+})
+
+export const shiftReminders = (isShiftRemindersAllowed) => ({
+  type: SHIFT_REMINDERS,
+  payload: isShiftRemindersAllowed,
+})
+
+// Selectors
+export const selectStoreHistory = (state) =>
+  state.settingsReducer.isToStoreHistory
+export const selectShiftReminders = (state) =>
+  state.settingsReducer.isToAllowShiftReminders

app/state/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux'
 import Shift from './Shift'
 import WashTimeHistory from './WashTimeHistory'
+import Settings from './Settings'
 
 const rootReducer = combineReducers({
   shiftReducer: Shift,
   washTimeHistory: WashTimeHistory,
+  settingsReducer: Settings,
 })
 export default rootReducer