I'm trying to display my user's data based on who is logged in. Right now my function isn't reading anything from my database. This is the current error that i'm getting: firebase-database.js:1 Uncaught TypeError: Cannot read properties of null (reading 'studioName'). I checked to make sure that the id was correct and in my databse as well. Also, one last thing, how can I make sure that the user is still logged in when I navigate to other pages? I have provided my code below. Thank you!
Firebase Database:
HTML:
<!doctype html>
<html>
<head>
<!---Required meta tags--->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/studiodash.css">
<!---Required meta tags--->
<!---Like Button JavaScript--->
<script src="https://kit.fontawesome.com/f6dcf461c1.js" crossorigin="anonymous"></script>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>StudioPick</title>
<script>
// SignOut
function signOut() {
auth.signOut();
alert("SignOut Successfully from System");
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
</script>
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -50px; right: -51px; font-size: 10px !important">profile type</p>
<ul>
<li>
<img src="./assets/icons/user.png" /><a href="studiodash.html">Dashboard</a>
</li>
<li>
<img src="./assets/icons/edit.png" /><a href="editprofile.html">Edit profile</a>
</li>
<li>
<img src="./assets/icons/envelope.png" /><a href="#">Inbox</a>
</li>
<li>
<img src="./assets/icons/settings.png" /><a href="#">Setting</a>
</li>
<li><img src="./assets/icons/question.png" /><a href="#">Help</a></li>
<li>
<img src="./assets/icons/log-out.png" /><a href="#" onclick="signOut();">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<!---Dashboard Body--->
<div class="container" id="dashboard">
<h1 class="page-title"><strong>Studio Dashboard</strong></h1>
<!---Booking Calendar--->
<div class="notifications">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Schedule</strong></h5>
</div>
<button class="calendar-view">View Full Calendar</button>
</div>
<!---Booking Calendar--->
<!---Edit Profile--->
<div class="edit-profile" id="edit-profile">
<div class="card-body">
<form id="studioForm">
<h5 class="card-title text-muted"><strong>Edit Profile</strong></h5>
<p class="profile-title" id="studioName"><b>Enter Studio Name</b></p>
<p class="profile-location" id="profile-location">Bethesda, MD</p>
<img class="star" src="Images/Star.png">
<p class="profile-rating" id="profile-rating">4.25</p>
<p class="profile-reviews" id="profile-reviews">8 reviews</p>
<img class="card-img-bottom" id="profile-image" src="Images/placeholder.png">
<button type="button" id="editprofilebutton" onclick="window.location.href='editprofile.html'">Edit Profile</button>
</form>
</div>
</div>
<!---Edit Profile--->
<!---Current Session--->
<div class="session-info">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Current Session</strong></h5>
<div class="current-client">
</div>
<p class="current-date text-muted">Date:</p>
<p class="todays-date">08/30/2022</p>
<p class="current-service text-muted">Service:</p>
<p class="todays-service">W Engineer</p>
<p class="current-room text-muted">Room:</p>
<p class="todays-room">A</p>
<p class="current-duration text-muted">Duration:</p>
<p class="todays-duration">3 hours</p>
<p class="current-start-time text-muted">Start Time:</p>
<p class="todays-start-time">4:00 pm</p>
<p class="current-end-time text-muted">End Time:</p>
<p class="todays-end-time">7:00 pm</p>
</div>
</div>
<!---Current Session--->
<!---Payment History--->
<div class="payment-history">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Payment History</strong></h5>
<div class="transaction">
<p class="customer">- Highway</p>
<p class="payment">+ $1,000</p>
</div>
<div class="transaction-two">
<p class="customer2">- TyFontaine</p>
<p class="payment2">+ $1,000</p>
</div>
<button class="history-view">View Payment History</button>
</div>
</div>
<!---Payment History--->
<!---Upcoming Sessions--->
<div class="sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Upcoming Sessions</strong></h5>
<div class="new-session">
<p class="session-price">$100</p>
<p class="customer-name">Grmln!</p>
<p class="session-room text-muted">Room A: </p>
<p class="session-type text-muted">No Engineer</p>
<p class="session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date text-muted">08/27/2022</p>
</div>
<div class="new-session2">
<p class="session-price2">$100</p>
<p class="customer-name2">Grmln!</p>
<p class="session-room2 text-muted">Room A: </p>
<p class="session-type2 text-muted">No Engineer</p>
<p class="session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date2 text-muted">08/27/2022</p>
</div>
<div class="new-session3">
<p class="session-price3">$100</p>
<p class="customer-name3">Grmln!</p>
<p class="session-room3 text-muted">Room A: </p>
<p class="session-type3 text-muted">No Engineer</p>
<p class="session-length3 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date3 text-muted">08/27/2022</p>
</div>
<button class="upcoming-view">View Upcoming Sessions</button>
</div>
</div>
<!---Upcoming Sessions--->
<!---Session Status--->
<div class="session-status">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Session Status</strong></h5>
<div class="session-option">
<button class="accept-button">Accept</button>
<button class="reject-button">Reject</button>
<button class="change-button">Change Time/Date</button>
</div>
</div>
</div>
<!---Session Status--->
<!---Pending Sessions--->
<div class="pending-sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Pending Sessions</strong></h5>
<div class="pending">
<p class="pending-session-price">$100</p>
<p class="pending-customer-name">Joony</p>
<p class="pending-session-room text-muted">Room A: </p>
<p class="pending-session-type text-muted">No Engineer</p>
<p class="pending-session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date text-muted">08/27/2022</p>
</div>
</div>
<div class="pending2">
<p class="pending-session-price2">$100</p>
<p class="pending-customer-name2">Tae Dawg</p>
<p class="pending-session-room2 text-muted">Room D: </p>
<p class="pending-session-type2 text-muted">With Engineer</p>
<p class="pending-session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date2 text-muted">09/27/2022</p>
</div>
<button class="pending-view">View Pending Sessions</button>
</div>
</div>
<!---Pending Sessions--->
<!---Edit Prices--->
<div class="edit-prices">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Edit Prices</strong></h5>
<div class="roomA">
<p class="description-one">Room A:</p>
<p class="type text-muted">With Engineer</p>
<p class="dollarsign-one">$</p>
<p class="price-one">45</p>
<p class="time-type">/Hr</p>
</div>
<div class="roomB">
<p class="description-two">Room B:</p>
<p class="type2 text-muted">With Engineer</p>
<p class="dollarsign-two">$</p>
<p class="price-two">50</p>
<p class="time-type2">/Hr</p>
</div>
<button class="editPrice-button">Edit Prices</button>
</div>
</div>
<!---Edit Prices--->
<!---Messages--->
<div class="messages">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Messages</strong></h5>
<div class="notification-one">
<p class="person-one">Chris Brown</p>
<p class="text-one text-muted">I'm omw. 20 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-one text-muted">3 min ago</p>
</div>
<div class="notification-two">
<p class="person-two">Kanye West</p>
<p class="text-two text-muted">I'm omw. 45 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-two text-muted">12 min ago</p>
</div>
<button class="view-messages">View Messages</button>
</div>
</div>
<!---Messages--->
<!---Footer--->
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2022 StudioPick.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
<!---Footer--->
<!---Dashboard Body--->
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
<!---Javascript--->
<script src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
JS:
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize variables
const auth = firebase.auth();
const database = firebase.database();
//Check if user is signed in and display info
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
database.ref('/studiopick/studio/users/'+ user.uid).once('value', function(snapshot) {
document.getElementById("studioName").innerText = snapshot.val().studioName;
})
} else {
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
});