How to fetch data for specific User in Firebase/React - reactjs

Question

Got my Landing page in here with hardcoded username / password into firebase db.
after successful login, I am redirected to the homepage. However, I am trying to figure out how to fetch the data for the specific logged in user. Currently, in my Firebase I have only 1 Collection which is Users and contains some documents any of the documents has their own fields it is all hardcoded for the sake of the test.
After the log in I am currently logging data but I only see the last added document. How do i attach the User to see its own data. I tried creating directly in firebase a document with the same UID as the logging user but the data that i am logging is still the last added document instead of the right for the specific user.
function LandingPage(props) {
const [showErrorModal, setShow] = useState(false);
const emailInputRef = useRef();
const passwordInputRef = useRef();
const navigate = useNavigate();
function sumbitForm(e) {
e.preventDefault();
const enteredEmail = emailInputRef.current.value;
const enteredPassword = passwordInputRef.current.value;
const url = 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyCNBAxjeKNoAPPjBV0JW4vZ0QaTaOx9-L4';
fetch(url, {
method: 'POST',
body: JSON.stringify({
email: enteredEmail,
password: enteredPassword,
returnSecureToken: true,
}),
headers: {
'Content-Type': 'application/json',
},
}).then((res) => {
if (res.ok) {
navigate('/homepage')
} else {
setShow(true);
}
return res.json()
}).then((data) =>
console.log(data))
}
function handleClose() {
setShow(false)
}
return (
<div className='wrapper'>
<form onSubmit={sumbitForm}>
<h3>Login Here</h3>
<label htmlFor="username">Username</label>
<input type="text" placeholder="Sigh up with email" id="username" ref={emailInputRef} ></input>
<label htmlFor="password">Password</label>
<input type="password" placeholder="Password" id="password" ref={passwordInputRef}></input>
<button className='button' type="submit" typeof='submit' >Log In</button>
{showErrorModal ? <Modal show={showErrorModal} onHide={handleClose}
backdrop="static">
<Modal.Header>
<Modal.Title>Incorrect Username/Password</Modal.Title>
</Modal.Header>
<Modal.Body>
Please provide the correct credentials
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal> : null}
<div className='landingpage-logo'>
<img src={logo} className="landingpage-logo"></img>
</div>
</form>
</div>
)
}
export default LandingPage;
import React, { useEffect, useState } from "react";
import { getDatabase, ref, onValue } from "firebase/database";
import { db, firebase } from '../../firebase';
import 'firebase/compat/auth';
const HomeScreen = (props) => {
const [loadedData, setLoadedData] = useState([]);
const username = props.email.substring(0, props.email.indexOf('#'))
useEffect(() => {
readData();
}, [])
async function readData() {
db.collection('Users').get().then((querySnapshot) => {
querySnapshot.forEach(element => {
const incomingData = element.data();
setLoadedData(incomingData)
})
})
}
return (
<div className={styles['wrapper']}>
</div>
)
}
export default HomeScreen;

Answer 1

I created a simple project in react by using firebase to use crud proccessing.
https://github.com/celalaygar/web-push/tree/master/react-firebase-CRUD-example
in package.json->dependencies : "firebase": "^7.14.1"
in this file fetch data method is here.
https://github.com/celalaygar/web-push/blob/master/react-firebase-CRUD-example/src/components/main.component.js
fetchData = async () => {
const db = firebase.firestore();
const data = await db.collection("spell").get();
result = data.docs.map(doc => ({ ...doc.data(), id: doc.id }));
this.setState({ spell: result });
}