@openedx/frontend-app-catalog 1.0.0-alpha.0

package/dist/catalog/hooks/useDebouncedSearchInput.js

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState, useDeferredValue, useRef, } from 'react';
+import debounce from 'lodash.debounce';
+/**
+ * Custom hook for managing debounced search input with deferred value optimization.
+ */
+export const useDebouncedSearchInput = ({ searchString, handleSearch, debounceDelay = 300, }) => {
+    const [searchInput, setSearchInput] = useState(searchString !== null && searchString !== void 0 ? searchString : '');
+    const deferredSearchInput = useDeferredValue(searchInput);
+    const lastQueryRef = useRef('');
+    useEffect(() => {
+        setSearchInput(searchString !== null && searchString !== void 0 ? searchString : '');
+    }, [searchString]);
+    const debouncedHandleSearch = useMemo(() => debounce((value) => {
+        handleSearch(value);
+    }, debounceDelay), [handleSearch, debounceDelay]);
+    useEffect(() => () => debouncedHandleSearch.cancel(), [debouncedHandleSearch]);
+    useEffect(() => {
+        if (deferredSearchInput === lastQueryRef.current) {
+            return;
+        }
+        lastQueryRef.current = deferredSearchInput;
+        debouncedHandleSearch(deferredSearchInput);
+    }, [deferredSearchInput, debouncedHandleSearch]);
+    return { setSearchInput };
+};
+//# sourceMappingURL=useDebouncedSearchInput.js.map

package/dist/catalog/hooks/useDebouncedSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedSearchInput.js","sourceRoot":"","sources":["../../../src/catalog/hooks/useDebouncedSearchInput.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,GACvD,MAAM,OAAO,CAAC;AACf,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAIvC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,YAAY,EACZ,YAAY,EACZ,aAAa,GAAG,GAAG,GACU,EAAE,EAAE;IACjC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;IACnE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;QAC/B,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,aAAa,CAAC,EACjB,CAAC,YAAY,EAAE,aAAa,CAAC,CAC9B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,KAAK,YAAY,CAAC,OAAO,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,YAAY,CAAC,OAAO,GAAG,mBAAmB,CAAC;QAC3C,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEjD,OAAO,EAAE,cAAc,EAAE,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["import {\n  useEffect, useMemo, useState, useDeferredValue, useRef,\n} from 'react';\nimport debounce from 'lodash.debounce';\n\nimport type { UseDebouncedSearchInputProps } from './types';\n\n/**\n * Custom hook for managing debounced search input with deferred value optimization.\n */\nexport const useDebouncedSearchInput = ({\n  searchString,\n  handleSearch,\n  debounceDelay = 300,\n}: UseDebouncedSearchInputProps) => {\n  const [searchInput, setSearchInput] = useState(searchString ?? '');\n  const deferredSearchInput = useDeferredValue(searchInput);\n  const lastQueryRef = useRef('');\n\n  useEffect(() => {\n    setSearchInput(searchString ?? '');\n  }, [searchString]);\n\n  const debouncedHandleSearch = useMemo(\n    () => debounce((value: string) => {\n      handleSearch(value);\n    }, debounceDelay),\n    [handleSearch, debounceDelay],\n  );\n\n  useEffect(() => () => debouncedHandleSearch.cancel(), [debouncedHandleSearch]);\n\n  useEffect(() => {\n    if (deferredSearchInput === lastQueryRef.current) {\n      return;\n    }\n\n    lastQueryRef.current = deferredSearchInput;\n    debouncedHandleSearch(deferredSearchInput);\n  }, [deferredSearchInput, debouncedHandleSearch]);\n\n  return { setSearchInput };\n};\n"]}

package/dist/catalog/hooks/useFilter.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableFilter, DataTableParams } from '../../data/course-list-search/types';
+/**
+ * Custom hook for managing filter state and handling filter changes in the catalog.
+ *
+ * This hook provides functionality to:
+ * - Track previous filter state to detect changes
+ * - Prevent duplicate API calls during filter transitions
+ * - Reset pagination when filters change
+ * - Handle filter change progress state
+ */
+export declare const useFilter: () => {
+    filterState: {
+        previousFilters: any[] | Record<string, any> | null;
+        isFilterChangeInProgress: boolean;
+    };
+    resetFilterProgress: () => void;
+    handleFilterChange: (newFilters: DataTableFilter[], fetchData: (params: DataTableParams) => void, searchString: string) => boolean;
+};

package/dist/catalog/hooks/useFilter.js

