Skip to content

Commit ae2a5a1

Browse files
kunalgaurav-bmwkunalgaurav-bmw
authored
refactor(semantic hub): remove axios library use (#1471)
#1248
1 parent cea7e79 commit ae2a5a1

File tree

10 files changed

+299
-380
lines changed

10 files changed

+299
-380
lines changed

‎src/components/pages/SemanticHub/ModelDetailDialog.tsx

+12-13
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
CircleProgress,
3232
} from '@catena-x/portal-shared-components'
3333
import { semanticModelsSelector } from 'features/semanticModels/slice'
34-
import { useDispatch, useSelector } from 'react-redux'
34+
import { useSelector } from 'react-redux'
3535
import {
3636
InputLabel,
3737
MenuItem,
@@ -43,16 +43,15 @@ import {
4343
import { useTranslation } from 'react-i18next'
4444
import DownloadLink from './DownloadLink'
4545
import { useEffect, useState } from 'react'
46-
import {
47-
changeOpenApiUrl,
48-
deleteSemanticModelById,
49-
} from 'features/semanticModels/actions'
46+
import { Status } from 'features/semanticModels/types'
47+
import { userHasSemanticHubRole } from 'services/AccessService'
5048
import { ROLES } from 'types/Constants'
49+
import {
50+
useChangeOpenApiUrlMutation,
51+
useDeleteModelByIdMutation,
52+
} from 'features/semanticModels/apiSlice'
5153
import { getSemanticApiBase } from 'services/EnvironmentService'
5254
import { getHeaders } from 'services/RequestService'
53-
import { Status } from 'features/semanticModels/types'
54-
import type { AppDispatch } from 'features/store'
55-
import { userHasSemanticHubRole } from 'services/AccessService'
5655

5756
interface ModelDetailDialogProps {
5857
show: boolean
@@ -65,7 +64,6 @@ const ModelDetailDialog = ({ show, onClose }: ModelDetailDialogProps) => {
6564
const { model, loadingModel, openApiLink, error, openApiError } = useSelector(
6665
semanticModelsSelector
6766
)
68-
const dispatch = useDispatch<AppDispatch>()
6967
const [diagram, setDiagram] = useState<string>('')
7068
const [diagramError, setDiagramError] = useState<string>('')
7169
const [openApiUrlInput, setOpenApiUrlInput] = useState<string>('')
@@ -79,6 +77,9 @@ const ModelDetailDialog = ({ show, onClose }: ModelDetailDialogProps) => {
7977
]
8078
const margin = { mr: -2, ml: -2 }
8179

80+
const [changeOpenApiUrl] = useChangeOpenApiUrlMutation()
81+
const [deleteModelById] = useDeleteModelByIdMutation()
82+
8283
useEffect(() => {
8384
setDiagram('')
8485
if (model) {
@@ -126,16 +127,14 @@ const ModelDetailDialog = ({ show, onClose }: ModelDetailDialogProps) => {
126127
const onOpenApiUrlChange = () => {
127128
if (model) {
128129
const encodedUrn = encodeURIComponent(model?.urn)
129-
dispatch(changeOpenApiUrl({ id: encodedUrn, url: openApiUrlInput }))
130+
changeOpenApiUrl({ id: encodedUrn, url: openApiUrlInput })
130131
}
131132
}
132133

133134
const onDeleteConfirm = () => {
134135
setShowDeleteConfirm(false)
135136
if (model) {
136-
dispatch(
137-
deleteSemanticModelById({ id: model.urn, modelName: model.name })
138-
)
137+
deleteModelById({ id: model.urn, modelName: model.name })
139138
}
140139
}
141140

‎src/components/pages/SemanticHub/ModelImportDialog.tsx

+27-18
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@ import {
3131
} from '@catena-x/portal-shared-components'
3232
import { useEffect, useState } from 'react'
3333
import { useTranslation } from 'react-i18next'
34-
import { useDispatch, useSelector } from 'react-redux'
35-
import { semanticModelsSelector } from 'features/semanticModels/slice'
36-
import { postSemanticModel } from 'features/semanticModels/actions'
34+
import { usePostSemanticModelMutation } from 'features/semanticModels/apiSlice'
3735
import { Status } from 'features/semanticModels/types'
3836
import {
3937
InputLabel,
@@ -43,24 +41,39 @@ import {
4341
Select,
4442
type SelectChangeEvent,
4543
} from '@mui/material'
46-
import type { AppDispatch } from 'features/store'
4744

4845
interface ModelDetailDialogProps {
4946
show: boolean
5047
onClose: () => void
5148
}
5249

5350
const ModelImportDialog = ({ show, onClose }: ModelDetailDialogProps) => {
54-
const dispatch = useDispatch<AppDispatch>()
55-
const { uploading, uploadedModel, error } = useSelector(
56-
semanticModelsSelector
57-
)
51+
const [
52+
postSemanticModel,
53+
{ data: uploadedModel, error: uploadError, isLoading: uploading },
54+
] = usePostSemanticModelMutation()
5855
const { t } = useTranslation()
5956
const [inputText, setInputText] = useState<string>('')
6057
const [inputStatus, setInputStatus] = useState<
6158
Status.Draft | Status.Released
6259
>(Status.Draft)
6360

61+
// Add an ESLint exception because of uncertainty about the exact structure of error data
62+
// eslint-disable-next-line
63+
const renderError = (error: any) => {
64+
if (error && 'data' in error) {
65+
if (error.data?.error?.message) {
66+
return <Typography color="error">{error.data.error.message}</Typography>
67+
} else if (error.status && error.data?.detail) {
68+
return (
69+
<Typography color="error">
70+
{`${error.data?.title} - ${error.data?.detail}`}
71+
</Typography>
72+
)
73+
}
74+
}
75+
}
76+
6477
useEffect(() => {
6578
if (show) {
6679
setInputText('')
@@ -75,13 +88,11 @@ const ModelImportDialog = ({ show, onClose }: ModelDetailDialogProps) => {
7588
}, [uploadedModel])
7689

7790
const uploadModel = () => {
78-
dispatch(
79-
postSemanticModel({
80-
model: inputText,
81-
type: 'BAMM',
82-
status: inputStatus,
83-
})
84-
)
91+
postSemanticModel({
92+
model: inputText,
93+
type: 'BAMM',
94+
status: inputStatus,
95+
})
8596
}
8697

8798
const onSelectChange = (e: SelectChangeEvent) => {
@@ -123,9 +134,7 @@ const ModelImportDialog = ({ show, onClose }: ModelDetailDialogProps) => {
123134
maxRows={18}
124135
disabled={uploading}
125136
/>
126-
{typeof error === 'string' && (
127-
<Typography color="error">{error}</Typography>
128-
)}
137+
{uploadError && renderError(uploadError)}
129138
{uploading && (
130139
<Box sx={{ textAlign: 'center', mt: 2 }}>
131140
<CircleProgress

‎src/components/pages/SemanticHub/ModelTable.tsx

+50-68
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,21 @@
1919
********************************************************************************/
2020

2121
import { Table } from '@catena-x/portal-shared-components'
22-
import { fetchSemanticModels } from 'features/semanticModels/actions'
23-
import { semanticModelsSelector } from 'features/semanticModels/slice'
2422
import {
25-
type FilterParams,
23+
useDeleteModelByIdMutation,
24+
useGetModelsQuery,
25+
} from 'features/semanticModels/apiSlice'
26+
import {
2627
type SemanticModel,
2728
DefaultStatus,
2829
} from 'features/semanticModels/types'
2930
import { useState, useEffect } from 'react'
3031
import { useTranslation } from 'react-i18next'
31-
import { useDispatch, useSelector } from 'react-redux'
3232
import { LoadMoreButton } from '../../shared/basic/LoadMoreButton'
3333
import { SemanticModelTableColumns } from './SemanticModelTableColumn'
3434
import uniqueId from 'lodash/uniqueId'
35-
import type { AppDispatch } from 'features/store'
35+
import { useSelector } from 'react-redux'
36+
import { semanticModelsSelector } from 'features/semanticModels/slice'
3637

3738
interface ModelTableProps {
3839
onModelSelect: (id: string) => void
@@ -44,11 +45,9 @@ type SelectedFilter = {
4445

4546
const ModelTable = ({ onModelSelect }: ModelTableProps) => {
4647
const { t } = useTranslation()
47-
const dispatch = useDispatch<AppDispatch>()
48-
const { modelList, loadingModelList, deleteModelId, uploadedModel, error } =
49-
useSelector(semanticModelsSelector)
5048
const [models, setModels] = useState<SemanticModel[]>([])
5149
const [pageNumber, setPageNumber] = useState<number>(0)
50+
const [searchValue, setSearchValue] = useState<string>('')
5251
const [selectedFilter, setSelectedFilter] = useState<SelectedFilter>({
5352
status: [DefaultStatus],
5453
})
@@ -77,87 +76,78 @@ const ModelTable = ({ onModelSelect }: ModelTableProps) => {
7776
},
7877
]
7978

79+
const {
80+
data: modelList,
81+
isLoading: loadingModelList,
82+
error: modelListError,
83+
} = useGetModelsQuery({
84+
page: pageNumber,
85+
pageSize: rowCount,
86+
namespaceFilter: searchValue,
87+
status:
88+
selectedFilter.status[0] !== DefaultStatus
89+
? selectedFilter.status[0]
90+
: undefined,
91+
})
92+
93+
const [deleteModelById] = useDeleteModelByIdMutation()
94+
95+
const { uploadedModel } = useSelector(semanticModelsSelector)
96+
8097
useEffect(() => {
81-
const filter = {
82-
page: pageNumber,
83-
pageSize: rowCount,
84-
...(selectedFilter.status[0] !== DefaultStatus && {
85-
status: selectedFilter.status[0],
86-
}),
98+
if (modelList) {
99+
if (pageNumber === 0) {
100+
setModels(modelList.items)
101+
} else {
102+
setModels((prevModels) => [...prevModels, ...modelList.items])
103+
}
87104
}
88-
dispatch(fetchSemanticModels({ filter }))
89-
}, [dispatch, pageNumber])
105+
}, [modelList, pageNumber])
90106

91107
useEffect(() => {
92-
if (deleteModelId.length > 0) {
108+
if (deleteModelById.length > 0) {
93109
setModels((prevModels) =>
94-
prevModels.filter((model) => model.urn !== deleteModelId)
110+
prevModels.filter((model) => model.urn !== deleteModelById.toString())
95111
)
96112
}
97-
}, [deleteModelId])
113+
}, [deleteModelById])
98114

99115
useEffect(() => {
100-
if (uploadedModel !== null) {
116+
if (uploadedModel) {
101117
setModels((prevModels) => [uploadedModel, ...prevModels])
102118
}
103119
}, [uploadedModel])
104120

105-
useEffect(() => {
106-
if (models.length > 0 && pageNumber > 0) {
107-
if (modelList.items.length > 0)
108-
setModels((prevModels) => prevModels.concat(modelList.items))
109-
} else {
110-
setModels(modelList.items)
111-
}
112-
}, [modelList])
113-
114121
const onFilterReset = () => {
115-
//Reset PageNumber back to 0
116-
dispatch(fetchSemanticModels({ filter: { page: 0, pageSize: rowCount } }))
122+
setPageNumber(0)
123+
setSelectedFilter({ status: [DefaultStatus] })
117124
}
118125

119126
const onSearch = (value: string) => {
127+
setSearchValue(value)
120128
setModels([])
121-
const filter: FilterParams = {
122-
page: 0,
123-
pageSize: rowCount,
124-
namespaceFilter: value,
125-
...(selectedFilter.status[0] !== DefaultStatus && {
126-
status: selectedFilter.status[0],
127-
}),
128-
}
129-
dispatch(fetchSemanticModels({ filter }))
130129
}
131130

132131
const onFilter = (selectedFilter: SelectedFilter) => {
133132
setModels([])
134-
//Reset PageNumber back to 0
135133
setPageNumber(0)
136134
setSelectedFilter(selectedFilter)
137-
if (selectedFilter.status[0] !== DefaultStatus) {
138-
dispatch(
139-
fetchSemanticModels({
140-
filter: {
141-
page: 0,
142-
pageSize: rowCount,
143-
status: selectedFilter.status[0],
144-
},
145-
})
146-
)
147-
} else {
135+
if (selectedFilter.status[0] === DefaultStatus) {
148136
onFilterReset()
149137
}
150138
}
139+
151140
const columns = SemanticModelTableColumns(t, onModelSelect)
141+
152142
const errorObj = {
153143
status: 0,
154144
message: '',
155145
}
156146

157-
if (error) {
158-
errorObj.status = Number(error)
147+
if (modelListError) {
148+
errorObj.status = Number(modelListError)
159149
errorObj.message =
160-
Number(error) >= 400 && Number(error) < 500
150+
Number(modelListError) >= 400 && Number(modelListError) < 500
161151
? t('global.errors.dataLoadFailed')
162152
: t('global.errors.loadFailed')
163153
}
@@ -166,7 +156,7 @@ const ModelTable = ({ onModelSelect }: ModelTableProps) => {
166156
<section>
167157
<Table
168158
autoFocus={false}
169-
rowsCount={modelList.totalItems}
159+
rowsCount={modelList?.totalItems}
170160
hideFooter
171161
loading={loadingModelList}
172162
disableRowSelectionOnClick={true}
@@ -191,21 +181,13 @@ const ModelTable = ({ onModelSelect }: ModelTableProps) => {
191181
getRowId={(row: { urn: string | undefined }) => uniqueId(row.urn)}
192182
hasBorder={false}
193183
error={errorObj}
194-
reload={() =>
195-
dispatch(
196-
fetchSemanticModels({
197-
filter: {
198-
page: 0,
199-
pageSize: rowCount,
200-
status: selectedFilter.status[0],
201-
},
202-
})
203-
)
204-
}
184+
reload={() => {
185+
setPageNumber(0)
186+
}}
205187
noRowsMsg={t('global.noData.heading')}
206188
/>
207189
<div className="load-more-button-container">
208-
{modelList.totalPages !== pageNumber && (
190+
{modelList?.totalPages !== pageNumber && (
209191
<LoadMoreButton
210192
onClick={() => {
211193
setPageNumber((prevState) => prevState + 1)

0 commit comments

Comments
 (0)