Store added pharmacy in local storage

components/PharmacyPicker/AddPharmacy.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {Alert, Button, Modal, Text, TextInput, View} from 'react-native';
 import {Section} from '../common/Section';
+import {getData, storeData} from '../../utils/localStorage';
 
 export const AddPharmacy = ({
   isVisible,
@@ -24,6 +25,31 @@ export const AddPharmacy = ({
   const handleName = (value: string) => {
     setName(value);
   };
+
+  async function handleAddClick() {
+    if (!npub || !relay || !name) {
+      Alert.alert(
+        'Missing Inputs',
+        'Please enter name, npub and relay of the Pharmacy',
+      );
+      return;
+    }
+    if (npub.length !== 63 || !npub.startsWith('npub1')) {
+      Alert.alert('Invalid Npub');
+      return;
+    }
+    let pharmacyListString = (await getData('pharmacyList')) || '[]';
+    let pharmacyList = JSON.parse(pharmacyListString) as Array<{
+      label: string;
+      npub: string;
+      relay: string;
+    }>;
+    pharmacyList = [...pharmacyList, {label: name, relay: relay, npub: npub}];
+    await storeData('pharmacyList', JSON.stringify(pharmacyList));
+
+    onAdd(npub, relay, name);
+  }
+
   return (
     <Modal
       visible={isVisible}
@@ -93,16 +119,7 @@ export const AddPharmacy = ({
               <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>
+              <Button title="Add" onPress={handleAddClick}></Button>
             </View>
           </View>
         </Section>

components/PharmacyPicker/index.tsx

@@ -1,15 +1,16 @@
 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 React, {useEffect, useState} from 'react';
 import {AddPharmacy} from './AddPharmacy';
+import {getData} from '../../utils/localStorage';
 
 export const pharmacyData = [
   {
-    label: 'Pharmacy A',
-    value: 'A',
+    label: 'Default pharmacy',
+    value: 'default',
     npub: 'npub1tea09rtjeuzgk4gjajzry37wuyv7h02d4zw38cpadcrkg5yt0qhqncr7km',
-    relays: ['wss://relay.damus.io'],
+    relay: 'wss://relay.damus.io',
   },
   {
     label: ' + Add Pharmacy',
@@ -27,6 +28,20 @@ export const PharmacyPicker: React.FC<PharmacyPickerProps> = ({
   handleLocationChange,
 }) => {
   const [showAddPharmacyModal, setShowAddPharmacyModal] = useState(false);
+  const [pharmacyList, setPharmacyList] = useState(pharmacyData);
+  const [initialized, setInitialized] = useState(false);
+
+  const initialize = async () => {
+    let pharmacyListString = (await getData('pharmacyList')) || '[]';
+    let newPharmacyList = JSON.parse(pharmacyListString);
+    let storePharmacyList = [...newPharmacyList, ...pharmacyList];
+    setPharmacyList(storePharmacyList);
+    setInitialized(true);
+    handleLocationChange(storePharmacyList[0]);
+  };
+  useEffect(() => {
+    if (!initialized) initialize();
+  }, []);
 
   const renderItem = (item: any) => {
     if (item.value === 'custom') {
@@ -56,7 +71,7 @@ export const PharmacyPicker: React.FC<PharmacyPickerProps> = ({
           <Text style={{color: 'grey', paddingBottom: 5}}>
             Npub: {item.npub}
           </Text>
-          <Text style={{color: 'grey'}}>Relays: {item.relays.join(', ')}</Text>
+          <Text style={{color: 'grey'}}>Relay: {item.relay}</Text>
         </View>
       </View>
     );
@@ -67,11 +82,11 @@ export const PharmacyPicker: React.FC<PharmacyPickerProps> = ({
       <Section title="Choose a Pharmacy">
         <View style={{width: width - 40}}>
           <Dropdown
-            data={pharmacyData}
+            data={pharmacyList}
             labelField={'label'}
             valueField={'label'}
             onChange={handleLocationChange}
-            value={pharmacyData[0]}
+            value={pharmacyList[0]}
             renderItem={renderItem}
             style={{width: '100%'}}
             placeholderStyle={{color: 'white'}}
@@ -85,6 +100,7 @@ export const PharmacyPicker: React.FC<PharmacyPickerProps> = ({
           setShowAddPharmacyModal(false);
         }}
         onAdd={() => {
+          initialize();
           setShowAddPharmacyModal(false);
         }}
       />

components/PrescriptionCreator/index.tsx

@@ -47,11 +47,17 @@ export const PrescriptionCreator = () => {
   const [selectedPharmacyId, setSelectedPharmacyId] = useState(
     pharmacyData[0].npub,
   );
-  const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState([]);
+  const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState<
+    Array<string>
+  >([pharmacyData[0].relay!]);
 
-  const handleLocationChange = (item: any) => {
+  const handleLocationChange = (item: {
+    name: string;
+    npub: string;
+    relay: string;
+  }) => {
     setSelectedPharmacyId(item.npub);
-    setSelectedPharmacyRelays(item.relays);
+    setSelectedPharmacyRelays([item.relay]);
   };
 
   useEffect(() => {
@@ -119,10 +125,18 @@ export const PrescriptionCreator = () => {
       pubkey: pk,
     };
     const finalEvent = finalizeEvent(baseKind4Event, sk);
+    console.log(
+      'FINAL EVENT IS ',
+      finalEvent,
+      'relays are',
+      selectedPharmacyRelays,
+    );
     const pool = new SimplePool();
     console.log('publishing event');
-    await Promise.allSettled(pool.publish(selectedPharmacyRelays, finalEvent));
-    console.log('Event Published');
+    let messages = await Promise.allSettled(
+      pool.publish(selectedPharmacyRelays, finalEvent),
+    );
+    console.log('Messages from relays', messages);
     Alert.alert('Prescription Sent to the pharmacy!');
   };