fix: show search filters unconditionally (#606)

uwblueprint · Oct 30, 2023 · 5049a31 · 5049a31
1 parent bba09bf
commit 5049a31
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 20 deletions.
diff --git a/frontend/src/components/admin/user-management/admin/AdminTab.tsx b/frontend/src/components/admin/user-management/admin/AdminTab.tsx
@@ -11,7 +11,7 @@ interface AdminTabProps<SortPropTypes extends readonly string[]> {
   searchBarComponent: React.ReactElement<SearchBarProps>;
   UserTable: React.ReactElement<AdminUser[] | TeacherUser[]>;
   search: string;
-  searchLength: number;
+  resultsLength: number;
 }
 
 export interface AdminTableProps {
@@ -26,7 +26,7 @@ const AdminTab = <SortPropTypes extends readonly string[]>({
   searchBarComponent,
   UserTable,
   search,
-  searchLength,
+  resultsLength,
 }: AdminTabProps<SortPropTypes>): React.ReactElement => {
   return (
     <>
@@ -37,10 +37,14 @@ const AdminTab = <SortPropTypes extends readonly string[]>({
         </HStack>
         {search && (
           <Text color="grey.300" fontSize="16px" width="100%">
-            Showing {searchLength} results for &quot;{search}&quot;
+            Showing {resultsLength} results for &quot;{search}&quot;
           </Text>
         )}
-        {searchLength !== 0 ? UserTable : <NoResultsTableState items="users" />}
+        {resultsLength !== 0 ? (
+          UserTable
+        ) : (
+          <NoResultsTableState items="users" />
+        )}
       </VStack>
     </>
   );

diff --git a/frontend/src/components/common/table/SearchableTablePage.tsx b/frontend/src/components/common/table/SearchableTablePage.tsx
@@ -14,7 +14,7 @@ interface SearchableTablePageProps<T, SortPropTypes extends readonly string[]> {
   searchBarComponent: React.ReactElement<SearchBarProps>;
   tableComponent: React.ReactElement<T[]>;
   search: string;
-  searchLength: number;
+  resultsLength: number;
   nameOfTableItems: string;
 }
 
@@ -26,7 +26,7 @@ const SearchableTablePage = <T, SortPropTypes extends readonly string[]>({
   searchBarComponent,
   tableComponent,
   search,
-  searchLength,
+  resultsLength,
   nameOfTableItems,
 }: SearchableTablePageProps<T, SortPropTypes>): React.ReactElement => {
   const emptyResults = noResults ? (
@@ -37,20 +37,18 @@ const SearchableTablePage = <T, SortPropTypes extends readonly string[]>({
   return (
     <>
       <VStack pt={4} spacing={6} w="full">
-        {searchLength !== 0 && (
-          <HStack width="100%">
-            {searchBarComponent}
-            {sortMenuComponent}
-            {filterMenuComponent}
-          </HStack>
-        )}
+        <HStack width="100%">
+          {searchBarComponent}
+          {sortMenuComponent}
+          {filterMenuComponent}
+        </HStack>
         {search && (
           <Text color="grey.300" fontSize="16px" width="100%">
-            Showing {searchLength} results for &quot;
+            Showing {resultsLength} results for &quot;
             {search}&quot;
           </Text>
         )}
-        {searchLength !== 0 ? tableComponent : emptyResults}
+        {resultsLength !== 0 ? tableComponent : emptyResults}
       </VStack>
     </>
   );

diff --git a/frontend/src/components/pages/admin/DisplayAssessmentsPage.tsx b/frontend/src/components/pages/admin/DisplayAssessmentsPage.tsx
@@ -111,9 +111,9 @@ const DisplayAssessmentsPage = (): React.ReactElement => {
           nameOfTableItems="assessments"
           noResults={isEmpty}
           noResultsComponent={<EmptyTestsMessage />}
+          resultsLength={assessments.length}
           search={search}
           searchBarComponent={<SearchBar onSearch={setSearch} />}
-          searchLength={assessments.length}
           sortMenuComponent={
             <SortMenu
               initialSortOrder="descending"

diff --git a/frontend/src/components/pages/admin/UsersPage.tsx b/frontend/src/components/pages/admin/UsersPage.tsx
@@ -107,9 +107,9 @@ const UsersPage = (): React.ReactElement => {
           <TabPanels>
             <TabPanel padding="0">
               <AdminTab
+                resultsLength={admins.length}
                 search={search}
                 searchBarComponent={<SearchBar onSearch={setSearch} />}
-                searchLength={admins.length}
                 sortMenuComponent={
                   <SortMenu
                     labels={["name", "email"]}
@@ -123,9 +123,9 @@ const UsersPage = (): React.ReactElement => {
             </TabPanel>
             <TabPanel padding="0">
               <AdminTab
+                resultsLength={teachers.length}
                 search={search}
                 searchBarComponent={<SearchBar onSearch={setSearch} />}
-                searchLength={teachers.length}
                 sortMenuComponent={
                   <SortMenu
                     labels={["name", "email", "school"]}

diff --git a/...end/src/components/pages/teacher/DisplayClassroomPage/DisplayClassroomAssessmentsPage.tsx b/...end/src/components/pages/teacher/DisplayClassroomPage/DisplayClassroomAssessmentsPage.tsx
@@ -108,9 +108,9 @@ const DisplayClassroomAssessmentsPage = () => {
             isActive={data?.class.isActive}
           />
         }
+        resultsLength={paginatedData.length}
         search={search}
         searchBarComponent={<SearchBar onSearch={setSearch} />}
-        searchLength={paginatedData.length}
         sortMenuComponent={
           <SortMenu
             initialSortOrder={sortOrder}

diff --git a/frontend/src/components/pages/teacher/DisplayClassroomPage/DisplayClassroomStudentsPage.tsx b/frontend/src/components/pages/teacher/DisplayClassroomPage/DisplayClassroomStudentsPage.tsx
@@ -60,9 +60,9 @@ const DisplayClassroomStudentsPage = ({
             onClick={onCreateStudent}
           />
         }
+        resultsLength={students.length}
         search={search}
         searchBarComponent={<SearchBar onSearch={setSearch} />}
-        searchLength={students.length}
         sortMenuComponent={
           <SortMenu
             initialSortOrder="descending"