Skip to content

Commit

Permalink
ReactJs 19
Browse files Browse the repository at this point in the history
  • Loading branch information
@phongnguyend
phongnguyend committed Dec 25, 2024
1 parent 26a5567 commit 80aed93
Show file tree
Hide file tree
Showing 22 changed files with 2,659 additions and 5,109 deletions.
2,732 changes: 975 additions & 1,757 deletions src/UIs/bff/reactjs/package-lock.json
View file

Large diffs are not rendered by default.

57 changes: 29 additions & 28 deletions src/UIs/bff/reactjs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,37 @@
"preview": "vite preview"
},
"dependencies": {
"@microsoft/signalr": "^8.0.0",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/jest": "^29.5.11",
"@types/node": "^20.10.5",
"axios": "^1.6.2",
"bootstrap": "^5.3.2",
"@microsoft/signalr": "^8.0.7",
"@reduxjs/toolkit": "^2.5.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.14",
"@types/node": "^22.10.2",
"axios": "^1.7.9",
"bootstrap": "^5.3.3",
"font-awesome": "^4.7.0",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-datepicker": "^4.25.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-router-dom": "^6.21.0",
"react-toastify": "^9.1.3",
"redux": "^4.2.1",
"redux-saga": "^1.2.3"
"react": "^19.0.0",
"react-bootstrap": "^2.10.7",
"react-datepicker": "^7.5.0",
"react-dom": "^19.0.0",
"react-redux": "^9.2.0",
"react-router-dom": "^7.1.1",
"react-toastify": "^11.0.2",
"redux": "^5.0.1",
"redux-saga": "^1.3.0"
},
"devDependencies": {
"prettier": "3.1.1",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@typescript-eslint/eslint-plugin": "^8.18.2",
"@typescript-eslint/parser": "^8.18.2",
"@vitejs/plugin-react-swc": "^3.7.2",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.16",
"prettier": "3.4.2",
"typescript": "^5.7.2",
"vite": "^6.0.5"
}
}
101 changes: 59 additions & 42 deletions src/UIs/bff/reactjs/src/components/Pagination/Pagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,62 @@
import { Pagination as BootstrapPagination } from "react-bootstrap";

const Pagination = (props) => {
const { totalItems, currentPage, pageSize } = props;
const totalPages = Math.ceil(totalItems / pageSize);

const pageNumbers: Array<number> = [];
let startIndex = currentPage - 2;
let endIndex = currentPage + 2;

if (startIndex < 1) {
endIndex = endIndex + (1 - startIndex);
startIndex = 1;
}

if (endIndex > totalPages) {
startIndex = startIndex - (endIndex - totalPages);
endIndex = totalPages;
}

startIndex = Math.max(startIndex, 1);
endIndex = Math.min(endIndex, totalPages);

for (let i = startIndex; i <= endIndex; i++) {
pageNumbers.push(i);
}

const pageSelected = (page: number) => {
props.pageSelected(page);
}

const pageItems = pageNumbers.map((index) => (
<BootstrapPagination.Item active={currentPage === index} onClick={() => pageSelected(index)}>{index}</BootstrapPagination.Item>
));

return (<BootstrapPagination>
<BootstrapPagination.First disabled={currentPage === 1} onClick={() => pageSelected(1)} />
<BootstrapPagination.Prev disabled={currentPage === 1} onClick={() => pageSelected(currentPage - 1)} />
{pageItems}
<BootstrapPagination.Next disabled={currentPage === totalPages} onClick={() => pageSelected(currentPage + 1)} />
<BootstrapPagination.Last disabled={currentPage === totalPages} onClick={() => pageSelected(totalPages)} />
</BootstrapPagination>);
}

export default Pagination;
const { totalItems, currentPage, pageSize } = props;
const totalPages = Math.ceil(totalItems / pageSize);

const pageNumbers: Array<number> = [];
let startIndex = currentPage - 2;
let endIndex = currentPage + 2;

if (startIndex < 1) {
endIndex = endIndex + (1 - startIndex);
startIndex = 1;
}

if (endIndex > totalPages) {
startIndex = startIndex - (endIndex - totalPages);
endIndex = totalPages;
}

