Medicine Form

components/PrescriptionCreator/MedicineForm.tsx

@@ -0,0 +1,101 @@
+import {Text, TextInput, View} from 'react-native';
+import {Section} from './Section';
+import {styles, TextTheme} from './styles';
+import {useState} from 'react';
+
+interface MedicineForm {
+  name?: string;
+  dosage_form?: string;
+  strength?: string;
+  quantity?: string;
+  refills?: string;
+  directions?: string;
+}
+
+interface MedicineFormProps {
+  nestedFormCallback: (tag: string, form: Object) => void;
+}
+
+export const MedicineForm: React.FC<MedicineFormProps> = ({
+  nestedFormCallback,
+}) => {
+  const [form, setForm] = useState<MedicineForm>({});
+
+  const handleTextChange = (tag: keyof MedicineForm, text: string) => {
+    let newForm = {...form};
+    newForm[tag] = text;
+    setForm(newForm);
+    nestedFormCallback('MedicationPrescribed', newForm);
+  };
+
+  return (
+    <Section title="Medicine">
+      <View>
+        <View>
+          <Text style={TextTheme}>Name of Medicine</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Enter name of medicine"
+            value={form.name}
+            placeholderTextColor="white"
+            onChangeText={(text: string) => handleTextChange('name', text)}
+          />
+        </View>
+        <View>
+          <Text style={TextTheme}> Form of Dosage</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="what is the dosage form"
+            value={form.dosage_form}
+            placeholderTextColor="white"
+            onChangeText={(text: string) =>
+              handleTextChange('dosage_form', text)
+            }
+          />
+        </View>
+        <View>
+          <Text style={TextTheme}>Strength</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="enter strength..."
+            value={form.strength}
+            placeholderTextColor="white"
+            onChangeText={(text: string) => handleTextChange('strength', text)}
+          />
+        </View>
+        <View>
+          <Text style={TextTheme}>Quantity</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Enter quantity..."
+            value={form.quantity}
+            placeholderTextColor="light"
+            onChangeText={(text: string) => handleTextChange('quantity', text)}
+          />
+        </View>
+        <View>
+          <Text style={TextTheme}>Refills</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Refills"
+            value={form.refills}
+            placeholderTextColor="light"
+            onChangeText={(text: string) => handleTextChange('refills', text)}
+          />
+        </View>
+        <View>
+          <Text style={TextTheme}>Directions</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Enter directions"
+            value={form.refills}
+            placeholderTextColor="light"
+            onChangeText={(text: string) =>
+              handleTextChange('directions', text)
+            }
+          />
+        </View>
+      </View>
+    </Section>
+  );
+};