From 6d907e70f842d0358729c7119498434f368fc1fb Mon Sep 17 00:00:00 2001 From: marceee Date: Fri, 12 Aug 2022 17:12:03 +0300 Subject: [PATCH] add medication view medication delete medication from list --- src/Components/Medication/AddMedication.tsx | 54 +++++++++++ src/Components/Medication/ViewMedication.tsx | 97 ++++++++++++++++++++ src/Icons/index.tsx | 1 + src/Navigation/Routes.ts | 2 + src/Root.tsx | 20 ++++ src/Start.tsx | 84 ++++++++++++----- src/Store/Actions/actions.ts | 14 ++- src/Store/User.ts | 20 +++- 8 files changed, 263 insertions(+), 29 deletions(-) create mode 100644 src/Components/Medication/AddMedication.tsx create mode 100644 src/Components/Medication/ViewMedication.tsx diff --git a/src/Components/Medication/AddMedication.tsx b/src/Components/Medication/AddMedication.tsx new file mode 100644 index 0000000..4951208 --- /dev/null +++ b/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 = ({navigation}) => { + const dispatch = useDispatch() + const [medication, setMedication] = useState('') + const [substance, setSubstance] = useState('') + const [dosage, setDosage] = useState('') + const [modeOfAdministration, setModeOfAdministration] = useState('') + return ( + + Name + + Substance + + Dosage + + Mode of Administration + + + { + dispatch(addMedication(medication, substance, dosage, modeOfAdministration)) + navigation.navigate(Routes.VIEW_MEDICATION) + }} + /> + + ) +} + +const styles = StyleSheet.create({ + container: { + padding: 25, + }, + inputLabels: { + fontSize: 15, + fontWeight: 'bold', + margin: 10, + }, + addButton: { + alignSelf: 'flex-start', + }, +}) diff --git a/src/Components/Medication/ViewMedication.tsx b/src/Components/Medication/ViewMedication.tsx new file mode 100644 index 0000000..c346138 --- /dev/null +++ b/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 = ({navigation}) => { + const dispatch = useDispatch() + const medications = useSelector(medicationsSelector) + + const itemSeparator = () => { + return + } + + const emptyList = () => { + return ( + + No medications found + + ) + } + + 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 ( + + ( + + {item.name} + + dosage: + {item.dosage} + + removeMedication(item.name)} + /> + + + )} + ItemSeparatorComponent={itemSeparator} + ListEmptyComponent={emptyList} + keyExtractor={item => item.name} + /> + + ) +} + +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, + }, +}) diff --git a/src/Icons/index.tsx b/src/Icons/index.tsx index c096150..137cec1 100644 --- a/src/Icons/index.tsx +++ b/src/Icons/index.tsx @@ -21,6 +21,7 @@ export const Icons = { faceHappy: (props: IconProps) => , steps: (props: IconProps) => , wellBeing: (props: IconProps) => , + delete: (props: IconProps) => , activities: (props: IconProps) => ( ), diff --git a/src/Navigation/Routes.ts b/src/Navigation/Routes.ts index 897a34f..2e66fd5 100644 --- a/src/Navigation/Routes.ts +++ b/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', } diff --git a/src/Root.tsx b/src/Root.tsx index d8b9d82..9b5c46e 100644 --- a/src/Root.tsx +++ b/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() export type RootNavigation = StackNavigationProp export type ChangeNameRouteProp = RouteProp +export type AddMedicationRouteProp = RouteProp +export type ViewMedicationRouteProp = RouteProp const RootStack: React.FC = () => { return ( @@ -37,6 +43,20 @@ const RootStack: React.FC = () => { title: route.params.name, })} /> + + ) } diff --git a/src/Start.tsx b/src/Start.tsx index deed5be..f54876b 100644 --- a/src/Start.tsx +++ b/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 = ({navigation}) => { const name = useSelector(nameSelector) + return ( @@ -42,12 +25,63 @@ export const Start: React.FC = ({navigation}) => { onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})} /> - {`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! -👩‍💻👨‍💻`} + + {`Welcome to Elsa! Your companion in tracking & managing your medications`} + + + + { + navigation.setOptions({title: 'Add Medication'}) + navigation.navigate(Routes.ADD_MEDICATION, {title: 'Add Medication'}) + }} + /> + { + navigation.setOptions({title: 'Medications'}) + navigation.navigate(Routes.VIEW_MEDICATION, {title: 'medications'}) + }} + /> + ) } + +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', + }, +}) diff --git a/src/Store/Actions/actions.ts b/src/Store/Actions/actions.ts index 13bdace..b4d625c 100644 --- a/src/Store/Actions/actions.ts +++ b/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}) ) diff --git a/src/Store/User.ts b/src/Store/User.ts index 6dd8a07..dc30ced 100644 --- a/src/Store/User.ts +++ b/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: