Resume processing

[jiin-kim109]

Description:
Now that we have our backend Resume API (ticket #30), it's time to build communication between our frontend and backend.

When a user uploads a resume PDF file to the drop zone, it should initiate an API call to the resume API. As implemented in #19, this action should promptly display the ProgressText component while awaiting the API response. Once the frontend receives the API response, it should navigate the user to the reporting page. Plus, the API response data should be dispatched to a React context so that it can be shared with the reporting page.

To summarize,

1. Modify the Dropzone and DragNDrop components so that they initiate an API call when a user uploads an appropriate PDF file. Instead of directly implementing the API invocation logic in the Dropzone or MainPage, it is recommended to separate it to a custom hook (you may create a "hooks/" directory). Pass the hook's high-level function from the page to the component as a callback.

https://medium.com/@nelson_examiner/building-custom-react-hooks-for-calling-apis-ab82a6b45ff
e.g.

// useEmployees.ts

import { useCallback, useState } from "react"
import { Employee } from "../utils/types"
import { useCustomFetch } from "./useCustomFetch"
import { EmployeeResult } from "./types"

export function useEmployees(): EmployeeResult {
  const { fetchWithCache, loading } = useCustomFetch()
  const [employees, setEmployees] = useState<Employee[] | null>(null)

  const fetchAll = useCallback(async () => {
    const employeesData = await fetchWithCache<Employee[]>("employees")
    setEmployees(employeesData)
  }, [fetchWithCache])

  const invalidateData = useCallback(() => {
    setEmployees(null)
  }, [])

  return { data: employees, loading, fetchAll, invalidateData }
}

2. Create a React Context
   Create a React context so that the reporting page can subscribe to the API response.

3. Navigates to the reporting page after the dispatch

4. Unit testing

Testing this API call should be conducted using MSW. You won't be testing the real backend API every time you run the test suites. Instead, you will set up a mock API response server called MSW and test them out.

Unit testing with MSW:
https://jskim1991.medium.com/react-unit-testing-apis-with-mock-service-works-msw-ca112ceddde9

Acceptance Criteria:

1 API call made after a file upload on the dropzone
2. page transition to the reporting page
3. reporting page can subscribe the response data via React Context
4. Write a custom hook implementing API invocation logic.