diff --git a/src/AddMedication.tsx b/src/AddMedication.tsx new file mode 100644 index 0000000..8491d75 --- /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: 15, + 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/ChangeName.tsx b/src/ChangeName.tsx index b80c18c..895d17c 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: 15, + 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/Navigation/Routes.ts b/src/Navigation/Routes.ts index 897a34f..f924958 100644 --- a/src/Navigation/Routes.ts +++ b/src/Navigation/Routes.ts @@ -1,4 +1,7 @@ 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 d8b9d82..81d2f6f 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -12,15 +12,20 @@ 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.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 ( @@ -34,7 +39,14 @@ const RootStack: React.FC = () => { name={Routes.CHANGE_NAME} component={ChangeName} options={({route}) => ({ - title: route.params.name, + title: route.params.userName, + })} + /> + ({ + title: route.params.title, })} /> diff --git a/src/Start.tsx b/src/Start.tsx index deed5be..34b2b1e 100644 --- a/src/Start.tsx +++ b/src/Start.tsx @@ -1,12 +1,13 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {StyleSheet, View, Text} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' -import {useSelector} from 'react-redux' +import {useSelector, useDispatch} from 'react-redux' import {Colors} from '~/Colors' -import {Body, H1, SecondaryBlueButton} from '~/Components' +import {H1, H2, SecondaryBlueButton} from '~/Components' import {Routes} from '~/Navigation/Routes' import type {RootNavigation} from '~/Root' -import {nameSelector} from '~/Store/Selectors/User' +import {nameSelector, medicationsSelector} from '~/Store/Selectors/User' +import {removeMedication} from '~/Store/Actions' const styles = StyleSheet.create({ background: { @@ -21,9 +22,36 @@ const styles = StyleSheet.create({ marginHorizontal: 24, marginVertical: 24, alignItems: 'flex-start', + borderBottomColor: 'black', + borderBottomWidth: 1, + display: 'flex', }, - help: { + medications: { marginHorizontal: 24, + flex: 1, + flexDirection: 'column', + }, + noMedsText: { + fontSize: 20, + }, + button: { + marginBottom: 10, + }, + deleteButton: { + padding: 0.5, + borderWidth: 0, + }, + deleteButtonText: { + color: 'red', + }, + listRow: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + itemText: { + fontSize: 20, }, }) @@ -31,22 +59,58 @@ type StartProps = { navigation: RootNavigation } export const Start: React.FC = ({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} + + dispatch(removeMedication(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! -👩‍💻👨‍💻`} + + + + { + navigation.setOptions({title: 'Add medication'}) + navigation.navigate(Routes.ADD_MEDICATION, {title: 'Add medication'}) + }} + /> + {medication.length > 0 ? ( + getSortedList() + ) : ( + <> +

You haven't added any medications yet...

+ + )} +
+
) diff --git a/src/Store/Actions/actions.ts b/src/Store/Actions/actions.ts index 13bdace..9fea34b 100644 --- a/src/Store/Actions/actions.ts +++ b/src/Store/Actions/actions.ts @@ -7,3 +7,7 @@ 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}) +) 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: