Feature/local notification

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/InstructionCell.js

@@ -25,7 +25,6 @@ const InstructionCell = ({ item }) => {
           <Text style={dayView}>{body}</Text>
         </View>
       </View>
-      <Divider />
     </View>
   )
 }
@@ -37,9 +36,10 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
+    marginBottom: 10,
   },
   timeBgView: {
-    width: 65,
+    width: 40,
     height: 40,
     marginLeft: 30,
     backgroundColor: colors.navigationHeader,

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/ShiftView.js

@@ -27,6 +27,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.navigationHeader,
     justifyContent: 'center',
     alignItems: 'center',
+    borderRadius: 10,
   },
   emptyViewStyle: {
     height: 35,

app/components/TimerButton.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text, StyleSheet, Image } from 'react-native'
+import config, { colors, vectorIcons } from '../config'
+import { AnimatedCircularProgress } from 'react-native-circular-progress'
+import { useSelector, useDispatch } from 'react-redux'
+import { addWashTime } from '../state/WashTimeHistory'
+import { selectStoreHistory } from '../state/Settings'
+
+const TimerButton = ({ timerStart, image, text }) => {
+  const dispatch = useDispatch()
+  const isStoreHistory = useSelector(selectStoreHistory)
+  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)
+
+        if (isStoreHistory) {
+          dispatch(addWashTime({ dateTime: Date.now() }))
+        }
+        return
+      }
+      const id = setInterval(timerCounter, 1000)
+      return () => {
+        clearInterval(id)
+      }
+    }
+  }, [timer])
+
+  const fill = 100 - (timer * 100) / timerDefault
+
+  const { FontAwesome } = vectorIcons
+  const { white, green } = colors
+  const {
+    container,
+    textSeconds,
+    textSecondName,
+    viewStyle,
+    progressStyle,
+    circularView,
+  } = styles
+
+  const renderCircularProgress = () => {
+    return (
+      <AnimatedCircularProgress
+        style={progressStyle}
+        size={200}
+        width={10}
+        fill={fill}
+        rotation={0}
+        tintColor={green}
+        backgroundColor={white}
+      >
+        {() => (
+          <View style={viewStyle}>
+            <Text style={textSeconds}>{timer}</Text>
+            <Text style={textSecondName}>{bottomText}</Text>
+          </View>
+        )}
+      </AnimatedCircularProgress>
+    )
+  }
+
+  const renderCircularView = () => {
+    return (
+      <View style={circularView}>
+        <FontAwesome name={image} size={30} color={white} />
+        <Text style={textSecondName}>{bottomText}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={container}>
+      {timerStartNew ? renderCircularProgress() : renderCircularView()}
+    </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,
+  },
+  imageView: { width: 100, height: 100 },
+  circularView: {
+    height: 190,
+    width: 190,
+    borderRadius: 100,
+    backgroundColor: circleBackground,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

app/components/WashTimeCell.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, StyleSheet, Text } from 'react-native'
 import { colors } from '../config'
+import Divider from './Divider'
 import {
   timeIn24HrsFormat,
   getDayFromDate,
@@ -15,7 +16,6 @@ const WashTimeCell = ({ item }) => {
     dayAndDateBgView,
     dateView,
     dayView,
-    sepratorViewStyle,
   } = styles
   const { dateTime } = item
 
@@ -30,7 +30,7 @@ const WashTimeCell = ({ item }) => {
           <Text style={dayView}>{convertDateIntoDateComponent(dateTime)}</Text>
         </View>
       </View>
-      <View style={sepratorViewStyle} />
+      <Divider />
     </View>
   )
 }

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/colors.js

@@ -10,5 +10,5 @@ export default {
   dayText: '#4A4A4A',
   dateText: '#9b9b9b',
   separatorLineGray: '#E5E9EA',
-  circleBackground: '#5AC8FA',
+  circleBackground: '#00A1D2',
 }

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,41 @@ 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
+  const { SETTINGS_SCREEN, HOME_SCREEN } = routes
+  navigation.setOptions({
+    headerRight: () => (
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.navigate({ name: SETTINGS_SCREEN, key: HOME_SCREEN })
+          }}
+        >
+          <FontAwesome
+            style={settingButtonStyle}
+            name={'gear'}
+            size={25}
+            color={white}
+          />
+        </TouchableOpacity>
+      </View>
+    ),
+  })
+
   const dispatch = useDispatch()
   const started = useSelector(selectShiftStarted)
   const washTimes = useSelector(getWashTimes)
@@ -54,7 +76,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>
@@ -109,4 +131,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 },