Hi,
In the Metronic 8.1.0 version of React there is a User Management component.
In src/app/modules/apps/user-management/users-list/core/_requests.ts
there's the getUsers
method that fetches the users array:
const getUsers = (query: string): Promise<UsersQueryResponse> => {
return axios
.get(`${GET_USERS_URL}?${query}`)
.then((d: AxiosResponse<UsersQueryResponse>) => d.data)
}
UsersQueryResponse
is declared in src/app/modules/apps/user-management/users-list/core/_models.ts
:export type UsersQueryResponse = Response<Array<User>>
[
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]
{
list: [
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]
}
getUsers
?export type UsersQueryResponse = Response< Array < User > >
got all messed up.
Hi,
Thank you for reaching out to us.
The response is a generic type where you can specify your data response, if you have a different data structure instead of passing a user array type you can pass a custom type.
Check out the example in this gist file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks, will have a look at it!
Hi,
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi, I've finally had some time to test the code snippet you gave me.
This is what I did:
1. Configured the types so that they now look like this:
src/app/modules/apps/user-management/users-list/core/_models.ts
import {ID, Response} from "../../../../../../_metronic/helpers"
export type User = {
id?: ID
name?: string
avatar?: string
email?: string
position?: string
role?: string
last_login?: string
two_steps?: boolean
joined_day?: string
online?: boolean
initials?: {
label: string
state: string
}
}
export type CustomType = {
list: Array<User>
}
// export type UsersQueryResponse = Response < Array < User > >
export type UsersQueryResponse = Response < CustomType >
export const initialUser: User = {
avatar: "avatars/300-6.jpg",
position: "Art Director",
role: "Administrator",
name: "",
email: "",
}
src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx
response
<QueryResponseContext.Provider value={{isLoading: isFetching, refetch, response, query}}>
[{
"resource": "REDACTED/src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type "UsersQueryResponse | undefined" is not assignable to type "Response<User[]> | undefined".\n Type "UsersQueryResponse" is not assignable to type "Response<User[]>".\n Types of property "data" are incompatible.\n Type "CustomType | undefined" is not assignable to type "User[] | undefined".\n Type "CustomType" is missing the following properties from type "User[]": length, pop, push, concat, and 35 more.",
"source": "ts",
"startLineNumber": 52,
"startColumn": 76,
"endLineNumber": 52,
"endColumn": 84,
"relatedInformation": [
{
"startLineNumber": 53,
"startColumn": 3,
"endLineNumber": 53,
"endColumn": 11,
"message": "The expected type comes from property "response" which is declared here on type "QueryResponseContextProps<User>"",
"resource": "REDACTED/src/_metronic/helpers/crud-helper/models.ts"
}
]
}]
Hi,
Did you update types in src/app/modules/apps/user-management/users-list/core/_requests.ts?
Regards,
Lauris Stepanovs,
Keenthemes Support Team