#457 Mark Activities Complete/Incomplete in Calendar's ProgramActivityDialog

[wendyyng]

Proposed changes

This PR resolves #457.

Minimum Requirements:

This PR adds a 'Mark Complete/Incomplete' button to the ProgramActivityDialog when the activity type is an assignment. Users can mark activities as completed or incomplete by clicking the button. The frontend sends a GET request to the backend to retrieve the activity status when the ProgramActivityDialog is open and sends a PUT request with the updated status to the backend when the button is clicked.

Stretch: The Task Alt Icon shows on the right of the activity title when the activity status is completed. This PR also adds the isLoading state for both GET and PUT requests, so the spinner shows in the button when the API request is loading. If the PUT request is successful, the success message will show in the toast/alert on the bottom left. Error handling is also included to show an error message in the toast/alert when errors occurred for both GET and PUT requests. When the GET request is not successful, the button will be disabled to avoid the user sending a PUT request.

Not required for this ticket but the close button on the bottom right is replaced by the small close icon on the top right.

Checklist

• [x] Are the issues being addressed linked to this PR?
• [x] Do all commit messages start with the issue number?
• [x] Are all code changes sufficiently tested?
• [x] Are there screenshots for UI changes?

[seidior]

@Prabhj33t I can't reproduce that screenshot that you have posted since your database is out of date; that activity doesn't exist anymore. Can you run the following commands and see if you can reproduce that behavior?

cd ~/Developer/rhizone-lms (or wherever you keep the repo)
git checkout 457-mark-task-completed-in-calendar
git pull
docker compose down && docker compose build --no-cache --pull && docker compose pull && docker compose up

Also,

The x button overlaps with the check sign here otherwise, all seems good. I approve of this ticket

For pull request approvals, make sure to mark your comments as an "approval"; it defaults to leave the review as a "comment" status, which won't count for one of @wendyyng's two approvals needed, unfortunately.

[SanazDn]

Great work! All the tasks as expected. 'Mark Complete/Incomplete' button works mark activities as completed or incomplete by clicking the button works _If I change the code to "fetch(abc.com "in ProgramActivityDialog in line 41 => it shows disable button with error "getting the assignment status" _If change the code to "204" in programsRouter in line 102 => it shows error "updating the assignment status"

[veranika-karpava]

Update 12/14:

• add space between defined variables and useEffect;
• add empty line above sendAPIGetRequest in ProgramActivityDialog;
• reorganize imports of icons from MUI in ProgramActivityDialog;
• import useState, useEffect, Dispatch, setStateAction from React in ProgramPage, ProgramActivityDialog and clean up code;
• specify the type of body of sendAPIPutRequest;
• remove async from sendAPIGetRequest in ProgramActivityDialog;
• import MouseEvent from React
• working on error handling

[seidior]

Based on valuable feedback provided by @wendyyng this morning in standup, I've modified the error message display in the toast. In many cases, it will now be much shorter, looking a little something like this:

(Contrived example, obviously; the server wouldn't send a SyntaxError. But you get the point.)

Let me know if that adequately resolves the feedback, and if it does, let's merge this PR!