How can I "extract" and return my user array in getUsers?
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>>The actual data that gets returned looks like this:
[
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]Now, in my case, I get back a slightly different object from the server. The data object looks like this:
{
list: [
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]
}So as you can see the user array is one level further down in the hierarchy.
So my question is; how can I "extract" and return my user array in
getUsers?Replies (6)
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.tsimport {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: "",
}2. Now VSCode is complaining about the following line in
src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsxand in particular the
response<QueryResponseContext.Provider value={{isLoading: isFetching, refetch, response, query}}>The error message that I'm getting in VSCode is the following:
[{
"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"
}
]
}]Any ideas why it is giving me this error and how to correct it?
Thanks.
Hi,
Did you update types in src/app/modules/apps/user-management/users-list/core/_requests.ts?
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
Your Support Matters!
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
