@edx/frontend-app-subscription-learner-dashboard 1.58.0 → 1.59.1
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.
- package/dist/containers/PopularCoursePanel/index.js +26 -4
- package/dist/containers/PopularCoursePanel/index.js.map +1 -1
- package/dist/containers/PopularProgramsPanel/index.js +26 -4
- package/dist/containers/PopularProgramsPanel/index.js.map +1 -1
- package/dist/hooks/usePopularCoursesAndPrograms.js +2 -2
- package/dist/hooks/usePopularCoursesAndPrograms.js.map +1 -1
- package/package.json +1 -1
|
@@ -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"]}
|
|
@@ -28,7 +28,7 @@ export const usePopularCoursesAndProgramsData = (searchClient, enabled, productT
|
|
|
28
28
|
queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
29
29
|
const hits = yield fetchPopularProducts(searchClient, productType, 4, skill);
|
|
30
30
|
return hits.map((hit) => {
|
|
31
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
|
31
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
32
32
|
const hitDetails = hit;
|
|
33
33
|
return {
|
|
34
34
|
objectID: hit.objectID,
|
|
@@ -42,7 +42,7 @@ export const usePopularCoursesAndProgramsData = (searchClient, enabled, productT
|
|
|
42
42
|
partner: (_s = hitPartner(hit)) !== null && _s !== void 0 ? _s : '',
|
|
43
43
|
weeks_to_complete: (_t = hitDetails.weeks_to_complete) !== null && _t !== void 0 ? _t : undefined,
|
|
44
44
|
level: (_v = (_u = firstOf(hitDetails.level)) !== null && _u !== void 0 ? _u : hitDetails.level_type) !== null && _v !== void 0 ? _v : null,
|
|
45
|
-
subject: (
|
|
45
|
+
subject: (hitDetails === null || hitDetails === void 0 ? void 0 : hitDetails.course_titles) ? hitDetails === null || hitDetails === void 0 ? void 0 : hitDetails.course_titles : undefined,
|
|
46
46
|
};
|
|
47
47
|
});
|
|
48
48
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopularCoursesAndPrograms.js","sourceRoot":"","sources":["../../src/hooks/usePopularCoursesAndPrograms.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,iFAAiF;AACjF,oDAAoD;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,EAAE,CAAC,QAAQ,CAAU;IACxB,QAAQ,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,EAAE,CAC1C,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAU;IACvD,OAAO,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE,CACvD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAU;IAC5D,OAAO,EAAE,CAAC,WAAwB,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE,CAClE,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAU;CAC7E,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAU,EAAE;;IAAC,OAAA,CACvC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,MAAA,MAAA,MAAA,MAAA,GAAG,CAAC,OAAO,mCACpD,MAAA,MAAA,GAAG,CAAC,MAAM,0CAAG,CAAC,CAAC,0CAAE,IAAI,mCACrB,MAAA,MAAA,GAAG,CAAC,uBAAuB,0CAAG,CAAC,CAAC,0CAAE,IAAI,mCACtC,MAAA,MAAA,GAAG,CAAC,QAAQ,0CAAG,CAAC,CAAC,0CAAE,IAAI,mCACvB,GAAG,CAAC,WAAW,mCACf,EAAE,CACR,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,YAAiC,EACjC,OAAgB,EAChB,cAA2B,mBAAmB,EAC9C,KAAa,EACsB,EAAE,CACrC,QAAQ,CAAC;IACP,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC;IACnD,OAAO,EAAE,GAAS,EAAE;QAClB,MAAM,IAAI,GAAG,MAAM,oBAAoB,CAAC,YAAa,EAAE,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;QAC9E,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAmB,EAAE;;YACvC,MAAM,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"usePopularCoursesAndPrograms.js","sourceRoot":"","sources":["../../src/hooks/usePopularCoursesAndPrograms.ts"],"names":[],"mappings":"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","sourcesContent":["import { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { SearchClient } from 'algoliasearch';\nimport { ProductType, Skill } from '@src/types/types';\nimport { PRODUCT_TYPE_COURSE } from '@src/constants';\nimport { fetchPopularProducts } from '@src/utils/algoliaUtils';\nimport { ProductCardItem } from '@src/containers/ProductCard/data/types';\nimport { firstOf } from './utils';\n\n// ─── Query key factories ──────────────────────────────────────────────────────\n// Centralised so cache invalidation is never a typo\n\nexport const searchKeys = {\n all: ['search'] as const,\n programs: (query: string, tags: string[]) =>\n [...searchKeys.all, 'programs', query, tags] as const,\n courses: (query: string, tags: string[], page: number) =>\n [...searchKeys.all, 'courses', query, tags, page] as const,\n popular: (productType: ProductType, limit: number, skill?: Skill) =>\n [...searchKeys.all, 'popular', productType, limit, skill ?? null] as const,\n};\n\nconst hitPartner = (hit: any): string => (\n Array.isArray(hit.partner) ? hit.partner[0] : hit.partner\n ?? hit.owners?.[0]?.name\n ?? hit.authoring_organizations?.[0]?.name\n ?? hit.partners?.[0]?.name\n ?? hit.institution\n ?? ''\n);\n\nexport const usePopularCoursesAndProgramsData = (\n searchClient: SearchClient | null,\n enabled: boolean,\n productType: ProductType = PRODUCT_TYPE_COURSE,\n skill?: Skill,\n): UseQueryResult<ProductCardItem[]> =>\n useQuery({\n queryKey: searchKeys.popular(productType, 4, skill),\n queryFn: async () => {\n const hits = await fetchPopularProducts(searchClient!, productType, 4, skill);\n return hits.map((hit): ProductCardItem => {\n const hitDetails = hit as {\n short_description?: string,\n primary_description?: string,\n description?: string,\n marketing_url?: string,\n image_url?: string,\n card_image_url?: string,\n organization_logo_override?: string,\n content_type?: string,\n program_type?: string,\n product?: string,\n partner?: string,\n weeks_to_complete?: number,\n level?: string,\n subject?: string[],\n owners?: { logoImageUrl?: string }[],\n organization_logo_url?: string,\n partner_logo_url?: string,\n level_type?: string,\n authoring_organizations?: [],\n partners?: [],\n institution?: string,\n course_titles?: string[],\n };\n\n return {\n objectID: hit.objectID,\n title: hit.title ?? hit.name ?? 'Untitled',\n primary_description: hitDetails.primary_description ?? hitDetails.short_description ?? hitDetails.description ?? '',\n url: hitDetails.card_image_url ?? hitDetails.image_url ?? '',\n marketing_url: hitDetails.marketing_url ?? '',\n thumbnail: hitDetails.owners?.[0]?.logoImageUrl ?? hitDetails.organization_logo_override ?? hitDetails.organization_logo_url ?? hitDetails.partner_logo_url ?? '',\n content_type: hitDetails.program_type ?? hitDetails.product ?? 'Course',\n product: productType,\n partner: hitPartner(hit) ?? '',\n weeks_to_complete: hitDetails.weeks_to_complete ?? undefined,\n level: firstOf(hitDetails.level) ?? hitDetails.level_type ?? null,\n subject: hitDetails?.course_titles ? hitDetails?.course_titles : undefined,\n };\n });\n },\n enabled: !!searchClient && enabled,\n staleTime: 1000 * 60 * 10,\n });\n"]}
|