Using Cloud Firestore in Blazor WebAssembly

dotnet new blazorwasm -o blazorfirestore

# to navigate to blazorfirestore directory
cd blazorfirestore

# to open Visual Studio Code in the blazorfirestore directory
code .

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";

  import {
    getFirestore,
    collection,
    addDoc,
    getDocs,
    deleteDoc,
    doc,
  } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-firestore.js";
  
  // Firebase configuration details
  // replace this configuration with your own configuration details
  const firebaseConfig = {
    apiKey: "AIzaSyB4ftsDO2tLVEi69rxACNcLlNLwjUw9_LY",
    authDomain: "blazorstore-52dcb.firebaseapp.com",
    projectId: "blazorstore-52dcb",
    storageBucket: "blazorstore-52dcb.appspot.com",
    messagingSenderId: "163844964316",
    appId: "1:163844964316:web:e85ac73ba9cbb150391919",
  }; 
  
  // Initialize Firebase with the configuration details
  const app = initializeApp(firebaseConfig);

  // Initialize Cloud Firestore and get a reference to the service
  const db = getFirestore(app); 
  
  // Define a function to add a new user to the Firestore database
  window.addUser = async (user) => {
    try {
      const docRef = await addDoc(collection(db, "users"), {
        name: user,
      });
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }; 
  
  // Define a function to get all the users from the Firestore database
  window.getUsers = async () => {
    const querySnapshot = await getDocs(collection(db, "users"));
    let dataArray = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      userName: doc.get("name"),
    }));

    return dataArray;
  }; 
  
  // Define a function to delete a user from the Firestore database
  window.deleteUser = async (userId) => {
    try {
      await deleteDoc(doc(db, "users", userId));
      console.log("Document with ID", userId, "deleted successfully.");
    } catch (e) {
      console.error("Error deleting document: ", e);
    }
  };
</script>

@page "/users"
<!-- Injects the IJSRuntime service, which allows the component to call JavaScript functions -->
@inject IJSRuntime JS
<!-- Displays the title "Firebase" -->
<h1> Firebase </h1>
<!-- Input box to add a new user -->
<div>
    <!-- Binds the currentUser variable to the input box -->
    <input @bind=@currentUser/>
    <!-- Binds the AddUser method to the button -->
    <button @onclick="AddUser">Add</button>
</div>
<br />

<!-- Displays the list of users if isLoading is false -->
@if (!isLoading)
{
    <!-- Loops through the userList -->
    @foreach(var user in userList)
    {
        <div>
            <!-- Displays the user's name -->
            .UserName
            <!-- Binds the DeleteUser method to the delete button -->
            <button @onclick="()=>DeleteUser(user.Id!)"> Del</button>
        </div>
        <br/>
    }
}
else
{
    <p>Loading...</p>
}
@code {
// A list of User objects to store the users
    private List<User> userList = new();
// A flag to indicate if the component is still loading
    private bool isLoading = true;
// The name of the new user to add
    private string? currentUser;
// Adds a new user to Firebase
    private async Task AddUser()
    {
// Invokes a JavaScript function to add the user to Firebase
        await JS.InvokeVoidAsync("addUser", currentUser);
// Clears the input box
        currentUser = null;
// Retrieves the updated list of users from Firebase
        userList = await JS.InvokeAsync<List<User>>("getUsers");
    }
// Deletes a user from Firebase
    private async Task DeleteUser(string userId)
    {
// Removes the user from the userList
        userList = userList.Where(i => i.Id != userId).ToList();
// Invokes a JavaScript function to delete the user from Firebase
        await JS.InvokeVoidAsync("deleteUser", userId);
    }
// Retrieves the list of users from Firebase after the component has rendered
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
// Retrieves the list of users from Firebase
            userList = await JS.InvokeAsync<List<User>>("getUsers");
// Sets isLoading to false to indicate that the component has finished loading
            isLoading = false;
// Forces the component to re-render
            StateHasChanged();
        }
    }
// A class to represent a user
    private class User
    {
        public string? Id { get; set; }
        public string? UserName { get; set; }
    }
}

<div class="nav-item px-3">
  <NavLink class="nav-link" href="users">
    <span class="oi oi-list-rich" aria- hidden="true"></span> Users            
  </NavLink>
</div>