@@ -0,0 +1,58 @@
+import { useState, useCallback } from 'react';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '../../data/course-list-search/constants';
+import { compareFilters } from '../utils';
+const INITIAL_FILTER_STATE = {
+    previousFilters: null,
+    isFilterChangeInProgress: false,
+};
+/**
+ * Custom hook for managing filter state and handling filter changes in the catalog.
+ *
+ * This hook provides functionality to:
+ * - Track previous filter state to detect changes
+ * - Prevent duplicate API calls during filter transitions
+ * - Reset pagination when filters change
+ * - Handle filter change progress state
+ */
+export const useFilter = () => {
+    const [filterState, setFilterState] = useState(INITIAL_FILTER_STATE);
+    /**
+     * Resets the filter change progress flag.
+     *
+     * This function should be called when the API request completes
+     * to allow new filter changes to be processed.
+     */
+    const resetFilterProgress = useCallback(() => {
+        setFilterState(prev => (Object.assign(Object.assign({}, prev), { isFilterChangeInProgress: false })));
+    }, []);
+    /**
+     * Handles filter changes to prevent duplicate API calls.
+     */
+    const handleFilterChange = useCallback((newFilters, fetchData, searchString) => {
+        const hasFilters = Array.isArray(newFilters) && Object.keys(newFilters).length > 0;
+        const hadFilters = filterState.previousFilters && Object.keys(filterState.previousFilters).length > 0;
+        const filtersChanged = filterState.previousFilters !== null
+            && !compareFilters(newFilters, filterState.previousFilters);
+        const isFirstFilterApplied = !hadFilters && hasFilters;
+        if (filterState.isFilterChangeInProgress) {
+            return false;
+        }
+        if (filtersChanged || isFirstFilterApplied) {
+            setFilterState(prev => (Object.assign(Object.assign({}, prev), { isFilterChangeInProgress: true, previousFilters: newFilters || {} })));
+            fetchData({
+                pageIndex: DEFAULT_PAGE_INDEX,
+                pageSize: DEFAULT_PAGE_SIZE,
+                filters: newFilters,
+                searchString,
+            });
+            return true;
+        }
+        return false;
+    }, [filterState]);
+    return {
+        filterState,
+        resetFilterProgress,
+        handleFilterChange,
+    };
+};
+//# sourceMappingURL=useFilter.js.map

package/dist/catalog/hooks/useFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilter.js","sourceRoot":"","sources":["../../../src/catalog/hooks/useFilter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,oBAAoB,GAAG;IAC3B,eAAe,EAAE,IAA0C;IAC3D,wBAAwB,EAAE,KAAK;CAChC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAErE;;;;;OAKG;IACH,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,iCAClB,IAAI,KACP,wBAAwB,EAAE,KAAK,IAC/B,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,kBAAkB,GAAG,WAAW,CAAC,CACrC,UAA6B,EAC7B,SAA4C,EAC5C,YAAoB,EACpB,EAAE;QACF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACnF,MAAM,UAAU,GAAG,WAAW,CAAC,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACtG,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,KAAK,IAAI;eACtD,CAAC,cAAc,CAAC,UAAU,EAAE,WAAW,CAAC,eAAoC,CAAC,CAAC;QACnF,MAAM,oBAAoB,GAAG,CAAC,UAAU,IAAI,UAAU,CAAC;QAEvD,IAAI,WAAW,CAAC,wBAAwB,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,cAAc,IAAI,oBAAoB,EAAE,CAAC;YAC3C,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,iCAClB,IAAI,KACP,wBAAwB,EAAE,IAAI,EAC9B,eAAe,EAAE,UAAU,IAAI,EAAE,IACjC,CAAC,CAAC;YAEJ,SAAS,CAAC;gBACR,SAAS,EAAE,kBAAkB;gBAC7B,QAAQ,EAAE,iBAAiB;gBAC3B,OAAO,EAAE,UAAU;gBACnB,YAAY;aACb,CAAC,CAAC;YACH,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO;QACL,WAAW;QACX,mBAAmB;QACnB,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@src/data/course-list-search/constants';\nimport type { DataTableFilter, DataTableParams } from '@src/data/course-list-search/types';\nimport { compareFilters } from '../utils';\n\nconst INITIAL_FILTER_STATE = {\n  previousFilters: null as any[] | Record<string, any> | null,\n  isFilterChangeInProgress: false,\n};\n\n/**\n * Custom hook for managing filter state and handling filter changes in the catalog.\n *\n * This hook provides functionality to:\n * - Track previous filter state to detect changes\n * - Prevent duplicate API calls during filter transitions\n * - Reset pagination when filters change\n * - Handle filter change progress state\n */\nexport const useFilter = () => {\n  const [filterState, setFilterState] = useState(INITIAL_FILTER_STATE);\n\n  /**\n   * Resets the filter change progress flag.\n   *\n   * This function should be called when the API request completes\n   * to allow new filter changes to be processed.\n   */\n  const resetFilterProgress = useCallback(() => {\n    setFilterState(prev => ({\n      ...prev,\n      isFilterChangeInProgress: false,\n    }));\n  }, []);\n\n  /**\n   * Handles filter changes to prevent duplicate API calls.\n   */\n  const handleFilterChange = useCallback((\n    newFilters: DataTableFilter[],\n    fetchData: (params: DataTableParams) => void,\n    searchString: string,\n  ) => {\n    const hasFilters = Array.isArray(newFilters) && Object.keys(newFilters).length > 0;\n    const hadFilters = filterState.previousFilters && Object.keys(filterState.previousFilters).length > 0;\n    const filtersChanged = filterState.previousFilters !== null\n      && !compareFilters(newFilters, filterState.previousFilters as DataTableFilter[]);\n    const isFirstFilterApplied = !hadFilters && hasFilters;\n\n    if (filterState.isFilterChangeInProgress) {\n      return false;\n    }\n\n    if (filtersChanged || isFirstFilterApplied) {\n      setFilterState(prev => ({\n        ...prev,\n        isFilterChangeInProgress: true,\n        previousFilters: newFilters || {},\n      }));\n\n      fetchData({\n        pageIndex: DEFAULT_PAGE_INDEX,\n        pageSize: DEFAULT_PAGE_SIZE,\n        filters: newFilters,\n        searchString,\n      });\n      return true;\n    }\n\n    return false;\n  }, [filterState]);\n\n  return {\n    filterState,\n    resetFilterProgress,\n    handleFilterChange,\n  };\n};\n"]}

package/dist/catalog/hooks/usePagination.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom hook for managing pagination state in the DataTable.
+ *
+ * This hook provides functionality to:
+ * - Track current page index
+ * - Handle page changes
+ * - Reset pagination to the first page
+ */
+export declare const usePagination: () => {
+    pageIndex: number;
+    handlePageChange: (newPageIndex: number) => void;
+    resetPagination: () => void;
+};

package/dist/catalog/hooks/usePagination.js

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+import { DEFAULT_PAGE_INDEX } from '../../data/course-list-search/constants';
+/**
+ * Custom hook for managing pagination state in the DataTable.
+ *
+ * This hook provides functionality to:
+ * - Track current page index
+ * - Handle page changes
+ * - Reset pagination to the first page
+ */
+export const usePagination = () => {
+    const [pageIndex, setPageIndex] = useState(DEFAULT_PAGE_INDEX);
+    const handlePageChange = useCallback((newPageIndex) => {
+        setPageIndex(newPageIndex);
+    }, []);
+    const resetPagination = useCallback(() => {
+        setPageIndex(DEFAULT_PAGE_INDEX);
+    }, []);
+    return {
+        pageIndex,
+        handlePageChange,
+        resetPagination,
+    };
+};
+//# sourceMappingURL=usePagination.js.map

package/dist/catalog/hooks/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../../src/catalog/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAE/D,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QAC5D,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,SAAS;QACT,gBAAgB;QAChB,eAAe;KAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { DEFAULT_PAGE_INDEX } from '@src/data/course-list-search/constants';\n\n/**\n * Custom hook for managing pagination state in the DataTable.\n *\n * This hook provides functionality to:\n * - Track current page index\n * - Handle page changes\n * - Reset pagination to the first page\n */\nexport const usePagination = () => {\n  const [pageIndex, setPageIndex] = useState(DEFAULT_PAGE_INDEX);\n\n  const handlePageChange = useCallback((newPageIndex: number) => {\n    setPageIndex(newPageIndex);\n  }, []);\n\n  const resetPagination = useCallback(() => {\n    setPageIndex(DEFAULT_PAGE_INDEX);\n  }, []);\n\n  return {\n    pageIndex,\n    handlePageChange,\n    resetPagination,\n  };\n};\n"]}

package/dist/catalog/hooks/useSearch.d.ts

@@ -0,0 +1,16 @@
+import type { UseSearchProps } from './types';
+/**
+ * Custom hook for managing search functionality in the catalog.
+ *
+ * This hook provides functionality to:
+ * - Handle search queries and synchronize them with URL parameters
+ * - Manage search state (current query and URL query)
+ * - Initialize search from URL parameters on component mount
+ * - Track initialization state to prevent duplicate API calls
+ */
+export declare const useSearch: ({ fetchData, isFetching, searchParams, setSearchParams, }: UseSearchProps) => {
+    hasInitializedFromUrl: boolean;
+    urlSearchQuery: string;
+    searchString: string;
+    handleSearch: (query: string) => void;
+};

package/dist/catalog/hooks/useSearch.js

@@ -0,0 +1,63 @@
+import { useState, useCallback, useEffect } from 'react';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '../../data/course-list-search/constants';
+/**
+ * Custom hook for managing search functionality in the catalog.
+ *
+ * This hook provides functionality to:
+ * - Handle search queries and synchronize them with URL parameters
+ * - Manage search state (current query and URL query)
+ * - Initialize search from URL parameters on component mount
+ * - Track initialization state to prevent duplicate API calls
+ */
+export const useSearch = ({ fetchData, isFetching, searchParams, setSearchParams, }) => {
+    const [searchString, setSearchString] = useState('');
+    const [hasInitializedFromUrl, setHasInitializedFromUrl] = useState(false);
+    const urlSearchQuery = searchParams.get('search_query') || '';
+    /**
+     * Handles search operations to ensure proper state management and API calls.
+     */
+    const handleSearch = useCallback((query) => {
+        setSearchString(query);
+        const newParams = new URLSearchParams(searchParams.toString());
+        if (query) {
+            newParams.set('search_query', query);
+        }
+        else {
+            newParams.delete('search_query');
+        }
+        setSearchParams(newParams, { replace: true });
+        fetchData({
+            pageIndex: DEFAULT_PAGE_INDEX,
+            pageSize: DEFAULT_PAGE_SIZE,
+            filters: [],
+            searchString: query,
+        });
+    }, [fetchData, searchParams, setSearchParams]);
+    /**
+     * Initializes search state from URL parameters on component mount.
+     */
+    useEffect(() => {
+        if (hasInitializedFromUrl) {
+            return;
+        }
+        if (urlSearchQuery && !searchString) {
+            setSearchString(urlSearchQuery);
+            if (!isFetching) {
+                fetchData({
+                    pageIndex: DEFAULT_PAGE_INDEX,
+                    pageSize: DEFAULT_PAGE_SIZE,
+                    filters: [],
+                    searchString: urlSearchQuery,
+                });
+            }
+        }
+        setHasInitializedFromUrl(true);
+    }, [urlSearchQuery, hasInitializedFromUrl, isFetching, fetchData, searchString]);
+    return {
+        hasInitializedFromUrl,
+        urlSearchQuery,
+        searchString,
+        handleSearch,
+    };
+};
+//# sourceMappingURL=useSearch.js.map

