Users: Pagination and infinite scroll

moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt

@@ -71,7 +71,7 @@ class V2UserController(
         @RequestHeader(value = "Authorization") authorization: String,
         @RequestParam("name", required = false) name: String?,
         @RequestParam("email", required = false) email: String?,
-        pageable: PageRequest
+        @Valid pageable: PageRequest
     ): ResourcePageResponse<SimpleUserResponse> {
         return this.findAllUsersInteractor.execute(name, email, authorization, pageable)
     }

ui/src/core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx

@@ -33,7 +33,7 @@ test('renders LabeledIcon component with default properties', () => {
 
   expect(textElement).toBeInTheDocument();
   expect(labelElement).toBeInTheDocument();
-  expect(labelElement).toHaveStyle('margin-left: 5px;');
+  expect(labelElement).toHaveStyle('margin-left:8px;');
   expect(iconElement).toBeInTheDocument();
 });
 

ui/src/core/components/LabeledIcon/index.tsx

@@ -34,7 +34,7 @@ const LabeledIcon = ({
   className,
   size = '15px',
   isActive,
-  marginContent = '5px',
+  marginContent = '8px',
   onClick
 }: Props) => {
   return (

ui/src/core/providers/users.ts

@@ -24,12 +24,15 @@ const endpointWorkspaces = '/moove/v2/workspaces/users';
 const v1Endpoint = '/moove/users';
 
 export interface UserFilter {
+  id?: string;
   name?: string;
   email?: string;
+  page?: number;
 }
 
 const initialUserFilter = {
-  email: ''
+  name: '',
+  page: 0
 };
 
 export const findAllWorkspaceUsers = (
@@ -48,10 +51,9 @@ export const findAllWorkspaceUsers = (
 };
 
 export const findAllUsers = (filter: UserFilter = initialUserFilter) => {
-  const defaultPage = 0;
   const params = new URLSearchParams({
     size: `${DEFAULT_PAGE_SIZE}`,
-    page: `${defaultPage}`
+    page: `${filter.page ?? 0}`
   });
 
   if (filter?.name) params.append('name', filter?.name);

ui/src/core/state/__tests__/hooks.spec.tsx → ui/src/core/state/__tests__/hooks.spec.ts

@@ -14,21 +14,35 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useGlobalState, useDispatch } from '../hooks';
 import { AllTheProviders as wrapper } from 'unit-test/testUtils';
 import { circlesInitialState } from 'modules/Circles/state/reducer';
+import { userInitialState } from 'modules/Users/state/reducer';
 
-test('useGlobalState', () => {
+test('circle: useGlobalState', () => {
   const { result } = renderHook(() => useGlobalState(state => state.circles), {
     wrapper
   });
 
   expect(result.current).toEqual(circlesInitialState);
 });
 
-test('useDispatch', () => {
+test('circle: useDispatch', () => {
+  const { result } = renderHook(() => useDispatch(), { wrapper });
+
+  expect(result.current).toEqual(expect.any(Function));
+});
+
+test('users: useGlobalState', () => {
+  const { result } = renderHook(() => useGlobalState(state => state.users), {
+    wrapper
+  });
+
+  expect(result.current).toEqual(userInitialState);
+});
+
+test('users: useDispatch', () => {
   const { result } = renderHook(() => useDispatch(), { wrapper });
 
   expect(result.current).toEqual(expect.any(Function));

ui/src/modules/Account/Menu/MenuItem.tsx

@@ -39,7 +39,7 @@ const MenuItem = ({ id, icon, name, path }: Props) => {
       isActive={isActive(id)}
       data-testid={`menu-${name}`}
     >
-      <Styled.ListItem icon={icon} marginContent="8px">
+      <Styled.ListItem icon={icon}>
         <Text.h4 color="light">{name}</Text.h4>
       </Styled.ListItem>
     </Styled.Link>

ui/src/modules/Groups/__tests__/fixtures.ts

@@ -0,0 +1,55 @@
+export const userGroupPagination = {
+  content: [{
+    id: '123',
+    name: 'group 1',
+    users: [{
+      id: '123',
+      name: 'Charles',
+      email: 'charlescd@zup.com.br',
+      photoUrl: 'https://charlescd.io',
+      createdAt: '2020-01-01 12:00'
+    }]
+  }],
+  page: 0,
+  size: 0,
+  totalPages: 0,
+  last: true
+};
+
+export const userGroup = {
+  id: '123',
+  name: 'group 1',
+  author: {
+    id: '456',
+    name: 'Charles',
+    email: 'charlescd@zup.com.br',
+    createdAt: '2020-01-01 12:00',
+  },
+  createdAt: '2020-01-01 12:00',
+  users: [{
+    id: '123',
+    name: 'Charles',
+    email: 'charlescd@zup.com.br',
+    photoUrl: 'https://charlescd.io',
+    createdAt: '2020-01-01 12:00'
+  }]
+};
+
+export const users = {
+  content: [{
+    id: '123',
+    name: 'Charles',
+    email: 'charlescd@zup.com.br',
+    photoUrl: 'https://charlescd.io',
+    applications: [{
+      id: '123',
+      name: 'Application 1',
+      menbersCount: 1
+    }],
+    createdAt: '2020-01-01 12:00'
+  }],
+  page: 0,
+  size: 0,
+  totalPages: 0,
+  last: true
+};

ui/src/modules/Groups/__tests__/hooks.spec.tsx → ui/src/modules/Groups/__tests__/hooks.spec.ts

@@ -15,10 +15,11 @@
  */
 
 import { renderHook, act } from '@testing-library/react-hooks';
-import { screen, wait } from 'unit-test/testUtils';
+import { waitFor } from 'unit-test/testUtils';
 import { FetchMock } from 'jest-fetch-mock';
 import { useCreateUserGroup, useDeleteUserGroup, useFindAllUserGroup, useFindUserGroupByID, useListUser, useManagerMemberInUserGroup, useUpdateUserGroup } from '../hooks';
 import { UserGroup } from '../interfaces/UserGroups';
+import {userGroupPagination, userGroup, users} from './fixtures';
 
 beforeEach(() => {
   (fetch as FetchMock).resetMocks();
@@ -41,7 +42,7 @@ test('create a new user group', async () => {
     await result.current.createUserGroup(newUserGroup.name);
   });
 
-  await wait(() => expect(result.current.response).toMatchObject(newUserGroup));
+  await waitFor(() => expect(result.current.response).toMatchObject(newUserGroup));
 });
 
 test('error create a new user group', async () => {
@@ -60,29 +61,11 @@ test('error create a new user group', async () => {
     response = await result.current.createUserGroup(newUserGroup.name);
   });
 
-  await wait(() => expect(response).toBeUndefined());
-  await wait(() => expect(result.current.response).toBeUndefined());
+  await waitFor(() => expect(response).toBeUndefined());
+  await waitFor(() => expect(result.current.response).toBeUndefined());
 });
 
 test('to find all user groups', async () => {
-  const userGroupPagination = {
-    content: [{
-      id: '123',
-      name: 'group 1',
-      users: [{
-        id: '123',
-        name: 'Charles',
-        email: 'charlescd@zup.com.br',
-        photoUrl: 'https://charlescd.io',
-        createdAt: '2020-01-01 12:00'
-      }]
-    }],
-    page: 0,
-    size: 0,
-    totalPages: 0,
-    last: true
-  };
-
   (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroupPagination));
 
   const { result } = renderHook(() => useFindAllUserGroup());
@@ -91,29 +74,10 @@ test('to find all user groups', async () => {
     await result.current[0]('group 1');
   });
 
-  await wait(() => expect(result.current[2]).toMatchObject(userGroupPagination));
+  await waitFor(() => expect(result.current[2]).toMatchObject(userGroupPagination));
 });
 
 test('to find user group by id', async () => {
-  const userGroup = {
-    id: '123',
-    name: 'group 1',
-    author: {
-      id: '456',
-      name: 'Charles',
-      email: 'charlescd@zup.com.br',
-      createdAt: '2020-01-01 12:00',
-    },
-    createdAt: '2020-01-01 12:00',
-    users: [{
-      id: '123',
-      name: 'Charles',
-      email: 'charlescd@zup.com.br',
-      photoUrl: 'https://charlescd.io',
-      createdAt: '2020-01-01 12:00'
-    }]
-  };
-
   (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroup));
 
   const { result } = renderHook(() => useFindUserGroupByID());
@@ -122,29 +86,10 @@ test('to find user group by id', async () => {
     await result.current[0]('123');
   });
 
-  await wait(() => expect(result.current[1]).toMatchObject(userGroup));
+  await waitFor(() => expect(result.current[1]).toMatchObject(userGroup));
 });
 
 test('to list users', async () => {
-  const users = {
-    content: [{
-      id: '123',
-      name: 'Charles',
-      email: 'charlescd@zup.com.br',
-      photoUrl: 'https://charlescd.io',
-      applications: [{
-        id: '123',
-        name: 'Application 1',
-        menbersCount: 1
-      }],
-      createdAt: '2020-01-01 12:00'
-    }],
-    page: 0,
-    size: 0,
-    totalPages: 0,
-    last: true
-  };
-
   (fetch as FetchMock).mockResponseOnce(JSON.stringify(users));
 
   const { result } = renderHook(() => useListUser());
@@ -153,29 +98,10 @@ test('to list users', async () => {
     await result.current[0]('charlescd@zup.com.br');
   });
 
-  await wait(() => expect(result.current[1]).toMatchObject(users));
+  await waitFor(() => expect(result.current[1]).toMatchObject(users));
 });
 
 test('to update user group', async () => {
-  const userGroup = {
-    id: '123',
-    name: 'group 1',
-    author: {
-      id: '456',
-      name: 'Charles',
-      email: 'charlescd@zup.com.br',
-      createdAt: '2020-01-01 12:00',
-    },
-    createdAt: '2020-01-01 12:00',
-    users: [{
-      id: '123',
-      name: 'Charles',
-      email: 'charlescd@zup.com.br',
-      photoUrl: 'https://charlescd.io',
-      createdAt: '2020-01-01 12:00'
-    }]
-  };
-
   (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroup));
 
   const { result } = renderHook(() => useUpdateUserGroup());
@@ -184,7 +110,7 @@ test('to update user group', async () => {
     await result.current[0]('123', 'Charles');
   });
 
-  await wait(() => expect(result.current[1]).toMatchObject(userGroup));
+  await waitFor(() => expect(result.current[1]).toMatchObject(userGroup));
 });
 
 test('to delete user group', async () => {
@@ -196,7 +122,7 @@ test('to delete user group', async () => {
     await result.current[0]('123');
   });
 
-  await wait(() => expect(result.current[1]).toMatchObject({}));
+  await waitFor(() => expect(result.current[1]).toMatchObject({}));
 });
 
 test('to manager members in user group', async () => {
@@ -208,5 +134,5 @@ test('to manager members in user group', async () => {
     await result.current[0](false, '123', '456');
   });
 
-  await wait(() => expect(result.current[1]).toBe('resolved'));
+  await waitFor(() => expect(result.current[1]).toBe('resolved'));
 });

ui/src/modules/Hypotheses/Menu/MenuItem.tsx

@@ -36,11 +36,7 @@ const MenuItem = ({ id, name, onClick }: Props) => {
 
   return (
     <Styled.Link onClick={() => onClick()} isActive={isActive}>
-      <Styled.ListItem
-        icon="hypotheses"
-        marginContent="8px"
-        isActive={isActive}
-      >
+      <Styled.ListItem icon="hypotheses" isActive={isActive}>
         <Styled.Item color="light">{name}</Styled.Item>
       </Styled.ListItem>
     </Styled.Link>

ui/src/modules/Metrics/Menu/MenuItem.tsx

@@ -33,7 +33,7 @@ const MenuItem = ({ route, id, name }: Props) => {
 
   return (
     <Styled.Link onClick={() => history.push(route)} isActive={isActive}>
-      <Styled.ListItem icon="metrics" marginContent="8px" isActive={isActive}>
+      <Styled.ListItem icon="metrics" isActive={isActive}>
         <Styled.Item color="light">{name}</Styled.Item>
       </Styled.ListItem>
     </Styled.Link>

ui/src/modules/Modules/Menu/MenuItem.tsx

@@ -46,11 +46,7 @@ const MenuItem = ({ id, name }: Props) => {
   return (
     <Can I="read" a="modules" passThrough>
       <Styled.Link onClick={() => onMenuClick()} isActive={isActive()}>
-        <Styled.ListItem
-          icon="modules"
-          marginContent="8px"
-          isActive={isActive()}
-        >
+        <Styled.ListItem icon="modules" isActive={isActive()}>
           <Text.h4 color="light">{moduleFormatterName(name)}</Text.h4>
         </Styled.ListItem>
       </Styled.Link>

ui/src/modules/Settings/Menu/MenuItem.tsx

@@ -39,7 +39,7 @@ const MenuItem = ({ id, icon, name, path }: Props) => {
       isActive={isActive(id)}
       data-testid={`menu-item-link-${name}`}
     >
-      <Styled.ListItem icon={icon} marginContent="8px" isActive={isActive(id)}>
+      <Styled.ListItem icon={icon} isActive={isActive(id)}>
         <Text.h4 color="light">{name}</Text.h4>
       </Styled.ListItem>
     </Styled.Link>

ui/src/modules/Users/Menu/Loaders/index.tsx

@@ -15,10 +15,10 @@
  */
 
 import React from 'react';
-import { Loader as LoaderList } from './list';
+import { Loader as LoaderList, Props as ListProps } from './list';
 
 const Loader = {
-  List: () => <LoaderList />
+  List: ({ className }: ListProps) => <LoaderList className={className} />
 };
 
 export default Loader;