added medication functionality

src/Components/Medication/AddMedication.tsx

@@ -0,0 +1,54 @@
+import React, {useState} from 'react'
+import {StyleSheet, View, Text} from 'react-native'
+import {useDispatch} from 'react-redux'
+import {PrimaryBlueButton, TextInput} from '~/Components'
+import {Routes} from '~/Navigation/Routes'
+import type {AddMedicationRouteProp, RootNavigation} from '~/Root'
+import {addMedication} from '~/Store/Actions'
+
+type AddMedication = {
+  navigation: RootNavigation
+  route: AddMedicationRouteProp
+}
+export const AddMedication: React.FC<AddMedication> = ({navigation}) => {
+  const dispatch = useDispatch()
+  const [medication, setMedication] = useState('')
+  const [substance, setSubstance] = useState('')
+  const [dosage, setDosage] = useState('')
+  const [modeOfAdministration, setModeOfAdministration] = useState('')
+  return (
+    <View style={styles.container}>
+      <Text style={styles.inputLabels}>Name</Text>
+      <TextInput value={medication} onChangeText={setMedication} />
+      <Text style={styles.inputLabels}>Substance</Text>
+      <TextInput value={substance} onChangeText={setSubstance} />
+      <Text style={styles.inputLabels}>Dosage</Text>
+      <TextInput value={dosage} onChangeText={setDosage} />
+      <Text style={styles.inputLabels}>Mode of Administration</Text>
+      <TextInput value={modeOfAdministration} onChangeText={setModeOfAdministration} />
+
+      <PrimaryBlueButton
+        title={'Create'}
+        style={styles.addButton}
+        onPress={() => {
+          dispatch(addMedication(medication, substance, dosage, modeOfAdministration))
+          navigation.navigate(Routes.VIEW_MEDICATION)
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 25,
+  },
+  inputLabels: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    margin: 10,
+  },
+  addButton: {
+    alignSelf: 'flex-start',
+  },
+})

src/Components/Medication/ViewMedication.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import {Alert, FlatList, StyleSheet, Text, View} from 'react-native'
+import {useDispatch, useSelector} from 'react-redux'
+import {RootNavigation, ViewMedicationRouteProp} from '~/Root'
+import {medicationsSelector} from '~/Store/Selectors'
+import {deleteMedication} from '~/Store/Actions'
+import {IconButton} from '~/Components'
+import {Icons} from '~/Icons'
+import {Colors} from '~/Colors'
+import {Routes} from '~/Navigation/Routes'
+
+type ViewMedication = {
+  navigation: RootNavigation
+  route: ViewMedicationRouteProp
+}
+export const ViewMedication: React.FC<ViewMedication> = ({navigation}) => {
+  const dispatch = useDispatch()
+  const medications = useSelector(medicationsSelector)
+
+  const itemSeparator = () => {
+    return <View style={styles.separator} />
+  }
+
+  const emptyList = () => {
+    return (
+      <View style={{alignItems: 'center'}}>
+        <Text style={styles.listItem}>No medications found</Text>
+      </View>
+    )
+  }
+
+  const removeMedication = (name: string) => {
+    Alert.alert('Remove Medication', 'This medication will be removed from your current list?', [
+      {
+        text: 'PROCEED',
+        onPress: () => {
+          dispatch(deleteMedication(name))
+          navigation.navigate(Routes.VIEW_MEDICATION)
+        },
+      },
+      {text: 'CANCEL'},
+    ])
+  }
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={medications}
+        renderItem={({item}) => (
+          <View>
+            <Text style={styles.listItem}>{item.name}</Text>
+            <View style={{flexDirection: 'row'}}>
+              <Text style={styles.itemSummary}>dosage: </Text>
+              <Text style={styles.itemSummary}>{item.dosage}</Text>
+
+              <IconButton
+                icon={Icons.close({color: Colors.red2, size: 22})}
+                style={styles.icon}
+                onPress={() => removeMedication(item.name)}
+              />
+            </View>
+          </View>
+        )}
+        ItemSeparatorComponent={itemSeparator}
+        ListEmptyComponent={emptyList}
+        keyExtractor={item => item.name}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 5,
+  },
+  listItem: {
+    padding: 20,
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginTop: 5,
+  },
+  itemSummary: {
+    fontSize: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: 'grey',
+    marginHorizontal: 10,
+  },
+  icon: {
+    position: 'absolute',
+    right: 10,
+    bottom: 5,
+  },
+})

