How can I autonomously link a sub-collection to an existing doc - react-native

Question

So I have been trying to add products to certain machines but I am having issues linking the product with the desired/selected machine. Below you can see my code for listing card that I use on my home screen. I am linking my home screen with my product listing screen through a touchable icon on my listing cards which triggers a modal that with an "Add Product" button.
Code for Home Screen
const width = Dimensions.get('window').width / 2 - 30;
const HomeScreen = ({navigation}) => {
const [listings, setListings] = useState(null);
const [storefronts, setStorefronts] = useState(null);
const [machines, setMachines] = useState(null);
const [products, setProducts] = useState(null);
const [locations, setLocations] = useState(null);
const [landlords, setLandlords] = useState(null);
const [loading, setLoading] = useState(true);
const [deleted, setDeleted] = useState(false);
const [wholesaleProducts, setWholesaleProducts] = useState(null);
const [manufacturers, setManufacturers] = useState(null);
const user = auth().currentUser;
const fetchListings = async () => {
try {
const list = [];
console.log('Profile User:', user);
if (!user) return;
await firestore()
.collection('listings')
.where('userId', '!=', user.uid)
.get()
.then(querySnapshot => {
// console.log('Total Listings: ', querySnapshot.size);
querySnapshot.forEach(doc => {
const {
userId,
listing,
listingImg,
listingTime,
likes,
comments,
listingName,
listingTheme,
barcode,
price,
units,
quantity,
description,
} = doc.data();
list.push({
id: doc.id,
userId,
userName: 'Test Name',
userImg:
'https://lh5.googleusercontent.com/-b0PKyNuQv5s/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuclxAM4M1SCBGAO7Rp-QP6zgBEUkOQ/s96-c/photo.jpg',
listingTime,
listing,
listingImg,
liked: false,
likes,
comments,
price,
listingName,
listingTheme,
barcode,
units,
quantity,
description,
});
});
});
setListings(list);
if (loading) {
setLoading(false);
}
console.log('Listings: ', listings);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
fetchListings();
setDeleted(false);
}, [deleted]);
const fetchMachines = async () => {
try {
const list = [];
await firestore()
.collection('oem machines')
.orderBy('machineName', 'desc')
.get()
.then(querySnapshot => {
// console.log('Total Listings: ', querySnapshot.size);
querySnapshot.forEach(doc => {
const {
userId,
machineIQ,
machineImg,
machineId,
machineName,
machineTheme,
machinePrice,
description,
machineType,
machineModel,
createdAt,
active,
} = doc.data();
list.push({
id: doc.id,
userId,
machineId: doc.id,
userName: 'Test Name',
userImg: '',
machineIQ,
active,
machineImg,
machineType,
machinePrice,
machineName,
machineTheme,
machineModel,
description,
});
});
});
setMachines(list);
if (loading) {
setLoading(false);
}
console.log('Machines: ', machines);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
fetchMachines();
setDeleted(false);
}, [deleted]);
const fetchLocations = async () => {
});
setLocations(list);
if (loading) {
setLoading(false);
}
console.log('Locations: ', locations);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
fetchLocations();
setDeleted(false);
}, [deleted]);
const fetchStorefronts = async () => {
});
setStorefronts(list);
if (loading) {
setLoading(false);
}
console.log('Storefronts: ', storefronts);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
fetchStorefronts();
setDeleted(false);
}, [deleted]);
const handleDelete = listingId => {
Alert.alert(
'Delete Listing',
'Are you sure?',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed!'),
style: 'cancel',
},
{
text: 'Confirm',
onPress: () => deleteListing(listingId),
},
],
{cancelable: false},
);
};
const deleteListing = listingId => {
console.log('Current Listing Id: ', listingId);
firestore()
.collection('listings')
.doc(listingId)
.get()
.then(documentSnapshot => {
if (documentSnapshot.exists) {
const {listingImg} = documentSnapshot.data();
if (listingImg != null) {
const storageRef = storage().refFromURL(listingImg);
const imageRef = storage().ref(storageRef.fullPath);
imageRef
.delete()
.then(() => {
console.log(`${listingImg} has been deleted successfully.`);
deleteFirestoreData(listingId);
})
.catch(e => {
console.log('Error while deleting the image. ', e);
});
// If the Listing image is not available
} else {
deleteFirestoreData(listingId);
}
}
});
};
const deleteFirestoreData = listingId => {
firestore()
.collection('listings')
.doc(listingId)
.delete()
.then(() => {
Alert.alert(
'Listing deleted!',
'Your Listing has been deleted successfully!',
);
setDeleted(true);
})
.catch(e => console.log('Error deleting posst.', e));
};
const Card = ({
listings,
onDelete,
machines,
locations,
storefronts,
item,
onPress,
}) => {
const [userData, setUserData] = useState(null);
const [modalVisible, setModalVisible] = useState(false);
const getUser = async () => {
await firestore()
.collection('users')
.doc(listings.userId)
.get()
.then(documentSnapshot => {
if (documentSnapshot.exists) {
console.log('User Data', documentSnapshot.data());
setUserData(documentSnapshot.data());
}
});
};
const getManufacturer = async () => {
await firestore()
.collection('users')
.doc(machines.userId)
.get()
.then(documentSnapshot => {
if (documentSnapshot.exists) {
console.log('User Data', documentSnapshot.data());
setUserData(documentSnapshot.data());
}
});
};
const getLandlord = async () => {
await firestore()
.collection('users')
.doc(locations.userId)
.get()
.then(documentSnapshot => {
if (documentSnapshot.exists) {
console.log('User Data', documentSnapshot.data());
setUserData(documentSnapshot.data());
}
});
};
const getShopOwner = async () => {
await firestore()
.collection('users')
.doc(storefronts.userId)
.get()
.then(documentSnapshot => {
if (documentSnapshot.exists) {
console.log('User Data', documentSnapshot.data());
setUserData(documentSnapshot.data());
}
});
};
useEffect(() => {
getUser();
getLandlord();
getShopOwner();
getManufacturer();
}, []);
return (
<TouchableOpacity activeOpacity={0.8} onPress={onPress}>
<View style={style.card}>
<View
style={{
alignItems: 'flex-start',
flexDirection: 'row',
justifyContent: 'center',
}}>
<UserImg
source={{
uri: userData
? userData.userImg
: 'https://lh5.googleusercontent.com/-b0PKyNuQv5s/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuclxAM4M1SCBGAO7Rp-QP6zgBEUkOQ/s96-c/photo.jpg',
}}
style={{marginTop: 20, marginLeft: 10}}
/>
<UserInfoText style={{marginTop: 25}}>
<TouchableOpacity>
<UserName>
{userData ? userData.fname || 'Test' : 'Test'}
{userData ? userData.lname || 'User' : 'User'}
</UserName>
</TouchableOpacity>
<ListingTime>
{listings
? listings.listingTime &&
moment(listings.listingTime.toDate()).fromNow()
: null}
</ListingTime>
</UserInfoText>
<TouchableOpacity style={{alignItems: 'flex-end'}}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={style.centeredView}>
<View style={style.modalView}>
<Pressable
style={[style.button, style.buttonClose]}
onPress={async () =>
navigation.navigate('Add Listing') &&
setModalVisible(!modalVisible)
}>
<Text style={style.textStyle}>Add Product</Text>
</Pressable>
<Pressable
style={[style.button, style.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}>
<Text style={style.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<Ionicons
name="add-circle"
size={22}
color={COLORS.purple}
onPress={() => setModalVisible(true)}
/>
</TouchableOpacity>
</View>
<View
style={{
height: 100,
alignItems: 'center',
}}>
<Image
source={[
{
uri: listings ? listings.listingImg : null,
},
{
uri: machines ? machines.machineImg : null,
},
{
uri: locations ? locations.locationImg : null,
},
{
uri: storefronts ? storefronts.storefrontImg : null,
},
]}
style={{flex: 1, width: 150, resizeMode: 'contain', marginTop: 5}}
/>
</View>
<Text
style={{
fontWeight: 'bold',
fontSize: 15,
marginTop: 8,
marginLeft: 2,
}}>
{[
listings ? listings.listingName : null,
machines ? machines.machineName : null,
locations ? locations.locationName : null,
storefronts ? storefronts.storefrontName : null,
]}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 1,
}}>
<Text style={{fontSize: 16, fontWeight: 'bold', marginLeft: 6}}>
{[
// listings ? '$' + listings.price : null,
machines ? '$' + machines.machinePrice : null,
]}
</Text>
<View style={{flexDirection: 'row', marginRight: 4}}>
<TouchableOpacity>
<Ionicons name="heart" size={22} color={COLORS.red} />
</TouchableOpacity>
</View>
</View>
</View>
</TouchableOpacity>
);
};
const ListHeader = () => {
return null;
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={style.header}>
<Text style={{fontSize: 25, fontWeight: 'bold'}}>
Until Next Time :) BYE!
</Text>
<Text style={{fontSize: 38, color: COLORS.purple, fontWeight: 'bold'}}>
{/* Lula */}
</Text>
<TouchableOpacity>
<Ionicons
name="add-circle"
size={28}
color={COLORS.purple}
onPress={() => navigation.navigate('Form Screen')}
/>
</TouchableOpacity>
</View>
<ScrollView>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold', marginTop: 35}}>
All Listings
</Text>
<FlatList
contentContainerStyle={{
marginTop: 15,
paddingBottom: 50,
alignItems: 'center',
padding: 10,
}}
backgroundColor={COLORS.light}
showsVerticalScrollIndicator={false}
horizontal={true}
data={listings}
renderItem={({item}) => (
<Card
listings={item}
onDelete={handleDelete}
key={item.id}
onPress={() => navigation.navigate('Details', item)}
/>
)}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeader}
ListFooterComponent={ListHeader}
showsVerticalScrollIndicator={true}
/>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>Machines</Text>
<FlatList
contentContainerStyle={{
marginTop: 10,
paddingBottom: 50,
alignItems: 'center',
padding: 10,
}}
backgroundColor={COLORS.light}
showsVerticalScrollIndicator={false}
horizontal={true}
data={machines}
renderItem={({item}) => (
<Card
machines={item}
onDelete={handleDelete}
key={item.id}
onPress={() => navigation.navigate('Details', item)}
/>
)}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeader}
ListFooterComponent={ListHeader}
showsVerticalScrollIndicator={true}
/>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>Locations</Text>
<FlatList
contentContainerStyle={{
marginTop: 10,
paddingBottom: 50,
alignItems: 'center',
padding: 10,
}}
backgroundColor={COLORS.light}
showsVerticalScrollIndicator={false}
horizontal={true}
data={locations}
renderItem={({item}) => (
<Card
locations={item}
onDelete={handleDelete}
key={item.id}
onPress={() => navigation.navigate('Details', item)}
/>
)}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeader}
ListFooterComponent={ListHeader}
showsVerticalScrollIndicator={true}
/>
</View>
<View>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>Storefronts</Text>
<FlatList
contentContainerStyle={{
marginTop: 10,
paddingBottom: 50,
alignItems: 'center',
padding: 10,
}}
backgroundColor={COLORS.light}
showsVerticalScrollIndicator={false}
horizontal={true}
data={storefronts}
renderItem={({item}) => (
<Card
storefronts={item}
onDelete={handleDelete}
key={item.id}
onPress={() => navigation.navigate('Details', item)}
/>
)}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeader}
ListFooterComponent={ListHeader}
showsVerticalScrollIndicator={true}
/>
</View>
</ScrollView>
)}
</SafeAreaView>
};
My submitProductListing function is able to add both a listing and a product to their respective collections within firestore but the machineRef doc doesn't exist so firestore generates a non-existent ancestor document for the products parent doc (doc of desired machine). Below I have my Product Listing Screen and some screenshots of my firestore collections.
const listingValidationSchema = yup.object().shape({
listingName: yup.string().required(),
description: yup.string().required(),
listingTheme: yup.string().required(),
barcode: yup.number().required(),
price: yup.number().required(),
quantity: yup.number().required(),
units: yup.string().required(),
});
const ProductListingScreen = ({navigation, route}) => {
const listings = route.params;
const storefronts = route.params;
const machines = route.params;
const locations = route.params;
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
const choosePhotoFromLibrary = () => {
ImagePicker.openPicker({
width: 1200,
height: 780,
cropping: true,
}).then(image => {
console.log(image);
const imageUri = Platform.OS === 'ios' ? image.sourceURL : image.path;
setImage(imageUri);
});
};
const takePhotoFromCamera = () => {
ImagePicker.openCamera({
width: 1200,
height: 780,
cropping: true,
}).then(image => {
console.log(image);
const imageUri = Platform.OS === 'ios' ? image.sourceURL : image.path;
setImage(imageUri);
});
};
const uploadImage = async imageUri => {
console.log('Uploading Image');
if (image == null) {
Alert.alert('Please select an image');
return null;
}
const uploadUri = image;
console.log('Upload URI:', uploadUri);
let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1);
// Add timestamp to File Name
const extension = filename.split('.').pop();
const name = filename.split('.').slice(0, -1).join('.');
filename = name + Date.now() + '.' + extension;
setUploading(true);
const storageRef = storage().ref(`photos/${filename}`);
try {
const task = await storageRef.putFile(uploadUri);
} catch (e) {
console.error(e);
return null;
}
try {
let imageUrl = await storageRef.getDownloadURL();
setUploading(false);
return imageUrl;
} catch (e) {
setUploading(false);
console.error(e);
return null;
}
};
const submitProductListing = async (values, actions, machines, item) => {
let imageUrl = await uploadImage();
console.log('Image Url: ', imageUrl);
const listing = {
userId: auth().currentUser.uid,
listingId: '',
listingName: values.listingName,
description: values.description,
listingTheme: values.listingTheme,
barcode: values.barcode,
price: values.price,
quantity: values.quantity,
units: values.units,
listingImg: imageUrl,
listingTime: firestore.Timestamp.fromDate(new Date()),
active: '',
machineId: '',
};
console.log(listing);
firestore()
.collection('listings')
.add(listing)
.then(() => {
console.log('Listing Added!');
Alert.alert(
'Listing published!',
'Your Listing has been published Successfully!',
).catch(error => {
console.log(
'Something went wrong with added Listing to firestore.',
error,
);
});
});
const db = firebase.firestore();
const machineRef = db.collection('machines').doc();
const productRef = machineRef.collection('products');
// In a transaction, add the new product and update the aggregate totals
return db.runTransaction(async transaction => {
const res = await transaction.get(machineRef);
if (!res.exists) {
console.log("Document doesn't exist");
}
// Create a product
const product = {
productName: values.listingName,
productTheme: values.listingTheme,
description: values.description,
productImg: imageUrl,
listingTime: firestore.Timestamp.fromDate(new Date()),
price: values.price,
productId: '',
userId: auth().currentUser.uid,
machineId: '',
};
// Commit to Firestore
productRef.add(product).then(() => {
console.log('Product Added!');
});
});
};
Machine Document(non-existent ancestor document)
Sub-collection with newly added product
My thought process is to try to link product and machines through a shared id. Each machine will have a userId, machineId, and maybe an array of productId's (I haven't added this field yet because I don't know if this is the right way to go about it) and each product will have a userId, machineId, and productId. My main issue is though, I don't know how to set the Id of a doc with auto-generated. So as you can see on my product listing screen, I can set the userId because of "auth().currentUser.uid" but I don't know how to call/link the id of the selected machine on the home page.
So my main questions are:
How can I add doc id as a doc field for auto-generated id's
How can I route/link selected machine to my product listing screen
How can I then add new product to the selected machine
I also want to show the code for my details page where I use route.params to link listings to their respective details page so I don't know if I need to use a process similar to this but on the home page I used navigation.navigate('Details', item). Do I need to use item again to link machine to products? Someone please help!
Full Code for Details Screen
import React, {useState, useEffect} from 'react';
import {View, SafeAreaView, Image, Text, StyleSheet} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Ionicons from 'react-native-vector-icons/Ionicons';
import COLORS from '../components/colors';
const DetailsScreen = ({navigation, route}) => {
const listings = route.params;
const storefronts = route.params;
const machines = route.params;
const locations = route.params;
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: COLORS.white,
}}>
<View style={style.header}>
<Ionicons
name="arrow-back"
size={28}
onPress={() => navigation.goBack()}
/>
<Ionicons
name="cart"
size={28}
onPress={() => navigation.navigate('Cart')}
/>
</View>
<View style={style.imageContainer}>
<Image
defaultImageSource={require('../assets/default-img.jpeg')}
source={[
{
uri: listings ? listings.listingImg : null,
},
{
uri: machines ? machines.machineImg : null,
},
{
uri: locations ? locations.locationImg : null,
},
{
uri: storefronts ? storefronts.storefrontImg : null,
},
]}
style={{width: '100%', height: 250}}
resizeMode="cover"></Image>
</View>
<View style={style.detailsContainer}>
<View
style={{
marginLeft: 20,
flexDirection: 'row',
alignItems: 'flex-end',
}}>
<View style={style.line} />
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Best choice</Text>
</View>
<View
style={{
marginLeft: 20,
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={{fontSize: 22, fontWeight: 'bold'}}>
{[
listings ? listings.listingName : null,
machines ? machines.machineName : null,
locations ? locations.locationName : null,
storefronts ? storefronts.storefrontName : null,
]}
</Text>
<View style={style.priceTag}>
<Text
style={{
marginLeft: 15,
color: COLORS.white,
fontWeight: 'bold',
fontSize: 16,
}}>
$
{[
listings ? listings.price : null,
machines ? machines.machinePrice : null,
]}
</Text>
</View>
</View>
<View style={{paddingHorizontal: 20, marginTop: 10}}>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>About</Text>
<Text
style={{
color: 'grey',
fontSize: 16,
lineHeight: 22,
marginTop: 10,
}}>
{[
listings ? listings.description : null,
machines ? machines.description : null,
locations ? locations.description : null,
storefronts ? storefronts.description : null,
]}
</Text>
<View
style={{
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<TouchableOpacity>
<View style={style.borderBtn}>
<Text style={style.borderBtnText}>-</Text>
</View>
</TouchableOpacity>
<Text
style={{
fontSize: 20,
marginHorizontal: 10,
fontWeight: 'bold',
}}>
1
</Text>
<TouchableOpacity>
<View style={style.borderBtn}>
<Text style={style.borderBtnText}>+</Text>
</View>
</TouchableOpacity>
</View>
<TouchableOpacity>
<View style={style.buyBtn}>
<Text
style={{
color: COLORS.white,
fontSize: 18,
fontWeight: 'bold',
}}>
Buy
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
);
};
export default DetailsScreen;