Skip to content

Commit 55d907f

Browse files
shivani170shivani170
committed
chore: code refactoing
1 parent 940caa5 commit 55d907f

File tree

6 files changed

+107
-119
lines changed

6 files changed

+107
-119
lines changed

‎src/Pages/App/CreateAppModal/AppClone/AppCloneList.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMet
2121
useDevtronCloneList({
2222
handleCloneAppClick,
2323
isJobView,
24+
searchKey,
2425
})
2526

2627
const handleLoadMore = async () => {

‎src/Pages/App/CreateAppModal/AppClone/types.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { BaseAppMetaData } from '@devtron-labs/devtron-fe-common-lib'
1+
import { BaseAppMetaData, GenericInfoCardListingProps } from '@devtron-labs/devtron-fe-common-lib'
22

3-
import { JobList } from '@Components/Jobs/Types'
43
import { APP_TYPE } from '@Config/constants'
5-
import { AppListMin } from '@Services/service.types'
64

75
import { SidebarProps } from '../types'
86

@@ -11,8 +9,12 @@ export interface AppCloneListProps extends Pick<SidebarProps, 'handleCreationMet
119
isJobView?: boolean
1210
}
1311

14-
export type DevtronListResponse =
15-
| { type: APP_TYPE.JOB; data: JobList }
16-
| { type: APP_TYPE.DEVTRON_APPS; data: AppListMin }
12+
export type CloneListResponse = {
13+
type: APP_TYPE.DEVTRON_APPS | APP_TYPE.JOB
14+
list: GenericInfoCardListingProps['list']
15+
totalCount: number
16+
}
1717

18-
export interface DevtronAppCloneListProps extends Pick<AppCloneListProps, 'handleCloneAppClick' | 'isJobView'> {}
18+
export interface DevtronAppCloneListProps extends Pick<AppCloneListProps, 'handleCloneAppClick' | 'isJobView'> {
19+
searchKey: string
20+
}

‎src/Pages/App/CreateAppModal/AppClone/useDevtronCloneList.tsx

Lines changed: 27 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,19 @@
11
/*
22
* Copyright (c) 2024. Devtron Inc.
33
*/
4-
import { useEffect, useMemo, useRef, useState } from 'react'
4+
import { useEffect, useRef, useState } from 'react'
55

6-
import {
7-
abortPreviousRequests,
8-
getIsRequestAborted,
9-
showError,
10-
useAsync,
11-
useStateFilters,
12-
} from '@devtron-labs/devtron-fe-common-lib'
6+
import { getIsRequestAborted, showError, useAsync } from '@devtron-labs/devtron-fe-common-lib'
137

14-
import { getJobs } from '@Components/Jobs/Service'
158
import { APP_TYPE } from '@Config/constants'
16-
import { getAppListMin } from '@Services/service'
179

18-
import { getDevtronAppList } from '../service'
19-
import { DevtronAppCloneListProps, DevtronListResponse } from './types'
10+
import { fetchDevtronCloneList } from '../service'
11+
import { DevtronAppCloneListProps } from './types'
2012

21-
export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronAppCloneListProps) => {
13+
export const useDevtronCloneList = ({ handleCloneAppClick, isJobView, searchKey }: DevtronAppCloneListProps) => {
2214
const cloneListAbortControllerRef = useRef(new AbortController())
2315
const [isLoadingMore, setIsLoadingMore] = useState(false)
2416
const [hasError, setHasError] = useState(false)
25-
const { searchKey } = useStateFilters()
26-
27-
const fetchDevtronCloneList = (offset = 0): Promise<DevtronListResponse> =>
28-
abortPreviousRequests(
29-
() =>
30-
isJobView
31-
? getJobs(
32-
{
33-
teams: [],
34-
appStatuses: [],
35-
appNameSearch: '',
36-
offset,
37-
size: 20,
38-
sortBy: 'appNameSort',
39-
sortOrder: 'ASC',
40-
searchKey,
41-
},
42-
{
43-
signal: cloneListAbortControllerRef.current.signal,
44-
},
45-
).then((res) => ({ type: APP_TYPE.JOB, data: res }))
46-
: getAppListMin(null, { signal: cloneListAbortControllerRef.current.signal }).then((res) => ({
47-
type: APP_TYPE.DEVTRON_APPS,
48-
data: res,
49-
})),
50-
cloneListAbortControllerRef,
51-
)
52-
53-
const [isListLoading, listResponse, listError, reloadList, setListResponse] = useAsync<DevtronListResponse>(() =>
54-
fetchDevtronCloneList(0),
55-
)
5617

5718
useEffect(
5819
() => () => {
@@ -61,36 +22,34 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
6122
[],
6223
)
6324

64-
const { list, totalCount } = useMemo(() => {
65-
if (!listResponse) return { list: [], totalCount: 0 }
66-
return getDevtronAppList({ listResponse, handleCloneAppClick })
67-
}, [isListLoading, listResponse, handleCloneAppClick])
25+
const [isListLoading, listResponse, listError, reloadList, setListResponse] = useAsync(() =>
26+
fetchDevtronCloneList({
27+
isJobView,
28+
searchKey,
29+
cloneListAbortControllerRef,
30+
handleCloneAppClick,
31+
}),
32+
)
6833

6934
const loadMoreData = async () => {
7035
if (isLoadingMore || !listResponse) return
7136

7237
setIsLoadingMore(true)
7338
try {
7439
if (listResponse.type === APP_TYPE.JOB) {
75-
const currentJobContainers = listResponse.data.result?.jobContainers ?? []
40+
const currentList = listResponse.list
7641

77-
const response: DevtronListResponse = await fetchDevtronCloneList(currentJobContainers.length)
42+
const response = await fetchDevtronCloneList({
43+
isJobView,
44+
searchKey,
45+
offset: currentList.length,
46+
cloneListAbortControllerRef,
47+
handleCloneAppClick,
48+
})
7849

79-
// Update the list response with the new data
8050
setListResponse({
81-
type: APP_TYPE.JOB,
82-
data: {
83-
...response,
84-
result: {
85-
...response.data,
86-
jobContainers: [
87-
...currentJobContainers,
88-
...('jobContainers' in response.data.result
89-
? response.data.result.jobContainers || []
90-
: []),
91-
],
92-
},
93-
},
51+
...response,
52+
list: [...currentList, ...response.list],
9453
})
9554
}
9655
} catch (error) {
@@ -102,13 +61,13 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: DevtronA
10261
}
10362

10463
return {
105-
isListLoading: isListLoading ?? getIsRequestAborted(listError),
106-
list,
64+
isListLoading: isListLoading || getIsRequestAborted(listError),
65+
list: listResponse?.list ?? [],
10766
listError,
10867
reloadList,
109-
totalCount,
68+
totalCount: listResponse?.totalCount ?? 0,
11069
loadMoreData,
111-
hasMoreData: listResponse?.type === APP_TYPE.JOB && list.length < totalCount,
70+
hasMoreData: listResponse?.type === APP_TYPE.JOB && (listResponse.list?.length ?? 0) < listResponse.totalCount,
11271
hasError,
11372
isLoadingMore,
11473
}

‎src/Pages/App/CreateAppModal/Sidebar.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const Sidebar = ({
3131
}
3232

3333
const renderAppContent = () => (
34-
<div className="flexbox-col dc__gap-24">
34+
<>
3535
<p className="m-0">In Devtron, an &quot;Application&quot; represents your software project or service.</p>
3636
<p className="m-0">
3737
It serves as a container for your deployment configurations, environments, and other settings. Define
@@ -40,19 +40,19 @@ const Sidebar = ({
4040
<p className="m-0">
4141
Applications are not environment specific and can be deployed to multiple environments.
4242
</p>
43-
</div>
43+
</>
4444
)
4545

4646
const renderJobContent = () => (
47-
<div className="flexbox-col dc__gap-24">
47+
<>
4848
<p className="m-0">Job allows manual and automated execution of your source code.</p>
4949
<p className="m-0">
5050
Job pipelines do not have a deployment stage as the job is limited to your source code only.
5151
</p>
5252
<p className="m-0">
5353
You can execute custom tasks or leverage the plugin library to execute tasks in a job pipeline.
5454
</p>
55-
</div>
55+
</>
5656
)
5757

5858
return (
@@ -83,7 +83,7 @@ const Sidebar = ({
8383
documentationLink={isJobView ? DOCUMENTATION.JOBS : DOCUMENTATION.APP_CREATE}
8484
rootClassName="w-100 dc__no-background-imp"
8585
>
86-
{isJobView ? renderJobContent() : renderAppContent()}
86+
<div className="flexbox-col dc__gap-24">{isJobView ? renderJobContent() : renderAppContent()}</div>
8787
</ModalSidebarPanel>
8888
</div>
8989
)

‎src/Pages/App/CreateAppModal/service.ts

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,58 +14,75 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { BaseAppMetaData, GenericInfoCardListingProps, post } from '@devtron-labs/devtron-fe-common-lib'
17+
import { abortPreviousRequests, BaseAppMetaData, post } from '@devtron-labs/devtron-fe-common-lib'
1818

19+
import { getJobs } from '@Components/Jobs/Service'
1920
import { APP_TYPE, Routes } from '@Config/constants'
2021
import { getAppIconWithBackground } from '@Config/utils'
22+
import { getAppListMin } from '@Services/service'
2123

22-
import { DevtronListResponse } from './AppClone/types'
24+
import { CloneListResponse } from './AppClone/types'
2325

2426
export const createApp = (request) => post(Routes.APP, request)
2527

26-
export const getDevtronAppList = ({
27-
listResponse,
28+
export const fetchDevtronCloneList = async ({
29+
offset = 0,
30+
isJobView = false,
31+
searchKey = '',
32+
cloneListAbortControllerRef,
2833
handleCloneAppClick,
2934
}: {
30-
listResponse: DevtronListResponse
35+
offset?: number
36+
isJobView?: boolean
37+
searchKey?: string
38+
cloneListAbortControllerRef: React.MutableRefObject<AbortController>
3139
handleCloneAppClick: (app: BaseAppMetaData) => void
32-
}) => {
33-
if (listResponse.type === APP_TYPE.JOB) {
34-
const jobContainers = listResponse.data.result?.jobContainers ?? []
40+
}): Promise<CloneListResponse> =>
41+
abortPreviousRequests(async () => {
42+
if (isJobView) {
43+
const res = await getJobs({
44+
teams: [],
45+
appStatuses: [],
46+
appNameSearch: '',
47+
offset,
48+
size: 20,
49+
sortBy: 'appNameSort',
50+
sortOrder: 'ASC',
51+
searchKey,
52+
})
3553

36-
const totalCount = listResponse.data.result.jobCount
54+
const jobContainers = res.result?.jobContainers ?? []
55+
const totalCount = res.result?.jobCount ?? 0
3756

38-
return {
39-
list: jobContainers.map<GenericInfoCardListingProps['list'][number]>((job) => {
40-
const { jobId, jobName, description } = job
57+
const list = jobContainers.map((job) => ({
58+
id: String(job.jobId),
59+
title: job.jobName,
60+
description: job.description.description,
61+
author: job.description.createdBy,
62+
Icon: getAppIconWithBackground(APP_TYPE.JOB, 40),
63+
onClick: () => handleCloneAppClick({ appId: job.jobId, appName: job.jobName }),
64+
}))
4165

42-
return {
43-
id: String(jobId),
44-
title: jobName,
45-
description: description.description,
46-
author: description.createdBy,
47-
Icon: getAppIconWithBackground(APP_TYPE.JOB, 40),
48-
onClick: () => handleCloneAppClick({ appId: jobId, appName: jobName }),
49-
}
50-
}),
51-
totalCount,
66+
return { type: APP_TYPE.JOB, list, totalCount }
5267
}
53-
}
54-
const apps = listResponse.data.result ?? []
68+
const res = await getAppListMin(
69+
null,
70+
{ signal: cloneListAbortControllerRef.current.signal },
71+
searchKey,
72+
isJobView,
73+
offset,
74+
)
5575

56-
return {
57-
list: apps.map<GenericInfoCardListingProps['list'][number]>((app) => {
58-
const { id, name, createdBy, description } = app
76+
const apps = res.result ?? []
5977

60-
return {
61-
id: String(id),
62-
title: name,
63-
Icon: getAppIconWithBackground(APP_TYPE.DEVTRON_APPS, 40),
64-
onClick: () => handleCloneAppClick({ appId: id, appName: name }),
65-
author: createdBy,
66-
description,
67-
}
68-
}),
69-
totalCount: apps.length,
70-
}
71-
}
78+
const list = apps.map((app) => ({
79+
id: String(app.id),
80+
title: app.name,
81+
description: app.description,
82+
author: app.createdBy,
83+
Icon: getAppIconWithBackground(APP_TYPE.DEVTRON_APPS, 40),
84+
onClick: () => handleCloneAppClick({ appId: app.id, appName: app.name }),
85+
}))
86+
87+
return { type: APP_TYPE.DEVTRON_APPS, list, totalCount: apps.length }
88+
}, cloneListAbortControllerRef)

‎src/services/service.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ export function getAppListMin(
147147
options?: APIOptions,
148148
appName?: string,
149149
isJobView?: boolean,
150+
offset: number = 0,
151+
size?: number,
150152
): Promise<AppListMin> {
151153
const queryString = new URLSearchParams()
152154
if (teamId) {
@@ -161,6 +163,13 @@ export function getAppListMin(
161163
queryString.set('appType', '2')
162164
}
163165

166+
if (offset) {
167+
queryString.set('offset', offset.toString())
168+
}
169+
if (size) {
170+
queryString.set('size', size.toString())
171+
}
172+
164173
return get(`${Routes.APP_LIST_MIN}?${queryString.toString()}`, options).then((response) => {
165174
let list = response?.result || []
166175
list = list.sort((a, b) => {

0 commit comments

Comments
 (0)