style: expired consents are now less visible

src/components/Consents/Consents.tsx

@@ -153,25 +153,26 @@ const Consents: React.FC = () => {
     }
   }, [gridApi, selectedNodes])
 
-  const handleSearchChange = useCallback(
-    async (newSearch: string) => {
-      setSearch(newSearch)
-      if (user) {
-        const consentPagination = await consentService.searchConsents(
-          newSearch,
-          rowsPerPage,
-          page,
-          getAxiosXSRFHeader(user.xsrftoken)
-        )
-        if (consentPagination) {
-          setConsents(consentPagination.rows)
-          checkSelectedNodes()
-          setTotalRows(consentPagination.totalRows)
-        }
+  const searchConsents = async () => {
+    if (user) {
+      const consentPagination = await consentService.searchConsents(
+        search,
+        rowsPerPage,
+        page,
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
+      if (consentPagination) {
+        setConsents(consentPagination.rows)
+        checkSelectedNodes()
+        setTotalRows(consentPagination.totalRows)
       }
-    },
-    [user, consentService, rowsPerPage, page, checkSelectedNodes]
-  )
+    }
+  }
+
+  const handleSearchChange = (newSearch: string) => {
+    setSearch(newSearch)
+    setPage(0)
+  }
 
   const resetSelection = useCallback(() => {
     if (gridApi) {
@@ -252,12 +253,12 @@ const Consents: React.FC = () => {
     }
   }, [gridApi])
 
-  /** Trigger search when page loads or when admin changes pagination */
+  /** Trigger search when page loads or when admin changes input or pagination */
   useEffect(() => {
-    handleSearchChange(search)
+    searchConsents()
     // /!\ Do not change dependencies or effect will not trigger when pagination changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowsPerPage, page])
+  }, [rowsPerPage, page, search])
 
   return (
     <>
@@ -299,6 +300,9 @@ const Consents: React.FC = () => {
             rowMultiSelectWithClick={true}
             pagination={false}
             suppressCellFocus={true}
+            rowClassRules={{
+              expired: (params) => params.data.endDate < DateTime.now(),
+            }}
           ></AgGridReact>
           {!isShowingSelection && (
             <TablePagination

src/components/Consents/agGridOverrides.scss

@@ -10,10 +10,14 @@
 .ag-header-cell-text {
   color: $gold;
 }
-.ag-row-odd,
-.ag-row-even {
+.ag-row {
   background: transparent !important;
   transition: all 300ms ease !important;
+  &.expired {
+    * {
+      color: $text-chart;
+    }
+  }
 }
 .ag-cell-focus {
   outline: none !important;