diff --git a/client/src/components/settings/Certification.js b/client/src/components/settings/Certification.js index 581ec8ce7c4..9461ed6fba2 100644 --- a/client/src/components/settings/Certification.js +++ b/client/src/components/settings/Certification.js @@ -11,11 +11,12 @@ import { import { Link, navigate } from 'gatsby'; import { createSelector } from 'reselect'; -import { projectMap } from '../../resources/certProjectMap'; +import { projectMap, legacyProjectMap } from '../../resources/certProjectMap'; import SectionHeader from './SectionHeader'; import SolutionViewer from './SolutionViewer'; import { FullWidthRow, Spacer } from '../helpers'; +// import { Form } from '../formHelpers'; import { maybeUrlRE } from '../../utils'; import './certification.css'; @@ -48,6 +49,7 @@ const propTypes = { }; const certifications = Object.keys(projectMap); +const legacyCertifications = Object.keys(legacyProjectMap); const isCertSelector = ({ is2018DataVisCert, isApisMicroservicesCert, @@ -80,14 +82,20 @@ const isCertMapSelector = createSelector( isJsAlgoDataStructCert, isInfosecQaCert, isFrontEndLibsCert, - isRespWebDesignCert + isRespWebDesignCert, + isDataVisCert, + isFrontEndCert, + isBackEndCert }) => ({ 'Responsive Web Design': isRespWebDesignCert, 'JavaScript Algorithms and Data Structures': isJsAlgoDataStructCert, 'Front End Libraries': isFrontEndLibsCert, 'Data Visualization': is2018DataVisCert, "API's and Microservices": isApisMicroservicesCert, - 'Information Security And Quality Assurance': isInfosecQaCert + 'Information Security And Quality Assurance': isInfosecQaCert, + 'Legacy Front End': isFrontEndCert, + 'Legacy Data Visualization': isDataVisCert, + 'Legacy Back End': isBackEndCert }) ); @@ -222,6 +230,9 @@ class CertificationSettings extends Component { ); renderProjectsFor = (certName, isCert) => { + console.log(certName); + console.log(this.getUserIsCertMap()); + console.log(this.getUserIsCertMap()[certName]); const { username, isHonest, createFlashMessage, verifyCert } = this.props; const { superBlock } = first(projectMap[certName]); const certLocation = `/certification/${username}/${superBlock}`; @@ -266,7 +277,164 @@ class CertificationSettings extends Component { ]); }; + renderLegacyCertifications = certName => ( + + +

{certName}

+ + + + + + + + + {this.renderLegacyProjectsFor( + certName, + this.getUserIsCertMap()[certName] + )} + +
Project NameSolution
+
+ ); + + renderLegacyProjectsFor = (certName, isCert) => { + console.log(certName); + console.log(this.getUserIsCertMap()[certName]); + const { username, isHonest, createFlashMessage, verifyCert } = this.props; + const { superBlock } = first(legacyProjectMap[certName]); + const certLocation = `/certification/${username}/${superBlock}`; + const createClickHandler = superBlock => e => { + e.preventDefault(); + if (isCert) { + return navigate(certLocation); + } + return isHonest + ? verifyCert(superBlock) + : createFlashMessage({ + type: 'info', + message: + 'To claim a certification, you must first accept our academic ' + + 'honesty policy' + }); + }; + return legacyProjectMap[certName] + .map(({ title, id }) => ( + + +

{title}

+ + + {this.getLegacyProjectSolution(id, title)} + + + )) + .concat([ + + + + + + ]); + }; + + getLegacyProjectSolution = (projectId, projectTitle) => { + const { completedChallenges } = this.props; + const completedProject = find( + completedChallenges, + ({ id }) => projectId === id + ); + if (!completedProject) { + return null; + } + const { solution, githubLink, files } = completedProject; + const onClickHandler = () => + this.setState({ + solutionViewer: { + projectTitle, + files, + solution, + isOpen: true + } + }); + if (files && files.length) { + return ( + + ); + } + if (githubLink) { + return ( +
+ + + Front End + + + Back End + + +
+ ); + } + if (maybeUrlRE.test(solution)) { + return ( + + ); + } + return ( + + ); + }; + render() { + // console.log(this.props.completedChallenges); + // console.log(getUserIsCertMap); const { solutionViewer: { files, solution, isOpen, projectTitle } } = this.state; @@ -274,6 +442,8 @@ class CertificationSettings extends Component {
Certifications {certifications.map(this.renderCertifications)} + Legacy Certifications + {legacyCertifications.map(this.renderLegacyCertifications)} {isOpen ? (