Reporting Page Score

[Pentaminum]

Description:

---

The reporting page must not directly fetch the API response data from the backend. Ticket #36 should handle the request and response, and storing the result in a React context. The reporting page should utilize the state provided by the created React context.

1. Set the loading status to True
2. req/res from backend
3. Store the API response in a context (dispatch data to a context).
4. Navigate to the reporting page.
5. The reporting page retrieves the state from the context.

Our assumption is that ticket #36 has already implemented steps 1 to 4. Therefore, all the requirements outlined below should commence from step 5.

However, this does not necessarily imply that using the React context in this type of situation is always ideal. React Router (page switching library) offers props delivery features between pages. In some cases, it may be beneficial to utilize props instead of establishing a global state using React Context. This ticket is designed in this manner because it can be a good practice to explore global state management via React context.

---

Notice that the API response format illustrated below is different from ticket #30, you may need to modify server/src/resume and server/src/tests/resume to match the response format. Please make sure

cd server
npm run test

passes after the modification. You may also need to reference the PR of ticket #36 and modify accordingly to retrieve appropriate state value from the global React context created by the ticket #36 .

---

Using the expected response API format, complete the reporting page.

There should be 2 classifiers in the backend,

• 1st classifier - Accountant, Designer, HR, IT(SWE, ML, QA integrated)
• 2nd classifier - SWE, ML, QA

Case 1. The provided resume belongs to any job category other than IT.

Expected response API example:

 job_matches: {
          "is_IT": "False",
          "job_name": "Accountant",
          "similarity": 5
}

Example reporting page for the JSON format above

if "is_IT" == False:

• Matching job: job_name
• Resume Score: similarity
• Any way to show "Invalid"
• Job description in the placeholder below(Wikipedia)

Case 2. The provided resume belongs to any category in IT.

Expected response API example:

 job_matches: {
          "is_IT": "True",
          "job_name": "Software Engineer",
          "similarity": 90
}

Example reporting page for the JSON format above:

if "is_IT" == True:

• Matching job: job_name
• Resume Score: similarity
• Score bar (follow the design above, however, you can make your own design if you want)
• Job description in the placeholder below(Wikipedia)

Acceptance Criteria:

• Takes response API
• Two different pages for each case(is_IT == True / False)
• Clear INVALID sign for is_IT == False case
• Matching job is the job in "job_name"
• Resume score is the similarity
• Job Description
• Write a JSDoc comment on the component illustrating what this component is about.
• Write a test with Jest and RTL to verify its rendering