Evelyn should have the Figma designs for this functionality done soon, so check Figma and reach out to her before starting. Additional instructions below just in case you start earlier:
Add an "Import assignment from Google Classroom" button to Tasks.tsx that will open a modal CreateGCRTaskModal.tsx
If not logged into Google Classroom, display your Login button from last deliv instead!
In that modal, fetch and display the list of assignments created in GCR 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 CreateGCRTaskModal.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 Google Classroom" 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 gcrID fields. This is how we will associate a created task with a particular GCR assignment (with type = 'gcr' and gcrID being the assignment ID from GCR)
You'll need to update the task type in types.ts with a required type field and optional gcrID 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.
Upon creating an API-linked task, make sure to set type to gcr and gcrID to the assignment ID
GCR API: Task Generation
Overview:
Functionality to create autofilled tasks from API-fetched assignments
Resources:
Frontend:
Tasks.tsxthat will open a modalCreateGCRTaskModal.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 andCreateGCRTaskModal.tsx. Take a look at React composition (above) for ideasBackend:
useEffect()with async fetching in order to get the tasks from the API.typeandgcrIDfields. This is how we will associate a created task with a particular GCR assignment (withtype = 'gcr'andgcrIDbeing the assignment ID from GCR)tasktype intypes.tswith a requiredtypefield and optionalgcrIDfield. 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.typetogcrandgcrIDto the assignment ID