startIndex = Math.max(startIndex, 1);
endIndex = Math.min(endIndex, totalPages);

for (let i = startIndex; i <= endIndex; i++) {
pageNumbers.push(i);
}

const pageSelected = (page: number) => {
props.pageSelected(page);
};

const pageItems = pageNumbers.map((index) => (
<BootstrapPagination.Item
key={index}
active={currentPage === index}
onClick={() => pageSelected(index)}
>
{index}
</BootstrapPagination.Item>
));

return (
<BootstrapPagination>
<BootstrapPagination.First disabled={currentPage === 1} onClick={() => pageSelected(1)} />
<BootstrapPagination.Prev
disabled={currentPage === 1}
onClick={() => pageSelected(currentPage - 1)}
/>
{pageItems}
<BootstrapPagination.Next
disabled={currentPage === totalPages}
onClick={() => pageSelected(currentPage + 1)}
/>
<BootstrapPagination.Last
disabled={currentPage === totalPages}
onClick={() => pageSelected(totalPages)}
/>
</BootstrapPagination>
);
};

export default Pagination;
60 changes: 42 additions & 18 deletions src/UIs/bff/reactjs/src/containers/Files/EditFile/EditFile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { useEffect, useState } from "react";
import { NavLink, Navigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Modal } from "react-bootstrap";

import * as actions from "../actions";
import { checkValidity } from "../../../shared/utility";
import axios from "../axios";

const EditFile = (props) => {
const EditFile = () => {
const [state, setState] = useState({
title: "Edit File",
controls: {
Expand Down Expand Up @@ -39,18 +38,38 @@ const EditFile = (props) => {
submitted: false,
showAuditLogsModal: false,
errorMessage: null,
saved: false,
});

const [file, setFile] = useState({});
const [auditLogs, setAuditLogs] = useState([]);

const { id } = useParams();
const { file, saved, auditLogs } = useSelector((state: any) => state.file);
const dispatch = useDispatch();
const fetchFile = (id) => dispatch(actions.fetchFile(id));
const updateFile = (file) => dispatch(actions.updateFile(file));
const resetFile = () => dispatch(actions.resetFile());
const saveFile = (file) => dispatch(actions.saveFile(file));
const fetchAuditLogs = (file) => dispatch(actions.fetchAuditLogs(file));

const fetchFile = async (id) => {
try {
const response = await axios.get(id);
setFile(response.data);
} catch (error) {
//
}
};
const updateFile = (file) => {
setFile(file);
};
const saveFile = async (file) => {
try {
const response = await axios.put(file.id, file);
setFile(response.data);
setState((preState) => {
return { ...preState, saved: true };
});
} catch (error) {
console.log(error);
}
};

useEffect(() => {
resetFile();
if (id) {
fetchFile(id);
}
Expand Down Expand Up @@ -85,7 +104,7 @@ const EditFile = (props) => {
return validationRs.isValid;
};

const onSubmit = (event) => {
const onSubmit = async (event) => {
event.preventDefault();
setState({ ...state, submitted: true });
let isValid = true;
Expand All @@ -94,18 +113,23 @@ const EditFile = (props) => {
}

if (isValid) {
saveFile(file);
await saveFile(file);
}
};

const viewAuditLogs = () => {
fetchAuditLogs(file);
setState({ ...state, showAuditLogsModal: true });
const viewAuditLogs = async () => {
try {
const response = await axios.get(file.id + "/auditLogs");
setAuditLogs(response.data);
setState({ ...state, showAuditLogsModal: true });
} catch (error) {
//
}
};

const formatDateTime = (value) => {
if (!value) return value;
var date = new Date(value);
const date = new Date(value);
return date.toLocaleDateString() + " " + date.toLocaleTimeString();
};

Expand Down Expand Up @@ -259,7 +283,7 @@ const EditFile = (props) => {
</Modal>
);

return state.submitted && saved ? (
return state.submitted && state.saved ? (
<Navigate to={"/files"} />
) : (
<div>
Expand Down
Loading

0 comments on commit 80aed93

Please sign in to comment.