Skip to content

Commit 9c81898

Browse files
olgennolgenn
authored
Switch UI to pagination-based projects and users API (#3503)
Switch UI to pagination-based projects and users API #3490
1 parent 916b94e commit 9c81898

File tree

20 files changed

+270
-192
lines changed

20 files changed

+270
-192
lines changed

‎frontend/src/App/Login/LoginByGithubCallback/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const LoginByGithubCallback: React.FC = () => {
4141
.then(async ({ creds: { token } }) => {
4242
dispatch(setAuthData({ token }));
4343
if (process.env.UI_VERSION === 'sky') {
44-
const result = await getProjects().unwrap();
44+
const result = await getProjects({}).unwrap();
4545
if (result?.length === 0) {
4646
navigate(ROUTES.PROJECT.ADD);
4747
return;

‎frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import { useGetOnlyNoFleetsProjectsQuery, useGetProjectsQuery } from 'services/p
55
type Args = { projectNames?: IProject['project_name'][] };
66

77
export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
8-
const { data: projectsData } = useGetProjectsQuery(undefined, {
9-
skip: !!projectNames?.length,
10-
});
8+
const { data: projectsData } = useGetProjectsQuery(
9+
{},
10+
{
11+
skip: !!projectNames?.length,
12+
},
13+
);
1114

1215
const { data: noFleetsProjectsData } = useGetOnlyNoFleetsProjectsQuery();
1316

@@ -16,8 +19,8 @@ export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
1619
return projectNames;
1720
}
1821

19-
if (projectsData) {
20-
return projectsData.map((project) => project.project_name);
22+
if (projectsData?.data) {
23+
return projectsData.data.map((project) => project.project_name);
2124
}
2225

2326
return [];

‎frontend/src/hooks/useInfiniteScroll.ts‎

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@ const SCROLL_POSITION_GAP = 400;
99
type InfinityListArgs = Partial<Record<string, unknown>>;
1010

1111
type ListResponse<DataItem> = DataItem[];
12+
type ResponseWithDataProp<DataItem> = { data: ListResponse<DataItem>; total_count: number };
13+
14+
type LazyQueryResponse<DataItem> = ResponseWithDataProp<DataItem> | ListResponse<DataItem>;
1215

1316
type UseInfinityParams<DataItem, Args extends InfinityListArgs> = {
14-
useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, ListResponse<DataItem>, any>>;
17+
useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, LazyQueryResponse<DataItem>, any>>;
1518
args: { limit?: number } & Args;
19+
getResponseItems?: (listItem: DataItem) => Partial<Args>;
1620
getPaginationParams: (listItem: DataItem) => Partial<Args>;
1721
skip?: boolean;
1822
// options?: UseQueryStateOptions<QueryDefinition<Args, any, any, Data[], any>, Record<string, any>>;
@@ -26,32 +30,50 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
2630
skip,
2731
}: UseInfinityParams<DataItem, Args>) => {
2832
const [data, setData] = useState<ListResponse<DataItem>>([]);
33+
const [totalCount, setTotalCount] = useState<number | void>();
2934
const scrollElement = useRef<HTMLElement>(document.documentElement);
3035
const isLoadingRef = useRef<boolean>(false);
36+
const isDisabledMoreRef = useRef<boolean>(false);
3137
const lastRequestParams = useRef<Args | undefined>(undefined);
32-
const [disabledMore, setDisabledMore] = useState(false);
3338
const { limit, ...argsProp } = args;
3439
const lastArgsProps = useRef<Partial<Args>>(null);
3540

3641
const [getItems, { isLoading, isFetching }] = useLazyQuery({ ...args } as Args);
3742

3843
const getDataRequest = (params: Args) => {
39-
lastRequestParams.current = params;
44+
if (isEqual(params, lastRequestParams.current)) {
45+
return Promise.reject();
46+
}
4047

41-
return getItems({
48+
const request = getItems({
4249
limit,
4350
...params,
4451
} as Args).unwrap();
52+
53+
request.then(() => {
54+
lastRequestParams.current = { ...params };
55+
});
56+
57+
return request;
4558
};
4659

4760
const getEmptyList = () => {
4861
isLoadingRef.current = true;
4962

5063
setData([]);
5164

52-
getDataRequest(argsProp as Args).then((result) => {
53-
setDisabledMore(false);
54-
setData(result as ListResponse<DataItem>);
65+
getDataRequest(argsProp as Args).then((result: LazyQueryResponse<DataItem>) => {
66+
// setDisabledMore(false);
67+
isDisabledMoreRef.current = false;
68+
69+
if ('data' in result) {
70+
setData(result.data as ListResponse<DataItem>);
71+
setTotalCount(result.total_count);
72+
} else {
73+
setData(result as ListResponse<DataItem>);
74+
setTotalCount();
75+
}
76+
5577
isLoadingRef.current = false;
5678
});
5779
};
@@ -64,7 +86,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
6486
}, [argsProp, lastArgsProps, skip]);
6587

6688
const getMore = async () => {
67-
if (isLoadingRef.current || disabledMore || skip) {
89+
if (isLoadingRef.current || isDisabledMoreRef.current || skip) {
6890
return;
6991
}
7092

@@ -76,18 +98,28 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
7698
...getPaginationParams(data[data.length - 1]),
7799
} as Args);
78100

79-
if (result.length > 0) {
80-
setData((prev) => [...prev, ...result]);
101+
let listResponse: ListResponse<DataItem>;
102+
103+
if ('data' in result) {
104+
listResponse = result.data;
105+
setTotalCount(result.total_count);
106+
} else {
107+
listResponse = result;
108+
setTotalCount();
109+
}
110+
111+
if (listResponse.length > 0) {
112+
setData((prev) => [...prev, ...listResponse]);
81113
} else {
82-
setDisabledMore(true);
114+
isDisabledMoreRef.current = true;
83115
}
84116
} catch (e) {
85117
console.log(e);
86118
}
87119

88120
setTimeout(() => {
89121
isLoadingRef.current = false;
90-
}, 10);
122+
}, 50);
91123
};
92124

93125
useLayoutEffect(() => {
@@ -101,7 +133,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
101133
}, [data]);
102134

103135
const onScroll = useCallback(() => {
104-
if (disabledMore || isLoadingRef.current) {
136+
if (isDisabledMoreRef.current || isLoadingRef.current) {
105137
return;
106138
}
107139

@@ -112,7 +144,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
112144
if (scrollPositionFromBottom < SCROLL_POSITION_GAP) {
113145
getMore().catch(console.log);
114146
}
115-
}, [disabledMore, getMore]);
147+
}, [getMore]);
116148

117149
useEffect(() => {
118150
document.addEventListener('scroll', onScroll);
@@ -126,6 +158,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
126158

127159
return {
128160
data,
161+
totalCount,
129162
isLoading: isLoading || (data.length === 0 && isFetching),
130163
isLoadingMore,
131164
refreshList: getEmptyList,

‎frontend/src/hooks/useProjectFilter.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,20 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
1616
null,
1717
);
1818

19-
const { data: projectsData } = useGetProjectsQuery();
19+
const { data: projectsData } = useGetProjectsQuery({});
2020

2121
const projectOptions = useMemo<SelectCSDProps.Options>(() => {
22-
if (!projectsData?.length) return [];
22+
if (!projectsData?.data?.length) return [];
2323

24-
return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
24+
return projectsData.data.map((project) => ({ label: project.project_name, value: project.project_name }));
2525
}, [projectsData]);
2626

2727
useEffect(() => {
28-
if (!projectsData || !selectedProject) {
28+
if (!projectsData?.data || !selectedProject) {
2929
return;
3030
}
3131

32-
const hasSelectedProject = projectsData.some(({ project_name }) => selectedProject?.value === project_name);
32+
const hasSelectedProject = projectsData.data.some(({ project_name }) => selectedProject?.value === project_name);
3333

3434
if (!hasSelectedProject) {
3535
setSelectedProject(null);

‎frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const useTutorials = () => {
4444
} = useAppSelector(selectTutorialPanel);
4545

4646
const { data: userBillingData } = useGetUserBillingInfoQuery({ username: useName ?? '' }, { skip: !useName });
47-
const { data: projectData } = useGetProjectsQuery();
47+
const { data: projectData } = useGetProjectsQuery({});
4848
const { data: runsData } = useGetRunsQuery({
4949
limit: 1,
5050
});
@@ -54,14 +54,14 @@ export const useTutorials = () => {
5454
useEffect(() => {
5555
if (
5656
userBillingData &&
57-
projectData &&
57+
projectData?.data &&
5858
runsData &&
5959
!completeIsChecked.current &&
6060
location.pathname !== ROUTES.PROJECT.ADD
6161
) {
6262
const billingCompleted = userBillingData.balance > 0;
6363
const configureCLICompleted = runsData.length > 0;
64-
const createProjectCompleted = projectData.length > 0;
64+
const createProjectCompleted = projectData.data.length > 0;
6565

6666
let tempHideStartUp = hideStartUp;
6767

@@ -88,7 +88,7 @@ export const useTutorials = () => {
8888
}, [userBillingData, runsData, projectData, location.pathname]);
8989

9090
useEffect(() => {
91-
if (projectData && projectData.length > 0 && !createProjectCompleted) {
91+
if (projectData?.data && projectData.data.length > 0 && !createProjectCompleted) {
9292
dispatch(
9393
updateTutorialPanelState({
9494
createProjectCompleted: true,
@@ -114,8 +114,8 @@ export const useTutorials = () => {
114114
}, []);
115115

116116
const startConfigCliTutorial = useCallback(() => {
117-
if (projectData?.length) {
118-
navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData[0].project_name));
117+
if (projectData?.data?.length) {
118+
navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData.data[0].project_name));
119119
}
120120
}, [projectData]);
121121

‎frontend/src/pages/Events/List/hooks/useFilters.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ const targetTypes = [
7777

7878
export const useFilters = () => {
7979
const [searchParams, setSearchParams] = useSearchParams();
80-
const { data: projectsData } = useGetProjectsQuery();
81-
const { data: usersData } = useGetUserListQuery();
80+
const { data: projectsData } = useGetProjectsQuery({});
81+
const { data: usersData } = useGetUserListQuery({});
8282

8383
const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
8484
requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -92,7 +92,7 @@ export const useFilters = () => {
9292
const filteringOptions = useMemo(() => {
9393
const options: PropertyFilterProps.FilteringOption[] = [];
9494

95-
projectsData?.forEach(({ project_name }) => {
95+
projectsData?.data?.forEach(({ project_name }) => {
9696
options.push({
9797
propertyKey: filterKeys.TARGET_PROJECTS,
9898
value: project_name,
@@ -104,7 +104,7 @@ export const useFilters = () => {
104104
});
105105
});
106106

107-
usersData?.forEach(({ username }) => {
107+
usersData?.data?.forEach(({ username }) => {
108108
options.push({
109109
propertyKey: filterKeys.TARGET_USERS,
110110
value: username,
@@ -247,30 +247,32 @@ export const useFilters = () => {
247247
...(params[filterKeys.TARGET_PROJECTS] && Array.isArray(params[filterKeys.TARGET_PROJECTS])
248248
? {
249249
[filterKeys.TARGET_PROJECTS]: params[filterKeys.TARGET_PROJECTS]?.map(
250-
(name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
250+
(name: string) =>
251+
projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
251252
),
252253
}
253254
: {}),
254255
...(params[filterKeys.WITHIN_PROJECTS] && Array.isArray(params[filterKeys.WITHIN_PROJECTS])
255256
? {
256257
[filterKeys.WITHIN_PROJECTS]: params[filterKeys.WITHIN_PROJECTS]?.map(
257-
(name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
258+
(name: string) =>
259+
projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
258260
),
259261
}
260262
: {}),
261263

262264
...(params[filterKeys.TARGET_USERS] && Array.isArray(params[filterKeys.TARGET_USERS])
263265
? {
264266
[filterKeys.TARGET_USERS]: params[filterKeys.TARGET_USERS]?.map(
265-
(name: string) => usersData?.find(({ username }) => username === name)?.['id'],
267+
(name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
266268
),
267269
}
268270
: {}),
269271

270272
...(params[filterKeys.ACTORS] && Array.isArray(params[filterKeys.ACTORS])
271273
? {
272274
[filterKeys.ACTORS]: params[filterKeys.ACTORS]?.map(
273-
(name: string) => usersData?.find(({ username }) => username === name)?.['id'],
275+
(name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
274276
),
275277
}
276278
: {}),

‎frontend/src/pages/Models/List/hooks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const filterKeys: Record<string, RequestParamsKeys> = {
129129
export const useFilters = (localStorePrefix = 'models-list-page') => {
130130
const [searchParams, setSearchParams] = useSearchParams();
131131
const { projectOptions } = useProjectFilter({ localStorePrefix });
132-
const { data: usersData } = useGetUserListQuery();
132+
const { data: usersData } = useGetUserListQuery({});
133133

134134
const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
135135
requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -151,7 +151,7 @@ export const useFilters = (localStorePrefix = 'models-list-page') => {
151151
});
152152
});
153153

154-
usersData?.forEach(({ username }) => {
154+
usersData?.data?.forEach(({ username }) => {
155155
options.push({
156156
propertyKey: filterKeys.USER_NAME,
157157
value: username,

0 commit comments

Comments
 (0)