feat: added dropdowns for v2

src/components/skills-quiz-v2/AutoSuggestDropDown.jsx

@@ -0,0 +1,24 @@
+import {
+  Form,
+} from '@edx/paragon';
+import React, { useState } from 'react';
+
+const AutoSuggestDropDown = () => {
+  const [selected, setSelected] = useState('');
+
+  return (
+    <Form.Autosuggest
+      aria-label="form autosuggest"
+      value={selected}
+      onSelected={(value) => setSelected(value)}
+    >
+      <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Python</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Excel</Form.AutosuggestOption>
+      <Form.AutosuggestOption>React</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
+    </Form.Autosuggest>
+  );
+};
+
+export default AutoSuggestDropDown;

src/components/skills-quiz-v2/GoalDropdown.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import { Form } from '@edx/paragon';
+import {
+  DROPDOWN_OPTION_CHANGE_CAREERS,
+  DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE,
+  DROPDOWN_OPTION_GET_PROMOTED,
+  DROPDOWN_OPTION_OTHER,
+  GOAL_DROPDOWN_DEFAULT_OPTION,
+} from '../skills-quiz/constants';
+import { SET_KEY_VALUE } from '../skills-quiz/data/constants';
+import { SkillsContext } from '../skills-quiz/SkillsContextProvider';
+
+const GoalDropdown = () => {
+  const { dispatch, state } = useContext(SkillsContext);
+  const { goal } = state;
+  const handleGoalChange = (e) => {
+    dispatch({ type: SET_KEY_VALUE, key: 'goal', value: e?.target?.value });
+  };
+  const gaolDropdownOptions = [
+    GOAL_DROPDOWN_DEFAULT_OPTION,
+    DROPDOWN_OPTION_CHANGE_CAREERS,
+    DROPDOWN_OPTION_GET_PROMOTED,
+    DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE,
+    DROPDOWN_OPTION_OTHER,
+  ];
+
+  return (
+    <Form.Control
+      as="select"
+      name="selectedGoal"
+      value={goal}
+      onChange={handleGoalChange}
+    >
+      {gaolDropdownOptions.map((option) => (
+        <option key={option} value={option}>{option}</option>
+      ))}
+    </Form.Control>
+  );
+};
+
+export default GoalDropdown;

src/components/skills-quiz-v2/SkillsQuiz.jsx

@@ -1,12 +1,15 @@
 /* eslint-disable object-curly-newline */
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useMemo } from 'react';
 import {
   ModalDialog, Container, Button, SelectableBox, Chip, CardGrid,
 } from '@edx/paragon';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
+import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch-dom';
 
-import GoalDropdown from '../skills-quiz/GoalDropdown';
+import { getConfig } from '@edx/frontend-platform/config';
+import GoalDropdown from './GoalDropdown';
 import {
   InterestedJobs,
   SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2,
@@ -16,16 +19,30 @@
 import headerImage from '../skills-quiz/images/headerImage.png';
 import CourseCard from './CourseCard';
 import ClosingAlert from './ClosingAlert';
+import IndustryDropdown from '../skills-quiz/IndustryDropdown';
+import AutoSuggestDropDown from './AutoSuggestDropDown';
 
 const SkillsQuizV2 = () => {
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const config = getConfig();
 
   const { enterpriseConfig } = useContext(AppContext);
   const [value, setValue] = useState('green');
   const handleChange = (e) => setValue(e.target.value);
   const history = useHistory();
   const [showAlert, setShowAlert] = useState(false);
-
+  const [searchClient] = 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 showCloseAlert = () => {
     setShowAlert(true);
   };
@@ -77,22 +94,27 @@
                             && (
                               <div>
                                 <h5 className="mt-3.5">
-                                  Tell us about what you want to acheive
+                                  Tell us about what you want to achieve
                                 </h5>
                                 <div className="mt-2">
                                   <GoalDropdown />
                                 </div>
                                 <h5 className="mt-3.5">
                                   Search and select your current job title
                                 </h5>
-                                <div className="mt-2">
-                                  <GoalDropdown />
-                                </div>
+                                <InstantSearch
+                                  indexName={config.ALGOLIA_INDEX_NAME_JOBS}
+                                  searchClient={searchClient}
+                                >
+                                  <div className="mt-2">
+                                    <IndustryDropdown />
+                                  </div>
+                                </InstantSearch>
                                 <h5 className="mt-3.5">
                                   What industry are you interested in?
                                 </h5>
                                 <div className="mt-2">
-                                  <GoalDropdown />
+                                  <AutoSuggestDropDown />
                                 </div>
                               </div>
                             )}