chore: update dependencies (#202)

* chore: update dependencies

* fix: mock InstantSearch

.env

@@ -20,7 +20,3 @@ SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
-ALGOLIA_APP_ID=''
-ALGOLIA_JOBS_INDEX_NAME=''
-ALGOLIA_PRODUCT_INDEX_NAME=''
-ALGOLIA_SEARCH_API_KEY=''

.env.development

@@ -22,7 +22,3 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
-ALGOLIA_APP_ID=''
-ALGOLIA_JOBS_INDEX_NAME=''
-ALGOLIA_PRODUCT_INDEX_NAME=''
-ALGOLIA_SEARCH_API_KEY=''

.gitignore

@@ -5,6 +5,7 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
+env.config.js
 
 dist/
 src/i18n/transifex_input.json

env.config.js.example

@@ -0,0 +1,9 @@
+// In order to run the Skills Builder, we need to set these Algolia configuration values
+const config = {
+  ALGOLIA_APP_ID: '<ALGOLIA_STAGE_APP_ID>',
+  ALGOLIA_JOBS_INDEX_NAME: '<ALGOLIA_STAGE_JOBS_INDEX_NAME>',
+  ALGOLIA_PRODUCT_INDEX_NAME: '<ALGOLIA_STAGE_PRODUCT_INDEX_NAME>',
+  ALGOLIA_SEARCH_API_KEY: '<ALGOLIA_STAGE_SEARCH_API_KEY>',
+};
+
+export default config;

package.json

@@ -41,17 +41,15 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/paragon": "^21.11.3",
+    "@openedx/paragon": "^22.0.0",
     "algoliasearch": "4.24.0",
     "core-js": "3.37.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-instantsearch": "^7.0.2",
-    "react-redux": "7.2.9",
     "react-router": "6.24.1",
     "react-router-dom": "6.24.1",
-    "redux": "4.2.1",
     "regenerator-runtime": "0.14.1"
   },
   "devDependencies": {

src/skills-builder/skills-builder-steps/select-preferences/JobTitleInstantSearch.jsx

@@ -6,15 +6,20 @@ import {
 import { useSearchBox, useInstantSearch } from 'react-instantsearch';
 import { Search } from '@openedx/paragon/icons';
 
-const JobTitleInstantSearch = (props) => {
+const JobTitleInstantSearch = ({ onSelected, ...props }) => {
   const { refine } = useSearchBox(props);
   const { results, status } = useInstantSearch();
   const { hits } = results;
 
+  const [inputValue, setInputValue] = useState({});
   const [jobInput, setJobInput] = useState('');
 
   const handleAutosuggestChange = (value) => {
-    setJobInput(value);
+    setInputValue(value);
+    setJobInput(value.userProvidedText);
+    if (value.selectionValue) {
+      onSelected(value.selectionValue);
+    }
   };
 
   useEffect(() => {
@@ -23,8 +28,8 @@ const JobTitleInstantSearch = (props) => {
 
   return (
     <Form.Autosuggest
-      value={jobInput}
-      onChange={handleAutosuggestChange}
+      value={inputValue}
+      onChange={(v) => handleAutosuggestChange(v)}
       name="job-title-suggest"
       autoComplete="off"
       isLoading={status === 'loading' || status === 'stalled'}

src/skills-builder/test/SkillsBuilder.test.jsx

@@ -17,6 +17,10 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
+jest.mock('react-instantsearch', () => ({
+  InstantSearch: jest.fn(() => (null)),
+}));
+
 describe('skills-builder', () => {
   beforeAll(() => {
     useVisibilityFlags.mockImplementation(() => (DEFAULT_VISIBILITY_FLAGS));