Dojo(admin) Create lessons home page. Part 2: Lessons Page #2023
Conversation
|
@HS-90 is attempting to deploy a commit to the c0d3-prod Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
@@ Coverage Diff @@
## master #2023 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 170 171 +1
Lines 2937 2953 +16
Branches 780 785 +5
=========================================
+ Hits 2937 2953 +16
|
pages/admin/lessons/new/index.tsx
Outdated
| import Link from 'next/link' | ||
| import styles from '../../../../scss/adminLessonPage.module.scss' | ||
|
|
||
| type Lesson = { |
There was a problem hiding this comment.
dont we already have a Lesson type? It should be in the graphql/index file
There was a problem hiding this comment.
The Lesson type from graphql doesn't match the lessons object type from the getApp query so it will throw a type-error . It needs to match the type shown here:
Lines 695 to 715 in a5ad3d3
,but without the array. So my current solution was to create a Lessons object mirroring what's shown in the link.
There was a problem hiding this comment.
Hmm looks the same to me. The Lesson type in the index file has currentUsers and users as fields, but those are optional fields so that shouldn't throw any errors
Line 90 in a5ad3d3
So when you use this Lesson type instead of the one you created, you say there is a type error?
There was a problem hiding this comment.
And when you use the Lesson type from index file , you use it as Lesson[] right?
There was a problem hiding this comment.
i use Lesson[] like shown above when when using the Lesson type directly imported from graphql/index.
These are the main errors showing :
Type '{ __typename?: "Challenge" | undefined; id: number; title: string; description: string; order: number; }[]' is not assignable to type 'Challenge[]'.
Property 'lessonId' is missing in type '{ __typename?: "Challenge" | undefined; id: number; title: string; description: string; order: number; }' but required in type 'Challenge'.
It appears the Challenge field from the imported Lesson type is not compatible with the Lesson type defined in the GetAppQuery
There was a problem hiding this comment.
It seems we'll need to add lessonId to getAppQuery.
There was a problem hiding this comment.
I don't have much time to think of further proposals, but here are two proposals without needing to rewrite the entire Lesson type in this file:
- Do what @flacial suggested and add lessonId to getAppQuery
- Try to use typescript utils to delete fields you don't want
Example:
interface Lesson {
title: string;
challenges: Challenge[]
}
interface Challenge {
order: number
lessonId: string
}
type removedLessonId = Omit<Challenge, "lessonId">;
type LessonType = Omit<Lesson, "challenges"> & { challenges: removedLessonId[] }
const lessons: LessonType = {
title: "Pick up kids",
challenges: [{
order: 4
}],
};I'm not super familiar with typescript, so i'm not sure this is how to best use typescript for this situation. There are maybe other ways more appropriate to implement for this situation than my given proposal.
There was a problem hiding this comment.
@anthonykhoa I ended up going with this stackoverflow: https://stackoverflow.com/questions/47914536/use-partial-in-nested-property-with-typescript
Basically modify the Lessons type from graphql to be able to accept partial keys in the AdminLessonCard file.
That way if the lessonId field from challenges is missing, Typescript will still accept the modified type.
Title: enhancement : Create a lessons homepage with Lesson Card components for Dojo(Admin).
Description:
Related to #1959
Create a lessons homepage with the ability to Add New Lessons, Edit Lessons, view questions from students for each lesson.
In this PR. The Lessons page is created. Please see screenshots below.
Included in the PR is an alteration to the
AdminLessonCardcomponent CSS. The description section of the card was assigned amin-heightto make each card look more uniform when aligned against eachother in the Lessons page.EDIT 7/7/22: In conjunction with this PR, a seperate PR for the generated query
getFlaggedExerciseshas been made #2055 . In addition, a customLessontype has been included in bothAdminLessonCardand the new lessons page. This was done so that the data types are consistent when passing them to each component.New admin lessons page screenshot:
