Skip to content

Commit ac8aa37

Browse files
shebz2023shebz2023
committed
fx-remove-details on trainee performance's account
this fix removes the button this works on the design to cover the gap of the button removed
1 parent 64af47e commit ac8aa37

File tree

3 files changed

+212
-80
lines changed

3 files changed

+212
-80
lines changed

Diff for: ‎src/components/Docs/users.tsx

+71-36
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,76 @@
1-
import React from 'react'
2-
import DocsMain from './DocsMain'
1+
import React from 'react';
2+
import DocsMain from './DocsMain';
33

4-
const UsersDocs = () => {
5-
return (
6-
<div>
7-
<DocsMain
8-
content={
9-
<div className="flex items-start box-border">
10-
<div className="w-full">
11-
<div className=" w-full sm:px-10 mb-10 text-gray-600 dark:text-slate-300 text-lg ml-0 pt-4">
12-
<h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
13-
Getting started
14-
</h2>
15-
<div className="mt-5 w-[100%] sm:w-full mb-4">
16-
Devpulse is a semi-open platform i.e. using it, requires a certain level of approval from the owners/managers. If you browse the homepage, you might wonder why there is no signup button, this is because to sign up you need an invitation.
17-
<h3 className="m-2 mb-4 text-2xl font-bold">
18-
Terminology to be familiar with:</h3>
19-
<ul className=" list-disc ml-12">
4+
function UsersDocs() {
5+
return (
6+
<div>
7+
<DocsMain
8+
content={
9+
<div className="flex items-start box-border">
10+
<div className="w-full">
11+
<div className=" w-full sm:px-10 mb-10 text-gray-600 dark:text-slate-300 text-lg ml-0 pt-4">
12+
<h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
13+
Getting started
14+
</h2>
15+
<div className="mt-5 w-[100%] sm:w-full mb-4">
16+
Devpulse is a semi-open platform i.e. using it, requires a
17+
certain level of approval from the owners/managers. If you
18+
browse the homepage, you might wonder why there is no signup
19+
button, this is because to sign up you need an invitation.
20+
<h3 className="m-2 mb-4 text-2xl font-bold">
21+
Terminology to be familiar with:
22+
</h3>
23+
<ul className=" list-disc ml-12">
24+
<li>
25+
<b>Organizations</b>: each Devpulse user belongs to an
26+
organization. The default organization is Andela. The
27+
admin of a given organisation has the highest privilege;
28+
they are the one in charge of managing the rest of the
29+
users and different administrative tasks
30+
</li>
2031

21-
<li><b>Organizations</b>: each Devpulse user belongs to an organization. The default organization is Andela. The admin of a given organisation has the highest privilege; they are the one in charge of managing the rest of the users and different administrative tasks</li>
22-
23-
<li><b>Programs</b>: each organization should have a program that it is running.</li>
24-
<li><b>Managers:</b> each program should have managers with different access levels. (coordinators, technical team leads, managers)</li>
25-
<li><b>Trainees:</b> an ordinary user of the app will fall under the role of a trainee. As a trainee, you belong to a team, which in turn belongs to a cohort, which in turn belongs to a program</li>
26-
</ul>
27-
28-
<h3 className="m-2 mb-4 text-2xl font-bold">Signing up as a user</h3>
29-
<p>To sign up, <b><u>your org admin must send you an invite</u></b>. The invitation email will contain the details of how to sign up</p>
30-
<h3 className="m-2 mb-4 text-2xl font-bold">Signing in as a user</h3>
31-
<p>To sign in, go to the signin page, provide the correct name of your organization, on the next screen enter username and password.</p>
32-
</div>
33-
</div>
32+
<li>
33+
<b>Programs</b>: each organization should have a program
34+
that it is running.
35+
</li>
36+
<li>
37+
<b>Managers:</b> each program should have managers with
38+
different access levels. (coordinators, technical team
39+
leads, managers)
40+
</li>
41+
<li>
42+
<b>Trainees:</b> an ordinary user of the app will fall
43+
under the role of a trainee. As a trainee, you belong to a
44+
team, which in turn belongs to a cohort, which in turn
45+
belongs to a program
46+
</li>
47+
</ul>
48+
<h3 className="m-2 mb-4 text-2xl font-bold">
49+
Signing up as a user
50+
</h3>
51+
<p>
52+
To sign up,{' '}
53+
<b>
54+
<u>your org admin must send you an invite</u>
55+
</b>
56+
. The invitation email will contain the details of how to
57+
sign up
58+
</p>
59+
<h3 className="m-2 mb-4 text-2xl font-bold">
60+
Signing in as a user
61+
</h3>
62+
<p>
63+
To sign in, go to the signin page, provide the correct name
64+
of your organization, on the next screen enter username and
65+
password.
66+
</p>
3467
</div>
68+
</div>
3569
</div>
36-
}
37-
/>
38-
</div>
39-
)
70+
</div>
71+
}
72+
/>
73+
</div>
74+
);
4075
}
41-
export default UsersDocs
76+
export default UsersDocs;

Diff for: ‎src/components/TraineePerformance.tsx

+3-44
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { toast } from 'react-toastify';
55
import Pagination from './Pagination';
66
import PerformanceData from '../dummyData/performance.json';
77
import { TRAINEE_RATING } from '../Mutations/Ratings';
8-
import Button from './Buttons';
9-
import RemarksModal from '../pages/ratings/CoordinatorRemarks';
108
import { UserContext } from '../hook/useAuth';
119
import { rowsType } from '../pages/ratings/frame';
1210

@@ -60,7 +58,6 @@ export const GET_RATINGS_DATA = gql`
6058
}
6159
`;
6260

63-
6461
function TraineePerfomance() {
6562
const [usedata, setUserdata] = React.useState([]);
6663
const { data } = useQuery(GET_RATINGS_DATA, {});
@@ -133,28 +130,8 @@ function TraineePerfomance() {
133130
});
134131
}, []);
135132

