mansi-manhas / display-user-list-by-user-type Goto Github PK

Implement this design and build a react app in TypeScript. The data will be fetcehd with the GraphQL API.

• api: contains queries.ts and aws-exports.js

• components: contains common reusable components being used in the UI, like AvatarCard, RadioGroup, Text, Title

• ui: contains the custom ui components as per the design

  • UserTypes.tsx: first part of the UI
  • UserListByType.tsx: second part of the UI
  • UserView.tsx: UserTypes.tsx + UserListByType.tsx

• Each folder has below files:

  • styles.styled.ts: contains styled-components
  • types.ts: contains typescript types and prop types
  • __tests__: folder contains unit tests for each component

• If the requirement was more complex, then we would be creating multiple sub-folders for each component, and each sub-folder would have above files

• UserView component is a wrapper component around UserType and UserListByType

• Using useMemo hook that helps avoiding re-execution of same expensive function in any component. This memoize the values between renders.
• Using useCallback hook that returns a memoized instance of the method that changes with the change of dependencies (i.e., instead of re-creating the instance of the function in every render, the same instance will be used)

All files | 89.55 | 81.25 | 82.6 | 90.9 |