Adding User History

Welcome to our fourth lesson in building an image generation web application with Fiber!

In our previous lesson, we implemented the core JavaScript functionality for our application, including tab navigation and the image generation process. We also introduced some basic loading states and error handling for the image generation feature.

In this lesson, we'll build upon that foundation to create a more comprehensive user experience by focusing on the history tab functionality. We'll implement loading states and error handling specifically for retrieving and displaying previously generated images.

When working with web applications that make API calls, it's crucial to provide users with clear feedback about what's happening behind the scenes.

Without proper loading indicators, users might wonder if their action was registered or if the application is frozen. Similarly, without proper error handling, users might be left confused when something goes wrong.

We've already seen how loading states and error handling work in our generateImage() function. Now, we'll apply similar principles to our history feature, ensuring a consistent and user-friendly experience throughout the application.

Our application has two main tabs: one for generating images and another for viewing previously generated images. In this lesson, we'll focus on implementing the functionality for the history tab, which will allow users to retrieve and view their image generation history.

Before writing this function, update the history tab HTML so the JavaScript has stable elements to target:

<button id="history-button" onclick="fetchHistory()">Load Previous Images</button>
<p id="history-loading-message" style="display: none;">Loading history... Please wait.</p>

Let's get started by implementing the fetchHistory() function that will handle retrieving image history from our backend API.

Now that we understand the importance of providing feedback during API operations, let's implement the fetchHistory() function that will retrieve the user's image generation history from our backend API.

This function will be called when the user clicks the "Load Previous Images" button in the history tab. It will send a request to our backend API, retrieve the list of previously generated images, and display them in the history container.

Here's the implementation of the fetchHistory() function:

function fetchHistory() {
    const historyLoadingMessage = document.getElementById('history-loading-message');
    const historyButton = document.getElementById('history-button');
    const historyContainer = document.getElementById('history-container');
    
    historyLoadingMessage.style.display = 'block';
    historyButton.style.display = 'none';
    historyContainer.innerHTML = '';
    
    fetch('/images')
        .then(response => response.json())
        .then(data => {
            historyLoadingMessage.style.display = 'none';
            historyButton.style.display = 'block';
            
            if (data.images.length === 0) {
                historyContainer.innerHTML = '<p>No images found.</p>';
                return;
            }
            
            data.images.forEach(image => {
                const img = document.createElement('img');
                img.src = `data:image/png;base64,${image.imageBase64}`;
                historyContainer.appendChild(img);
            });
        })
        .catch(error => {
            historyLoadingMessage.style.display = 'none';
            historyButton.style.display = 'block';
            alert('Error fetching image history. Please try again.');
            console.error('Error:', error);
        });
}

Let's break down this function step by step:

First, we get references to the DOM elements we'll need to update during the history retrieval process:

const historyLoadingMessage = document.getElementById('history-loading-message');
const historyButton = document.getElementById('history-button');
const historyContainer = document.getElementById('history-container');

These elements include the loading message that will be displayed while the history is being fetched, the button that the user clicks to load the history, and the container where the images will be displayed.

We update the UI to show that the history retrieval is in progress:

historyLoadingMessage.style.display = 'block';
historyButton.style.display = 'none';
historyContainer.innerHTML = '';

This shows the loading message, hides the "Load Previous Images" button, and clears any previously displayed images from the container.

Then, we send a GET request to our backend API to retrieve the image history:

fetch('/images')
    .then(response => response.json())

Unlike the image generation function (which sends user input via a GET request using query parameters), this function sends a simple GET request to the /images endpoint. We expect the response to be a JSON object containing an array of image data.

Once we receive and parse the response, we update the UI based on the data we received:

.then(data => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';
    
    if (data.images.length === 0) {
        historyContainer.innerHTML = '<p>No images found.</p>';
        return;
    }
    
    data.images.forEach(image => {
        const img = document.createElement('img');
        img.src = `data:image/png;base64,${image.imageBase64}`;
        historyContainer.appendChild(img);
    });
})

To ensure a smooth user experience, we handle errors like this:

.catch(error => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';
    alert('Error fetching image history. Please try again.');
    console.error('Error:', error);
});

This resets the UI and shows a helpful message.

First, we reset the UI by hiding the loading message and showing the button again. Then, we check if the response contains any images. If not, we display a message indicating that no images were found.

If there are images, we iterate through each one, create an img element for it, set its source to a data URL containing the base64-encoded image data, and append it to the history container. This will display all the previously generated images in the history tab.

With this function in place, users can now click the "Load Previous Images" button in the history tab to view their image generation history. The function will retrieve the images from the backend API and display them in the history container.

To test our implementation, you can follow these steps:

1. Make sure your Fiber application is running and that the /images endpoint is properly implemented to return a list of previously generated images.
2. Open your application in a web browser and navigate to the history tab by clicking on the "View History" tab button.
3. Click the "Load Previous Images" button to trigger the fetchHistory() function.
4. Observe the loading message that appears while the history is being retrieved.
5. Once the history is retrieved, observe the images that are displayed in the history container.
6. If there are no images, observe the "No images found." message that is displayed.
7. To test error handling, you can temporarily modify your code to simulate an error, such as by changing the API endpoint URL to one that doesn't exist.

Now that we've implemented the fetchHistory() function with proper loading states and error handling, let's review what we've accomplished.

In this lesson, we've built upon the foundation laid in the previous lesson to create a more comprehensive user experience for our image generation web application. We've implemented the fetchHistory() function, which retrieves and displays the user's image generation history. We've also added proper loading states and error handling to ensure that users receive appropriate feedback during the history retrieval process.

Remember that proper loading states and error handling are crucial for creating a good user experience in web applications. They provide feedback to users about what's happening behind the scenes and help them understand and recover from errors.

In the practice exercises that follow this lesson, you'll have the opportunity to experiment with the code we've written and further enhance the user experience of our application. You might try adding more sophisticated loading indicators, improving error messages, or implementing additional features such as pagination for the history view.

By mastering the concepts covered in this lesson, you'll be well-equipped to create web applications that provide a smooth and user-friendly experience, even when dealing with asynchronous operations and potential errors.