From e75864b8606fdab56fa5df89f72d196885b299dd Mon Sep 17 00:00:00 2001 From: Justin Hynes Date: Mon, 13 Feb 2023 09:07:02 -0500 Subject: [PATCH] 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 --- .env | 4 + .env.development | 4 + .env.test | 4 + package-lock.json | 273 ++++++++++++++++++ package.json | 1 + src/index.jsx | 4 + .../SkillsBuilderModal.jsx | 11 +- src/skills-builder/utils/hooks.jsx | 28 ++ 8 files changed, 326 insertions(+), 3 deletions(-) create mode 100644 src/skills-builder/utils/hooks.jsx diff --git a/.env b/.env index bddadec..09763a6 100644 --- a/.env +++ b/.env @@ -27,3 +27,7 @@ APP_ID='' MFE_CONFIG_API_URL='' ENABLE_SKILLS_BUILDER='' ENABLE_SKILLS_BUILDER_PROFILE='' +ALGOLIA_APP_ID='' +ALGOLIA_JOBS_INDEX_NAME='' +ALGOLIA_PRODUCT_INDEX_NAME='' +ALGOLIA_SEARCH_API_KEY='' diff --git a/.env.development b/.env.development index d249e3e..b87bcde 100644 --- a/.env.development +++ b/.env.development @@ -28,3 +28,7 @@ APP_ID='' MFE_CONFIG_API_URL='' ENABLE_SKILLS_BUILDER='true' ENABLE_SKILLS_BUILDER_PROFILE='' +ALGOLIA_APP_ID='' +ALGOLIA_JOBS_INDEX_NAME='' +ALGOLIA_PRODUCT_INDEX_NAME='' +ALGOLIA_SEARCH_API_KEY='' diff --git a/.env.test b/.env.test index b79d85c..6f8232c 100644 --- a/.env.test +++ b/.env.test @@ -23,3 +23,7 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990' COLLECT_YEAR_OF_BIRTH=true APP_ID='' MFE_CONFIG_API_URL='' +ALGOLIA_APP_ID='' +ALGOLIA_JOBS_INDEX_NAME='' +ALGOLIA_PRODUCT_INDEX_NAME='' +ALGOLIA_SEARCH_API_KEY='' diff --git a/package-lock.json b/package-lock.json index 4af1986..6e503ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@fortawesome/free-regular-svg-icons": "5.15.4", "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", + "algoliasearch": "4.6.0", "classnames": "2.3.2", "core-js": "3.27.2", "lodash.camelcase": "4.3.0", @@ -57,6 +58,121 @@ "redux-mock-store": "1.5.4" } }, + "node_modules/@algolia/cache-browser-local-storage": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.6.0.tgz", + "integrity": "sha512-3ObeNwZ5gfDvKPp9NXdtbBrCtz/yR1oyDu/AReG73Oanua3y30Y11p7VQzzpLe2R/gDCLOGdRgr17h11lGy1Hg==", + "dependencies": { + "@algolia/cache-common": "4.6.0" + } + }, + "node_modules/@algolia/cache-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.6.0.tgz", + "integrity": "sha512-mEedrPb2O3WwtiIHggFoIhTbHVCMNikxMiiN9kqmwZkdDfClfxm435OUGZfAl67rBZfc0DNs/jmPM2mUoefM9A==" + }, + "node_modules/@algolia/cache-in-memory": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.6.0.tgz", + "integrity": "sha512-J7ayGokVWEFkuLxzgrIsPS4k1/ZndyGVpG/qPrG9RHVrs7ZogEhUSY1tbEyUlW3mGy7diIh+/52dtohDL/nbGQ==", + "dependencies": { + "@algolia/cache-common": "4.6.0" + } + }, + "node_modules/@algolia/client-account": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.6.0.tgz", + "integrity": "sha512-0t2yU6wNBNJgAmrARHrM1llhANyPT4Q/1wu6yEzv2WfPXlfsHwMhtKYNti4/k8eswwUt9wAri10WFV6TJI48rg==", + "dependencies": { + "@algolia/client-common": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "node_modules/@algolia/client-analytics": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.6.0.tgz", + "integrity": "sha512-7yfn9pabA21Uw2iZjW1MNN4IJUT5y/YSg+ZJ+3HqBB6SgzOOqY0N3fATsPeGuN9EqSfVnqvnIrJMS8mI0b5FzQ==", + "dependencies": { + "@algolia/client-common": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "node_modules/@algolia/client-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.6.0.tgz", + "integrity": "sha512-60jK0LK5H+6q6HyyMyoBBD0fIs8zZzJt6BiyJGQG90o3gUV/SnjiNxO9Bx0RRlqdkE5s0OYFu1L7P9Y5TX7oAw==", + "dependencies": { + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "node_modules/@algolia/client-recommendation": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-recommendation/-/client-recommendation-4.6.0.tgz", + "integrity": "sha512-j+Yb1z5QeIRDCCO+9hS9oZS3KNqRogPHDbJJsLTt6pkrs4CG2UVLVV67M977B1nzJ9OzaEki3VbpGQhRhPGNfQ==", + "dependencies": { + "@algolia/client-common": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "node_modules/@algolia/client-search": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.6.0.tgz", + "integrity": "sha512-+qA1NA88YnXvuCKifegfgts1RQs8IzcwccQqyurz8ins4hypZL1tXN2BkrOqqDIgvYIrUvFyhv+gLO6U9PpDUA==", + "dependencies": { + "@algolia/client-common": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "node_modules/@algolia/logger-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.6.0.tgz", + "integrity": "sha512-F+0HTGSQzJfWsX/cJq2l4eG2Y5JA6pqZ0YETyo5XJhZX4JaDrGszVKuOqp8kovZF/Ifebywxb8JdCiSUskmbig==" + }, + "node_modules/@algolia/logger-console": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.6.0.tgz", + "integrity": "sha512-ers7OhfU6qBQl6s7MOe5gNUkcpa7LGrhEzDWnD0cUwLSd5BvWt7zEN69O2CZVbvAUZYlZ5zJTzMMa49s0VXrKQ==", + "dependencies": { + "@algolia/logger-common": "4.6.0" + } + }, + "node_modules/@algolia/requester-browser-xhr": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.6.0.tgz", + "integrity": "sha512-ugrJT25VUkoKrl5vJVFclMdogbhTiDZ38Gss4xfTiSsP/SGE/0ei5VEOMEcj/bjkurJjPky1HfJZ3ykJhIsfCA==", + "dependencies": { + "@algolia/requester-common": "4.6.0" + } + }, + "node_modules/@algolia/requester-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.6.0.tgz", + "integrity": "sha512-DJ5iIGBGrRudimaaFnpBFM19pv8SsXiMYuukn9q1GgQh2mPPBCBBJiezKc7+OzE1UyCVrAFBpR/hrJnflZnRdQ==" + }, + "node_modules/@algolia/requester-node-http": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.6.0.tgz", + "integrity": "sha512-MPZK3oZz0jSBsqrGiPxv7LOKMUNknlaRNyRDy0v/ASIYG+GvLhGTdEzG5Eyw5tgSvBr8CWrWM5tDC31EH40Ndw==", + "dependencies": { + "@algolia/requester-common": "4.6.0" + } + }, + "node_modules/@algolia/transporter": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.6.0.tgz", + "integrity": "sha512-xp+HI8sB8gLCvP00scaOVPQEk5H7nboWUxrwLKyVUvtUO4o003bOfFPsH86NRyu5Dv7fzX9b8EH3rVxcLOhjqg==", + "dependencies": { + "@algolia/cache-common": "4.6.0", + "@algolia/logger-common": "4.6.0", + "@algolia/requester-common": "4.6.0" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -5161,6 +5277,27 @@ "ajv": "^6.9.1" } }, + "node_modules/algoliasearch": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.6.0.tgz", + "integrity": "sha512-f4QVfUYnWIGZwOupZh0RAqW8zEfpZAcZG6ZT0p6wDMztEyKBrjjbTXBk9p9uEaJqoIhFUm6TtApOxodTdHbqvw==", + "dependencies": { + "@algolia/cache-browser-local-storage": "4.6.0", + "@algolia/cache-common": "4.6.0", + "@algolia/cache-in-memory": "4.6.0", + "@algolia/client-account": "4.6.0", + "@algolia/client-analytics": "4.6.0", + "@algolia/client-common": "4.6.0", + "@algolia/client-recommendation": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/logger-common": "4.6.0", + "@algolia/logger-console": "4.6.0", + "@algolia/requester-browser-xhr": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/requester-node-http": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -19965,6 +20102,121 @@ } }, "dependencies": { + "@algolia/cache-browser-local-storage": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.6.0.tgz", + "integrity": "sha512-3ObeNwZ5gfDvKPp9NXdtbBrCtz/yR1oyDu/AReG73Oanua3y30Y11p7VQzzpLe2R/gDCLOGdRgr17h11lGy1Hg==", + "requires": { + "@algolia/cache-common": "4.6.0" + } + }, + "@algolia/cache-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.6.0.tgz", + "integrity": "sha512-mEedrPb2O3WwtiIHggFoIhTbHVCMNikxMiiN9kqmwZkdDfClfxm435OUGZfAl67rBZfc0DNs/jmPM2mUoefM9A==" + }, + "@algolia/cache-in-memory": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.6.0.tgz", + "integrity": "sha512-J7ayGokVWEFkuLxzgrIsPS4k1/ZndyGVpG/qPrG9RHVrs7ZogEhUSY1tbEyUlW3mGy7diIh+/52dtohDL/nbGQ==", + "requires": { + "@algolia/cache-common": "4.6.0" + } + }, + "@algolia/client-account": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.6.0.tgz", + "integrity": "sha512-0t2yU6wNBNJgAmrARHrM1llhANyPT4Q/1wu6yEzv2WfPXlfsHwMhtKYNti4/k8eswwUt9wAri10WFV6TJI48rg==", + "requires": { + "@algolia/client-common": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "@algolia/client-analytics": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.6.0.tgz", + "integrity": "sha512-7yfn9pabA21Uw2iZjW1MNN4IJUT5y/YSg+ZJ+3HqBB6SgzOOqY0N3fATsPeGuN9EqSfVnqvnIrJMS8mI0b5FzQ==", + "requires": { + "@algolia/client-common": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "@algolia/client-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.6.0.tgz", + "integrity": "sha512-60jK0LK5H+6q6HyyMyoBBD0fIs8zZzJt6BiyJGQG90o3gUV/SnjiNxO9Bx0RRlqdkE5s0OYFu1L7P9Y5TX7oAw==", + "requires": { + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "@algolia/client-recommendation": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-recommendation/-/client-recommendation-4.6.0.tgz", + "integrity": "sha512-j+Yb1z5QeIRDCCO+9hS9oZS3KNqRogPHDbJJsLTt6pkrs4CG2UVLVV67M977B1nzJ9OzaEki3VbpGQhRhPGNfQ==", + "requires": { + "@algolia/client-common": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "@algolia/client-search": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.6.0.tgz", + "integrity": "sha512-+qA1NA88YnXvuCKifegfgts1RQs8IzcwccQqyurz8ins4hypZL1tXN2BkrOqqDIgvYIrUvFyhv+gLO6U9PpDUA==", + "requires": { + "@algolia/client-common": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, + "@algolia/logger-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.6.0.tgz", + "integrity": "sha512-F+0HTGSQzJfWsX/cJq2l4eG2Y5JA6pqZ0YETyo5XJhZX4JaDrGszVKuOqp8kovZF/Ifebywxb8JdCiSUskmbig==" + }, + "@algolia/logger-console": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.6.0.tgz", + "integrity": "sha512-ers7OhfU6qBQl6s7MOe5gNUkcpa7LGrhEzDWnD0cUwLSd5BvWt7zEN69O2CZVbvAUZYlZ5zJTzMMa49s0VXrKQ==", + "requires": { + "@algolia/logger-common": "4.6.0" + } + }, + "@algolia/requester-browser-xhr": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.6.0.tgz", + "integrity": "sha512-ugrJT25VUkoKrl5vJVFclMdogbhTiDZ38Gss4xfTiSsP/SGE/0ei5VEOMEcj/bjkurJjPky1HfJZ3ykJhIsfCA==", + "requires": { + "@algolia/requester-common": "4.6.0" + } + }, + "@algolia/requester-common": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.6.0.tgz", + "integrity": "sha512-DJ5iIGBGrRudimaaFnpBFM19pv8SsXiMYuukn9q1GgQh2mPPBCBBJiezKc7+OzE1UyCVrAFBpR/hrJnflZnRdQ==" + }, + "@algolia/requester-node-http": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.6.0.tgz", + "integrity": "sha512-MPZK3oZz0jSBsqrGiPxv7LOKMUNknlaRNyRDy0v/ASIYG+GvLhGTdEzG5Eyw5tgSvBr8CWrWM5tDC31EH40Ndw==", + "requires": { + "@algolia/requester-common": "4.6.0" + } + }, + "@algolia/transporter": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.6.0.tgz", + "integrity": "sha512-xp+HI8sB8gLCvP00scaOVPQEk5H7nboWUxrwLKyVUvtUO4o003bOfFPsH86NRyu5Dv7fzX9b8EH3rVxcLOhjqg==", + "requires": { + "@algolia/cache-common": "4.6.0", + "@algolia/logger-common": "4.6.0", + "@algolia/requester-common": "4.6.0" + } + }, "@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -23843,6 +24095,27 @@ "dev": true, "requires": {} }, + "algoliasearch": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.6.0.tgz", + "integrity": "sha512-f4QVfUYnWIGZwOupZh0RAqW8zEfpZAcZG6ZT0p6wDMztEyKBrjjbTXBk9p9uEaJqoIhFUm6TtApOxodTdHbqvw==", + "requires": { + "@algolia/cache-browser-local-storage": "4.6.0", + "@algolia/cache-common": "4.6.0", + "@algolia/cache-in-memory": "4.6.0", + "@algolia/client-account": "4.6.0", + "@algolia/client-analytics": "4.6.0", + "@algolia/client-common": "4.6.0", + "@algolia/client-recommendation": "4.6.0", + "@algolia/client-search": "4.6.0", + "@algolia/logger-common": "4.6.0", + "@algolia/logger-console": "4.6.0", + "@algolia/requester-browser-xhr": "4.6.0", + "@algolia/requester-common": "4.6.0", + "@algolia/requester-node-http": "4.6.0", + "@algolia/transporter": "4.6.0" + } + }, "ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", diff --git a/package.json b/package.json index 620198b..d603f1f 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@fortawesome/free-regular-svg-icons": "5.15.4", "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", + "algoliasearch": "4.6.0", "classnames": "2.3.2", "core-js": "3.27.2", "lodash.camelcase": "4.3.0", diff --git a/src/index.jsx b/src/index.jsx index 951014b..7705089 100755 --- a/src/index.jsx +++ b/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'); }, }, diff --git a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx index 0bcd7d6..13bf2eb 100644 --- a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx +++ b/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 ( { + 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]; +};