diff --git a/src/components/my-career/CategoryCard.jsx b/src/components/my-career/CategoryCard.jsx index a35d85fe7b..f7dad5d5e3 100644 --- a/src/components/my-career/CategoryCard.jsx +++ b/src/components/my-career/CategoryCard.jsx @@ -13,6 +13,7 @@ import algoliasearch from 'algoliasearch/lite'; import { AppContext } from '@edx/frontend-platform/react'; import LevelBars from './LevelBars'; import SkillsRecommendationCourses from './SkillsRecommendationCourses'; +import { useAlgoliaSearch } from "../../utils/hooks"; const CategoryCard = ({ topCategory }) => { const { skillsSubcategories } = topCategory; @@ -26,16 +27,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 2aaad3ea13..62c35fe824 100644 --- a/src/components/search/Search.jsx +++ b/src/components/search/Search.jsx @@ -36,6 +36,7 @@ import SearchPathwayCard from '../pathway/SearchPathwayCard'; import { SubsidyRequestsContext } from '../enterprise-subsidy-requests'; import PathwayModal from '../pathway/PathwayModal'; import { useEnterpriseCuration } from './content-highlights/data'; +import { useAlgoliaSearch } from "../../utils/hooks"; const Search = () => { const { pathwayUUID } = useParams(); @@ -78,17 +79,7 @@ const Search = () => { }, [openLearnerPathwayModal, pathwayUUID]); const config = getConfig(); - 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); const PAGE_TITLE = `${HEADER_TITLE} - ${enterpriseConfig.name}`; const shouldDisplayBalanceAlert = hasNoEnterpriseOffersBalance || hasLowEnterpriseOffersBalance; diff --git a/src/components/skills-quiz/SkillsQuizStepper.jsx b/src/components/skills-quiz/SkillsQuizStepper.jsx index f7131c344e..e597371008 100644 --- a/src/components/skills-quiz/SkillsQuizStepper.jsx +++ b/src/components/skills-quiz/SkillsQuizStepper.jsx @@ -38,6 +38,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 +49,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 +190,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..41be87cd7a 100644 --- a/src/utils/hooks.jsx +++ b/src/utils/hooks.jsx @@ -1,6 +1,8 @@ -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 +24,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]; };