Reference the Figma designs for this functionality
Add an "Import assignment from Canvas" button to Tasks.tsx that will open a modal CreateCanvasTaskModal.tsx
If not logged into Canvas, display your Login button from last deliv instead!
In that modal, fetch and display the list of assignments created in Canvas by recency. You can display in a table with buttons on each row or in clickable cards.
Assignment name
Assignment description
Assignment due date
Upon clicking an "import" button in the above table (or clicking one of the cards), display task creation inputs analogous to those in CreateTaskModal.tsx, but with autofilled information from the API
CreateTaskModal has already been coded, so if possible you should try to abstract out the shared code between that modal and CreateCanvasTaskModal.tsx. Take a look at React composition (above) for ideas
The user will also be able to edit the autofilled info before creating the task, so you should have some annotation somewhere like "Importing task "TASKNAME" from Canvas" to make sure the user knows it is linked with that assignment.
Creating the API-linked task should generate a new task like usual and add it to the same Tasks table.
Backend:
React Query should be working, so try using it to fetch data for API assignments (your life will be easier). The query client and query provider should already be coded for you.
Check your console and try to console log something upon every API fetch to make sure you are not making infinite looping queries!!
Alternatively, if React Query is not working, use a useEffect() with async fetching in order to get the tasks from the API.
See the database diagram for how tasks contain type and canvasID fields. This is how we will associate a created task with a particular Canvas assignment (with type = 'canvas' and canvasID being the assignment ID from Canvas)
You'll need to update the task type in types.ts with a required type field and optional canvasID field. This also means you'll have to update existing functionality for task creation with the type field, setting type = 'normal' for non-API-linked tasks. You can run npm run lint or npx tsc --noEmit to find errors where you need to update the code after making this type change.
Upon creating an API-linked task, make sure to set type to canvas and canvasID to the assignment ID
Canvas API: Task Generation
Overview:
Functionality to create autofilled tasks from API-fetched assignments
Resources:
Frontend:
Tasks.tsxthat will open a modalCreateCanvasTaskModal.tsxCreateTaskModal.tsx, but with autofilled information from the APICreateTaskModalhas already been coded, so if possible you should try to abstract out the shared code between that modal andCreateCanvasTaskModal.tsx. Take a look at React composition (above) for ideasBackend:
useEffect()with async fetching in order to get the tasks from the API.typeandcanvasIDfields. This is how we will associate a created task with a particular Canvas assignment (withtype = 'canvas'andcanvasIDbeing the assignment ID from Canvas)tasktype intypes.tswith a requiredtypefield and optionalcanvasIDfield. This also means you'll have to update existing functionality for task creation with thetypefield, settingtype = 'normal'for non-API-linked tasks. You can runnpm run lintornpx tsc --noEmitto find errors where you need to update the code after making this type change.typetocanvasandcanvasIDto the assignment ID