Adding Story History

Welcome to this lesson on adding a history tab to your AI Short Story Generator web application. In previous lessons, you set up the basic HTML structure using Django templates, styled the interface, and implemented user input handling and API calls. Now, you will enhance your application by allowing users to view previously generated stories through a dedicated history tab. This feature will improve the user experience by making it easy to revisit and review past stories, and will lay the groundwork for more advanced features in the future.

To begin, let's update the index.html file to include the necessary UI elements for the history tab. This will allow users to load and view previously generated stories.

First, add a button for "Load Previous Stories." This button will trigger the function to fetch the story history. Here's how you can add it:

<button id="history-button" onclick="fetchHistory()">Load Previous Stories</button>

Next, include a paragraph element for the loading message. This message will be displayed while the stories are being fetched:

<p id="history-loading-message" style="display: none;">Loading history... Please wait.</p>

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.

Finally, add an empty div for the story history container. This is where the fetched stories will be displayed:

<div id="history-container"></div>

By setting the correct element IDs (history-button, history-loading-message, history-container), you ensure that these elements can be easily accessed and manipulated using JavaScript.

Now, let's create and initialize the fetchHistory() function in your static JavaScript file, for example, project/static/script.js. This function will handle the process of fetching and displaying the story history.

Start by retrieving the DOM elements for the loading message, button, and container using their IDs:

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

Next, update the UI to show the loading message and hide the button. This provides immediate feedback to the user that the application is processing their request:

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

By clearing the container's content, you ensure that any previous stories are removed before new data is loaded.

With the UI prepared, let's implement the API call to fetch the story history. The API endpoint is provided by your Django backend, and the static JavaScript file is loaded via Django's static files system.

Start by making the API call to the Django endpoint:

fetch('/api/get_stories/')

Next, handle the promise chain to process the response. In the first then() callback, toggle the UI back to its original state after the API call completes:

.then(response => response.json())
.then(data => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';
})

This ensures that the loading message is hidden and the button is shown again, providing a seamless user experience.

Now, let's extend the then() callback to handle the response data. This involves checking if the returned stories array is empty and updating the history container accordingly.

First, check if the stories array is empty:

if (data.stories.length === 0) {
    historyContainer.innerHTML = '<p>No stories found.</p>';
    return;
}

If stories are found, iterate over them, create pre elements, and append them to the container:

data.stories.forEach(story => {
    const pre = document.createElement('pre');
    pre.textContent = story.content;
    historyContainer.appendChild(pre);
});

This approach dynamically creates and displays the story history based on the API data.

To ensure robustness, let's add error handling to the fetchHistory() function. This involves adding a catch() block to handle any errors that may occur during the API call.

In the catch() block, hide the loading message, show the button, and display an alert message informing the user of the error:

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

By logging the error to the console, you can easily debug any issues that arise.

In this lesson, you have learned how to enhance the AI Short Story Generator by adding loading states and error handling. You updated the Django HTML template, initialized the fetchHistory() function in your static JavaScript file, implemented the API call to your Django backend, handled response data, and enhanced error handling. These skills are crucial for providing immediate user feedback and ensuring a robust application.

As you move on to the practice exercises, apply what you've learned to test and refine your implementation. Congratulations on reaching this point in the course, and keep up the great work as you continue to build on your skills!