src/Icons/index.tsx

@@ -21,6 +21,7 @@ export const Icons = {
   faceHappy: (props: IconProps) => <CustomIcon name="face_happy" size={16} {...props} />,
   steps: (props: IconProps) => <CustomIcon name="icon_steps" size={16} {...props} />,
   wellBeing: (props: IconProps) => <CustomIcon name="icon_wellbeing" size={16} {...props} />,
+  delete: (props: IconProps) => <CustomIcon name="delete" size={24} {...props} />,
   activities: (props: IconProps) => (
     <CustomIcon name="icon_physical_activity" size={16} {...props} />
   ),

src/Navigation/Routes.ts

@@ -1,4 +1,6 @@
 export enum Routes {
   START = 'START',
   CHANGE_NAME = 'CHANGE_NAME',
+  ADD_MEDICATION = 'ADD_MEDICATION',
+  VIEW_MEDICATION = 'VIEW_MEDICATION',
 }

src/Root.tsx

@@ -12,15 +12,21 @@ import {defaultNavigationOptions} from '~/Navigation'
 import {Routes} from '~/Navigation/Routes'
 import {Start} from '~/Start'
 import {initiateStore, persistor} from '~/Store'
+import {AddMedication} from '~/Components/Medication/AddMedication'
+import {ViewMedication} from '~/Components/Medication/ViewMedication'
 
 export type RootStackParamList = {
   [Routes.START]: undefined
   [Routes.CHANGE_NAME]: {name: string}
+  [Routes.ADD_MEDICATION]: any
+  [Routes.VIEW_MEDICATION]: any
 }
 const Stack = createStackNavigator<RootStackParamList>()
 
 export type RootNavigation = StackNavigationProp<RootStackParamList>
 export type ChangeNameRouteProp = RouteProp<RootStackParamList, Routes.CHANGE_NAME>
+export type AddMedicationRouteProp = RouteProp<RootStackParamList, Routes.ADD_MEDICATION>
+export type ViewMedicationRouteProp = RouteProp<RootStackParamList, Routes.VIEW_MEDICATION>
 
 const RootStack: React.FC = () => {
   return (
@@ -37,6 +43,20 @@ const RootStack: React.FC = () => {
           title: route.params.name,
         })}
       />
+      <Stack.Screen
+        name={Routes.ADD_MEDICATION}
+        component={AddMedication}
+        options={{
+          title: 'New Medication',
+        }}
+      />
+      <Stack.Screen
+        name={Routes.VIEW_MEDICATION}
+        component={ViewMedication}
+        options={{
+          title: 'Current Medications',
+        }}
+      />
     </Stack.Navigator>
   )
 }

src/Start.tsx

@@ -3,35 +3,18 @@ import {StyleSheet, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {useSelector} from 'react-redux'
 import {Colors} from '~/Colors'
-import {Body, H1, SecondaryBlueButton} from '~/Components'
+import {Body, H1, IconButton, SecondaryBlueButton} from '~/Components'
 import {Routes} from '~/Navigation/Routes'
 import type {RootNavigation} from '~/Root'
 import {nameSelector} from '~/Store/Selectors/User'
-
-const styles = StyleSheet.create({
-  background: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: Colors.darknavy,
-  },
-  content: {
-    flex: 1,
-    backgroundColor: Colors.white,
-  },
-  info: {
-    marginHorizontal: 24,
-    marginVertical: 24,
-    alignItems: 'flex-start',
-  },
-  help: {
-    marginHorizontal: 24,
-  },
-})
+import {Icons} from '~/Icons'
 
 type StartProps = {
   navigation: RootNavigation
 }
 export const Start: React.FC<StartProps> = ({navigation}) => {
   const name = useSelector(nameSelector)
+
   return (
     <SafeAreaView style={styles.background} edges={['top']}>
       <View style={styles.content}>
@@ -42,12 +25,63 @@ export const Start: React.FC<StartProps> = ({navigation}) => {
             onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})}
           />
         </View>
