From dbd2cd4c551b6f2c386d54b7fde47f18a9bf4489 Mon Sep 17 00:00:00 2001 From: horsefacegirl <51134090+horsefacegirl@users.noreply.github.com> Date: Fri, 23 Oct 2020 15:57:13 +0200 Subject: [PATCH 1/4] Add medication Function to add one or more medication/s --- src/AddMedication.tsx | 45 ++++++++++++++++++++++++++++++++++++++++ src/Navigation/Routes.ts | 1 + src/Root.tsx | 8 +++++++ src/Start.tsx | 16 ++++++++++++++ 4 files changed, 70 insertions(+) create mode 100644 src/AddMedication.tsx diff --git a/src/AddMedication.tsx b/src/AddMedication.tsx new file mode 100644 index 0000000..6a43a60 --- /dev/null +++ b/src/AddMedication.tsx @@ -0,0 +1,45 @@ +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' + +const styles = StyleSheet.create({ + container: { + paddingTop: 24, + paddingHorizontal: 24, + }, + button: { + alignSelf: 'flex-start', + }, + text: { + fontSize: 10, + margin: 5 + }, +}) + +type AddMedicationProps = { + navigation: RootNavigation + route: AddMedicationRouteProp +} +export const AddMedication: React.FC = ({navigation, route}) => { + const dispatch = useDispatch() + const [medication, setMedication] = useState('') + return ( + + Medication name + + { + dispatch(addMedication(medication)) + navigation.setOptions({title: medication}) + navigation.navigate(Routes.START) + }} + /> + + ) +} diff --git a/src/Navigation/Routes.ts b/src/Navigation/Routes.ts index 897a34f..dda7919 100644 --- a/src/Navigation/Routes.ts +++ b/src/Navigation/Routes.ts @@ -1,4 +1,5 @@ export enum Routes { START = 'START', CHANGE_NAME = 'CHANGE_NAME', + ADD_MEDICATION = 'ADD_MEDICATION', } diff --git a/src/Root.tsx b/src/Root.tsx index d8b9d82..36c0d0a 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -12,15 +12,18 @@ import {defaultNavigationOptions} from '~/Navigation' import {Routes} from '~/Navigation/Routes' import {Start} from '~/Start' import {initiateStore, persistor} from '~/Store' +import { AddMedication } from './AddMedication' export type RootStackParamList = { [Routes.START]: undefined [Routes.CHANGE_NAME]: {name: string} + [Routes.ADD_MEDICATION]: {title: string} } const Stack = createStackNavigator() export type RootNavigation = StackNavigationProp export type ChangeNameRouteProp = RouteProp +export type AddMedicationRouteProp = RouteProp const RootStack: React.FC = () => { return ( @@ -35,6 +38,11 @@ const RootStack: React.FC = () => { component={ChangeName} options={({route}) => ({ title: route.params.name, + ({ + title: route.params.title })} /> diff --git a/src/Start.tsx b/src/Start.tsx index deed5be..ada2b41 100644 --- a/src/Start.tsx +++ b/src/Start.tsx @@ -23,7 +23,11 @@ const styles = StyleSheet.create({ alignItems: 'flex-start', }, help: { + medications: { marginHorizontal: 24, + flex: 1, + flexDirection: 'column', + }, }, }) @@ -47,6 +51,18 @@ export const Start: React.FC = ({navigation}) => { Please have a look at src/Start.tsx to get started! 👩‍💻👨‍💻`} + + + { + navigation.setOptions({title: 'Add medication'}) + navigation.navigate(Routes.ADD_MEDICATION, {title: 'Add medication'}) + }} + /> + + ) From ee38eba0cd2ab131f9d6a2be0b620b606a25d425 Mon Sep 17 00:00:00 2001 From: horsefacegirl <51134090+horsefacegirl@users.noreply.github.com> Date: Fri, 23 Oct 2020 16:10:33 +0200 Subject: [PATCH 2/4] Medication List Added function to list all medications --- src/ChangeName.tsx | 11 ++++++++-- src/Root.tsx | 6 ++++-- src/Start.tsx | 54 +++++++++++++++++++++++++++++++++++----------- 3 files changed, 54 insertions(+), 17 deletions(-) diff --git a/src/ChangeName.tsx b/src/ChangeName.tsx index b80c18c..35a9c00 100644 --- a/src/ChangeName.tsx +++ b/src/ChangeName.tsx @@ -1,7 +1,8 @@ import React, {useState} from 'react' -import {StyleSheet, View} from 'react-native' +import {StyleSheet, View, Text} from 'react-native' import {useDispatch} from 'react-redux' import {PrimaryBlueButton, TextInput} from '~/Components' +import {Routes} from '~/Navigation/Routes' import type {ChangeNameRouteProp, RootNavigation} from '~/Root' import {changeName} from '~/Store/Actions' @@ -13,6 +14,10 @@ const styles = StyleSheet.create({ button: { alignSelf: 'flex-start', }, + text: { + fontSize: 10, + margin: 5 + }, }) type ChangeNameProps = { @@ -21,9 +26,10 @@ type ChangeNameProps = { } export const ChangeName: React.FC = ({navigation, route}) => { const dispatch = useDispatch() - const [name, setName] = useState(route.params.name) + const [name, setName] = useState(route.params.userName) return ( + Name = ({navigation, route}) => { onPress={() => { dispatch(changeName(name)) navigation.setOptions({title: name}) + navigation.navigate(Routes.START) }} /> diff --git a/src/Root.tsx b/src/Root.tsx index 36c0d0a..9e867c8 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -16,7 +16,7 @@ import { AddMedication } from './AddMedication' export type RootStackParamList = { [Routes.START]: undefined - [Routes.CHANGE_NAME]: {name: string} + [Routes.CHANGE_NAME]: {userName: string} [Routes.ADD_MEDICATION]: {title: string} } const Stack = createStackNavigator() @@ -37,7 +37,9 @@ const RootStack: React.FC = () => { name={Routes.CHANGE_NAME} component={ChangeName} options={({route}) => ({ - title: route.params.name, + title: route.params.userName + })} + /> = ({navigation}) => { - const name = useSelector(nameSelector) + const dispatch = useDispatch() + const userName = useSelector(nameSelector) + const medication = useSelector(medicationsSelector) + const getSortedList = () => { + medication.sort((a, b) => a.name.localeCompare(b.name)) + return medication.map(item => { + return ( + + {item.name} + + ) + }) + } return ( -

