Medicine Form

components/PrescriptionCreator/ImportNsec.tsx

@@ -1,30 +1,68 @@
-import { useState } from "react";
-import { Button, Modal, NativeSyntheticEvent, Text, TextInput, TextInputChangeEventData, View } from "react-native"
+import {useState} from 'react';
+import {
+  Button,
+  Modal,
+  NativeSyntheticEvent,
+  Text,
+  TextInput,
+  TextInputChangeEventData,
+  View,
+} from 'react-native';
 
-export const ImportNsec = ({ isVisible, onClose, onPress }: { isVisible: boolean, onClose: () => void, onPress: (nsec: `nsec1${string}`) => void }) => {
-
-    const [nsec, setNsec] = useState("");
+export const ImportNsec = ({
+  isVisible,
+  onClose,
+  onPress,
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+  onPress: (nsec: `nsec1${string}`) => void;
+}) => {
+  const [nsec, setNsec] = useState('');
 
   const handleNsec = (value: string) => {
-        setNsec(value)
-    }
+    setNsec(value);
+  };
   return (
     <Modal
       visible={isVisible}
-            onRequestClose={() => { console.log("closing....") ; onClose(); return true }}
-            onDismiss={() => {onClose()}}
+      onRequestClose={() => {
+        console.log('closing....');
+        onClose();
+        return true;
+      }}
+      onDismiss={() => {
+        onClose();
+      }}
       presentationStyle="pageSheet">
-            <View style={{ backgroundColor: "#ffffff", height: 500, justifyContent: "center", display: "flex", margin: 30, borderColor: "red", alignItems: "center"}}>
+      <View
+        style={{
+          backgroundColor: '#ffffff',
+          height: 500,
+          justifyContent: 'center',
+          display: 'flex',
+          margin: 30,
+          borderColor: 'red',
+          alignItems: 'center',
+        }}>
         <View style={{margin: 5}}>
-                    <Text style={{color: "#000000", margin: 5}}>
-                        Import Your Nsec
-                    </Text>
-                    <TextInput style={{borderColor: "#000000", borderWidth: 1, borderRadius: 5, color: "#000000"}} onChangeText={handleNsec}/>
+          <Text style={{color: '#000000', margin: 5}}>Import Your Nsec</Text>
+          <TextInput
+            style={{
+              borderColor: '#000000',
+              borderWidth: 1,
+              borderRadius: 5,
+              color: '#000000',
+            }}
+            onChangeText={handleNsec}
+          />
         </View>
         <View>
-                    <Button title="Import" onPress={() => onPress(nsec)}></Button>
+          <Button
+            title="Import"
+            onPress={() => onPress(nsec as `nsec1${string}`)}></Button>
         </View>
       </View>
     </Modal>
-    )
-}
+  );
+};

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

components/PrescriptionCreator/index.tsx

@@ -1,46 +1,23 @@
 import {Alert, Appearance, Dimensions, Image, Text, View} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
-import {PropsWithChildren, useEffect, useState} from 'react';
-import {Button, Card, Modal} from '@ant-design/react-native';
+import {useEffect, useState} from 'react';
+import {Button} from '@ant-design/react-native';
 // import { SendPrescription } from './sendPrescription';
 import {Dropdown} from 'react-native-element-dropdown';
 import {
   SimplePool,
   UnsignedEvent,
   finalizeEvent,
-  generateSecretKey,
   getPublicKey,
   nip04,
   nip19,
 } from 'nostr-tools';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import {ImportNsec} from './ImportNsec';
-import {json2xml} from 'xml-js';
 import {Section} from './Section';
 import {PatientForm} from './PatientForm';
 import {AddressForm} from './AddressForm';
-
-/*
-          Patient 
-          - Name
-          - Date Of Birth
-
-          Address 
-          - Address Line 1
-          - City 
-          - StateProvince
-          - Postal Code
-          - Country Code
-
-          Medicine 
-          - Name
-          - Dosage Form
-          - Strength
-          - Quantity
-          - Re-fills
-          - Directions
-          `
-          */
+import {MedicineForm} from './MedicineForm';
 
 function OBJtoXML(obj: any) {
   var xml = '';
@@ -254,6 +231,7 @@ export const PrescriptionCreator = () => {
         <View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
           <PatientForm nestedFormCallback={nestedFormCallback} />
           <AddressForm nestedFormCallback={nestedFormCallback} />
+          <MedicineForm nestedFormCallback={nestedFormCallback} />
           <Button type="primary" onPress={handleButtonPress}>
             <Text
               style={[

yarn.lock

@@ -6573,7 +6573,7 @@ react-native-codegen@^0.0.7:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
-react-native-collapsible@^1.6.0:
+react-native-collapsible@^1.6.0, react-native-collapsible@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz#27e289831a6955aebde98abff2424a7710f36f02"
   integrity sha512-orF4BeiXd2hZW7fu9YcqIJXzN6TJcFcddY807D3MAOVktLuW9oQ+RIkrTJ5DR3v9ZOFfREkOjEmS79qeUTvkBQ==