Elsa code challenge

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<AddMedicationProps> = ({navigation, route}) => {
+  const dispatch = useDispatch()
+  const [medication, setMedication] = useState('')
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Medication name</Text>
+      <TextInput value={medication} onChangeText={setMedication} />
+      <PrimaryBlueButton
+        style={styles.button}
+        title={'Update'}
+        onPress={() => {
+          dispatch(addMedication(medication))
+          navigation.setOptions({title: medication})
+          navigation.navigate(Routes.START)
+        }}
+      />
+    </View>
+  )
+}

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,16 +26,18 @@ type ChangeNameProps = {
 }
 export const ChangeName: React.FC<ChangeNameProps> = ({navigation, route}) => {
   const dispatch = useDispatch()
-  const [name, setName] = useState(route.params.name)
+  const [name, setName] = useState(route.params.userName)
   return (
     <View style={styles.container}>
+      <Text style={styles.text}>Name</Text>
       <TextInput value={name} onChangeText={setName} />
       <PrimaryBlueButton
         style={styles.button}
         title={'Update name'}
         onPress={() => {
           dispatch(changeName(name))
           navigation.setOptions({title: name})
+          navigation.navigate(Routes.START)
         }}
       />
     </View>

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'
 }
+

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<RootStackParamList>()
 
 export type RootNavigation = StackNavigationProp<RootStackParamList>
 export type ChangeNameRouteProp = RouteProp<RootStackParamList, Routes.CHANGE_NAME>
+export type AddMedicationRouteProp = RouteProp<RootStackParamList, Routes.ADD_MEDICATION>
+export type RemoveMedicationRouteProp = RouteProp<RootStackParamList, Routes.REMOVE_MEDICATION>
 
 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,
+        })}
+      />
+      <Stack.Screen
+        name={Routes.ADD_MEDICATION}
+        component={AddMedication}
+        options={({route}) => ({
+          title: route.params.title,
         })}
       />
     </Stack.Navigator>

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,32 +22,95 @@ 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,
   },
 })
 
 type StartProps = {
   navigation: RootNavigation
 }
 export const Start: React.FC<StartProps> = ({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 (
+        <View key={item.name} style={styles.listRow}>
+          <View>
+            <Text style={styles.itemText}>{item.name}</Text>
+          </View>
+          <SecondaryBlueButton
+            titleStyle={styles.deleteButtonText}
+            style={styles.deleteButton}
+            title={'X'}
+            onPress={() => dispatch(removeMedication(item.name))}
+          />
+        </View>
+      )
+    })
+  }
   return (
     <SafeAreaView style={styles.background} edges={['top']}>
       <View style={styles.content}>
         <View style={styles.info}>
-          <H1>Hello {name}!</H1>
+          <H1>Hello {userName}!</H1>
           <SecondaryBlueButton
+            style={styles.button}
             title={'Change name'}
-            onPress={() => navigation.navigate(Routes.CHANGE_NAME, {name})}
+            onPress={() => navigation.navigate(Routes.CHANGE_NAME, {userName})}
           />
         </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>
+
+        <View style={styles.medications}>
+          <View>
+            <SecondaryBlueButton
+              style={styles.button}
+              title={'Add medication'}
+              onPress={() => {
+                navigation.setOptions({title: 'Add medication'})
+                navigation.navigate(Routes.ADD_MEDICATION, {title: 'Add medication'})
+              }}
+            />
+            {medication.length > 0 ? (
+              getSortedList()
+            ) : (
+              <>
+                <H2 style={styles.noMedsText}>You haven't added any medications yet...</H2>
+              </>
+            )}
+          </View>
+        </View>
       </View>
     </SafeAreaView>
   )

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})
+)

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: