Skip to content

Commit

Permalink
chore: Migrate deprecated Table to DataTable for RegisteredLearnersTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@zwidekalanga
zwidekalanga committed Sep 4, 2024
1 parent ec24029 commit 40ba31d
Show file tree
Hide file tree
Showing 3 changed files with 330 additions and 51 deletions.
258 changes: 234 additions & 24 deletions src/components/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,245 @@

exports[`RegisteredLearnersTable renders empty state correctly 1`] = `
<div
className="fade alert-content alert alert-warning show"
role="alert"
className="pgn__data-table-layout-wrapper"
>
<span
className="pgn__icon alert-icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z"
fill="currentColor"
/>
</svg>
</span>
<div
className="pgn__alert-message-wrapper"
className="pgn__data-table-layout-main"
>
<div
className="alert-message-content"
className="pgn__data-table-wrapper"
>
There are no results.
<div
className="pgn__data-table-status-bar"
data-testid="table-control-bar"
>
<div
className="pgn__data-table-status"
>
<div
className="pgn__data-table-status-left"
/>
<div
className="pgn__data-table-actions-right"
>
<div
className="pgn__data-table-toggle"
/>
<div />
</div>
</div>
</div>
<div
className="pgn__data-table-container is-loading"
data-testid="data-table-container"
>
<div
className="pgn__data-table-spinner"
data-testid="data-table-spinner"
>
<div
className="pgn__spinner spinner-border"
role="status"
>
<span
className="sr-only"
>
loading
</span>
</div>
</div>
<table
className="pgn__data-table is-striped"
role="table"
>
<thead>
<tr
role="row"
>
<th
colSpan={1}
onClick={[Function]}
role="columnheader"
style={
{
"cursor": "pointer",
}
}
title="Toggle SortBy"
>
<span
className="d-flex align-items-center"
>
<span>
Email
</span>
<span
className="pgn__icon"
data-testid="arrow-drop-up-down"
style={
{
"opacity": 0.5,
}
}
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m7 10 5-5 5 5H7ZM7 14l5 5 5-5H7Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</th>
<th
colSpan={1}
onClick={[Function]}
role="columnheader"
style={
{
"cursor": "pointer",
}
}
title="Toggle SortBy"
>
<span
className="d-flex align-items-center"
>
<span>
Account Created
</span>
<span
className="pgn__icon"
data-testid="arrow-drop-down"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m7 10 5 5 5-5H7Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</th>
</tr>
</thead>
<tbody
role="rowgroup"
/>
</table>
</div>
<div
className="pgn__data-table-footer"
data-testid="table-footer"
>
<nav
aria-label="table pagination"
className="pagination-minimal"
>
<div
aria-atomic={true}
aria-live="polite"
aria-relevant="text"
className="sr-only"
>
Page 1, Current Page, of -1
</div>
<ul
className="pagination"
>
<li
className="page-item disabled"
>
<button
aria-label="Previous"
className="btn-icon btn-icon-primary btn-icon-md previous page-link"
disabled={true}
onClick={[Function]}
tabIndex="-1"
type="button"
>
<span
className="btn-icon__icon-container"
>
<span
className="pgn__icon btn-icon__icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.51 3.87 15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</li>
<li
className="page-item disabled"
>
<button
aria-label="Next, Page 2"
className="btn-icon btn-icon-primary btn-icon-md next page-link"
disabled={true}
onClick={[Function]}
tabIndex="-1"
type="button"
>
<span
className="btn-icon__icon-container"
>
<span
className="pgn__icon btn-icon__icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Expand Down
49 changes: 49 additions & 0 deletions src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { useCallback, useMemo, useState } from 'react';
import { camelCaseObject } from '@edx/frontend-platform/utils';
import debounce from 'lodash.debounce';
import { logError } from '@edx/frontend-platform/logging';
import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';

const useRegisteredLearners = (enterpriseId) => {
const [isLoading, setIsLoading] = useState(true);
const [registeredLearners, setRegisteredLearners] = useState({
itemCount: 0,
pageCount: 0,
results: [],
});

const fetchRegisteredLearners = useCallback(async (args) => {
try {
setIsLoading(true);
const options = {

Check warning on line 18 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L16-L18 

Added lines #L16 - L18 were not covered by tests
page: args.pageIndex + 1, // `DataTable` uses zero-indexed array
pageSize: args.pageSize,
};
const response = await EnterpriseDataApiService.fetchUnenrolledRegisteredLearners(enterpriseId, options);
const data = camelCaseObject(response.data);

Check warning on line 23 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L22-L23 

Added lines #L22 - L23 were not covered by tests

setRegisteredLearners({

Check warning on line 25 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L25 

Added line #L25 was not covered by tests
itemCount: data.count,
pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),

Check warning on line 27 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L27 

Added line #L27 was not covered by tests
results: data.results,
});
} catch (error) {
logError(error);

Check warning on line 31 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L31 

Added line #L31 was not covered by tests
} finally {
setIsLoading(false);

Check warning on line 33 in src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

View check run for this annotation

Codecov / codecov/patch

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js#L33 

Added line #L33 was not covered by tests
}
}, [enterpriseId]);

const debouncedFetchRegisteredLearners = useMemo(
() => debounce(fetchRegisteredLearners, 300),
[fetchRegisteredLearners],
);

return {
isLoading,
registeredLearners,
fetchRegisteredLearners: debouncedFetchRegisteredLearners,
};
};

export default useRegisteredLearners;
Loading

0 comments on commit 40ba31d

Please sign in to comment.