init

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.9.3",
+    "@sentry/react": "^7.62.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,10 +21,8 @@
     "chartjs-plugin-zoom": "^2.0.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
-    "formik": "^2.2.9",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
-    "lt-codes": "ambrazasp/lt-codes",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
@@ -34,12 +33,12 @@
     "react-icons": "^4.8.0",
     "react-leaflet": "^4.2.1",
     "react-paginate": "^8.2.0",
+    "react-query": "^3.39.3",
     "react-redux": "^8.0.5",
     "react-resize-detector": "^8.0.4",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
-    "react-signature-canvas": "^1.0.6",
     "react-toastify": "^9.1.2",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.9",
@@ -87,10 +86,10 @@
     ]
   },
   "devDependencies": {
+    "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@types/lodash": "^4.14.192",
     "@types/react-datepicker": "^4.10.0",
     "@types/styled-components": "^5.1.26",
-    "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0"
   },

src/App.tsx

@@ -18,7 +18,7 @@ Interaction.modes.interpolate = Interpolate;
 
 moment.locale("lt");
 
-function App() {
+const App = () => {
   useEffect(() => {
     initGA();
     logPageView();
@@ -39,6 +39,6 @@ function App() {
       <ToastContainer />
     </>
   );
-}
+};
 
 export default App;

src/components/buttons/ButtonsGroup.tsx

@@ -28,7 +28,7 @@ const ButtonsGroup = ({
         <StyledButton
           type="button"
           disabled={disabled || option?.disabled}
-          key={`group-button${index}`}
+          key={`group-button-${index}`}
           selected={isSelected(option)}
           error={!!error}
           onClick={() => (disabled ? {} : onChange(option))}

src/components/buttons/IconLink.tsx

@@ -1,4 +1,3 @@
-import { eachYearOfInterval } from "date-fns/esm";
 import styled from "styled-components";
 import Icon from "../other/Icon";
 

src/components/containers/EventsTable.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { handlePagination, mapEvents } from "../../utils/functions";
+import { eventLabels } from "../../utils/texts";
+import Table, { TableData } from "../other/Table";
+
+const EventTable = ({ events, hydroPowerPlant, loading }) => {
+  const [tableData, setTableData] = useState<TableData>({ data: [] });
+  const [searchParams] = useSearchParams();
+  const { page } = Object.fromEntries([...Array.from(searchParams)]);
+
+  useEffect(() => {
+    const pageData = handlePagination({
+      data: events,
+      page: page,
+      pageSize: 40
+    });
+    setTableData({
+      data: mapEvents({ ...hydroPowerPlant!, events: pageData.slicedData }),
+      totalPages: pageData.totalPages
+    });
+  }, [page, loading, events, hydroPowerPlant]);
+
+  return (
+    <Table
+      loading={loading}
+      tableDataInfo={tableData}
+      labels={eventLabels}
+      isFilterApplied={false}
+    />
+  );
+};
+
+export default EventTable;