-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #118 from RnDAO/feat/active-member-breakdown
Feat/active member breakdown
- Loading branch information
Showing
15 changed files
with
1,313 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import CustomDialogDetail from './CustomDialogDetail'; | ||
| import { activityCompositionOptions } from '../../../../utils/interfaces'; | ||
|
|
||
| const mockRowDetail = { | ||
| discordId: '123', | ||
| avatar: 'avatar.png', | ||
| username: 'John Doe', | ||
| roles: [ | ||
| { id: 1, name: 'Role 1', color: '#ff0000' }, | ||
| { id: 2, name: 'Role 2', color: '#00ff00' }, | ||
| ], | ||
| activityComposition: ['Composition 1', 'Composition 2'], | ||
| }; | ||
|
|
||
| const mockOptions: activityCompositionOptions[] = [ | ||
| { name: 'Option 1', value: 'option1', color: '#0000ff' }, | ||
| { name: 'Option 2', value: 'option2', color: '#ffff00' }, | ||
| ]; | ||
|
|
||
| test('renders the dialog with all states', () => { | ||
| // Render the dialog with open state | ||
| render( | ||
| <CustomDialogDetail | ||
| open={true} | ||
| rowDetail={mockRowDetail} | ||
| onClose={jest.fn()} | ||
| options={mockOptions} | ||
| /> | ||
| ); | ||
|
|
||
| // Check if the close button is rendered | ||
| const closeButton = screen.getByTestId('close-modal-icon'); | ||
| expect(closeButton).toBeInTheDocument(); | ||
|
|
||
| // Check if the user avatar is rendered | ||
| const avatar = screen.getByAltText('User Avatar'); | ||
| expect(avatar).toBeInTheDocument(); | ||
|
|
||
| // Check if the username is rendered | ||
| const username = screen.getByText('John Doe'); | ||
| expect(username).toBeInTheDocument(); | ||
|
|
||
| // Check if the roles are rendered | ||
| const roleElements = screen.getAllByTestId('role'); | ||
| expect(roleElements.length).toBe(2); | ||
|
|
||
| // Check if the activity compositions are rendered | ||
| const compositionElements = screen.getAllByTestId('activity-composition'); | ||
| expect(compositionElements.length).toBe(2); | ||
|
|
||
| // Render the dialog with closed state | ||
| render( | ||
| <CustomDialogDetail | ||
| open={false} | ||
| rowDetail={mockRowDetail} | ||
| onClose={jest.fn()} | ||
| options={mockOptions} | ||
| /> | ||
| ); | ||
|
|
||
| // Check if the dialog is not rendered | ||
| const dialog = screen.queryByRole('MuiDialog-paper'); | ||
| expect(dialog).toBeNull(); | ||
| }); | ||
|
|
||
| test('calls the onClose callback when the close button is clicked', () => { | ||
| const onClose = jest.fn(); | ||
| render( | ||
| <CustomDialogDetail | ||
| open={true} | ||
| rowDetail={mockRowDetail} | ||
| onClose={onClose} | ||
| options={mockOptions} | ||
| /> | ||
| ); | ||
|
|
||
| // Click the close button | ||
| const closeButton = screen.getByTestId('close-modal-icon'); | ||
| fireEvent.click(closeButton); | ||
|
|
||
| // Check if the onClose callback is called | ||
| expect(onClose).toHaveBeenCalled(); | ||
| }); |
149 changes: 149 additions & 0 deletions
149
src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import React from 'react'; | ||
| import { Dialog, DialogProps } from '@mui/material'; | ||
| import { IoClose } from 'react-icons/io5'; | ||
| import { conf } from '../../../../configs'; | ||
| import { Avatar } from '@mui/material'; | ||
| import { activityCompositionOptions } from '../../../../utils/interfaces'; | ||
|
|
||
| interface CustomDialogDetailProps extends DialogProps { | ||
| open: boolean; | ||
| rowDetail: any; | ||
| options: activityCompositionOptions[]; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({ | ||
| open, | ||
| rowDetail, | ||
| onClose, | ||
| options, | ||
| ...props | ||
| }) => { | ||
| const handleClose = () => { | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Dialog open={open} onClose={onClose} {...props}> | ||
| <div className="pb-8 pt-6 px-5 space-y-6"> | ||
| <IoClose | ||
| data-testid="close-modal-icon" | ||
| size={40} | ||
| onClick={handleClose} | ||
| className="cursor-pointer float-right" | ||
| /> | ||
| <div className="py-6 px-8 space-y-6"> | ||
| <div className="flex flex-row items-center"> | ||
| <Avatar | ||
| src={`${conf.DISCORD_CDN}avatars/${rowDetail?.discordId}/${rowDetail?.avatar}.png`} | ||
| alt="User Avatar" | ||
| /> | ||
| <span className="ml-2 font-semibold text-base"> | ||
| {rowDetail?.username} | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <p className="text-xs pb-2 font-semibold">Roles:</p> | ||
| <div className="flex flex-row flex-wrap items-center first:ml-0 ml-1"> | ||
| {rowDetail?.roles.map((role: any) => ( | ||
| <div | ||
| key={role.id} | ||
| className="flex flex-row flex-wrap" | ||
| style={{ whiteSpace: 'nowrap' }} | ||
| data-testid="role" | ||
| > | ||
| <span | ||
| className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs" | ||
| style={{ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| backgroundColor: | ||
| role.color !== 0 | ||
| ? `#${role.color.toString(16).padStart(6, '0')}` | ||
| : '#96A5A6', | ||
| }} | ||
| > | ||
| <span | ||
| className="w-2 h-2 rounded-full mr-1" | ||
| style={{ | ||
| backgroundColor: | ||
| role.color !== 0 | ||
| ? `#${role.color.toString(16).padStart(6, '0')}` | ||
| : '#96A5A6', | ||
| flexShrink: 0, | ||
| }} | ||
| /> | ||
| {role.name} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <p className="text-xs pb-2 font-semibold">Activity composition:</p> | ||
| <div className="flex flex-row flex-wrap"> | ||
| {rowDetail && rowDetail?.activityComposition.length > 0 ? ( | ||
| rowDetail?.activityComposition.map((composition: any) => { | ||
| const matchedOption = options.find( | ||
| (option) => option.name === composition | ||
| ); | ||
| const backgroundColor = matchedOption | ||
| ? matchedOption.color | ||
| : '#96A5A6'; | ||
|
|
||
| return ( | ||
| <div | ||
| key={composition} | ||
| className="flex flex-row flex-wrap items-center first:ml-0 ml-1" | ||
| data-testid="activity-composition" | ||
| > | ||
| <span | ||
| className="bg-white p-1 px-2 mb-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center" | ||
| style={{ | ||
| backgroundColor: backgroundColor, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <span | ||
| className="w-2 h-2 rounded-full mr-2" | ||
| style={{ | ||
| backgroundColor: backgroundColor, | ||
| flexShrink: 0, | ||
| }} | ||
| /> | ||
| {composition} | ||
| </span> | ||
| </div> | ||
| ); | ||
| }) | ||
| ) : ( | ||
| <div className="flex flex-row flex-wrap items-center"> | ||
| <span | ||
| className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center" | ||
| style={{ | ||
| backgroundColor: '#96A5A6', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <span | ||
| className="w-2 h-2 rounded-full mr-2" | ||
| style={{ | ||
| backgroundColor: '#96A5A6', | ||
| flexShrink: 0, | ||
| }} | ||
| /> | ||
| other{' '} | ||
| </span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomDialogDetail; |
53 changes: 53 additions & 0 deletions
53
src/components/pages/statistics/memberBreakdowns/CustomPagination.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import CustomPagination from './CustomPagination'; | ||
|
|
||
| describe('CustomPagination', () => { | ||
| const mockTotalItems = 100; | ||
| const mockItemsPerPage = 10; | ||
| const mockCurrentPage = 1; | ||
| const mockOnChangePage = jest.fn(); | ||
|
|
||
| it('renders the component', () => { | ||
| render( | ||
| <CustomPagination | ||
| totalItems={mockTotalItems} | ||
| itemsPerPage={mockItemsPerPage} | ||
| currentPage={mockCurrentPage} | ||
| onChangePage={mockOnChangePage} | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.getByRole('navigation')).toBeInTheDocument(); | ||
| expect(screen.getByText('1')).toBeInTheDocument(); | ||
| expect(screen.getByText('2')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('triggers onChangePage when a page is clicked', () => { | ||
| render( | ||
| <CustomPagination | ||
| totalItems={mockTotalItems} | ||
| itemsPerPage={mockItemsPerPage} | ||
| currentPage={mockCurrentPage} | ||
| onChangePage={mockOnChangePage} | ||
| /> | ||
| ); | ||
|
|
||
| fireEvent.click(screen.getByText('2')); | ||
| expect(mockOnChangePage).toHaveBeenCalledWith(2); | ||
| }); | ||
|
|
||
| it('does not trigger onChangePage when the current page is clicked', () => { | ||
| render( | ||
| <CustomPagination | ||
| totalItems={mockTotalItems} | ||
| itemsPerPage={mockItemsPerPage} | ||
| currentPage={mockCurrentPage} | ||
| onChangePage={mockOnChangePage} | ||
| /> | ||
| ); | ||
|
|
||
| fireEvent.click(screen.getByText('1')); | ||
| expect(mockOnChangePage).toHaveBeenCalled(); | ||
| }); | ||
| }); |
36 changes: 36 additions & 0 deletions
36
src/components/pages/statistics/memberBreakdowns/CustomPagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { useState } from 'react'; | ||
| import { Pagination, PaginationItem } from '@mui/material'; | ||
|
|
||
| interface PaginationProps { | ||
| totalItems: number; | ||
| itemsPerPage: number; | ||
| currentPage: number; | ||
| onChangePage: (page: number) => void; | ||
| } | ||
|
|
||
| const CustomPagination: React.FC<PaginationProps> = ({ | ||
| totalItems, | ||
| itemsPerPage, | ||
| currentPage, | ||
| onChangePage, | ||
| }) => { | ||
| const totalPages = Math.ceil(totalItems / itemsPerPage); | ||
|
|
||
| const handleChangePage = (page: number) => { | ||
| if (page !== currentPage) { | ||
| onChangePage(page); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Pagination | ||
| shape="rounded" | ||
| count={totalPages} | ||
| page={currentPage} | ||
| onChange={(event, page) => handleChangePage(page)} | ||
| renderItem={(item) => <PaginationItem component="button" {...item} />} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomPagination; |
Oops, something went wrong.