update styles to cdn

public/index.html

@@ -12,6 +12,12 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-grid.css" />
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-theme-alpine.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/Consents/Consents.tsx

@@ -5,12 +5,10 @@ import {
   CsvExportParams,
   GridApi,
   GridReadyEvent,
-  RowNode,
+  IRowNode,
   RowSelectedEvent,
   ValueFormatterParams,
 } from 'ag-grid-community'
-import 'ag-grid-community/dist/styles/ag-grid.css'
-import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 import { AgGridReact } from 'ag-grid-react'
 import { DateTime } from 'luxon'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
@@ -26,9 +24,9 @@ import './muiPaginationOverrides.scss'
 const Consents: React.FC = () => {
   const [gridApi, setGridApi] = useState<GridApi | null>(null)
   const [search, setSearch] = useState<string>('')
-  const [selectedNodes, setSelectedNodes] = useState<RowNode[]>([])
+  const [selectedNodes, setSelectedNodes] = useState<IRowNode[]>([])
   const [isShowingSelection, setIsShowingSelection] = useState<boolean>(false)
-  const [openDowloadModal, setOpenDowloadModal] = useState<boolean>(false)
+  const [openDownloadModal, setOpenDownloadModal] = useState<boolean>(false)
   const [consents, setConsents] = useState<IConsent[]>([])
   const [page, setPage] = useState<number>(0)
   const [rowsPerPage, setRowsPerPage] = useState<number>(50)
@@ -39,7 +37,7 @@ const Consents: React.FC = () => {
   }, [])
 
   const toggleOpenModal = useCallback(() => {
-    setOpenDowloadModal(prev => !prev)
+    setOpenDownloadModal(prev => !prev)
   }, [])
 
   const defaultColDef = useMemo(
@@ -141,8 +139,7 @@ const Consents: React.FC = () => {
         .map(node => node.data.ID)
 
       newNodes.forEach(node => {
-        if (idsToCheck.includes(node.data.ID))
-          node.setSelected(true, false, true)
+        if (idsToCheck.includes(node.data.ID)) node.setSelected(true, false)
       })
     }
   }, [gridApi, selectedNodes])
@@ -204,10 +201,10 @@ const Consents: React.FC = () => {
       const newNodes = gridApi.getRenderedNodes()
       // We have to select nodes that have already been selected since we cannot pass a Node array to init AgGrid
       const idsToCheck: string[] = selectedNodes
-        .filter((node: RowNode) => node.isSelected)
-        .map((node: RowNode) => node.data.ID)
+        .filter(node => node.isSelected)
+        .map(node => node.data.ID)
 
-      newNodes.forEach((node: RowNode) => {
+      newNodes.forEach(node => {
         if (idsToCheck.includes(node.data.ID)) node.setSelected(true)
       })
     }
@@ -215,7 +212,7 @@ const Consents: React.FC = () => {
 
   const showCurrentSelection = useCallback(() => {
     setIsShowingSelection(true)
-    const dataFromNode = selectedNodes.map((item: RowNode) => item.data)
+    const dataFromNode = selectedNodes.map(item => item.data)
     selectedNodes && gridApi?.setRowData(dataFromNode)
     gridApi?.selectAll()
   }, [gridApi, selectedNodes])
@@ -226,7 +223,7 @@ const Consents: React.FC = () => {
       columnSeparator: ',',
     }
     gridApi?.exportDataAsCsv(params)
-    setOpenDowloadModal(false)
+    setOpenDownloadModal(false)
     resetSelection()
   }, [gridApi, resetSelection])
 
@@ -306,7 +303,7 @@ const Consents: React.FC = () => {
           )}
         </div>
         <DownloadModal
-          open={openDowloadModal}
+          open={openDownloadModal}
           toggleOpenModal={toggleOpenModal}
           exportData={exportData}
         />