feat: add experimental single question version #44
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,23 @@ | ||
| import React, { useRef } from 'react'; | ||
| import { SkillsBuilderModal } from './skills-builder-modal'; | ||
| import { SkillsBuilderProvider } from './skills-builder-context'; | ||
| import { useVisibilityFlags } from './skills-builder-modal/view-results/data/hooks'; | ||
| import SkillsBuilderProgressive from './skills-builder-modal/SkillsBuilderProgressive'; | ||
|
|
||
| const SkillsBuilder = () => { | ||
| const visibilityFlags = useRef(useVisibilityFlags()); | ||
| const { useProgressive } = visibilityFlags.current; | ||
|
|
||
| return ( | ||
| <SkillsBuilderProvider> | ||
| { useProgressive ? ( | ||
| <SkillsBuilderProgressive /> | ||
| ) : ( | ||
| <SkillsBuilderModal /> | ||
| )} | ||
|
|
||
| </SkillsBuilderProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default SkillsBuilder; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { useContext } from 'react'; | ||
| import { | ||
| Button, Container, ModalDialog, Form, Hyperlink, useMediaQuery, breakpoints, | ||
| } from '@edx/paragon'; | ||
| import { getConfig } from '@edx/frontend-platform'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
| import { sendTrackEvent } from '@edx/frontend-platform/analytics'; | ||
| import messages from './messages'; | ||
|
|
||
| import { SkillsBuilderContext } from '../skills-builder-context'; | ||
| import { SkillsBuilderHeader } from '../skills-builder-header'; | ||
| import { SelectPreferences } from './select-preferences'; | ||
| import ViewResults from './view-results/ViewResults'; | ||
|
|
||
| import headerImage from '../images/headerImage.png'; | ||
|
|
||
| const SkillsBuilderProgressive = () => { | ||
| const { formatMessage } = useIntl(); | ||
| const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth }); | ||
| const { state } = useContext(SkillsBuilderContext); | ||
| const { currentGoal, currentJobTitle, careerInterests } = state; | ||
|
|
||
| const sendActionButtonEvent = (eventSuffix) => { | ||
| sendTrackEvent( | ||
| `edx.skills_builder.${eventSuffix}`, | ||
| { | ||
| app_name: 'skills_builder', | ||
| category: 'skills_builder', | ||
| learner_data: { | ||
| current_goal: currentGoal, | ||
| current_job_title: currentJobTitle, | ||
| career_interests: careerInterests, | ||
| }, | ||
| }, | ||
| ); | ||
| }; | ||
|
|
||
| const exitButtonHandle = () => { | ||
| sendActionButtonEvent('exit'); | ||
| }; | ||
| const closeButtonHandle = () => { | ||
| sendActionButtonEvent('close'); | ||
| window.location.href = getConfig().MARKETING_SITE_SEARCH_URL; | ||
| }; | ||
|
|
||
| return ( | ||
| <ModalDialog | ||
| title="Skills Builder" | ||
| size="fullscreen" | ||
| className="skills-builder-modal bg-light-200" | ||
| isOpen | ||
| onClose={closeButtonHandle} | ||
| > | ||
| <ModalDialog.Hero className="med-min-height"> | ||
| <ModalDialog.Hero.Background className="bg-primary-500"> | ||
| { !isMedium && <img src={headerImage} alt="" className="h-100" /> } | ||
| </ModalDialog.Hero.Background> | ||
| <ModalDialog.Hero.Content> | ||
| <SkillsBuilderHeader isMedium={isMedium} /> | ||
| </ModalDialog.Hero.Content> | ||
| </ModalDialog.Hero> | ||
|
|
||
| <ModalDialog.Body> | ||
| <Container size="md" className="p-4.5"> | ||
| <Form> | ||
|
|
||
| <SelectPreferences /> | ||
|
|
||
| { careerInterests.length > 0 && ( | ||
| <ViewResults /> | ||
| )} | ||
|
|
||
| </Form> | ||
| </Container> | ||
| </ModalDialog.Body> | ||
|
|
||
| <ModalDialog.Footer> | ||
| <Hyperlink destination={getConfig().MARKETING_SITE_SEARCH_URL}> | ||
| <Button onClick={exitButtonHandle}> | ||
| {formatMessage(messages.exitButton)} | ||
| </Button> | ||
| </Hyperlink> | ||
| </ModalDialog.Footer> | ||
| </ModalDialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default SkillsBuilderProgressive; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import React, { useContext } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| Card, CardDeck, SelectableBox, Chip, Stack, | ||
| } from '@edx/paragon'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
| import { sendTrackEvent } from '@edx/frontend-platform/analytics'; | ||
| import { addCareerInterest } from '../../data/actions'; | ||
| import { SkillsBuilderContext } from '../../skills-builder-context'; | ||
| import messages from './messages'; | ||
|
|
||
| /* | ||
| A variant on the RelatedSkillsSelectableBoxSet that allows for interactive content. | ||
| Instead of a radio select button in the top, there is a close button. | ||
| Since the contents can be interactive, this form will allow for selecting skills to | ||
| drill down for skill-specific recommendations. | ||
|
|
||
| This component needs to be like a CardDeck, but also behave like a radio group. | ||
| */ | ||
| const RelatedSkillsInteractiveBoxSet = ({ | ||
| jobSkillsList, selectedJobTitle, onChange, useInteractiveBoxSet, | ||
| }) => { | ||
| const { formatMessage } = useIntl(); | ||
| const { state, dispatch } = useContext(SkillsBuilderContext); | ||
| const { careerInterests } = state; | ||
|
|
||
| const renderTopFiveSkills = (skills) => { | ||
| const topFiveSkills = skills.sort((a, b) => b.significance - a.significance).slice(0, 5); | ||
| return ( | ||
| topFiveSkills.map(skill => ( | ||
| <Chip key={skill.external_id} className="chip-max-width"> | ||
| {skill.name} | ||
| </Chip> | ||
| )) | ||
| ); | ||
| }; | ||
|
|
||
| const handleCareerInterestSelect = (value) => { | ||
| if (!careerInterests.includes(value) && careerInterests.length < 3) { | ||
| dispatch(addCareerInterest(value)); | ||
|
|
||
| sendTrackEvent( | ||
| 'edx.skills_builder.career_interest.added', | ||
| { | ||
| app_name: 'skills_builder', | ||
| category: 'skills_builder', | ||
| learner_data: { | ||
| career_interest: value, | ||
| }, | ||
| }, | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| // eslint-disable-next-line react/prop-types | ||
| const CardComponent = ({ name, skills }) => ( | ||
| <Card | ||
| isClickable | ||
| onClick={handleCareerInterestSelect} | ||
| key={name} | ||
| xs={12} | ||
| sm={4} | ||
| className="mb-4" | ||
| > | ||
| <Card.Header | ||
| title={name} | ||
| size="sm" | ||
| /> | ||
| <Card.Section> | ||
| <Stack gap={2} className="align-items-start"> | ||
| <p className="heading-label x-small">{formatMessage(messages.relatedSkillsHeading)}</p> | ||
| { renderTopFiveSkills(skills) } | ||
| </Stack> | ||
| </Card.Section> | ||
| </Card> | ||
| ); | ||
|
|
||
| const interactiveBox = (() => ( | ||
| <CardDeck | ||
| hasInteractiveChildren | ||
| hasEqualColumnHeights | ||
| columnSizes={4} | ||
| > | ||
| {jobSkillsList.map(job => ( | ||
| <CardComponent | ||
| name={job.name} | ||
| skills={job.skills} | ||
| key={job.name} | ||
| /> | ||
| ))} | ||
| </CardDeck> | ||
| )); | ||
|
|
||
| const selectableBox = (() => ( | ||
| <SelectableBox.Set | ||
| name="selected job title" | ||
| type="radio" | ||
| value={selectedJobTitle} | ||
| onChange={onChange} | ||
| columns={3} | ||
| className="overflow-scroll-medium" | ||
| > | ||
| {jobSkillsList.map(job => ( | ||
| <SelectableBox | ||
| key={job.id} | ||
| type="radio" | ||
| value={job.name} | ||
| aria-label={job.name} | ||
| inputHidden={false} | ||
| > | ||
| <p>{job.name}</p> | ||
| <Stack gap={2} className="align-items-start"> | ||
| <p className="heading-label x-small">{formatMessage(messages.relatedSkillsHeading)}</p> | ||
| {renderTopFiveSkills(job.skills)} | ||
| </Stack> | ||
| </SelectableBox> | ||
| ))} | ||
| </SelectableBox.Set> | ||
| )); | ||
|
|
||
| return ( | ||
|
|
||
| useInteractiveBoxSet ? interactiveBox() : selectableBox() | ||
|
There was a problem hiding this comment. Is this necessary? I thought it would be covered by the conditional in { useInteractiveBoxSet ? (
<RelatedSkillsInteractiveBoxSet
jobSkillsList={jobSkillsList}
selectedJobTitle={selectedJobTitle}
onChange={handleJobTitleChange}
useInteractiveBoxSet={useInteractiveBoxSet}
/>
) : (
<RelatedSkillsSelectableBoxSet
jobSkillsList={jobSkillsList}
selectedJobTitle={selectedJobTitle}
onChange={handleJobTitleChange}
/>
)}There was a problem hiding this comment. It is not! I am in the process of factoring it out. I wasn't sure originally if I wanted one component or two. There was a problem hiding this comment. It was a remnant of a first pass. Factored out now. |
||
|
|
||
| ); | ||
| }; | ||
|
|
||
| RelatedSkillsInteractiveBoxSet.propTypes = { | ||
| jobSkillsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired, | ||
| selectedJobTitle: PropTypes.string.isRequired, | ||
| onChange: PropTypes.func.isRequired, | ||
| useInteractiveBoxSet: PropTypes.bool.isRequired, | ||
| }; | ||
|
|
||
| export default RelatedSkillsInteractiveBoxSet; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This doesn't appear to be doing anything when I test in my local environment. This function
handleCareerInterestSelectis used add to thecareerInterestsarray which doesn't change the what the recommendations are in the UI.I think we need to utilize the
onChangefunction here which callshandleJobTitleChangefromViewResults. Unfortunately, this function is expecting the clicked item to be a control with ae.target.valuebut since it's a card, we'll have to find a different way to pass the value. This value should be the name of the job so that the rest of the function works properly.Or perhaps we need an entirely new function for this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct. This part doesn't actually work. I would love to get your input on how to implement this correctly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, we need an entirely new function for this.