Upgraded libraries

src/index.tsx

@@ -1,14 +1,14 @@
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './page/App';
-import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from "react-router-dom";
 import {Provider} from "react-redux";
 import {eventReducer} from "./reducer/Reducer";
 import {configureStore} from "@reduxjs/toolkit";
 import {AnalyticsComponent} from './component/AnalyticsComponent';
+import {onCLS, onINP, onLCP} from 'web-vitals';
+import {sendToAnalytics} from "./utils/analyticsUtils";
 import React from 'react';
-import {sendToAnalytics} from './utils/analyticsUtils';
 
 
 const root = ReactDOM.createRoot(
@@ -35,4 +35,6 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(sendToAnalytics);
+onCLS(sendToAnalytics);
+onINP(sendToAnalytics);
+onLCP(sendToAnalytics);

src/reducer/Reducer.ts

@@ -1,9 +1,9 @@
 import {
-    Action,
     ADD_TO_SHOPPING_LIST_TYPE,
     CLEAR_ERROR_TYPE,
     CLEAR_SHOPPING_LIST_TYPE,
     CLEAR_USER_TYPE,
+    CustomAction,
     REMOVE_FROM_SHOPPING_LIST_TYPE,
     SET_CURRENT_FOOD_CONSUMPTION_TYPE,
     SET_CURRENT_ITEM_TYPE,
@@ -55,7 +55,7 @@ export const initialState: GroceryState = {
     isUserPersisted: false,
 }
 
-export function eventReducer(state: GroceryState = initialState, action: Action): GroceryState {
+export function eventReducer(state: GroceryState = initialState, action: CustomAction): GroceryState {
     switch (action.type) {
         case SET_CURRENT_ITEM_TYPE:
             return {

src/reportWebVitals.ts

@@ -1,15 +1,6 @@
-import { ReportHandler } from 'web-vitals';
+import {onCLS, onINP, onLCP} from 'web-vitals';
+import {sendToAnalytics} from "./utils/analyticsUtils";
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
+onCLS(sendToAnalytics);
+onINP(sendToAnalytics);
+onLCP(sendToAnalytics);