ReactJs 19

src/UIs/bff/reactjs/src/containers/AuditLogs/AuditLogs.tsx

@@ -1,29 +1,38 @@
 import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import Pagination from "../../components/Pagination/Pagination";
-import * as actions from "./actions";
+import axios from "./axios";
 
 const AuditLogs = () => {
   const [pageTitle] = useState("Audit Logs");
   const [currentPage, setCurrentPage] = useState(1);
+  const [auditLogs, setAuditLogs] = useState([]);
+  const [totalItems, setTotalItems] = useState(0);
   const pageSize = 5;
-  const dispatch = useDispatch();
-
-  const { auditLogs, totalItems } = useSelector((state: any) => state.auditLog);
 
   useEffect(() => {
-    dispatch(actions.fetchAuditLogs(currentPage, pageSize));
-  }, [dispatch]);
+    fetchAuditLogs(currentPage, pageSize);
+  }, []);
+
+  const fetchAuditLogs = async (currentPage: number, pageSize: number) => {
+    try {
+      const response = await axios.get("paged?page=" + currentPage + "&pageSize=" + pageSize);
+      const data = response.data;
+      setAuditLogs(data.items);
+      setTotalItems(data.totalItems);
+    } catch (error) {
+      //
+    }
+  };
 
-  const formatDateTime = (value) => {
+  const formatDateTime = (value: string) => {
     if (!value) return value;
-    var date = new Date(value);
+    const date = new Date(value);
     return date.toLocaleDateString() + " " + date.toLocaleTimeString();
   };
 
-  const pageSelected = (page) => {
+  const pageSelected = async (page: number) => {
     setCurrentPage(page);
-    dispatch(actions.fetchAuditLogs(page, pageSize));
+    await fetchAuditLogs(page, pageSize);
   };
 
   const rows = auditLogs?.map((auditLog) => (

src/UIs/bff/reactjs/src/containers/Files/ListFiles/ListFiles.tsx

@@ -3,19 +3,17 @@ import { NavLink } from "react-router-dom";
 import { Modal, Button } from "react-bootstrap";
 import axios from "../axios";
 
-type Props = {};
-
 type State = {
   pageTitle: string;
   showDeleteModal: boolean;
-  deletingFile: any;
+  deletingFile: {};
   showAuditLogsModal: boolean;
-  files: any;
-  auditLogs: any;
-  errorMessage: any;
+  files: [];
+  auditLogs: [];
+  errorMessage: string;
 };
 
-class ListFiles extends Component<Props, State> {
+class ListFiles extends Component<State> {
   state = {
     pageTitle: "Files",
     showDeleteModal: false,
@@ -79,7 +77,7 @@ class ListFiles extends Component<Props, State> {
     }
   };
 
-  formatDateTime = (value) => {
+  formatDateTime = (value: string) => {
     if (!value) return value;
     const date = new Date(value);
     return date.toLocaleDateString() + " " + date.toLocaleTimeString();

src/UIs/bff/reactjs/src/index.tsx

@@ -9,8 +9,6 @@ import "./index.css";
 import App from "./App";
 import { loadUser, isAuthenticated } from "./containers/Auth/authService";
 import authReducer from "./containers/Auth/reducer";
-import auditLogReducer from "./containers/AuditLogs/reducer";
-import { watchAuditLog } from "./containers/AuditLogs/sagas";
 import configurationEntryReducer from "./containers/Settings/reducer";
 import { watchConfigurationEntry } from "./containers/Settings/sagas";
 import productReducer from "./containers/Products/reducer";
@@ -23,7 +21,6 @@ const rootReducer = combineReducers({
   configurationEntry: configurationEntryReducer,
   product: productReducer,
   user: userReducer,
-  auditLog: auditLogReducer,
 });
 
 const sagaMiddleware = createSagaMiddleware();
@@ -38,27 +35,26 @@ const store = configureStore({
 sagaMiddleware.run(watchConfigurationEntry);
 sagaMiddleware.run(watchProduct);
 sagaMiddleware.run(watchUser);
-sagaMiddleware.run(watchAuditLog);
 
 loadUser()
-  .then((user) => {
-    if (isAuthenticated()) {
-      store.dispatch({
-        type: "LOGIN",
-        user: { access_token: user!.access_token, expires_in: user!.expires_in },
-      });
-    }
-  })
-  .finally(() => {
-    const container = document.getElementById("root");
-    const root = createRoot(container!);
-    root.render(
-      <React.StrictMode>
-        <Provider store={store}>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </Provider>
-      </React.StrictMode>
-    );
-  });
+    .then((user) => {
+        if (isAuthenticated()) {
+            store.dispatch({
+                type: "LOGIN",
+                user: { access_token: user!.access_token, expires_in: user!.expires_in },
+            });
+        }
+    })
+    .finally(() => {
+        const container = document.getElementById("root");
+        const root = createRoot(container!);
+        root.render(
+            <React.StrictMode>
+                <Provider store={store}>
+                    <BrowserRouter>
+                        <App />
+                    </BrowserRouter>
+                </Provider>
+            </React.StrictMode>
+        );
+    });

src/UIs/reactjs/src/containers/AuditLogs/AuditLogs.tsx

@@ -1,29 +1,38 @@
 import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import Pagination from "../../components/Pagination/Pagination";
-import * as actions from "./actions";
+import axios from "./axios";
 
 const AuditLogs = () => {
   const [pageTitle] = useState("Audit Logs");
   const [currentPage, setCurrentPage] = useState(1);
+  const [auditLogs, setAuditLogs] = useState([]);
+  const [totalItems, setTotalItems] = useState(0);
   const pageSize = 5;
-  const dispatch = useDispatch();
-
-  const { auditLogs, totalItems } = useSelector((state: any) => state.auditLog);
 
   useEffect(() => {
-    dispatch(actions.fetchAuditLogs(currentPage, pageSize));
-  }, [dispatch]);
+    fetchAuditLogs(currentPage, pageSize);
+  }, []);
+
+  const fetchAuditLogs = async (currentPage: number, pageSize: number) => {
+    try {
+      const response = await axios.get("paged?page=" + currentPage + "&pageSize=" + pageSize);
+      const data = response.data;
+      setAuditLogs(data.items);
+      setTotalItems(data.totalItems);
+    } catch (error) {
+      //
+    }
+  };
 
-  const formatDateTime = (value) => {
+  const formatDateTime = (value: string) => {
     if (!value) return value;
-    var date = new Date(value);
+    const date = new Date(value);
     return date.toLocaleDateString() + " " + date.toLocaleTimeString();
   };
 
-  const pageSelected = (page) => {
+  const pageSelected = async (page: number) => {
     setCurrentPage(page);
-    dispatch(actions.fetchAuditLogs(page, pageSize));
+    await fetchAuditLogs(page, pageSize);
   };
 
   const rows = auditLogs?.map((auditLog) => (