fix: miscellaneous fixes to table components #610
Conversation
|
Visit the preview URL for this PR (updated for commit a101fce): https://jump-math-staging--pr610-carissa-fix-search-b-b1k0j8ac.web.app (expires Mon, 06 Nov 2023 05:26:18 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c42d8d0d853b05885664a2dd73f8245f4333ae51 |
| return ( | ||
| <Center __css={styles}> | ||
| <MessageContainer | ||
| image={DisplayStudentsIllustration} |
There was a problem hiding this comment.
not the most fitting image, but i don't think we have another design for this
There was a problem hiding this comment.
Fair! Let's add a backlog ticket to ask design for a better image, but I'm fine with keeping this image for the mvp
| @@ -44,7 +44,7 @@ const Pagination = ({ | |||
| < Previous | |||
| </PaginationPrevious> | |||
| )} | |||
| <PaginationPageGroup align="center" isInline> | |||
| <HStack align="center"> | |||
There was a problem hiding this comment.
In order to maintain semantic HTML I think we should use the library's built-in components (according to here the component already sets isInline so we sidestep the deprecation), or else duplicate all the other props that the library already sets.
| {filterMenuComponent} | ||
| </HStack> | ||
| <VStack py={4} spacing={6} w="full"> | ||
| {!noResults && ( |
There was a problem hiding this comment.
Just to make sure, have you checked that we never pass in filteredData.length for this prop anywhere? That would result in filters breaking the page, so you can probably just set the filters on every filter page to a combination with no results.
| @@ -109,11 +104,13 @@ const DisplayAssessmentsPage = (): React.ReactElement => { | |||
| <SearchableTablePage | |||
| filterMenuComponent={<FilterMenu filterProps={filterOptions} />} | |||
| nameOfTableItems="assessments" | |||
| noResults={isEmpty} | |||
| noResults={(data?.tests?.length ?? 0) === 0} | |||
There was a problem hiding this comment.
You could also just do !data?.tests?.length
| @@ -100,7 +100,7 @@ const DisplayClassroomAssessmentsPage = () => { | |||
| <QueryStateHandler error={error} loading={loading}> | |||
| <SearchableTablePage | |||
| nameOfTableItems="assessments" | |||
| noResults={paginatedData.length === 0} | |||
| noResults={(data?.class?.testSessions?.length ?? 0) === 0} | |||
There was a problem hiding this comment.
Ditto
| noResults={(data?.class?.testSessions?.length ?? 0) === 0} | |
| noResults={!data?.class?.testSessions?.length} |
| <AdminTab | ||
| <SearchableTablePage | ||
| nameOfTableItems="teachers" | ||
| noResults={(teacherData?.teachers?.length ?? 0) === 0} |
There was a problem hiding this comment.
ditto
| noResults={(teacherData?.teachers?.length ?? 0) === 0} | |
| noResults={!teacherData?.teachers?.length} |
| return ( | ||
| <Center __css={styles}> | ||
| <MessageContainer | ||
| image={DisplayStudentsIllustration} |
There was a problem hiding this comment.
Fair! Let's add a backlog ticket to ask design for a better image, but I'm fine with keeping this image for the mvp
Notion ticket link
N/A
Implementation description
AdminTabwithSearchableTablePageEmptyUsersMessagefor empty admin / teacher tableisInlinewithHStacksearchto SearchBar to clear input on tab switchSteps to test
What should reviewers focus on?
Checklist