package/dist/catalog/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sourceRoot":"","sources":["../../../src/catalog/hooks/useSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAG/F;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,GACrC,EAAE,EAAE;IACnB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErD,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1E,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAE9D;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACjD,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC/D,IAAI,KAAK,EAAE,CAAC;YACV,SAAS,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,CAAC;QACD,eAAe,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAE9C,SAAS,CAAC;YACR,SAAS,EAAE,kBAAkB;YAC7B,QAAQ,EAAE,iBAAiB;YAC3B,OAAO,EAAE,EAAE;YACX,YAAY,EAAE,KAAK;SACpB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,cAAc,IAAI,CAAC,YAAY,EAAE,CAAC;YACpC,eAAe,CAAC,cAAc,CAAC,CAAC;YAChC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,SAAS,CAAC;oBACR,SAAS,EAAE,kBAAkB;oBAC7B,QAAQ,EAAE,iBAAiB;oBAC3B,OAAO,EAAE,EAAE;oBACX,YAAY,EAAE,cAAc;iBAC7B,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,cAAc,EAAE,qBAAqB,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjF,OAAO;QACL,qBAAqB;QACrB,cAAc;QACd,YAAY;QACZ,YAAY;KACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback, useEffect } from 'react';\n\nimport { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@src/data/course-list-search/constants';\nimport type { UseSearchProps } from './types';\n\n/**\n * Custom hook for managing search functionality in the catalog.\n *\n * This hook provides functionality to:\n * - Handle search queries and synchronize them with URL parameters\n * - Manage search state (current query and URL query)\n * - Initialize search from URL parameters on component mount\n * - Track initialization state to prevent duplicate API calls\n */\nexport const useSearch = ({\n  fetchData, isFetching, searchParams, setSearchParams,\n}: UseSearchProps) => {\n  const [searchString, setSearchString] = useState('');\n\n  const [hasInitializedFromUrl, setHasInitializedFromUrl] = useState(false);\n\n  const urlSearchQuery = searchParams.get('search_query') || '';\n\n  /**\n   * Handles search operations to ensure proper state management and API calls.\n   */\n  const handleSearch = useCallback((query: string) => {\n    setSearchString(query);\n\n    const newParams = new URLSearchParams(searchParams.toString());\n    if (query) {\n      newParams.set('search_query', query);\n    } else {\n      newParams.delete('search_query');\n    }\n    setSearchParams(newParams, { replace: true });\n\n    fetchData({\n      pageIndex: DEFAULT_PAGE_INDEX,\n      pageSize: DEFAULT_PAGE_SIZE,\n      filters: [],\n      searchString: query,\n    });\n  }, [fetchData, searchParams, setSearchParams]);\n\n  /**\n   * Initializes search state from URL parameters on component mount.\n   */\n  useEffect(() => {\n    if (hasInitializedFromUrl) {\n      return;\n    }\n\n    if (urlSearchQuery && !searchString) {\n      setSearchString(urlSearchQuery);\n      if (!isFetching) {\n        fetchData({\n          pageIndex: DEFAULT_PAGE_INDEX,\n          pageSize: DEFAULT_PAGE_SIZE,\n          filters: [],\n          searchString: urlSearchQuery,\n        });\n      }\n    }\n    setHasInitializedFromUrl(true);\n  }, [urlSearchQuery, hasInitializedFromUrl, isFetching, fetchData, searchString]);\n\n  return {\n    hasInitializedFromUrl,\n    urlSearchQuery,\n    searchString,\n    handleSearch,\n  };\n};\n"]}

package/dist/catalog/messages.d.ts

@@ -0,0 +1,68 @@
+declare const messages: {
+    pageTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    pageHeading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noCoursesAvailable: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noCoursesAvailableMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noSearchResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    exploreCourses: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noResultsFound: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    organizations: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    languages: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    courseTypes: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/catalog/messages.js

@@ -0,0 +1,70 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    pageTitle: {
+        id: 'courses.page.title',
+        defaultMessage: 'Courses | {siteName}',
+        description: 'Document title for the courses listing page.',
+    },
+    pageHeading: {
+        id: 'category.catalog.page-title',
+        defaultMessage: 'Courses',
+        description: 'Catalog page heading.',
+    },
+    errorMessage: {
+        id: 'category.catalog.error-page-message',
+        defaultMessage: 'If you experience repeated failures, please email support at {supportEmail}',
+        description: 'Error page message.',
+    },
+    noCoursesAvailable: {
+        id: 'category.catalog.alert.no-courses-available',
+        defaultMessage: 'No courses available',
+        description: 'No courses available alert title.',
+    },
+    noCoursesAvailableMessage: {
+        id: 'category.catalog.alert.no-courses-available-message',
+        defaultMessage: 'There are currently no courses available in the catalog. Please check back later for new offerings.',
+        description: 'No courses available alert message.',
+    },
+    searchPlaceholder: {
+        id: 'category.catalog.search-placeholder',
+        defaultMessage: 'Search for a course',
+        description: 'Search placeholder.',
+    },
+    searchResults: {
+        id: 'category.catalog.search-results',
+        defaultMessage: 'Search results for "{query}"',
+        description: 'Search results heading.',
+    },
+    noSearchResults: {
+        id: 'category.catalog.no-search-results',
+        defaultMessage: 'We couldn\'t find any results for "{query}"',
+        description: 'No search results.',
+    },
+    exploreCourses: {
+        id: 'category.catalog.explore-courses',
+        defaultMessage: 'Explore courses',
+        description: 'Explore courses.',
+    },
+    noResultsFound: {
+        id: 'category.catalog.no-results-found',
+        defaultMessage: 'No results found',
+        description: 'No results found.',
+    },
+    organizations: {
+        id: 'category.catalog.filter.organizations',
+        defaultMessage: 'Organizations',
+        description: 'Organizations filter.',
+    },
+    languages: {
+        id: 'category.catalog.filter.languages',
+        defaultMessage: 'Languages',
+        description: 'Languages filter.',
+    },
+    courseTypes: {
+        id: 'category.catalog.filter.course-types',
+        defaultMessage: 'Course types',
+        description: 'Course types filter.',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/catalog/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../src/catalog/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,oBAAoB;QACxB,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,8CAA8C;KAC5D;IACD,WAAW,EAAE;QACX,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,uBAAuB;KACrC;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,6EAA6E;QAC7F,WAAW,EAAE,qBAAqB;KACnC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,mCAAmC;KACjD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qDAAqD;QACzD,cAAc,EAAE,qGAAqG;QACrH,WAAW,EAAE,qCAAqC;KACnD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,qBAAqB;KACnC;IACD,aAAa,EAAE;QACb,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,8BAA8B;QAC9C,WAAW,EAAE,yBAAyB;KACvC;IACD,eAAe,EAAE;QACf,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,6CAA6C;QAC7D,WAAW,EAAE,oBAAoB;KAClC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,kBAAkB;KAChC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,mBAAmB;KACjC;IACD,aAAa,EAAE;QACb,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,uBAAuB;KACrC;IACD,SAAS,EAAE;QACT,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,WAAW;QAC3B,WAAW,EAAE,mBAAmB;KACjC;IACD,WAAW,EAAE;QACX,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  pageTitle: {\n    id: 'courses.page.title',\n    defaultMessage: 'Courses | {siteName}',\n    description: 'Document title for the courses listing page.',\n  },\n  pageHeading: {\n    id: 'category.catalog.page-title',\n    defaultMessage: 'Courses',\n    description: 'Catalog page heading.',\n  },\n  errorMessage: {\n    id: 'category.catalog.error-page-message',\n    defaultMessage: 'If you experience repeated failures, please email support at {supportEmail}',\n    description: 'Error page message.',\n  },\n  noCoursesAvailable: {\n    id: 'category.catalog.alert.no-courses-available',\n    defaultMessage: 'No courses available',\n    description: 'No courses available alert title.',\n  },\n  noCoursesAvailableMessage: {\n    id: 'category.catalog.alert.no-courses-available-message',\n    defaultMessage: 'There are currently no courses available in the catalog. Please check back later for new offerings.',\n    description: 'No courses available alert message.',\n  },\n  searchPlaceholder: {\n    id: 'category.catalog.search-placeholder',\n    defaultMessage: 'Search for a course',\n    description: 'Search placeholder.',\n  },\n  searchResults: {\n    id: 'category.catalog.search-results',\n    defaultMessage: 'Search results for \"{query}\"',\n    description: 'Search results heading.',\n  },\n  noSearchResults: {\n    id: 'category.catalog.no-search-results',\n    defaultMessage: 'We couldn\\'t find any results for \"{query}\"',\n    description: 'No search results.',\n  },\n  exploreCourses: {\n    id: 'category.catalog.explore-courses',\n    defaultMessage: 'Explore courses',\n    description: 'Explore courses.',\n  },\n  noResultsFound: {\n    id: 'category.catalog.no-results-found',\n    defaultMessage: 'No results found',\n    description: 'No results found.',\n  },\n  organizations: {\n    id: 'category.catalog.filter.organizations',\n    defaultMessage: 'Organizations',\n    description: 'Organizations filter.',\n  },\n  languages: {\n    id: 'category.catalog.filter.languages',\n    defaultMessage: 'Languages',\n    description: 'Languages filter.',\n  },\n  courseTypes: {\n    id: 'category.catalog.filter.course-types',\n    defaultMessage: 'Course types',\n    description: 'Course types filter.',\n  },\n});\n\nexport default messages;\n"]}

package/dist/catalog/types.d.ts

@@ -0,0 +1,6 @@
+import type { IntlShape } from '../utils';
+export interface GetPageTitleProps {
+    intl: IntlShape;
+    searchString: string;
+    courseDataResultsLength?: number;
+}

package/dist/catalog/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/catalog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/catalog/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IntlShape } from '@src/utils';\n\nexport interface GetPageTitleProps {\n  intl: IntlShape,\n  searchString: string,\n  courseDataResultsLength?: number,\n}\n"]}

package/dist/catalog/utils.d.ts

@@ -0,0 +1,25 @@
+import type { IntlShape } from '../utils';
+import type { Aggregations, DataTableFilter } from '../data/course-list-search/types';
+import type { GetPageTitleProps } from './types';
+/**
+ * Transforms aggregations into filter choices for DataTable.
+ */
+export declare const transformAggregationsToFilterChoices: (aggregations: Aggregations | undefined, intl: IntlShape) => {
+    Header: string;
+    accessor: string;
+    Filter: any;
+    filter: string;
+    filterChoices: {
+        name: string;
+        number: number;
+        value: string;
+    }[];
+}[];
+/**
+ * Compares two arrays of filters and returns true if they are the same.
+ */
+export declare const compareFilters: (filters1: DataTableFilter[] | undefined, filters2: DataTableFilter[] | undefined) => boolean;
+/**
+ * Determines the appropriate page title based on search state and results.
+ */
+export declare const getPageTitle: ({ intl, searchString, courseDataResultsLength, }: GetPageTitleProps) => string;

package/dist/catalog/utils.js

@@ -0,0 +1,82 @@
+import { CheckboxFilter } from '@openedx/paragon';
+import capitalize from 'lodash.capitalize';
+import messages from './messages';
+/**
+ * Gets the display name for a language code.
+ */
+const getLanguageName = (languageCode, locale = 'en') => {
+    try {
+        const languageNames = new Intl.DisplayNames([locale], { type: 'language' });
+        return languageNames.of(languageCode) || languageCode;
+    }
+    catch (error) {
+        return capitalize(languageCode);
+    }
+};
+/**
+ * Transforms aggregations into filter choices for DataTable.
+ */
+export const transformAggregationsToFilterChoices = (aggregations, intl) => {
+    if (!aggregations) {
+        return [];
+    }
+    const headerMap = {
+        org: intl.formatMessage(messages.organizations),
+        language: intl.formatMessage(messages.languages),
+        modes: intl.formatMessage(messages.courseTypes),
+    };
+    return Object.entries(aggregations).map(([key, aggValue]) => {
+        const terms = aggValue.terms || {};
+        const filterChoices = Object.entries(terms).map(([termKey, count]) => {
+            const displayName = key === 'language'
+                ? getLanguageName(termKey, intl.locale)
+                : capitalize(termKey);
+            return {
+                name: displayName,
+                number: count,
+                value: termKey,
+            };
+        });
+        return {
+            Header: headerMap[key] || capitalize(key),
+            accessor: key,
+            Filter: CheckboxFilter,
+            filter: 'includesValue',
+            filterChoices,
+        };
+    });
+};
+/**
+ * Compares two arrays of filters and returns true if they are the same.
+ */
+export const compareFilters = (filters1, filters2) => {
+    if (filters1 === filters2) {
+        return true;
+    }
+    if (!filters1 || !filters2) {
+        return false;
+    }
+    if (filters1.length !== filters2.length) {
+        return false;
+    }
+    const createFilterKey = (filter) => {
+        const sortedValues = [...filter.value].sort().join(',');
+        return `${filter.id}:${sortedValues}`;
+    };
+    const set1 = new Set(filters1.map(createFilterKey));
+    const set2 = new Set(filters2.map(createFilterKey));
+    return set1.size === set2.size && [...set1].every(key => set2.has(key));
+};
+/**
+ * Determines the appropriate page title based on search state and results.
+ */
+export const getPageTitle = ({ intl, searchString, courseDataResultsLength, }) => {
+    if (!searchString) {
+        return intl.formatMessage(messages.exploreCourses);
+    }
+    if ((courseDataResultsLength !== null && courseDataResultsLength !== void 0 ? courseDataResultsLength : 0) === 0) {
+        return intl.formatMessage(messages.noSearchResults, { query: searchString });
+    }
+    return intl.formatMessage(messages.searchResults, { query: searchString });
+};
+//# sourceMappingURL=utils.js.map

package/dist/catalog/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/catalog/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { CheckboxFilter } from '@openedx/paragon';\nimport capitalize from 'lodash.capitalize';\n\nimport type { IntlShape } from '@src/utils';\nimport type { Aggregations, DataTableFilter } from '@src/data/course-list-search/types';\nimport type { GetPageTitleProps } from './types';\nimport messages from './messages';\n\n/**\n * Gets the display name for a language code.\n */\nconst getLanguageName = (languageCode: string, locale = 'en'): string => {\n  try {\n    const languageNames = new Intl.DisplayNames([locale], { type: 'language' });\n    return languageNames.of(languageCode) || languageCode;\n  } catch (error) {\n    return capitalize(languageCode);\n  }\n};\n\n/**\n * Transforms aggregations into filter choices for DataTable.\n */\nexport const transformAggregationsToFilterChoices = (aggregations: Aggregations | undefined, intl: IntlShape) => {\n  if (!aggregations) {\n    return [];\n  }\n\n  const headerMap: Record<string, string> = {\n    org: intl.formatMessage(messages.organizations),\n    language: intl.formatMessage(messages.languages),\n    modes: intl.formatMessage(messages.courseTypes),\n  };\n\n  return Object.entries(aggregations).map(([key, aggValue]) => {\n    const terms = aggValue.terms || {};\n    const filterChoices = Object.entries(terms).map(([termKey, count]) => {\n      const displayName = key === 'language'\n        ? getLanguageName(termKey, intl.locale)\n        : capitalize(termKey);\n\n      return {\n        name: displayName,\n        number: count,\n        value: termKey,\n      };\n    });\n\n    return {\n      Header: headerMap[key] || capitalize(key),\n      accessor: key,\n      Filter: CheckboxFilter,\n      filter: 'includesValue',\n      filterChoices,\n    };\n  });\n};\n\n/**\n * Compares two arrays of filters and returns true if they are the same.\n */\nexport const compareFilters = (\n  filters1: DataTableFilter[] | undefined,\n  filters2: DataTableFilter[] | undefined,\n): boolean => {\n  if (filters1 === filters2) {\n    return true;\n  }\n\n  if (!filters1 || !filters2) {\n    return false;\n  }\n\n  if (filters1.length !== filters2.length) {\n    return false;\n  }\n\n  const createFilterKey = (filter: DataTableFilter) => {\n    const sortedValues = [...filter.value].sort().join(',');\n    return `${filter.id}:${sortedValues}`;\n  };\n\n  const set1 = new Set(filters1.map(createFilterKey));\n  const set2 = new Set(filters2.map(createFilterKey));\n\n  return set1.size === set2.size && [...set1].every(key => set2.has(key));\n};\n\n/**\n * Determines the appropriate page title based on search state and results.\n */\nexport const getPageTitle = ({\n  intl,\n  searchString,\n  courseDataResultsLength,\n}: GetPageTitleProps) => {\n  if (!searchString) {\n    return intl.formatMessage(messages.exploreCourses);\n  }\n\n  if ((courseDataResultsLength ?? 0) === 0) {\n    return intl.formatMessage(messages.noSearchResults, { query: searchString });\n  }\n\n  return intl.formatMessage(messages.searchResults, { query: searchString });\n};\n"]}

package/dist/constants.d.ts

@@ -0,0 +1,18 @@
+export declare const appId = "org.openedx.frontend.app.catalog";
+export declare const catalogRole = "org.openedx.frontend.role.catalog";
+export declare const coursesRole = "org.openedx.frontend.role.courses";
+export declare const courseAboutRole = "org.openedx.frontend.role.courseAbout";
+/**
+ * Feature policy for iframe, allowing access to courseware-related media.
+ * Selected in conference with the edX Security Working Group; changes to
+ * it should be vetted by them (security@edx.org).
+ */
+export declare const IFRAME_FEATURE_POLICY = "microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *";
+export declare const DEFAULT_VIDEO_MODAL_HEIGHT = 500;
+export declare const DEFAULT_VIDEO_MODAL_WIDTH = "auto";
+export declare const DEFAULT_VIDEO_MODAL_SIZE = "lg";
+export declare const DATE_FORMAT_OPTIONS: {
+    readonly month: "short";
+    readonly day: "numeric";
+    readonly year: "numeric";
+};

package/dist/constants.js

@@ -0,0 +1,15 @@
+export const appId = 'org.openedx.frontend.app.catalog';
+export const catalogRole = 'org.openedx.frontend.role.catalog';
+export const coursesRole = 'org.openedx.frontend.role.courses';
+export const courseAboutRole = 'org.openedx.frontend.role.courseAbout';
+/**
+ * Feature policy for iframe, allowing access to courseware-related media.
+ * Selected in conference with the edX Security Working Group; changes to
+ * it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = ('microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *');
+export const DEFAULT_VIDEO_MODAL_HEIGHT = 500;
+export const DEFAULT_VIDEO_MODAL_WIDTH = 'auto';
+export const DEFAULT_VIDEO_MODAL_SIZE = 'lg';
+export const DATE_FORMAT_OPTIONS = { month: 'short', day: 'numeric', year: 'numeric' };
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,kCAAkC,CAAC;AACxD,MAAM,CAAC,MAAM,WAAW,GAAG,mCAAmC,CAAC;AAC/D,MAAM,CAAC,MAAM,WAAW,GAAG,mCAAmC,CAAC;AAC/D,MAAM,CAAC,MAAM,eAAe,GAAG,uCAAuC,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,qFAAqF,CACtF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAC9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAChD,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC;AAE7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAW,CAAC","sourcesContent":["export const appId = 'org.openedx.frontend.app.catalog';\nexport const catalogRole = 'org.openedx.frontend.role.catalog';\nexport const coursesRole = 'org.openedx.frontend.role.courses';\nexport const courseAboutRole = 'org.openedx.frontend.role.courseAbout';\n\n/**\n * Feature policy for iframe, allowing access to courseware-related media.\n * Selected in conference with the edX Security Working Group; changes to\n * it should be vetted by them (security@edx.org).\n */\nexport const IFRAME_FEATURE_POLICY = (\n  'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *'\n);\n\nexport const DEFAULT_VIDEO_MODAL_HEIGHT = 500;\nexport const DEFAULT_VIDEO_MODAL_WIDTH = 'auto';\nexport const DEFAULT_VIDEO_MODAL_SIZE = 'lg';\n\nexport const DATE_FORMAT_OPTIONS = { month: 'short', day: 'numeric', year: 'numeric' } as const;\n"]}

package/dist/course-about/CourseAboutPage.d.ts

@@ -0,0 +1,2 @@
+declare const CourseAboutPage: () => import("react/jsx-runtime").JSX.Element;
+export default CourseAboutPage;

package/dist/course-about/CourseAboutPage.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useParams } from 'react-router';
+import { Helmet } from 'react-helmet';
+import { Container, Layout, Alert, useMediaQuery, breakpoints, Stack, } from '@openedx/paragon';
+import { ErrorPage, getAppConfig, getSiteConfig, useIntl, } from '@openedx/frontend-base';
+import { Loading } from '../generic';
+import { appId } from '../constants';
+import CourseAboutIntroSlot from '../slots/CourseAboutIntroSlot';
+import CourseAboutCourseMediaSlot from '../slots/CourseAboutCourseMediaSlot';
+import CourseAboutOverviewSlot from '../slots/CourseAboutOverviewSlot';
+import CourseAboutSidebarSlot from '../slots/CourseAboutSidebarSlot';
+import { useCourseAboutData } from './data/hooks';
+import messages from './messages';
+import { GRID_LAYOUT } from './layout';
+const CourseAboutPage = () => {
+    var _a;
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const isSmallScreen = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+    const { data: courseAboutData, isLoading, isError, } = useCourseAboutData(courseId);
+    if (isLoading) {
+        return _jsx(Loading, {});
+    }
+    if (isError) {
+        return (_jsx(Container, { className: "py-5.5", children: _jsx(Alert, { variant: "danger", children: _jsx(ErrorPage
+                // @ts-expect-error frontend-base ErrorPage declares message?: null but renders the prop as text. Remove when typing is fixed upstream.
+                , { 
+                    // @ts-expect-error frontend-base ErrorPage declares message?: null but renders the prop as text. Remove when typing is fixed upstream.
+                    message: intl.formatMessage(messages.errorMessage, {
+                        supportEmail: getAppConfig(appId).INFO_EMAIL,
+                    }) }) }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: intl.formatMessage(messages.pageTitle, {
+                        courseName: (_a = courseAboutData === null || courseAboutData === void 0 ? void 0 : courseAboutData.name) !== null && _a !== void 0 ? _a : '',
+                        siteName: getSiteConfig().siteName,
+                    }) }) }), _jsx(Container, { fluid: false, size: "xl", className: "py-5.5", children: _jsxs(Layout, Object.assign({}, GRID_LAYOUT, { children: [_jsx(Layout.Element, { children: isSmallScreen ? (_jsxs(Stack, { gap: 4, children: [_jsx(Layout.Element, { className: "course-media-wrapper text-center", children: _jsx(CourseAboutCourseMediaSlot, { courseAboutData: courseAboutData }) }), _jsx(CourseAboutIntroSlot, { courseAboutData: courseAboutData }), _jsx(CourseAboutOverviewSlot, { overviewData: courseAboutData.overview, courseId: courseId }), _jsx(CourseAboutSidebarSlot, { courseAboutData: courseAboutData })] })) : (_jsxs(Stack, { gap: 4, children: [_jsx(CourseAboutIntroSlot, { courseAboutData: courseAboutData }), _jsx(CourseAboutOverviewSlot, { overviewData: courseAboutData.overview, courseId: courseId })] })) }), _jsx(Layout.Element, { children: !isSmallScreen && (_jsxs(Stack, { gap: 4, children: [_jsx(Layout.Element, { className: "course-media-wrapper", children: _jsx(CourseAboutCourseMediaSlot, { courseAboutData: courseAboutData }) }), _jsx(CourseAboutSidebarSlot, { courseAboutData: courseAboutData })] })) })] })) })] }));
+};
+export default CourseAboutPage;
+//# sourceMappingURL=CourseAboutPage.js.map