diff --git a/src/components/academies/AcademyDetailPage.jsx b/src/components/academies/AcademyDetailPage.jsx index 4096e11f25..6361606523 100644 --- a/src/components/academies/AcademyDetailPage.jsx +++ b/src/components/academies/AcademyDetailPage.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useMemo } from 'react'; +import React, { useContext } from 'react'; import { Container, Chip, Breadcrumb, Skeleton, Spinner, @@ -7,12 +7,12 @@ import { useParams, Link, } from 'react-router-dom'; import { AppContext } from '@edx/frontend-platform/react'; -import algoliasearch from 'algoliasearch/lite'; import { getConfig } from '@edx/frontend-platform/config'; import { useAcademyMetadata } from './data/hooks'; import CourseCard from './CourseCard'; import NotFoundPage from '../NotFoundPage'; import { ACADEMY_NOT_FOUND_TITLE } from './data/constants'; +import { useAlgoliaSearch } from '../../utils/hooks'; const AcademyDetailPage = () => { const config = getConfig(); @@ -21,17 +21,7 @@ const AcademyDetailPage = () => { const [academy, isAcademyAPILoading, academyAPIError] = useAcademyMetadata(academyUUID); const academyURL = `/${enterpriseConfig.slug}/academy/${academyUUID}`; - // init algolia index - const courseIndex = useMemo( - () => { - const client = algoliasearch( - config.ALGOLIA_APP_ID, - config.ALGOLIA_SEARCH_API_KEY, - ); - return client.initIndex(config.ALGOLIA_INDEX_NAME); - }, - [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, config.ALGOLIA_SEARCH_API_KEY], - ); + const [courseIndex] = useAlgoliaSearch(config, config.ALGOLIA_INDEX_NAME); if (academyAPIError) { return ( diff --git a/src/components/my-career/CategoryCard.jsx b/src/components/my-career/CategoryCard.jsx index 4e5bb5a66d..9f61285398 100644 --- a/src/components/my-career/CategoryCard.jsx +++ b/src/components/my-career/CategoryCard.jsx @@ -1,17 +1,17 @@ import React, { - useContext, useEffect, useMemo, useState, + useContext, useEffect, useState, } from 'react'; import PropTypes from 'prop-types'; import { Button, Card, useToggle } from '@edx/paragon'; import { getConfig } from '@edx/frontend-platform/config'; -import algoliasearch from 'algoliasearch/lite'; import { AppContext } from '@edx/frontend-platform/react'; import LevelBars from './LevelBars'; import SkillsRecommendationCourses from './SkillsRecommendationCourses'; import { UserSubsidyContext } from '../enterprise-user-subsidy'; import { isDisableCourseSearch } from '../enterprise-user-subsidy/enterprise-offers/data/utils'; import { features } from '../../config'; +import { useAlgoliaSearch } from '../../utils/hooks'; const CategoryCard = ({ topCategory }) => { const { skillsSubcategories } = topCategory; @@ -41,16 +41,7 @@ const CategoryCard = ({ topCategory }) => { const config = getConfig(); const { enterpriseConfig } = useContext(AppContext); - const courseIndex = useMemo( - () => { - const client = algoliasearch( - config.ALGOLIA_APP_ID, - config.ALGOLIA_SEARCH_API_KEY, - ); - return client.initIndex(config.ALGOLIA_INDEX_NAME); - }, - [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, config.ALGOLIA_SEARCH_API_KEY], - ); + const [courseIndex] = useAlgoliaSearch(config, config.ALGOLIA_INDEX_NAME); const filterRenderableSkills = (skills) => { const renderableSkills = []; diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx index c372f157e3..ef84a03172 100644 --- a/src/components/search/Search.jsx +++ b/src/components/search/Search.jsx @@ -1,5 +1,5 @@ import React, { - useContext, useMemo, useEffect, + useContext, useEffect, } from 'react'; import { useParams, useHistory } from 'react-router-dom'; import { Helmet } from 'react-helmet'; @@ -9,7 +9,6 @@ import { getConfig } from '@edx/frontend-platform/config'; import { SearchHeader, SearchContext } from '@edx/frontend-enterprise-catalog-search'; import { useToggle, Stack } from '@edx/paragon'; -import algoliasearch from 'algoliasearch/lite'; import { useDefaultSearchFilters, useSearchCatalogs } from './data/hooks'; import { NUM_RESULTS_PER_PAGE, @@ -41,6 +40,7 @@ import AssignmentsOnlyEmptyState from './AssignmentsOnlyEmptyState'; import { LICENSE_STATUS } from '../enterprise-user-subsidy/data/constants'; import { POLICY_TYPES } from '../enterprise-user-subsidy/enterprise-offers/data/constants'; import AuthenticatedPageContext from '../app/AuthenticatedPageContext'; +import { useAlgoliaSearch } from '../../utils/hooks'; const Search = () => { const config = getConfig(); @@ -85,17 +85,7 @@ const Search = () => { const enterpriseUUID = enterpriseConfig.uuid; const { enterpriseCuration: { canOnlyViewHighlightSets } } = useEnterpriseCuration(enterpriseUUID); - const courseIndex = useMemo( - () => { - const client = algoliasearch( - config.ALGOLIA_APP_ID, - config.ALGOLIA_SEARCH_API_KEY, - ); - const cIndex = client.initIndex(config.ALGOLIA_INDEX_NAME); - return cIndex; - }, - [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, config.ALGOLIA_SEARCH_API_KEY], - ); + const [courseIndex] = useAlgoliaSearch(config, config.ALGOLIA_INDEX_NAME); // If a pathwayUUID exists, open the pathway modal. useEffect(() => { diff --git a/src/components/skills-quiz/SkillsQuizStepper.jsx b/src/components/skills-quiz/SkillsQuizStepper.jsx index f7131c344e..2940bb30b5 100644 --- a/src/components/skills-quiz/SkillsQuizStepper.jsx +++ b/src/components/skills-quiz/SkillsQuizStepper.jsx @@ -1,9 +1,8 @@ /* eslint-disable object-curly-newline */ -import React, { useEffect, useState, useContext, useMemo } from 'react'; +import React, { useEffect, useState, useContext } from 'react'; import { Button, Stepper, ModalDialog, Container, Form, Stack, } from '@edx/paragon'; -import algoliasearch from 'algoliasearch/lite'; import { Configure, InstantSearch } from 'react-instantsearch-dom'; import { getConfig } from '@edx/frontend-platform/config'; import { SearchContext } from '@edx/frontend-enterprise-catalog-search'; @@ -38,6 +37,7 @@ import { import { SkillsContext } from './SkillsContextProvider'; import { SET_KEY_VALUE } from './data/constants'; import { checkValidGoalAndJobSelected } from '../utils/skills-quiz'; +import { useAlgoliaSearch } from '../../utils/hooks'; import TopSkillsOverview from './TopSkillsOverview'; import SkillsQuizHeader from './SkillsQuizHeader'; @@ -48,18 +48,9 @@ import { fetchCourseEnrollments } from './data/service'; const SkillsQuizStepper = () => { const config = getConfig(); const { userId } = getAuthenticatedUser(); - const [searchClient, courseIndex, jobIndex] = useMemo( - () => { - const client = algoliasearch( - config.ALGOLIA_APP_ID, - config.ALGOLIA_SEARCH_API_KEY, - ); - const cIndex = client.initIndex(config.ALGOLIA_INDEX_NAME); - const jIndex = client.initIndex(config.ALGOLIA_INDEX_NAME_JOBS); - return [client, cIndex, jIndex]; - }, - [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, config.ALGOLIA_INDEX_NAME_JOBS, config.ALGOLIA_SEARCH_API_KEY], - ); + const [courseIndex] = useAlgoliaSearch(config, config.ALGOLIA_INDEX_NAME); + const [jobSearchClient, jobIndex] = useAlgoliaSearch(config, config.ALGOLIA_INDEX_NAME_JOBS); + const [currentStep, setCurrentStep] = useState(STEP1); const [isStudentChecked, setIsStudentChecked] = useState(false); const handleIsStudentCheckedChange = e => setIsStudentChecked(e.target.checked); @@ -198,7 +189,7 @@ const SkillsQuizStepper = () => {
dayjs(endDate) < dayjs(); @@ -66,6 +67,22 @@ export const loginRefresh = async () => { } }; +export const fetchAlgoliaSecuredApiKey = async () => { + const config = getConfig(); + const httpClient = getAuthenticatedHttpClient(); + + try { + const response = await httpClient.get(config.ALGOLIA_SECURED_KEY_ENDPOINT); + if (response && response.data) { + return response.data.key; + } + throw new Error('Response does not contain data'); + } catch (error) { + logError(error); + return null; + } +}; + export const fixedEncodeURIComponent = (str) => encodeURIComponent(str).replace(/[!()*]/g, (c) => `%${ c.charCodeAt(0).toString(16)}`); export const formatStringAsNumber = (str, radix = 10) => { diff --git a/src/utils/hooks.jsx b/src/utils/hooks.jsx index 33b4d1089b..bd55096b46 100644 --- a/src/utils/hooks.jsx +++ b/src/utils/hooks.jsx @@ -1,6 +1,13 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import algoliasearch from 'algoliasearch'; +import { fetchAlgoliaSecuredApiKey } from './common'; + export const useRenderContactHelpText = (enterpriseConfig) => { const renderContactHelpText = useCallback( (LinkComponent = 'a') => { @@ -22,17 +29,41 @@ export const useRenderContactHelpText = (enterpriseConfig) => { return renderContactHelpText; }; +let cachedApiKey = null; + +export const useAlgoliaSearchApiKey = (config) => { + // If the search API key is not provided in the config, + // fetch it from `ALGOLIA_SECURED_KEY_ENDPOINT`. + + const [searchApiKey, setSearchApiKey] = useState(cachedApiKey || config.ALGOLIA_SEARCH_API_KEY); + + useEffect(() => { + const fetchApiKey = async () => { + const key = await fetchAlgoliaSecuredApiKey(); + cachedApiKey = key; + setSearchApiKey(key); + }; + + if (!searchApiKey) { + fetchApiKey(); + } + }, [searchApiKey]); + + return searchApiKey; +}; + export const useAlgoliaSearch = (config, indexName) => { + const algoliaSearchApiKey = useAlgoliaSearchApiKey(config); const [searchClient, searchIndex] = useMemo( () => { const client = algoliasearch( config.ALGOLIA_APP_ID, - config.ALGOLIA_SEARCH_API_KEY, + algoliaSearchApiKey, ); const index = client.initIndex(indexName || config.ALGOLIA_INDEX_NAME); return [client, index]; }, - [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, config.ALGOLIA_SEARCH_API_KEY, indexName], + [config.ALGOLIA_APP_ID, config.ALGOLIA_INDEX_NAME, algoliaSearchApiKey, indexName], ); return [searchClient, searchIndex]; };