Hello {name}!

+

Hello {userName}!

navigation.navigate(Routes.CHANGE_NAME, {name})} + onPress={() => navigation.navigate(Routes.CHANGE_NAME, {userName})} /> - {`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! -👩‍💻👨‍💻`} + + {medication.length > 0 ? ( + getSortedList() + ) : ( + <> +

You haven't added any medications yet...

+ + )} From 2260e550ef031bc7d8942d79179a8892133a057f Mon Sep 17 00:00:00 2001 From: horsefacegirl <51134090+horsefacegirl@users.noreply.github.com> Date: Fri, 23 Oct 2020 16:11:37 +0200 Subject: [PATCH 3/4] Remove medication Added function to remove medication --- src/Navigation/Routes.ts | 2 ++ src/Root.tsx | 2 ++ src/Start.tsx | 9 +++++++++ src/Store/Actions/actions.ts | 2 ++ src/Store/User.ts | 9 +++++++++ 5 files changed, 24 insertions(+) diff --git a/src/Navigation/Routes.ts b/src/Navigation/Routes.ts index dda7919..f924958 100644 --- a/src/Navigation/Routes.ts +++ b/src/Navigation/Routes.ts @@ -2,4 +2,6 @@ export enum Routes { START = 'START', CHANGE_NAME = 'CHANGE_NAME', ADD_MEDICATION = 'ADD_MEDICATION', + REMOVE_MEDICATION = 'REMOVE_MEDICATION' } + diff --git a/src/Root.tsx b/src/Root.tsx index 9e867c8..12b7ca1 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -18,12 +18,14 @@ export type RootStackParamList = { [Routes.START]: undefined [Routes.CHANGE_NAME]: {userName: string} [Routes.ADD_MEDICATION]: {title: string} + [Routes.REMOVE_MEDICATION]: {medication: string} } const Stack = createStackNavigator() export type RootNavigation = StackNavigationProp export type ChangeNameRouteProp = RouteProp export type AddMedicationRouteProp = RouteProp +export type RemoveMedicationRouteProp = RouteProp const RootStack: React.FC = () => { return ( diff --git a/src/Start.tsx b/src/Start.tsx index 3ae2ab8..3576550 100644 --- a/src/Start.tsx +++ b/src/Start.tsx @@ -7,6 +7,7 @@ import {Body, H1, H2, SecondaryBlueButton} from '~/Components' import {Routes} from '~/Navigation/Routes' import type {RootNavigation} from '~/Root' import {nameSelector, medicationsSelector} from '~/Store/Selectors/User' +import {removeMedication} from '~/Store/Actions' const styles = StyleSheet.create({ background: { @@ -36,6 +37,9 @@ const styles = StyleSheet.create({ button: { marginBottom: 10, }, + deleteButton: { +width: 20, + }, listRow: { display: 'flex', flexDirection: 'row', @@ -56,6 +60,11 @@ export const Start: React.FC = ({navigation}) => { return ( {item.name} + dispatch(removeMedication(item.name))} + /> ) }) diff --git a/src/Store/Actions/actions.ts b/src/Store/Actions/actions.ts index 13bdace..762e32c 100644 --- a/src/Store/Actions/actions.ts +++ b/src/Store/Actions/actions.ts @@ -7,3 +7,5 @@ export const changeName = createAction('CHANGE_NAME', action => (name: string) = export const addMedication = createAction('ADD_MEDICATION', action => (medicationName: string) => action({medicationName}) ) + +export const removeMedication = createAction('REMOVE_MEDICATION', action => (medication: string) => action({medication})) \ No newline at end of file diff --git a/src/Store/User.ts b/src/Store/User.ts index 6dd8a07..0e5d604 100644 --- a/src/Store/User.ts +++ b/src/Store/User.ts @@ -35,6 +35,15 @@ export const user = ( ], } } + case 'REMOVE_MEDICATION': { + const {medication} = action.payload + const newList = state.medications.filter(item => item.name !== medication) + console.log(newList) + return { + ...state, + medications: newList, + } + } case 'CLEAN_STATE': return defaultUser() default: From 031753a92c1d9bbbdf4105fe88d2e5fd25058ebb Mon Sep 17 00:00:00 2001 From: horsefacegirl <51134090+horsefacegirl@users.noreply.github.com> Date: Fri, 23 Oct 2020 17:05:31 +0200 Subject: [PATCH 4/4] clean up, minor styling --- src/AddMedication.tsx | 4 ++-- src/ChangeName.tsx | 4 ++-- src/Root.tsx | 8 ++++---- src/Start.tsx | 37 +++++++++++++++++++++++------------- src/Store/Actions/actions.ts | 4 +++- 5 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/AddMedication.tsx b/src/AddMedication.tsx index 6a43a60..8491d75 100644 --- a/src/AddMedication.tsx +++ b/src/AddMedication.tsx @@ -15,8 +15,8 @@ const styles = StyleSheet.create({ alignSelf: 'flex-start', }, text: { - fontSize: 10, - margin: 5 + fontSize: 15, + margin: 5, }, }) diff --git a/src/ChangeName.tsx b/src/ChangeName.tsx index 35a9c00..895d17c 100644 --- a/src/ChangeName.tsx +++ b/src/ChangeName.tsx @@ -15,8 +15,8 @@ const styles = StyleSheet.create({ alignSelf: 'flex-start', }, text: { - fontSize: 10, - margin: 5 + fontSize: 15, + margin: 5, }, }) diff --git a/src/Root.tsx b/src/Root.tsx index 12b7ca1..81d2f6f 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -12,7 +12,7 @@ import {defaultNavigationOptions} from '~/Navigation' import {Routes} from '~/Navigation/Routes' import {Start} from '~/Start' import {initiateStore, persistor} from '~/Store' -import { AddMedication } from './AddMedication' +import {AddMedication} from './AddMedication' export type RootStackParamList = { [Routes.START]: undefined @@ -39,14 +39,14 @@ const RootStack: React.FC = () => { name={Routes.CHANGE_NAME} component={ChangeName} options={({route}) => ({ - title: route.params.userName + title: route.params.userName, })} /> - ({ - title: route.params.title + title: route.params.title, })} /> diff --git a/src/Start.tsx b/src/Start.tsx index 3576550..34b2b1e 100644 --- a/src/Start.tsx +++ b/src/Start.tsx @@ -1,9 +1,9 @@ import React from 'react' -import {StyleSheet, View, Text, Button} from 'react-native' +import {StyleSheet, View, Text} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' import {useSelector, useDispatch} from 'react-redux' import {Colors} from '~/Colors' -import {Body, H1, H2, SecondaryBlueButton} from '~/Components' +import {H1, H2, SecondaryBlueButton} from '~/Components' import {Routes} from '~/Navigation/Routes' import type {RootNavigation} from '~/Root' import {nameSelector, medicationsSelector} from '~/Store/Selectors/User' @@ -31,20 +31,28 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'column', }, - medicationList: { + noMedsText: { fontSize: 20, }, button: { marginBottom: 10, }, deleteButton: { -width: 20, + padding: 0.5, + borderWidth: 0, + }, + deleteButtonText: { + color: 'red', }, listRow: { - display: 'flex', - flexDirection: 'row', + display: 'flex', + flexDirection: 'row', justifyContent: 'space-between', - } + alignItems: 'center', + }, + itemText: { + fontSize: 20, + }, }) type StartProps = { @@ -59,10 +67,13 @@ export const Start: React.FC = ({navigation}) => { return medication.map(item => { return ( - {item.name} + + {item.name} + dispatch(removeMedication(item.name))} /> @@ -81,7 +92,7 @@ export const Start: React.FC = ({navigation}) => { /> - + = ({navigation}) => { getSortedList() ) : ( <> -

You haven't added any medications yet...

+

You haven't added any medications yet...

)} - + ) diff --git a/src/Store/Actions/actions.ts b/src/Store/Actions/actions.ts index 762e32c..9fea34b 100644 --- a/src/Store/Actions/actions.ts +++ b/src/Store/Actions/actions.ts @@ -8,4 +8,6 @@ export const addMedication = createAction('ADD_MEDICATION', action => (medicatio action({medicationName}) ) -export const removeMedication = createAction('REMOVE_MEDICATION', action => (medication: string) => action({medication})) \ No newline at end of file +export const removeMedication = createAction('REMOVE_MEDICATION', action => (medication: string) => + action({medication}) +)