From b6343e55c6c22e3c7afdf4184a837c16b9790b19 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 16 Oct 2023 19:56:00 +0200 Subject: [PATCH] pagination handling --- src/App.js | 29 ++--- src/Pages/Robotics/Robots/index.js | 178 ++++++++++++++++++++--------- src/utils.js | 2 + 3 files changed, 136 insertions(+), 73 deletions(-) diff --git a/src/App.js b/src/App.js index af9df7f..0e96f82 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,6 @@ import { UserProfileProvider } from "./Contexts/UserProfileContext"; import { UsersProvider } from "./Contexts/UsersContext"; import HeaderProvider from "./Contexts/HeaderContext"; import ConsolesProvider from "./Contexts/ConsolesContext"; -import { RoboticsRobotProvider } from "./Contexts/RoboticsRobot"; export default function App() { const [notificationApi, notificationContextHolder] = @@ -45,24 +44,20 @@ export default function App() { - - + + + - - - - - + /> + diff --git a/src/Pages/Robotics/Robots/index.js b/src/Pages/Robotics/Robots/index.js index 70ec6fb..5bac544 100644 --- a/src/Pages/Robotics/Robots/index.js +++ b/src/Pages/Robotics/Robots/index.js @@ -11,7 +11,6 @@ import { notification, } from "antd"; import { useTranslation } from "react-i18next"; -import { useRoboticsRobotContext } from "../../../Contexts/RoboticsRobot"; import { useEffect, useRef, useState } from "react"; import { Constants, @@ -22,8 +21,6 @@ import { import MyPagination from "../../../Components/MyPagination"; import { Link } from "react-router-dom"; import { - EyeInvisibleOutlined, - EyeOutlined, FileTextOutlined, LoadingOutlined, PlusOutlined, @@ -54,16 +51,24 @@ function getRobotTypeString(type) { } export default function Robots() { - const robotsContext = useRoboticsRobotContext(); const { t } = useTranslation(); const [notificationApi, notificationContextHolder] = notification.useNotification(); + const [robots, setRobots] = useState([]); + const [robotsTotalPages, setRobotsTotalPages] = useState(0); const [robotsPaginationPage, setRobotsPaginationPage] = useState(1); + const robotsPaginationPageRef = useRef(1); + + const [unauthorizedRobots, setUnauthorizedRobots] = useState([]); + const [unauthorizedRobotsTotalPages, setUnauthorizedRobotsTotalPages] = + useState(0); const [ unauthorizedRobotsPaginationPage, setUnauthorizedRobotsPaginationPage, ] = useState(1); + const unauthorizedRobotsPaginationPageRef = useRef(1); + const [selectedRobotName, setSelectedRobotName] = useState(""); const [permitJoinEnabled, setPermitJoinEnabled] = useState(false); const [showAddress, setShowAddress] = useState(false); @@ -416,23 +421,26 @@ export default function Robots() { Constants.ROBOTICS_API_ADDRESS ).then((data) => { if (type === 1) { - robotsContext.setUnauthorizedRobots( + setUnauthorizedRobots( data.UnauthorizedRobots === null ? [] : data.UnauthorizedRobots ); - robotsContext.setUnauthorizedRobotsTotalPages(data.TotalPages); + setUnauthorizedRobotsTotalPages(data.TotalPages); } else { - robotsContext.setRobots(data.Robots === null ? [] : data.Robots); - robotsContext.setRobotsTotalPages(data.TotalPages); + setRobots(data.Robots === null ? [] : data.Robots); + setRobotsTotalPages(data.TotalPages); } }); }; + useEffect(() => fetchRobots(0, robotsPaginationPage), [robotsPaginationPage]); + + useEffect( + () => fetchRobots(1, unauthorizedRobotsPaginationPage), + [unauthorizedRobotsPaginationPage] + ); + useEffect(() => { - fetchRobots(0); - - fetchRobots(1); - myFetch( "/permitjoin", "GET", @@ -456,7 +464,7 @@ export default function Robots() { switch (cmd) { case ReceivedSSECommands.UpdateRobotStatus: - robotsContext.setRobots((arr) => { + setRobots((arr) => { const newArr = [...arr]; const index = arr.findIndex((x) => x.Id === body.RobotId); @@ -469,40 +477,64 @@ export default function Robots() { }); break; case ReceivedSSECommands.AddUnauthorizedRobot: - robotsContext.setUnauthorizedRobots((arr) => { - const newArr = [...arr]; + if (unauthorizedRobotsPaginationPageRef.current === 1) { + setUnauthorizedRobots((arr) => { + const newArr = [...arr]; - const index = arr.findIndex((x) => x.Id === body.Id); + const index = arr.findIndex( + (x) => x.Id === body.UnauthorizedRobot.Id + ); - if (index !== -1) { - newArr[index] = body; - } else { - newArr.push(body); - } + if (index !== -1) { + newArr[index] = body.UnauthorizedRobot; + } else { + if ( + newArr.length === + Constants.GLOBALS.ROBOTICS_UNAUTHORIZED_PAGINATION_LIMIT + ) { + newArr.pop(); + } - return newArr; - }); + newArr.unshift(body.UnauthorizedRobot); + } + + return newArr; + }); + } + + setUnauthorizedRobotsTotalPages(body.TotalPages); break; case ReceivedSSECommands.AddRobot: - robotsContext.setRobots((arr) => { - const newArr = [...arr]; + if (robotsPaginationPageRef.current === 1) { + setRobots((arr) => { + const newArr = [...arr]; - const index = arr.findIndex((x) => x.Id === body.Id); + const index = arr.findIndex((x) => x.Id === body.Robot.Id); - if (index !== -1) { - newArr[index] = body; - } else { - newArr.push(body); - } + if (index !== -1) { + newArr[index] = body.Robot; + } else { + if ( + newArr.length === + Constants.GLOBALS.ROBOTICS_ROBOTS_PAGINATION_LIMIT + ) { + newArr.pop(); + } - return newArr; - }); + newArr.unshift(body.Robot); + } + + return newArr; + }); + } + + setRobotsTotalPages(body.TotalPages); // remove from unauthorized robots - robotsContext.setUnauthorizedRobots((arr) => { + setUnauthorizedRobots((arr) => { const newArr = [...arr]; - const index = arr.findIndex((x) => x.Id === body.Id); + const index = arr.findIndex((x) => x.Id === body.Robot.Id); if (index !== -1) { newArr.splice(index, 1); @@ -510,12 +542,27 @@ export default function Robots() { return newArr; }); + + setUnauthorizedRobotsTotalPages(body.UnauthorizedRobotsTotalPages); + + // if user is on the last page and the last item is removed, we need to go back one page + if ( + unauthorizedRobotsPaginationPageRef.current > + body.UnauthorizedRobotsTotalPages + ) { + unauthorizedRobotsPaginationPageRef.current--; + setUnauthorizedRobotsPaginationPage( + unauthorizedRobotsPaginationPageRef.current + ); + } break; case ReceivedSSECommands.RemoveUnauthorizedRobot: - robotsContext.setUnauthorizedRobots((arr) => { + setUnauthorizedRobots((arr) => { const newArr = [...arr]; - const index = arr.findIndex((x) => x.Id === body); + const index = arr.findIndex( + (x) => x.Id === body.UnauthorizedRobotId + ); if (index !== -1) { newArr.splice(index, 1); @@ -523,12 +570,22 @@ export default function Robots() { return newArr; }); + + setUnauthorizedRobotsTotalPages(body.TotalPages); + + // if user is on the last page and the last item is removed, we need to go back one page + if (unauthorizedRobotsPaginationPageRef.current > body.TotalPages) { + unauthorizedRobotsPaginationPageRef.current--; + setUnauthorizedRobotsPaginationPage( + unauthorizedRobotsPaginationPageRef.current + ); + } break; case ReceivedSSECommands.RemoveRobot: - robotsContext.setRobots((arr) => { + setRobots((arr) => { const newArr = [...arr]; - const index = arr.findIndex((x) => x.Id === body); + const index = arr.findIndex((x) => x.Id === body.RobotId); if (index !== -1) { newArr.splice(index, 1); @@ -536,9 +593,17 @@ export default function Robots() { return newArr; }); + + setRobotsTotalPages(body.TotalPages); + + // if user is on the last page and the last item is removed, we need to go back one page + if (robotsPaginationPageRef.current > body.TotalPages) { + robotsPaginationPageRef.current--; + setRobotsPaginationPage(robotsPaginationPageRef.current); + } break; case ReceivedSSECommands.RobotUpdated: - robotsContext.setRobots((arr) => { + setRobots((arr) => { const newArr = [...arr]; const index = arr.findIndex((x) => x.Id === body.RobotId); @@ -551,7 +616,7 @@ export default function Robots() { }); break; case ReceivedSSECommands.UpdateRobotCurrentJob: - robotsContext.setRobots((arr) => { + setRobots((arr) => { const newArr = [...arr]; const index = arr.findIndex((x) => x.Id === body.RobotId); @@ -565,7 +630,7 @@ export default function Robots() { }); break; case ReceivedSSECommands.UpdateRobotJobsWaitingCount: - robotsContext.setRobots((arr) => { + setRobots((arr) => { const newArr = [...arr]; const index = arr.findIndex((x) => x.Id === body.RobotId); @@ -606,7 +671,7 @@ export default function Robots() { }} > - {t("robotics.robots.header")} ({robotsContext.robots.length}){" "} + {t("robotics.robots.header")}{" "} @@ -637,38 +702,39 @@ export default function Robots() { setRobotsPaginationPage(page)} - totalPages={robotsContext.robotsTotalPages} + setPaginationPage={(page) => { + setRobotsPaginationPage(page); + robotsPaginationPageRef.current = page; + }} + totalPages={robotsTotalPages} /> - {robotsContext.unauthorizedRobots.length > 0 && ( + {unauthorizedRobots.length > 0 && ( <> - {t("robotics.unauthorizedRobots.header")} ( - {robotsContext.unauthorizedRobots.length}) + {t("robotics.unauthorizedRobots.header")}
- setUnauthorizedRobotsPaginationPage(page) - } - totalPages={robotsContext.unauthorizedRobotsTotalPages} + setPaginationPage={(page) => { + setUnauthorizedRobotsPaginationPage(page); + unauthorizedRobotsPaginationPageRef.current = page; + }} + totalPages={unauthorizedRobotsTotalPages} /> )} diff --git a/src/utils.js b/src/utils.js index 64b8025..de0b73e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -111,6 +111,8 @@ export const Constants = { MAX_ROBOTICS_ROBOT_NAME_LENGTH: 30, MIN_USER_API_KEY_NAME_LENGTH: 2, MAX_USER_API_KEY_NAME_LENGTH: 30, + ROBOTICS_ROBOTS_PAGINATION_LIMIT: 10, + ROBOTICS_UNAUTHORIZED_PAGINATION_LIMIT: 10, }, MAX_AVATAR_SIZE: 5 * 1024 * 1024, ACCEPTED_AVATAR_FILE_TYPES: [