136-
const openFeed = (rate: any) => {
137-
setToggle(true);
138-
setRow((prev) => ({
139-
...prev,
140-
sprint: rate?.sprint,
141-
quantityremark: rate?.quantityRemark,
142-
qualityremark: rate?.qualityRemark,
143-
professionalRemark: rate?.professionalRemark,
144-
id: user?.userId,
145-
username: rate?.cohort?.coordinator?.profile?.name,
146-
user: rate?.cohort?.coordinator?.email,
147-
feedbacks: rate?.feedbacks,
148-
}));
149-
};
150-
151-
const closeFeeds = () => {
152-
setToggle(false);
153-
};
154-
155133
return (
156134
<>
157-
<RemarksModal showRemarks={toggle} closeModal={closeFeeds} rows={row} />
158135
<div className="bg-light-bg dark:bg-dark-frame-bg pb-10">
159136
<div className="">
160137
<div className="bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-full">
@@ -194,9 +171,6 @@ function TraineePerfomance() {
194171
<th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-center text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
195172
{t('Average')}
196173
</th>
197-
<th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-center text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
198-
{t('Actions')}
199-
</th>
200174
</tr>
201175
{ratings?.slice(firstContentIndex, lastContentIndex).map(
202176
/* istanbul ignore next */
@@ -234,26 +208,11 @@ function TraineePerfomance() {
234208
</td>
235209
<td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
236210
<p className="text-gray-900 dark:text-white whitespace-no-wrap text-center">
237-
{item.average %1 === 0? item.average: Number(item.average).toFixed(2)}
211+
{item.average % 1 === 0
212+
? item.average
213+
: Number(item.average).toFixed(2)}
238214
</p>
239215
</td>
240-
241-
<td className="px-0 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
242-
<Button
243-
variant="primary"
244-
size="sm"
245-
style="px-4 py-1 text-sm"
246-
onClick={
247-
/* istanbul ignore next */
248-
() => {
249-
/* istanbul ignore next */
250-
openFeed(item);
251-
}
252-
}
253-
>
254-
{t('Details')}
255-
</Button>
256-
</td>
257216
</tr>
258217
),
259218
)}

Diff for: ‎src/components/tests/pagination.test.tsx

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { renderHook, act } from '@testing-library/react';
2+
import Pagination from '../../components/Pagination';
3+
4+
describe('Pagination', () => {
5+
test('initializes with correct values', () => {
6+
const { result } = renderHook(() =>
7+
Pagination({ contentPerPage: 10, count: 100 }),
8+
);
9+
10+
expect(result.current.totalPages).toBe(10);
11+
expect(result.current.page).toBe(1);
12+
expect(result.current.firstContentIndex).toBe(0);
13+
expect(result.current.lastContentIndex).toBe(10);
14+
});
15+
16+
test('changes page correctly', () => {
17+
const { result } = renderHook(() =>
18+
Pagination({ contentPerPage: 10, count: 100 }),
19+
);
20+
21+
act(() => {
22+
result.current.nextPage();
23+
});
24+
25+
expect(result.current.page).toBe(2);
26+
expect(result.current.firstContentIndex).toBe(10);
27+
expect(result.current.lastContentIndex).toBe(20);
28+
29+
act(() => {
30+
result.current.prevPage();
31+
});
32+
33+
expect(result.current.page).toBe(1);
34+
expect(result.current.firstContentIndex).toBe(0);
35+
expect(result.current.lastContentIndex).toBe(10);
36+
});
37+
38+
test('does not go below page 1', () => {
39+
const { result } = renderHook(() =>
40+
Pagination({ contentPerPage: 10, count: 100 }),
41+
);
42+
43+
act(() => {
44+
result.current.prevPage();
45+
});
46+
47+
expect(result.current.page).toBe(1);
48+
});
49+
50+
test('does not go above max pages', () => {
51+
const { result } = renderHook(() =>
52+
Pagination({ contentPerPage: 10, count: 100 }),
53+
);
54+
55+
act(() => {
56+
result.current.setPage(10);
57+
result.current.nextPage();
58+
});
59+
60+
expect(result.current.page).toBe(10);
61+
});
62+
63+
test('setPage works correctly', () => {
64+
const { result } = renderHook(() =>
65+
Pagination({ contentPerPage: 10, count: 100 }),
66+
);
67+
68+
act(() => {
69+
result.current.setPage(5);
70+
});
71+
72+
expect(result.current.page).toBe(5);
73+
expect(result.current.firstContentIndex).toBe(40);
74+
expect(result.current.lastContentIndex).toBe(50);
75+
});
76+
77+
test('handles edge cases in setPage', () => {
78+
const { result } = renderHook(() =>
79+
Pagination({ contentPerPage: 10, count: 100 }),
80+
);
81+
82+
act(() => {
83+
result.current.setPage(0);
84+
});
85+
86+
expect(result.current.page).toBe(1);
87+
88+
act(() => {
89+
result.current.setPage(11);
90+
});
91+
92+
expect(result.current.page).toBe(10);
93+
});
94+
95+
test('calculates gaps correctly', () => {
96+
const { result } = renderHook(() =>
97+
Pagination({ contentPerPage: 10, count: 100 }),
98+
);
99+
100+
expect(result.current.gaps).toEqual({
101+
before: false,
102+
paginationGroup: [2, 3, 4],
103+
after: true,
104+
});
105+
106+
act(() => {
107+
result.current.setPage(5);
108+
});
109+
110+
expect(result.current.gaps).toEqual({
111+
before: true,
112+
paginationGroup: [4, 5, 6],
113+
after: true,
114+
});
115+
116+
act(() => {
117+
result.current.setPage(10);
118+
});
119+
120+
expect(result.current.gaps).toEqual({
121+
before: true,
122+
paginationGroup: [7, 8, 9],
123+
after: false,
124+
});
125+
});
126+
test('handles small number of pages', () => {
127+
const { result } = renderHook(() =>
128+
Pagination({ contentPerPage: 10, count: 30 }),
129+
);
130+
131+
expect(result.current.totalPages).toBe(3);
132+
expect(result.current.gaps).toEqual({
133+
before: false,
134+
paginationGroup: [2],
135+
after: false,
136+
});
137+
});
138+
});

0 commit comments

Comments
 (0)