corey/PeerScribe
1
0
Fork 0
mirror of https://github.com/abhay-raizada/PeerScribe.git synced 2026-04-26 16:24:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create Add Pharmacy Modal

Browse Source
This commit is contained in:
abhay-raizada
2024-08-12 17:41:39 +05:30
parent 26e9a80275
commit 605b89c578
8 changed files with 347 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
App.tsx
View File

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

112
components/PharmacyPicker/AddPharmacy.tsx Normal file
View File

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

93
components/PharmacyPicker/index.tsx Normal file
View File

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

116
components/PrescriptionCreator/AddressForm.tsx
View File

@@ -28,67 +28,63 @@ export const AddressForm: React.FC<AddressFormProps> = ({
}; };
return ( return (
<Section title="Address"> <View>
<View> <View>
<View> <Text style={TextTheme}>Address Line 1</Text>
<Text style={TextTheme}>Address Line 1</Text> <TextInput
<TextInput style={styles.input}
style={styles.input} placeholder="Enter street"
placeholder="Enter street" value={form.address_line_1}
value={form.address_line_1} placeholderTextColor="white"
placeholderTextColor="white" onChangeText={(text: string) =>
onChangeText={(text: string) => handleTextChange('address_line_1', text)
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>
</View> </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>
); );
}; };

126
components/PrescriptionCreator/MedicineForm.tsx
View File

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

110
components/PrescriptionCreator/index.tsx
View File

@@ -1,15 +1,6 @@
import { import {Alert, Dimensions, Image, View, Button} from 'react-native';
Alert,
Appearance,
Dimensions,
Image,
Text,
View,
Button,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen'; import {Colors} from 'react-native/Libraries/NewAppScreen';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {Dropdown} from 'react-native-element-dropdown';
import { import {
SimplePool, SimplePool,
UnsignedEvent, UnsignedEvent,
@@ -19,11 +10,12 @@ import {
nip19, nip19,
} from 'nostr-tools'; } from 'nostr-tools';
import EncryptedStorage from 'react-native-encrypted-storage'; import EncryptedStorage from 'react-native-encrypted-storage';
import {ImportNsec} from './ImportNsec'; import {ImportNsec} from '../common/ImportNsec';
import {Section} from '../common/Section'; import {Section} from '../common/Section';
import {PatientForm} from './PatientForm'; import {PatientForm} from './PatientForm';
import {AddressForm} from './AddressForm'; import {AddressForm} from './AddressForm';
import {MedicineForm} from './MedicineForm'; import {MedicineForm} from './MedicineForm';
import {PharmacyPicker, pharmacyData} from '../PharmacyPicker';
function OBJtoXML(obj: any) { function OBJtoXML(obj: any) {
var xml = ''; var xml = '';
@@ -48,52 +40,19 @@ function OBJtoXML(obj: any) {
return xml; 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 = () => { export const PrescriptionCreator = () => {
const [showImportNsec, setShowImportNsec] = useState(false); const [showImportNsec, setShowImportNsec] = useState(false);
const [loggedInNpub, setLoggedInNpub] = useState(''); const [loggedInNpub, setLoggedInNpub] = useState('');
const [finalJSON, setFinalJson] = useState({});
const [selectedPharmacyId, setSelectedPharmacyId] = useState( const [selectedPharmacyId, setSelectedPharmacyId] = useState(
locationData[0].npub, pharmacyData[0].npub,
); );
const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState([]); const [selectedPharmacyRelays, setSelectedPharmacyRelays] = useState([]);
const [finalJSON, setFinalJson] = useState({});
const handleLocationChange = (item: any) => {
setSelectedPharmacyId(item.npub);
setSelectedPharmacyRelays(item.relays);
};
useEffect(() => { useEffect(() => {
async function initialize() { async function initialize() {
@@ -115,26 +74,6 @@ export const PrescriptionCreator = () => {
} }
initialize(); 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 = ( const nestedFormCallback = (
xmlTag: string, xmlTag: string,
@@ -144,11 +83,6 @@ export const PrescriptionCreator = () => {
setFinalJson({...finalJSON, [xmlTag]: value}); setFinalJson({...finalJSON, [xmlTag]: value});
}; };
const handleLocationChange = (item: any) => {
setSelectedPharmacyId(item.npub);
setSelectedPharmacyRelays(item.relays);
};
const handleImportNsec = (nsec: string) => { const handleImportNsec = (nsec: string) => {
EncryptedStorage.setItem('user_credentials', nsec); EncryptedStorage.setItem('user_credentials', nsec);
if (nsec.startsWith('nsec1') && nsec.length !== 63) { if (nsec.startsWith('nsec1') && nsec.length !== 63) {
@@ -174,7 +108,7 @@ export const PrescriptionCreator = () => {
(await EncryptedStorage.getItem('user_credentials')) as `nsec1${string}`, (await EncryptedStorage.getItem('user_credentials')) as `nsec1${string}`,
).data as Uint8Array; ).data as Uint8Array;
const pk = getPublicKey(sk); 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('Got ids');
console.log('content is ', xml); console.log('content is ', xml);
const baseKind4Event: UnsignedEvent = { const baseKind4Event: UnsignedEvent = {
@@ -217,23 +151,9 @@ export const PrescriptionCreator = () => {
/> />
</Section> </Section>
<Section title="Choose a Pharmacy"> <PharmacyPicker handleLocationChange={handleLocationChange} />
<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>
<Section title="Prescription"> <Section title="Create Prescription">
<View style={{display: 'flex', flexDirection: 'column', width: '100%'}}> <View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Section title="Patient" collapsible={true}> <Section title="Patient" collapsible={true}>
{' '} {' '}
@@ -245,7 +165,9 @@ export const PrescriptionCreator = () => {
<Section title="Medicine" collapsible={true}> <Section title="Medicine" collapsible={true}>
<MedicineForm nestedFormCallback={nestedFormCallback} /> <MedicineForm nestedFormCallback={nestedFormCallback} />
</Section> </Section>
<Button onPress={handleButtonPress} title="Create Rx" /> <View style={{margin: 15}}>
<Button onPress={handleButtonPress} title="Create Rx" />
</View>
</View> </View>
</Section> </Section>
<ImportNsec <ImportNsec

0
components/PrescriptionCreator/ImportNsec.tsx → components/common/ImportNsec.tsx
View File

1
components/common/Section.tsx
View File

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