Sprint 5 Review

Intro Requests for Review

Program Purpose: Our program is a social platform for users to globally discover new culinary recipes and restaurants, and share their own opinions/thoughts with restaurant reviews. Tourists from our continents can reference our program to endulge in various restaurants. At-home cooks can explore new recipes to face culinary creative block. Anyone can post a review about a restaurant they wanted to comment about.

Individual Feature Purpose: Africa’s reviews section fetches user data and the culinaryposts channel from the backend. Then the data is stored in our backend database, to which it the channel data is displayed on the page.

<script type="module">
    import { pythonURI, fetchOptions } from '../assets/js/api/config.js';
    const container = document.getElementById("culinaryposts");

    async function fetchUser() {
        const response = await fetch(`${pythonURI}/api/user`, fetchOptions);
        const user = await response.json();
        console.log(user);
        return user;
    }

    const user = fetchUser();

    async function fetchChannels() {
        try {
            const groupName = 'Culinary Posts';
            const responseData = {
                group_name: groupName,
            };
            // add filter to get only messages from this channel
            const response = await fetch(`${pythonURI}/api/channels/filter`, {
                ...fetchOptions,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(responseData)
            });

            if (!response.ok) {
                throw new Error('Failed to fetch channels: ' + response.statusText);
            }
            const channels = await response.json();
            container.innerHTML = "";

            channels.forEach(channel => {
                const card = document.createElement("div");
                card.classList.add("card");

                const title = document.createElement("h3");
                title.classList.add("card-title");
                title.textContent = channel.name;

                const description = document.createElement("p");
                description.classList.add("card-description");
                description.textContent = channel.attributes["content"];

                card.appendChild(title);
                card.appendChild(description);

                container.appendChild(card);
            });
        } catch (error) {
            console.error('Error fetching channels:', error);
        }
    }

    document.getElementById('channelForm').addEventListener('submit', async function(event) {
        event.preventDefault();

        const title = document.getElementById('title').value;
        const content = document.getElementById('textArea').value;
        const group_id = 13;

        const channelData = {
            name: title,
            group_id: group_id,
            attributes: {"content": content}
        };

        try {
            const response = await fetch(`${pythonURI}/api/channel`, {
                ...fetchOptions,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(channelData)
            });

            if (!response.ok) {
                throw new Error('Failed to add channel: ' + response.statusText);
            }

            fetchChannels();
            document.getElementById('channelForm').reset();
        } catch (error) {
            console.error('Error adding channel:', error);
            alert('Error adding channel: ' + error.message);
        }
    });

    fetchChannels();
</script>

This is what the user sees after the channel data is displayed.

The data appears in the database and is stored within channels.

Input/Output Requests

Demo ways to Input to your full stack feature.

• Using frontend show API request and present API response. (live demo)
  

• Using postman to show raw API request and RESTful response (error code(s) and JSON)
  
  
  

• Using db_init, db_restore, db_backup to show tester data creation and data recovery.
  
  

List Requests

Use of list, dictionaries and database. Code descriptions of area where you work with list (rows) and dictionaries (columns) of the database.

• Discuss formatting response data (JSON) from API into DOM
  
  

frontend: DOM

• Discuss queries from database where you extract a Python List (rows). Mention how these queries are provide by a 3rd. party library.
  

• Discuss methods in “class” you created to work with columns (create, read, update, delete)
  create:
  
  read:
  
  update:
  
  delete:
  
  

Algorithmic Code Requests

Algorithmic code request. Show the definition of code blocks to handle a request.

• Discuss API class (code block) you used to perform get, post, put, and delete methods.
  
  

• Discuss a method/procedure in class that contains sequencing, selection, and iteration.
  

• Discuss the parameters (body of request) and return type (jasonify) of the function.
  

Call to Algorithm Request

Show the definition of code block to make a request.

• Discuss the call/request to the method with Algorithm (fetch to endpoint).
  
  

• Discuss the return/response from the method with Algorithm (fetch) and how you handle data.
  The fetch() function sends an HTTP request to the backend. The request method is POST, meaning data is sent to the server. The body is converted into JSON format (JSON.stringify(responseData)).
  fetching data: The function sends { group_name: ‘Culinary Posts’ } to the API. After Fetching (Output from API) The API returns an array of objects, each representing a channel:

• Show how changing data or method triggers a different response, specifically normal conditions and error conditions.