@edx/frontend-app-subscription-learner-dashboard 1.58.0 → 1.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { Alert } from '@openedx/paragon';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { Alert, Pagination } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
5
|
import { usePopularCoursesAndProgramsData } from '../../hooks/usePopularCoursesAndPrograms';
|
|
6
6
|
import { useAlgoliaSearch } from '../../utils/algoliaUtils';
|
|
@@ -8,15 +8,37 @@ import messages from './messages';
|
|
|
8
8
|
import NoPopularCourseItems from './NoPopularCourseItems';
|
|
9
9
|
import PopularCourses from './PopularCourses';
|
|
10
10
|
import { PRODUCT_TYPE_COURSE } from '../../constants';
|
|
11
|
+
import { useViewport } from '../../utils';
|
|
11
12
|
export const PopularCoursePanel = () => {
|
|
12
13
|
const { formatMessage } = useIntl();
|
|
13
14
|
const [searchClient] = useAlgoliaSearch();
|
|
15
|
+
const [pageNumber, setPageNumber] = useState(1);
|
|
16
|
+
const { isMobile, isTablet } = useViewport();
|
|
17
|
+
const isPaginated = isMobile || isTablet;
|
|
14
18
|
const { data: popularCoursesData = [], isError, isLoading, } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_COURSE);
|
|
15
19
|
const hasPopularCoursesData = useMemo(() => popularCoursesData.length > 0, [popularCoursesData]);
|
|
20
|
+
const itemsPerPage = isMobile
|
|
21
|
+
? 1
|
|
22
|
+
: isTablet
|
|
23
|
+
? 2
|
|
24
|
+
: popularCoursesData.length;
|
|
25
|
+
const numPages = isPaginated
|
|
26
|
+
? Math.ceil(popularCoursesData.length / itemsPerPage)
|
|
27
|
+
: 1;
|
|
28
|
+
const displayedCourses = useMemo(() => {
|
|
29
|
+
if (!isPaginated) {
|
|
30
|
+
return popularCoursesData;
|
|
31
|
+
}
|
|
32
|
+
const startIndex = (pageNumber - 1) * itemsPerPage;
|
|
33
|
+
return popularCoursesData.slice(startIndex, startIndex + itemsPerPage);
|
|
34
|
+
}, [isPaginated, pageNumber, itemsPerPage, popularCoursesData]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
setPageNumber(1);
|
|
37
|
+
}, [isMobile, isTablet, popularCoursesData.length]);
|
|
16
38
|
if (isError) {
|
|
17
39
|
return (_jsx("div", { className: "popular-courses-container mt-5 mb-3", "data-testid": "popular-courses-panel", children: _jsx(Alert, { variant: "danger", "data-testid": "popular-courses-error", children: formatMessage(messages.popularCoursesErrorText) }) }));
|
|
18
40
|
}
|
|
19
|
-
return (_jsxs("div", { className: "popular-courses-container mt-5 mb-3", "data-testid": "popular-courses-panel", children: [_jsx("div", { className: "popular-courses-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularCoursesHeader) }) }), isLoading ? (_jsx("p", { "data-testid": "popular-courses-loading", role: "status", "aria-live": "polite", children: formatMessage(messages.popularCoursesLoadingText) })) : (hasPopularCoursesData ? (_jsx(PopularCourses, { items:
|
|
41
|
+
return (_jsxs("div", { className: "popular-courses-container mt-5 mb-3", "data-testid": "popular-courses-panel", children: [_jsx("div", { className: "popular-courses-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularCoursesHeader) }) }), isLoading ? (_jsx("p", { "data-testid": "popular-courses-loading", role: "status", "aria-live": "polite", children: formatMessage(messages.popularCoursesLoadingText) })) : (hasPopularCoursesData ? (_jsxs(_Fragment, { children: [_jsx(PopularCourses, { items: displayedCourses }), isPaginated && numPages > 1 && (_jsx("div", { className: "d-flex justify-content-center align-items-center", children: _jsx(Pagination, { variant: isMobile ? 'reduced' : 'secondary', paginationLabel: "Popular courses", className: "mx-auto mb-2", pageCount: numPages, onPageSelect: setPageNumber }) }))] })) : (_jsx(NoPopularCourseItems, {})))] }));
|
|
20
42
|
};
|
|
21
43
|
export default PopularCoursePanel;
|
|
22
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularCoursePanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularCoursePanel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useState } from 'react';\nimport { Alert, Pagination } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { usePopularCoursesAndProgramsData } from '@src/hooks/usePopularCoursesAndPrograms';\nimport { useAlgoliaSearch } from '@src/utils/algoliaUtils';\nimport messages from './messages';\nimport NoPopularCourseItems from './NoPopularCourseItems';\nimport PopularCourses from './PopularCourses';\nimport { PRODUCT_TYPE_COURSE } from '@src/constants';\nimport { useViewport } from '@src/utils';\n\nexport const PopularCoursePanel: FC = () => {\n const { formatMessage } = useIntl();\n const [searchClient] = useAlgoliaSearch();\n\n const [pageNumber, setPageNumber] = useState(1);\n\n const { isMobile, isTablet } = useViewport();\n\n const isPaginated = isMobile || isTablet;\n\n const {\n data: popularCoursesData = [],\n isError,\n isLoading,\n } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_COURSE);\n const hasPopularCoursesData = useMemo(\n () => popularCoursesData.length > 0,\n [popularCoursesData]\n );\n\n const itemsPerPage = isMobile\n ? 1\n : isTablet\n ? 2\n : popularCoursesData.length;\n\n const numPages = isPaginated\n ? Math.ceil(popularCoursesData.length / itemsPerPage)\n : 1;\n\n const displayedCourses = useMemo(() => {\n if (!isPaginated) {\n return popularCoursesData;\n }\n\n const startIndex = (pageNumber - 1) * itemsPerPage;\n\n return popularCoursesData.slice(startIndex, startIndex + itemsPerPage);\n }, [isPaginated, pageNumber, itemsPerPage, popularCoursesData]);\n\n useEffect(() => {\n setPageNumber(1);\n }, [isMobile, isTablet, popularCoursesData.length]);\n\n if (isError) {\n return (\n <div className=\"popular-courses-container mt-5 mb-3\" data-testid=\"popular-courses-panel\">\n <Alert variant=\"danger\" data-testid=\"popular-courses-error\">\n {formatMessage(messages.popularCoursesErrorText)}\n </Alert>\n </div>\n );\n }\n\n return (\n <div className=\"popular-courses-container mt-5 mb-3\" data-testid=\"popular-courses-panel\">\n <div className=\"popular-courses-heading-container mb-4\">\n <h2>{formatMessage(messages.popularCoursesHeader)}</h2>\n </div>\n {isLoading ? (\n <p\n data-testid=\"popular-courses-loading\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {formatMessage(messages.popularCoursesLoadingText)}\n </p>\n ) : (\n hasPopularCoursesData ? (\n <>\n <PopularCourses items={displayedCourses} />\n\n {isPaginated && numPages > 1 && (\n <div className=\"d-flex justify-content-center align-items-center\">\n <Pagination\n variant={isMobile ? 'reduced' : 'secondary'}\n paginationLabel=\"Popular courses\"\n className=\"mx-auto mb-2\"\n pageCount={numPages}\n onPageSelect={setPageNumber}\n />\n </div>\n )}\n </>\n ) : (\n <NoPopularCourseItems />\n )\n )}\n </div>\n );\n};\n\nexport default PopularCoursePanel;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { Alert } from '@openedx/paragon';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { Alert, Pagination, } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
5
|
import { usePopularCoursesAndProgramsData } from '../../hooks/usePopularCoursesAndPrograms';
|
|
6
6
|
import { useAlgoliaSearch } from '../../utils/algoliaUtils';
|
|
@@ -8,15 +8,37 @@ import messages from './messages';
|
|
|
8
8
|
import NoPopularProgramItems from './NoPopularProgramItems';
|
|
9
9
|
import PopularPrograms from './PopularPrograms';
|
|
10
10
|
import { PRODUCT_TYPE_PROGRAM } from '../../constants';
|
|
11
|
+
import { useViewport } from '../../utils';
|
|
11
12
|
export const PopularProgramsPanel = () => {
|
|
12
13
|
const { formatMessage } = useIntl();
|
|
13
14
|
const [searchClient] = useAlgoliaSearch();
|
|
15
|
+
const [pageNumber, setPageNumber] = useState(1);
|
|
16
|
+
const { isMobile, isTablet } = useViewport();
|
|
17
|
+
const isPaginated = isMobile || isTablet;
|
|
14
18
|
const { data: popularProgramsData = [], isError, isLoading, } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_PROGRAM);
|
|
15
19
|
const hasPopularProgramsData = useMemo(() => popularProgramsData.length > 0, [popularProgramsData]);
|
|
20
|
+
const itemsPerPage = isMobile
|
|
21
|
+
? 1
|
|
22
|
+
: isTablet
|
|
23
|
+
? 2
|
|
24
|
+
: popularProgramsData.length;
|
|
25
|
+
const numPages = isPaginated
|
|
26
|
+
? Math.ceil(popularProgramsData.length / itemsPerPage)
|
|
27
|
+
: 1;
|
|
28
|
+
const displayedPrograms = useMemo(() => {
|
|
29
|
+
if (!isPaginated) {
|
|
30
|
+
return popularProgramsData;
|
|
31
|
+
}
|
|
32
|
+
const startIndex = (pageNumber - 1) * itemsPerPage;
|
|
33
|
+
return popularProgramsData.slice(startIndex, startIndex + itemsPerPage);
|
|
34
|
+
}, [isPaginated, pageNumber, itemsPerPage, popularProgramsData]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
setPageNumber(1);
|
|
37
|
+
}, [isMobile, isTablet, popularProgramsData.length]);
|
|
16
38
|
if (isError) {
|
|
17
39
|
return (_jsx("div", { className: "popular-programs-container mt-5 mb-3", "data-testid": "popular-programs-panel", children: _jsx(Alert, { variant: "danger", "data-testid": "popular-programs-error", children: formatMessage(messages.popularProgramsErrorText) }) }));
|
|
18
40
|
}
|
|
19
|
-
return (_jsxs("div", { className: "popular-programs-container mt-5 mb-3", "data-testid": "popular-programs-panel", children: [_jsx("div", { className: "popular-programs-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularProgramsHeader) }) }), isLoading ? (_jsx("p", { "data-testid": "popular-programs-loading", role: "status", "aria-live": "polite", children: formatMessage(messages.popularProgramsLoadingText) })) : (hasPopularProgramsData ? (_jsx(PopularPrograms, { items:
|
|
41
|
+
return (_jsxs("div", { className: "popular-programs-container mt-5 mb-3", "data-testid": "popular-programs-panel", children: [_jsx("div", { className: "popular-programs-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularProgramsHeader) }) }), isLoading ? (_jsx("p", { "data-testid": "popular-programs-loading", role: "status", "aria-live": "polite", children: formatMessage(messages.popularProgramsLoadingText) })) : (hasPopularProgramsData ? (_jsxs(_Fragment, { children: [_jsx(PopularPrograms, { items: displayedPrograms }), isPaginated && numPages > 1 && (_jsx("div", { className: "d-flex justify-content-center align-items-center", children: _jsx(Pagination, { variant: isMobile ? 'reduced' : 'secondary', paginationLabel: "Popular programs", className: "mx-auto mb-2", pageCount: numPages, onPageSelect: setPageNumber }) }))] })) : (_jsx(NoPopularProgramItems, {})))] }));
|
|
20
42
|
};
|
|
21
43
|
export default PopularProgramsPanel;
|
|
22
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularProgramsPanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularProgramsPanel/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useState } from 'react';\nimport {\n Alert,\n Pagination,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { usePopularCoursesAndProgramsData } from '@src/hooks/usePopularCoursesAndPrograms';\nimport { useAlgoliaSearch } from '@src/utils/algoliaUtils';\nimport messages from './messages';\nimport NoPopularProgramItems from './NoPopularProgramItems';\nimport PopularPrograms from './PopularPrograms';\nimport { PRODUCT_TYPE_PROGRAM } from '@src/constants';\nimport { useViewport } from '@src/utils';\n\nexport const PopularProgramsPanel: FC = () => {\n const { formatMessage } = useIntl();\n const [searchClient] = useAlgoliaSearch();\n\n const [pageNumber, setPageNumber] = useState(1);\n\n const { isMobile, isTablet } = useViewport();\n\n const isPaginated = isMobile || isTablet;\n\n const {\n data: popularProgramsData = [],\n isError,\n isLoading,\n } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_PROGRAM);\n\n const hasPopularProgramsData = useMemo(\n () => popularProgramsData.length > 0,\n [popularProgramsData]\n );\n\n const itemsPerPage = isMobile\n ? 1\n : isTablet\n ? 2\n : popularProgramsData.length;\n\n const numPages = isPaginated\n ? Math.ceil(popularProgramsData.length / itemsPerPage)\n : 1;\n\n const displayedPrograms = useMemo(() => {\n if (!isPaginated) {\n return popularProgramsData;\n }\n\n const startIndex = (pageNumber - 1) * itemsPerPage;\n\n return popularProgramsData.slice(startIndex, startIndex + itemsPerPage);\n }, [isPaginated, pageNumber, itemsPerPage, popularProgramsData]);\n\n useEffect(() => {\n setPageNumber(1);\n }, [isMobile, isTablet, popularProgramsData.length]);\n\n if (isError) {\n return (\n <div className=\"popular-programs-container mt-5 mb-3\" data-testid=\"popular-programs-panel\">\n <Alert variant=\"danger\" data-testid=\"popular-programs-error\">\n {formatMessage(messages.popularProgramsErrorText)}\n </Alert>\n </div>\n );\n }\n\n return (\n <div className=\"popular-programs-container mt-5 mb-3\" data-testid=\"popular-programs-panel\">\n <div className=\"popular-programs-heading-container mb-4\">\n <h2>{formatMessage(messages.popularProgramsHeader)}</h2>\n </div>\n {isLoading ? (\n <p\n data-testid=\"popular-programs-loading\"\n role=\"status\"\n aria-live=\"polite\"\n >\n {formatMessage(messages.popularProgramsLoadingText)}\n </p>\n ) : (\n hasPopularProgramsData ? (\n <>\n <PopularPrograms items={displayedPrograms} />\n\n {isPaginated && numPages > 1 && (\n <div className=\"d-flex justify-content-center align-items-center\">\n <Pagination\n variant={isMobile ? 'reduced' : 'secondary'}\n paginationLabel=\"Popular programs\"\n className=\"mx-auto mb-2\"\n pageCount={numPages}\n onPageSelect={setPageNumber}\n />\n </div>\n )}\n </>\n ) : (\n <NoPopularProgramItems />\n )\n )}\n </div>\n );\n};\n\nexport default PopularProgramsPanel;\n"]}
|