feat: Add Algolia support to Profile MFE

[APER-2261]

This PR adds Algolia support to the Profile MFE and the upcoming Skills Builder feature.

* Adds new dependency for the `algoliasearch` package
* Add new config to support Algolia
* Update MFE configuration so we can access the new configuration variables
* Add hook to initialize Algolia client and return job and product Algolia indexes (based on settings)
* Update SkillsBuilderModal to add test code that displays the results of querying Algolia

src/index.jsx

@@ -68,6 +68,10 @@ initialize({
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
         ENABLE_SKILLS_BUILDER: process.env.ENABLE_SKILLS_BUILDER,
         ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
+        ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || null,
+        ALGOLIA_JOBS_INDEX_NAME: process.env.ALGOLIA_JOBS_INDEX_NAME || null,
+        ALGOLIA_PRODUCT_INDEX_NAME: process.env.ALGOLIA_PRODUCT_INDEX_NAME || null,
+        ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || null,
       }, 'App loadConfig override handler');
     },
   },

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -16,14 +16,19 @@ import { SkillsBuilderHeader } from '../skills-builder-header';
 
 import headerImage from '../images/headerImage.png';
 
+import { useAlgoliaSearch } from '../utils/hooks';
+
 const SkillsBuilderModal = () => {
+  const [state, dispatch] = useContext(SkillsBuilderContext);
+  const [learnerGoal, setLearnerGoal] = useState('');
+  // TODO: Temporarily disable the no-unused-vars check, we'll see these later
+  // eslint-disable-next-line no-unused-vars
+  const [algoliaClient, productSearchIndex, jobSearchIndex] = useAlgoliaSearch();
+
   const onCloseHandle = () => {
     window.history.back();
   };
 
-  const [state, dispatch] = useContext(SkillsBuilderContext);
-  const [learnerGoal, setLearnerGoal] = useState('');
-
   return (
     <ModalDialog
       title="Skills Builder"

src/skills-builder/utils/hooks.jsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+
+import algoliasearch from 'algoliasearch';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useAlgoliaSearch = () => {
+  const config = getConfig();
+
+  const [searchClient, productSearchIndex, jobSearchIndex] = useMemo(
+    () => {
+      const client = algoliasearch(
+        config.ALGOLIA_APP_ID,
+        config.ALGOLIA_SEARCH_API_KEY,
+      );
+      const productIndex = client.initIndex(config.ALGOLIA_PRODUCT_INDEX_NAME);
+      const jobIndex = client.initIndex(config.ALGOLIA_JOBS_INDEX_NAME);
+      return [client, productIndex, jobIndex];
+    },
+    [
+      config.ALGOLIA_APP_ID,
+      config.ALGOLIA_PRODUCT_INDEX_NAME,
+      config.ALGOLIA_JOBS_INDEX_NAME,
+      config.ALGOLIA_SEARCH_API_KEY,
+    ],
+  );
+  return [searchClient, productSearchIndex, jobSearchIndex];
+};