The code then makes a GET request to the /api/course API endpoint using the fetchWithCache function. This function appears to cache requests to reduce unnecessary API calls. It sends a query with the course's prefix and number as URL parameters (after encoding them for safety), for example, /api/course?prefix=CS&number=101.

The fetchWithCache function takes in three main arguments:

• The URL with query parameters.

• cacheIndexNebula: Likely an identifier for the cache.

• expireTime: Defines the time the cache expires.

• A configuration object specifying the request method (GET) and the accepted response type (application/json).

The first .then() block checks the response to ensure the API call was successful. If the message in the response is not 'success', an error is thrown.

If the response is successful, the next .then() block processes the actual data (CourseData[]), which is an array of course data.

The array of course data is sorted by the catalog_year property in descending order. This ensures that the most recent course information is placed at the beginning of the array (index 0).

It then sets the courseData state to { state: 'done', data: response[0] }, where response[0] is the most recent course data.

The course API is triggered everytime the the cource is changed, (for example when you search a new cource)

The code then makes a GET request to the /api/professor API endpoint using the fetchWithCache function. This function appears to cache requests to reduce unnecessary API calls. It sends a query with the Professor First and Last name as URL parameters (after encoding them for safety), for example, /api/professor?profFirst=John &profLast=Cole.

The fetchWithCache function takes in three main arguments:

• The URL with query parameters.

• cacheIndexNebula: Likely an identifier for the cache.

• expireTime: Defines the time the cache expires.

• A configuration object specifying the request method (GET) and the accepted response type (application/json).

The first .then() block checks the response to ensure the API call was successful. If the message in the response is not 'success', an error is thrown.

The state profData is then updated to:

• { state: 'done', data: response.data } if response.data is defined (indicating that professor data was successfully fetched).

• data: The actual professor data fetched from the API, which is cast to a ProfessorInterface type.

  • This part assigns the fetched professor data (response.data) to the data property.

  • The as ProfessorInterface part is a TypeScript type assertion, which explicitly tells TypeScript to treat response.data as if it conforms to the ProfessorInterface type. This ensures the data structure aligns with the expected format for a professor.

The combosSearchResultsFetch function is responsible for fetching search results related to course-professor combinations based on a search term, and it returns a list of SearchQuery objects.

• searchTerm: SearchQuery: This is the input provided by the user or system, containing search terms like a professor's name or course details.

• controller: AbortController: This is used to cancel the request if necessary, such as when a user navigates away before the data is fetched.

The function returns a Promise<SearchQuery[]>, meaning it will eventually return an array of SearchQuery objects once the API request completes.

The function calls fetchWithCache, a custom function to handle API requests with caching. The API endpoint /api/combo is queried with a single query parameter, input, derived from searchQueryLabel(searchTerm). This likely formats or encodes the search term for use in the URL.

The caching details (cacheIndexNebula and expireTime) are passed to help manage cached responses.

The configuration object for the API request includes:

• signal: controller.signal: To handle the request cancellation.

• method: 'GET': A GET request to retrieve data from the API.

• headers: { Accept: 'application/json' }: The server is informed that the client expects a JSON response.

After the API request completes, the .then() block processes the response:

• It first checks if response.message is 'success'. If it's anything else, the function throws an error with the message, which is handled by the calling code.

• If the response is successful, it processes the response.data (which is likely an array of course-professor combinations).

The result is an array of SearchQuery objects, which is constructed as follows:

• The original searchTerm object is added as the first element of the array.

• The rest of the array is built by mapping over the response.data, combining each obj (each course-professor combination) with the searchTerm. Each resulting object is created using the spread syntax (...) to merge the properties of searchTerm and obj into a new SearchQuery object.

course: SearchQuery: This is an object representing a course with various properties (such as course.prefix, course.number, etc.).

controller: AbortController: This allows the request to be aborted if necessary (e.g., when the user navigates away from the page before the request completes).

The function returns a Promise<GradesType>, meaning it returns a promise that resolves to an object of type GradesType after fetching and processing the data.

The function makes an API request using fetchWithCache, which is likely a custom function to handle fetching data with caching support.

The URL /api/grades is built dynamically by constructing query parameters from the course object:

• Object.keys(course) retrieves all keys from the course object.

• .map() iterates over each key, creating a query string parameter in the form of key=value. The encodeURIComponent() function ensures that special characters are properly encoded in the URL.

• The final URL string contains all key-value pairs joined by &, which is how query parameters are structured in URLs.

The cacheIndexNebula and expireTime are likely cache management variables that help control caching behavior for the request.

The configuration object includes:

• signal: controller.signal: Allows the request to be aborted if needed.

• method: 'GET': Specifies that this is a GET request.

• headers: { Accept: 'application/json' }: Tells the server that the client expects a JSON response.

The .then() block processes the response:

• First, it checks if the response.message is 'success'. If not, it throws an error with the message, which will be caught by the calling code.

• If response.data is null, it throws an error, indicating that no data was returned from the API.

If the response is valid, it returns an object that combines:

• The result of calculateGrades(response.data), which likely computes various statistics or calculations based on the fetched grade data. This could involve calculating averages, GPAs, or other metrics.

• The original response.data under the grades property (this is of type GradesData, likely containing raw grade data).