How can I "extract" and return my user array in getUsers?

Question

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 => {
  return axios
    .get(`${GET_USERS_URL}?${query}`)
    .then((d: AxiosResponse) => d.data)
}

UsersQueryResponse is declared in src/app/modules/apps/user-management/users-list/core/_models.ts: export type UsersQueryResponse = Response> 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?

DC · Answer

export type UsersQueryResponse = Response< Array < User > > got all messed up.

DC · Answer

Thanks, will have a look at it!

DC · Answer

Hi, I've finally had some time to test the code snippet you gave me. This is what I did: 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
}

// 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: '',
}

Now VSCode is complaining about the following line in

src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx

and in particular the

response

parameter:

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 | undefined'.
 Type 'UsersQueryResponse' is not assignable to type 'Response'.
 Types of property 'data' are incompatible.
 Type 'CustomType | undefined' is not assignable to type 'User[] | undefined'.
 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'",
"resource": "REDACTED/src/_metronic/helpers/crud-helper/models.ts"
}
]
}]

Any ideas why it is giving me this error and how to correct it? Thanks.

How can I "extract" and return my user array in getUsers?

Replies (6)

Your Support Matters!

Metronic

ReUI

Products

Legal

Stay Connected