-        <Body style={styles.help}>{`Hmm. It would be great if I had a list of my medications here... 🤔
-
-
-Please have a look at src/Start.tsx to get started!
-👩‍💻👨‍💻`}</Body>
+        <Body style={styles.help}>
+          {`Welcome to Elsa! Your companion in tracking & managing your medications`}
+        </Body>
+
+        <View
+          style={{
+            flex: 1,
+            padding: 20,
+            flexDirection: 'row',
+            justifyContent: 'space-evenly',
+          }}>
+          <IconButton
+            icon={Icons.log({color: Colors.red2, size: 30})}
+            style={styles.tiles}
+            onPress={() => {
+              navigation.setOptions({title: 'Add Medication'})
+              navigation.navigate(Routes.ADD_MEDICATION, {title: 'Add Medication'})
+            }}
+          />
+          <IconButton
+            icon={Icons.Categories.medication({color: Colors.red2, size: 30})}
+            style={styles.tiles}
+            onPress={() => {
+              navigation.setOptions({title: 'Medications'})
+              navigation.navigate(Routes.VIEW_MEDICATION, {title: 'medications'})
+            }}
+          />
+        </View>
       </View>
     </SafeAreaView>
   )
 }
+
+const styles = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Colors.darknavy,
+  },
+  content: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  info: {
+    marginHorizontal: 24,
+    marginVertical: 24,
+    alignItems: 'flex-start',
+  },
+  help: {
+    paddingTop: '20%',
+    paddingHorizontal: 25,
+  },
+  tiles: {
+    borderRadius: 5,
+    width: 100,
+    height: 100,
+    backgroundColor: '#ADD8E6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

src/Store/Actions/actions.ts

@@ -4,6 +4,16 @@ export const cleanState = createAction('CLEAN_STATE')
 
 export const changeName = createAction('CHANGE_NAME', action => (name: string) => action({name}))
 
-export const addMedication = createAction('ADD_MEDICATION', action => (medicationName: string) =>
-  action({medicationName})
+export const addMedication = createAction(
+  'ADD_MEDICATION',
+  action => (
+    medicationName: string,
+    substance: string,
+    dosage: string,
+    modeOfAdministration: string
+  ) => action({medicationName, substance, dosage, modeOfAdministration})
+)
+
+export const deleteMedication = createAction('DELETE_MEDICATION', action => (name: string) =>
+  action({name})
 )

src/Store/User.ts

@@ -2,6 +2,9 @@ import {RootAction} from '~/Store/Actions'
 
 export type IMedication = {
   name: string
+  substance: string
+  dosage: string
+  modeOfAdministration: string
   addedAt: string
 }
 
@@ -26,15 +29,28 @@ export const user = (
       }
     }
     case 'ADD_MEDICATION': {
-      const {medicationName} = action.payload
+      const {medicationName, substance, dosage, modeOfAdministration} = action.payload
       return {
         ...state,
         medications: [
           ...state.medications,
-          {name: medicationName, addedAt: new Date().toISOString()},
+          {
+            name: medicationName,
+            substance: substance,
+            dosage: dosage,
+            modeOfAdministration: modeOfAdministration,
+            addedAt: new Date().toISOString(),
+          },
         ],
       }
     }
+    case 'DELETE_MEDICATION': {
+      const {name} = action.payload
+      return {
+        ...state,
+        medications: state.medications.filter(item => item.name !== name),
+      }
+    }
     case 'CLEAN_STATE':
       return defaultUser()
     default: