From 1cbbe12bd8374cecebf6f704fca0b93936fd7602 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <maxfrederiksen@Maxs-MacBook-Air.local>
Date: Wed, 13 Nov 2024 13:21:51 +0100
Subject: [PATCH] Record/Job components
---
src/components/records/RecordSearch.jsx | 61 ++++-------------------
src/views/jobs/JobListView.jsx | 58 +++-------------------
src/views/records/RecordListView.jsx | 64 ++++---------------------
3 files changed, 22 insertions(+), 161 deletions(-)
diff --git a/src/components/records/RecordSearch.jsx b/src/components/records/RecordSearch.jsx
index ff07e9aa..61cfba00 100644
--- a/src/components/records/RecordSearch.jsx
+++ b/src/components/records/RecordSearch.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState, useContext, useMemo } from "react";
+import { useEffect, useCallback, useState, useContext } from "react";
import { initRequestParams } from "../common/Helper";
import { RecordTable } from "./RecordTable";
import useUrlState from "@ahooksjs/use-url-state";
@@ -23,35 +23,14 @@ export function RecordSearch({ iocName, rowType }) {
const [urlState, setUrlState] = useUrlState(
{
- record_tab: "0",
- rows: "20",
- page: "0",
query: ""
},
{ navigateMode: "replace" }
);
const [recordFilter, setRecordFilter] = useState();
+ const [tabIndex, setTabIndex] = useState(0);
- const handleTabChange = useCallback(
- (event, tab) => {
- setUrlState((s) =>
- serialize(s.record_tab) === serialize(tab)
- ? { record_tab: serialize(tab) }
- : { record_tab: serialize(tab), page: "0" }
- );
-
- changeTab(tab);
- },
- [setUrlState]
- );
-
- useEffect(() => {
- if (urlState.record_tab) {
- changeTab(deserialize(urlState.record_tab));
- }
- }, [urlState]);
-
- const changeTab = (tab) => {
+ const handleTabChange = (tab) => {
if (tab === 0) {
setRecordFilter(null);
} else if (tab === 1) {
@@ -59,28 +38,15 @@ export function RecordSearch({ iocName, rowType }) {
} else if (tab === 2) {
setRecordFilter("INACTIVE");
}
+ setTabIndex(tab);
};
- const urlPagination = useMemo(() => {
- return {
- rows: deserialize(urlState.rows),
- page: deserialize(urlState.page)
- };
- }, [urlState.rows, urlState.page]);
-
- const setUrlPagination = useCallback(
- ({ rows, page }) => {
- setUrlState({ rows: serialize(rows), page: serialize(page) });
- },
- [setUrlState]
- );
-
const rowsPerPage = [20, 50];
const { pagination, setPagination, setTotalCount } = usePagination({
rowsPerPageOptions: rowsPerPage,
- initLimit: urlPagination.rows ?? rowsPerPage[0],
- initPage: urlPagination.page ?? 0
+ initLimit: rowsPerPage[0],
+ initPage: 0
});
// update pagination whenever search result total pages change
@@ -88,17 +54,6 @@ export function RecordSearch({ iocName, rowType }) {
setTotalCount(records?.totalCount ?? 0);
}, [records?.totalCount, setTotalCount]);
- // whenever url state changes, update pagination
- useEffect(() => {
- setPagination({ ...urlPagination });
- }, [setPagination, urlPagination]);
-
- // whenever table pagination internally changes (user clicks next page etc)
- // update the row params
- useEffect(() => {
- setUrlPagination(pagination);
- }, [pagination, setUrlPagination]);
-
// Request new search results whenever search or pagination changes
useEffect(() => {
let requestParams = initRequestParams(pagination);
@@ -134,8 +89,8 @@ export function RecordSearch({ iocName, rowType }) {
>
<Grid item>
<Tabs
- value={deserialize(urlState.record_tab)}
- onChange={handleTabChange}
+ value={tabIndex}
+ onChange={(_, tab) => handleTabChange(tab)}
>
<Tab label="All" />
<Tab label="Only active" />
diff --git a/src/views/jobs/JobListView.jsx b/src/views/jobs/JobListView.jsx
index 9449ba16..a8162ca4 100644
--- a/src/views/jobs/JobListView.jsx
+++ b/src/views/jobs/JobListView.jsx
@@ -1,4 +1,4 @@
-import { useContext, useCallback, useMemo, useEffect } from "react";
+import { useContext, useCallback, useEffect } from "react";
import { Box } from "@mui/material";
import {
RootPaper,
@@ -7,11 +7,6 @@ import {
usePolling
} from "@ess-ics/ce-ui-common";
import { initRequestParams } from "../../components/common/Helper";
-import useUrlState from "@ahooksjs/use-url-state";
-import {
- serialize,
- deserialize
-} from "../../components/common/URLState/URLState";
import { JobTable } from "../../components/Job/JobTable";
import { apiContext } from "../../api/DeployApi";
@@ -29,38 +24,12 @@ export function JobListView() {
call: false
});
- const [urlState, setUrlState] = useUrlState(
- {
- rows: "20",
- page: "0",
- query: ""
- },
- { navigateMode: "replace" }
- );
-
- const urlPagination = useMemo(() => {
- return {
- rows: deserialize(urlState.rows),
- page: deserialize(urlState.page)
- };
- }, [urlState.rows, urlState.page]);
-
- const setUrlPagination = useCallback(
- ({ rows, page }) => {
- setUrlState({
- rows: serialize(rows),
- page: serialize(page)
- });
- },
- [setUrlState]
- );
-
const rowsPerPage = [20, 50];
const { pagination, setPagination } = usePagination({
rowsPerPageOptions: rowsPerPage,
- initLimit: urlPagination.rows ?? rowsPerPage[0],
- initPage: urlPagination.page ?? 0
+ initLimit: rowsPerPage[0],
+ initPage: 0
});
// update pagination whenever search result total pages change
@@ -68,25 +37,10 @@ export function JobListView() {
setPagination({ totalCount: jobs?.totalCount ?? 0 });
}, [setPagination, jobs?.totalCount]);
- // whenever url state changes, update pagination
- useEffect(() => {
- setPagination({ ...urlPagination });
- }, [setPagination, urlPagination]);
-
- // whenever table pagination internally changes (user clicks next page etc)
- // update the row params
- useEffect(() => {
- setUrlPagination(pagination);
- }, [pagination, setUrlPagination]);
-
const callGetOperations = useCallback(() => {
- let requestParams = initRequestParams(
- urlPagination,
- deserialize(urlState.query)
- );
-
+ let requestParams = initRequestParams(pagination);
getJobs(requestParams);
- }, [getJobs, urlPagination, urlState.query]);
+ }, [getJobs, pagination]);
// Request new search results whenever search or pagination changes
useEffect(() => {
@@ -95,7 +49,7 @@ export function JobListView() {
return () => {
abort();
};
- }, [callGetOperations, abort]);
+ }, [abort, callGetOperations, pagination]);
usePolling(callGetOperations, loading, 30000, abort, false);
diff --git a/src/views/records/RecordListView.jsx b/src/views/records/RecordListView.jsx
index b4c6bc2d..297eb79f 100644
--- a/src/views/records/RecordListView.jsx
+++ b/src/views/records/RecordListView.jsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useContext, useEffect } from "react";
+import { useState, useCallback, useContext, useEffect } from "react";
import { Container, Grid, Tabs, Tab } from "@mui/material";
import {
GlobalAppBarContext,
@@ -38,30 +38,15 @@ export function RecordListView() {
const [urlState, setUrlState] = useUrlState(
{
- tab: "0",
- rows: "20",
- page: "0",
query: ""
},
{ navigateMode: "replace" }
);
+ const [tabIndex, setTabIndex] = useState(0);
const [recordFilter, setRecordFilter] = useState(null);
// used to request record list again when tab is switched, but request it only once! (totalRecord is a random number that is generated by ChannelFinder)
- const handleTabChange = useCallback(
- (event, tab) => {
- setUrlState((s) =>
- serialize(s.tab) === serialize(tab)
- ? { tab: serialize(tab) }
- : { tab: serialize(tab), page: "0" }
- );
-
- changeTab(tab);
- },
- [setUrlState]
- );
-
- const changeTab = (tab) => {
+ const handleTabChange = (tab) => {
if (tab === 0) {
setRecordFilter(null);
} else if (tab === 1) {
@@ -69,37 +54,15 @@ export function RecordListView() {
} else if (tab === 2) {
setRecordFilter("INACTIVE");
}
+ setTabIndex(tab);
};
- useEffect(() => {
- if (urlState.tab) {
- changeTab(deserialize(urlState.tab));
- }
- }, [urlState]);
-
- const urlPagination = useMemo(() => {
- return {
- rows: deserialize(urlState.rows),
- page: deserialize(urlState.page)
- };
- }, [urlState.rows, urlState.page]);
-
- const setUrlPagination = useCallback(
- ({ rows, page }) => {
- setUrlState({
- rows: serialize(rows),
- page: serialize(page)
- });
- },
- [setUrlState]
- );
-
const rowsPerPage = [20, 50];
const { pagination, setPagination, setTotalCount } = usePagination({
rowsPerPageOptions: rowsPerPage,
- initLimit: urlPagination.rows ?? rowsPerPage[0],
- initPage: urlPagination.page ?? 0
+ initLimit: rowsPerPage[0],
+ initPage: 0
});
// update pagination whenever search result total pages change
@@ -107,17 +70,6 @@ export function RecordListView() {
setTotalCount(records?.totalCount ?? 0);
}, [records?.totalCount, setTotalCount]);
- // whenever url state changes, update pagination
- useEffect(() => {
- setPagination({ ...urlPagination });
- }, [setPagination, urlPagination]);
-
- // whenever table pagination internally changes (user clicks next page etc)
- // update the row params
- useEffect(() => {
- setUrlPagination(pagination);
- }, [pagination, setUrlPagination]);
-
// Request new search results whenever search or pagination changes
useEffect(() => {
let requestParams = initRequestParams(pagination);
@@ -175,8 +127,8 @@ export function RecordListView() {
>
<Grid item>
<Tabs
- value={deserialize(urlState.tab)}
- onChange={handleTabChange}
+ value={tabIndex}
+ onChange={(_, tab) => handleTabChange(tab)}
>
<Tab label="All" />
<Tab label="Only active" />
--
GitLab