Create Add Pharmacy Modal

App.tsx

@@ -6,7 +6,13 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import {SafeAreaView, ScrollView, StatusBar, StyleSheet} from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+} from 'react-native';
 
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {PrescriptionCreator} from './components/PrescriptionCreator';
@@ -15,22 +21,15 @@ import PolyfillCrypto from 'react-native-webview-crypto';
 
 function App(): React.JSX.Element {
   const backgroundStyle = {
-    backgroundColor: Colors.darker,
+    backgroundColor: 'black',
+    color: 'white',
   };
 
   const [form, setForm] = useState<{} | null>(null);
 
   useEffect(() => {
     console.log('inside useeffect');
-    const fetchForm = async () => {
-      if (!form) {
-        // let form = await getFormTemplate(
-        //   'eb3df1f89653475f0bcbd22da35f8d2f126db8a68a88a7abedc53535c76c39b4',
-        // );
-      }
-    };
-    fetchForm();
-  }, [form, setForm]);
+  }, []);
 
   return (
     <SafeAreaView style={backgroundStyle}>

components/PharmacyPicker/AddPharmacy.tsx

@@ -0,0 +1,112 @@
+import {useState} from 'react';
+import {Alert, Button, Modal, Text, TextInput, View} from 'react-native';
+import {Section} from '../common/Section';
+
+export const AddPharmacy = ({
+  isVisible,
+  onClose,
+  onAdd,
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+  onAdd: (npub: string, relay: string, name: string) => void;
+}) => {
+  const [npub, setNpub] = useState('');
+  const [relay, setRelay] = useState('');
+  const [name, setName] = useState('');
+
+  const handleNpub = (value: string) => {
+    setNpub(value);
+  };
+  const handleRelay = (value: string) => {
+    setRelay(value);
+  };
+  const handleName = (value: string) => {
+    setName(value);
+  };
+  return (
+    <Modal
+      visible={isVisible}
+      onRequestClose={() => {
+        console.log('closing....');
+        onClose();
+        return true;
+      }}
+      onDismiss={() => {
+        onClose();
+      }}
+      transparent={true}
+      style={{backgroundColor: 'black', margin: 0, padding: 0, height: '80%'}}
+      animationType="slide">
+      <View
+        style={{
+          backgroundColor: 'black',
+          justifyContent: 'center',
+          minHeight: '80%',
+          display: 'flex',
+          margin: 30,
+          alignItems: 'center',
+        }}>
+        <Section title="Add A Pharmacy">
+          <View style={{margin: 5}}>
+            <Text style={{color: 'white', margin: 5}}>Add Pharmacy Name</Text>
+            <TextInput
+              style={{
+                borderColor: '#000000',
+                borderWidth: 1,
+                borderRadius: 5,
+                color: 'white',
+              }}
+              placeholderTextColor="grey"
+              placeholder="Pharmacy X"
+              onChangeText={handleName}
+            />
+
+            <Text style={{color: 'white', margin: 5}}>Add Pharmacy Npub</Text>
+            <TextInput
+              style={{
+                borderColor: '#000000',
+                borderWidth: 1,
+                borderRadius: 5,
+                color: 'white',
+              }}
+              placeholderTextColor="grey"
+              placeholder="npub1...."
+              onChangeText={handleNpub}
+            />
+
+            <Text style={{color: 'white', margin: 5}}>Add Pharmacy Relay</Text>
+            <TextInput
+              style={{
+                borderColor: '#000000',
+                borderWidth: 1,
+                borderRadius: 5,
+                color: 'white',
+              }}
+              placeholderTextColor="grey"
+              placeholder="wss://<relay-url>"
+              onChangeText={handleRelay}
+            />
+          </View>
+          <View style={{flexDirection: 'row'}}>
+            <View style={{margin: 10}}>
+              <Button title="Cancel" onPress={() => onClose()}></Button>
+            </View>
+            <View style={{margin: 10}}>
+              <Button
+                title="Add"
+                onPress={() => {
+                  if (!npub || !relay || !name)
+                    Alert.alert(
+                      'Missing Inputs',
+                      'Please enter name, npub and relay of the Pharmacy',
+                    );
+                  onAdd(npub, relay, name);
+                }}></Button>
+            </View>
+          </View>
+        </Section>
+      </View>
+    </Modal>
+  );
+};

components/PharmacyPicker/index.tsx

@@ -0,0 +1,93 @@
+import {Dropdown} from 'react-native-element-dropdown';
+import {Section} from '../common/Section';
+import {Button, Dimensions, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {AddPharmacy} from './AddPharmacy';
+
+export const pharmacyData = [
+  {
+    label: 'Pharmacy A',
+    value: 'A',
+    npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
+    relays: ['wss://relay.damus.io'],
+  },
+  {
+    label: ' + Add Pharmacy',
+    value: 'custom',
+  },
+];
+
+let width = Dimensions.get('window').width;
+
+interface PharmacyPickerProps {
+  handleLocationChange: (item: any) => void;
+}
+
+export const PharmacyPicker: React.FC<PharmacyPickerProps> = ({
+  handleLocationChange,
+}) => {
+  const [showAddPharmacyModal, setShowAddPharmacyModal] = useState(false);
+
+  const renderItem = (item: any) => {
+    if (item.value === 'custom') {
+      return (
+        <View>
+          <Button
+            title="Add Pharmacy"
+            onPress={() => {
+              setShowAddPharmacyModal(true);
+            }}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View
+        style={{
+          width: width,
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 10,
+          flexWrap: 'wrap',
+        }}>
+        <Text style={{color: 'black', fontSize: 24}}>{item.label}</Text>
+        <View style={{width: width - 100}}>
+          <Text style={{color: 'grey', paddingBottom: 5}}>
+            Npub: {item.npub}
+          </Text>
+          <Text style={{color: 'grey'}}>Relays: {item.relays.join(', ')}</Text>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View>
+      <Section title="Choose a Pharmacy">
+        <View style={{width: width - 40}}>
+          <Dropdown
+            data={pharmacyData}
+            labelField={'label'}
+            valueField={'label'}
+            onChange={handleLocationChange}
+            value={pharmacyData[0]}
+            renderItem={renderItem}
+            style={{width: '100%'}}
+            placeholderStyle={{color: 'white'}}
+            selectedTextStyle={{color: 'white'}}
+          />
+        </View>
+      </Section>
+      <AddPharmacy
+        isVisible={showAddPharmacyModal}
+        onClose={() => {
+          setShowAddPharmacyModal(false);
+        }}
+        onAdd={() => {
+          setShowAddPharmacyModal(false);
+        }}
+      />
+    </View>
+  );
+};

components/PrescriptionCreator/AddressForm.tsx

@@ -28,67 +28,63 @@ export const AddressForm: React.FC<AddressFormProps> = ({
   };
 
   return (
-    <Section title="Address">
+    <View>
       <View>
-        <View>
-          <Text style={TextTheme}>Address Line 1</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Enter street"
-            value={form.address_line_1}
-            placeholderTextColor="white"
-            onChangeText={(text: string) =>
-              handleTextChange('address_line_1', text)
-            }
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>City</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Enter city"
-            value={form.city}
-            placeholderTextColor="white"
-            onChangeText={(text: string) => handleTextChange('city', text)}
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>State Provice</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="enter state..."
-            value={form.state_province}
-            placeholderTextColor="white"
-            onChangeText={(text: string) =>
-              handleTextChange('state_province', text)
-            }
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>Postal Code</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Enter postal code..."
-            value={form.postal_code}
-            placeholderTextColor="white"
-            onChangeText={(text: string) =>
-              handleTextChange('postal_code', text)
-            }
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>Country Code</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Enter Country Code..."
-            value={form.country_code}
-            placeholderTextColor="white"
-            onChangeText={(text: string) =>
-              handleTextChange('country_code', text)
-            }
-          />
-        </View>
+        <Text style={TextTheme}>Address Line 1</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter street"
+          value={form.address_line_1}
+          placeholderTextColor="white"
+          onChangeText={(text: string) =>
+            handleTextChange('address_line_1', text)
+          }
+        />
       </View>
-    </Section>
+      <View>
+        <Text style={TextTheme}>City</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter city"
+          value={form.city}
+          placeholderTextColor="white"
+          onChangeText={(text: string) => handleTextChange('city', text)}
+        />
+      </View>
+      <View>
+        <Text style={TextTheme}>State Provice</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="enter state..."
+          value={form.state_province}
+          placeholderTextColor="white"
+          onChangeText={(text: string) =>
+            handleTextChange('state_province', text)
+          }
+        />
+      </View>
+      <View>
+        <Text style={TextTheme}>Postal Code</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter postal code..."
+          value={form.postal_code}
+          placeholderTextColor="white"
+          onChangeText={(text: string) => handleTextChange('postal_code', text)}
+        />
+      </View>
+      <View>
+        <Text style={TextTheme}>Country Code</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter Country Code..."
+          value={form.country_code}
+          placeholderTextColor="white"
+          onChangeText={(text: string) =>
+            handleTextChange('country_code', text)
+          }
+        />
+      </View>
+    </View>
   );
 };

components/PrescriptionCreator/MedicineForm.tsx

@@ -29,73 +29,67 @@ export const MedicineForm: React.FC<MedicineFormProps> = ({
   };
 
   return (
-    <Section title="Medicine">
+    <View>
       <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="white"
-            onChangeText={(text: string) => handleTextChange('quantity', text)}
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>Refills</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Refills"
-            value={form.refills}
-            placeholderTextColor="white"
-            onChangeText={(text: string) => handleTextChange('refills', text)}
-          />
-        </View>
-        <View>
-          <Text style={TextTheme}>Directions</Text>
-          <TextInput
-            style={styles.input}
-            placeholder="Enter directions"
-            value={form.refills}
-            placeholderTextColor="white"
-            onChangeText={(text: string) =>
-              handleTextChange('directions', text)
-            }
-          />
-        </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>
-    </Section>
+      <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="white"
+          onChangeText={(text: string) => handleTextChange('quantity', text)}
+        />
+      </View>
+      <View>
+        <Text style={TextTheme}>Refills</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Refills"
+          value={form.refills}
+          placeholderTextColor="white"
+          onChangeText={(text: string) => handleTextChange('refills', text)}
+        />
+      </View>
+      <View>
+        <Text style={TextTheme}>Directions</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter directions"
+          value={form.refills}
+          placeholderTextColor="white"
+          onChangeText={(text: string) => handleTextChange('directions', text)}
+        />
+      </View>
+    </View>
   );
 };

components/PrescriptionCreator/index.tsx

@@ -1,15 +1,6 @@
-import {
-  Alert,
-  Appearance,
-  Dimensions,
-  Image,
-  Text,
-  View,
-  Button,
-} from 'react-native';
+import {Alert, Dimensions, Image, View, Button} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {useEffect, useState} from 'react';
-import {Dropdown} from 'react-native-element-dropdown';
 import {
   SimplePool,
   UnsignedEvent,
@@ -19,11 +10,12 @@ import {
   nip19,
 } from 'nostr-tools';
 import EncryptedStorage from 'react-native-encrypted-storage';
-import {ImportNsec} from './ImportNsec';
+import {ImportNsec} from '../common/ImportNsec';
 import {Section} from '../common/Section';
 import {PatientForm} from './PatientForm';
 import {AddressForm} from './AddressForm';
 import {MedicineForm} from './MedicineForm';
+import {PharmacyPicker, pharmacyData} from '../PharmacyPicker';
 
 function OBJtoXML(obj: any) {
   var xml = '';
@@ -48,52 +40,19 @@ function OBJtoXML(obj: any) {
   return xml;
 }
 
-const colorScheme = Appearance.getColorScheme();
-
-const backgroundStyle = {
-  backgroundColor: Colors.darker,
-};
-
-const width = Dimensions.get('window').width; //full width
-const height = Dimensions.get('window').height;
-
-const locationData = [
-  {
-    label: 'Pharmacy A',
-    value: 'A',
-    npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
-    relays: ['wss://relay.damus.io'],
-  },
-  {
-    label: 'Pharmacy B',
-    value: 'B',
-    npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
-    relays: ['wss://relay.primal.net'],
-  },
-  {
-    label: 'Pharmacy C',
-    value: 'C',
-    npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
-    relays: ['wss://relay.hllo.live'],
-  },
-  {
-    label: 'Pharmacy D',
-    value: 'D',
-    npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
-    relays: ['wss://nos.lol', 'wss://relay.damus.io'],
-  },
-];
-
-const locationDummyData = [{label: 'Pharmacy A', value: 'A'}];
-
 export const PrescriptionCreator = () => {
   const [showImportNsec, setShowImportNsec] = useState(false);
   const [loggedInNpub, setLoggedInNpub] = useState('');
+  const [finalJSON, setFinalJson] = useState({});
   const [selectedPharmacyId, setSelectedPharmacyId] = useState(
-    locationData[0].npub,
+    pharmacyData[0].npub,
   );
   const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState([]);
-  const [finalJSON, setFinalJson] = useState({});
+
+  const handleLocationChange = (item: any) => {
+    setSelectedPharmacyId(item.npub);
+    setSelectedPharmacyRelays(item.relays);
+  };
 
   useEffect(() => {
     async function initialize() {
@@ -115,26 +74,6 @@ export const PrescriptionCreator = () => {
     }
     initialize();
   }, []);
-  const renderItem = (item: any) => {
-    return (
-      <View
-        style={{
-          width: width,
-          display: 'flex',
-          flexDirection: 'column',
-          padding: 10,
-          flexWrap: 'wrap',
-        }}>
-        <Text style={{color: 'black', fontSize: 24}}>{item.label}</Text>
-        <View style={{width: width - 100}}>
-          <Text style={{color: 'grey', paddingBottom: 5}}>
-            Npub: {item.npub}
-          </Text>
-          <Text style={{color: 'grey'}}>Relays: {item.relays.join(', ')}</Text>
-        </View>
-      </View>
-    );
-  };
 
   const nestedFormCallback = (
     xmlTag: string,
@@ -144,11 +83,6 @@ export const PrescriptionCreator = () => {
     setFinalJson({...finalJSON, [xmlTag]: value});
   };
 
-  const handleLocationChange = (item: any) => {
-    setSelectedPharmacyId(item.npub);
-    setSelectedPharmacyRelays(item.relays);
-  };
-
   const handleImportNsec = (nsec: string) => {
     EncryptedStorage.setItem('user_credentials', nsec);
     if (nsec.startsWith('nsec1') && nsec.length !== 63) {
@@ -174,7 +108,7 @@ export const PrescriptionCreator = () => {
       (await EncryptedStorage.getItem('user_credentials')) as `nsec1${string}`,
     ).data as Uint8Array;
     const pk = getPublicKey(sk);
-    const pharmacyId = nip19.decode(selectedPharmacyId).data as string;
+    const pharmacyId = nip19.decode(selectedPharmacyId!).data as string;
     console.log('Got ids');
     console.log('content is ', xml);
     const baseKind4Event: UnsignedEvent = {
@@ -217,23 +151,9 @@ export const PrescriptionCreator = () => {
         />
       </Section>
 
-      <Section title="Choose a Pharmacy">
-        <View style={{width: width - 40}}>
-          <Dropdown
-            data={locationData}
-            labelField={'label'}
-            valueField={'label'}
-            onChange={handleLocationChange}
-            value={locationData[0]}
-            renderItem={renderItem}
-            style={{width: '100%'}}
-            placeholderStyle={{color: 'white'}}
-            selectedTextStyle={{color: 'white'}}
-          />
-        </View>
-      </Section>
+      <PharmacyPicker handleLocationChange={handleLocationChange} />
 
-      <Section title="Prescription">
+      <Section title="Create Prescription">
         <View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
           <Section title="Patient" collapsible={true}>
             {' '}
@@ -245,7 +165,9 @@ export const PrescriptionCreator = () => {
           <Section title="Medicine" collapsible={true}>
             <MedicineForm nestedFormCallback={nestedFormCallback} />
           </Section>
-          <Button onPress={handleButtonPress} title="Create Rx" />
+          <View style={{margin: 15}}>
+            <Button onPress={handleButtonPress} title="Create Rx" />
+          </View>
         </View>
       </Section>
       <ImportNsec

components/common/Section.tsx

@@ -7,7 +7,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {styles} from './styles';
 
 type SectionProps = PropsWithChildren<{