Hello,
I am trying to fetch data from a firestore document and assign it to a variable which i intend to use to map the UI elements. I’ve been stuck on a loop of errors and can’t seem to figure it out. Any help will be highly appreciated.
import React, { useState, useEffect } from 'react';
import { IonButton, IonBackButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider, IonSelect, IonSelectOption, IonButtons, IonMenuButton, IonModal, useIonViewWillEnter, IonItemSliding, IonItemOption, IonItemOptions } from '@ionic/react';
import { enter } from 'ionicons/icons';
import firebase from 'firebase';
import 'firebase/firebase-firestore';
import { profile } from '../../models/businessdata';
import {db} from '../../data/firebaseConfig';
const BusinessProfile: React.FC = () => {
const [listProfile, setListProfile] = useState<profile[]>([]);
const [id, setId] = useState('');
const [businessName, setBusinessName] = useState('');
const [businessId, setBusinessId] = useState('');
const [businessNumber, setBusinessNumber] = useState('');
const [address, setAddress] = useState('');
const [industry, setIndustry] = useState('');
const [profile, setProfile] = useState(true);
const [showModal, setShowModal] = useState(false);
const profileInfo = async () => {
try {
let list: profile[] = []
const profileRef = db.collection('Users').doc('businessProfile');
const doc= profileRef.onSnapshot(docSnapshot => {
let data = docSnapshot.data()
console.log(`Received doc snapshot: ${JSON.stringify(data)}`);
setListProfile(list);
},
err => {
console.log(`Encountered error: ${err}`);
});
} catch (error) {}
}
const deleteProf = async(id:string) =>{
try {
console.log(id)
await firebase.firestore().collection('Users').doc('businessProfile').delete();
profileInfo();
} catch (error) {}
}
const edit = (id:string, businessName:string, businessId:string, businessNumber:string, address:string, industry:string) => {
setId(id);
setBusinessName(businessName);
setBusinessId(businessId);
setBusinessNumber(businessNumber);
setAddress(address);
setIndustry(industry);
setProfile(false);
}
const submitProfile = async () => {
try {
if(profile){
await firebase.firestore().collection('Users').doc('businessProfile').set(
{id, businessName, businessId, businessNumber, address, industry});
}else{
await firebase.firestore().collection('Users').doc('businessProfile').set(
{ id, businessName, businessId, businessNumber, address, industry});
setProfile(true);
}
} catch (error) {}
setId('');
setBusinessName('');
setBusinessId('');
setBusinessNumber('');
setAddress('');
setIndustry('');
}
useEffect(() => {
profileInfo();
}, []);
return (
<IonPage id="bProfile">
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonButtons slot="start">
<IonBackButton defaultHref="/tabs/BDashboard" />
</IonButtons>
<IonTitle>Business Profile</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList >{listProfile &&
listProfile.map(profile=>(
<IonItemSliding key={profile.businessId}>
<IonItem>
<IonLabel>Item</IonLabel>
</IonItem>
<IonItemOptions side="end">
<IonItemOption onClick={() => edit(''+profile.id, ''+profile.businessName, ''+profile.businessId, ''+profile.businessNumber, ''+profile.address, ''+profile.industry)}>Edit</IonItemOption>
</IonItemOptions>
<IonItemOptions side="end">
<IonItemOption onClick={() => deleteProf(''+profile.id)}>Delete</IonItemOption>
</IonItemOptions>
</IonItemSliding> ))}
</IonList>
<IonModal isOpen={showModal} cssClass='my-custom-class'>
<IonList>
<IonItemDivider>Business Profile Form</IonItemDivider>
<IonItem>
<IonInput type="text" value={businessName} placeholder="Enter Business Name" onIonChange={e => setBusinessName(e.detail.value!)}></IonInput>
</IonItem>
<IonItem>
<IonInput type="text" value={businessId} placeholder="Enter Business ID" onIonChange={e => setBusinessId(e.detail.value!)}></IonInput>
</IonItem>
<IonItem>
<IonInput type="text" value={businessNumber} placeholder="Enter contact number" onIonChange={e => setBusinessNumber(e.detail.value!)}></IonInput>
</IonItem>
<IonItem>
<IonInput type="text" value={address} placeholder="Enter Address" onIonChange={e => setAddress(e.detail.value!)}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="floating">Enter Industry</IonLabel>
<IonSelect onIonChange={e => setIndustry(e.detail.value!)}>
<IonSelectOption value="Retail">Retail</IonSelectOption>
<IonSelectOption value="Hospitality & Tourism">Hospitality & Tourism</IonSelectOption>
<IonSelectOption value="Transport">Transport</IonSelectOption>
<IonSelectOption value="Oil & Energy">Oil & Energy</IonSelectOption>
<IonSelectOption value="Banking">Banking</IonSelectOption>
<IonSelectOption value="">Other</IonSelectOption>
</IonSelect>
</IonItem>
</IonList>
<IonButton type="submit" onClick={submitProfile}>
<IonIcon icon={enter}></IonIcon>
</IonButton>
<IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>
<IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
</IonContent>
</IonPage>
)
};
export default BusinessProfile;