Full Backend Integration - Table Generator (4/24)

aidenhuynh commented 5 months ago

Backend Integration

When adding a new class to localStorage, the user is prompted to import an existing class tied to their account on the backend, creating a copy of it locally

Here is the main function for connecting with the backend. It is async so that when it is called using await we can return the user's classes if there are any. If the user isn't signed in, it will return an empty array that is checked for in other parts of the code.

async function fetchClassList() {
    // Create array of classes
    var classes = []

    // Fetch backend
    try {
        const response = await fetch(url + '/api/class_period/dashboard', {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'include',
            headers: {
                "content-type": "application/json",
            },
        })

        // Error check
        if (!response.ok) {
            throw new Error('Network response was not ok')
        }

        // Convert response to JSON, which contains classes that user is the leader of
        const data = await response.json()
        console.log(JSON.stringify(data))
        var classList = data.leader

        // For each class of the user
        for (let classData of classList) {
            // Define list of students in each class
            var studentList = []

            // Push students from response into class array
            for (let student of classData.students) {
                studentList.push(student.name)
            }

            // Add each class from response into frontend class array
            classes.push({id: `class-${classData.id}`, class: studentList, name: classData.name})
        }
    } 
    // If there is an error, return an empty array
    catch (error) {
        console.error('There was a problem with the fetch operation:', error)

        // This only occurs when not signed in
        return []
    }

    return classes
}

On the backend, the code looks like this, returning the data tied to the user, including their classes.

@GetMapping("/dashboard")
    public ResponseEntity<?> fetchBothClassData(@CookieValue("jwt") String jwtToken) {
        // checking if JWT token is missing
        if (jwtToken.isEmpty()) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        // getting user data
        String userEmail = tokenUtil.getUsernameFromToken(jwtToken);
        Person existingPerson = personRepository.findByEmail(userEmail);
        if (existingPerson == null) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
        List<ClassPeriod> student = classPeriodDetailsService.getClassPeriodsByStudent(existingPerson);
        List<ClassPeriod> leader = classPeriodDetailsService.getClassPeriodsByLeader(existingPerson);

        // initializing storage device vrrrmmmm ERRT ERRT ERRT beeeeeep
        HashMap<String, List<ClassPeriod>> classData = new HashMap<>();

        // adding class periods to storage device brrp brrp bleeeeeeebpt
        classData.put("student", student);
        classData.put("leader", leader);

        // return class data
        return new ResponseEntity<>(classData, HttpStatus.OK);
    }