gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: enable new curriculum (#44183)

Browse Source 
* feat: use legacy flag

chore: reorder challenges

fix: linter

revert: server change

feat: unblock new editor

fix: proper order

fix: 0-based order

fix: broke the order

feat: move tribute certification to its own block

feat: split the old projects block into 4

fix: put all blocks in order

chore: add intro text

refactor: use block, not blockName in query

fix: project progress indicator

* fix: reorder new challenges/certs

* fix: reorder legacy challenges

* fix: reintroduce legacy certs

* feat: add showNewCurriculum flag to env

* chore: forgot sample.env

* feat: use feature flag for display

* fix: rename meta + dirs to match new blocks

* fix: add new blocks to help-category-map

* fix: update completion-modal for new GQL schema

* test: duplicate title/id errors ->  warnings

* fix: update completion-modal to new GQL schema Mk2

* chore: re-order metas (again)

* fix: revert super-block-intro changes

The intro needs to show both legacy and new content.  We need to decide
which pages are created, rather than than what a page shows when
rendered.

* feat: move upcoming curriculum into own superblock

* fix: handle one certification with two superBlocks

* fix: remove duplicated intros

* fix: remove duplicate projects from /settings

* fix: drop 'two' from Responsive Web Design Two

* chore: rename slug suffix from two to v2

* feat: control display of new curriculum

* feat: control project paths shown on /settings

* fix: use new project order for /settings

This does mean that /settings will change before the release, but I
don't think it's serious.  All the projects are there, just not in the
legacy order.

* fix: claim/show cert button

* chore: remove isLegacy

Since we have legacy superblocks, we don't currently need individual
blocks to be legacy

* test: fix utils.test

* fix: verifyCanClaim needs certification

If Shaun removes the cert claim cards, maybe we can remove this entirely

* fix: add hasEditableBoundaries flags where needed

* chore: remove isUpcomingChange

* chore: v2 -> 22

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-12-20 10:36:31 -08:00
committed by GitHub
parent 304773d62b
commit 8614db7a32
999 changed files with 767 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/gatsby-node.js
View File

@@ -76,6 +76,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
node {
challenge {
block
certification
challengeType
fields {
slug
@@ -116,6 +117,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
component
}
frontmatter {
certification
block
superBlock
title
@@ -183,6 +185,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
const pageBuilder = createByIdentityMap[nodeIdentity](createPage);
pageBuilder(edge);
} catch (e) {
console.log(e);
console.log(`
ident: ${nodeIdentity} does not belong to a function

106
client/i18n/locales/english/intro.json
View File

@@ -63,47 +63,119 @@
"Time to put your newly learnt skills to work. By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far: HTML, CSS, Visual Design, Accessibility, and more.",
"Complete the five web programming projects below to earn your Responsive Web Design certification."
]
}
}
},
"responsive-web-design-22": {
"title": "Responsive Web Design",
"intro": [
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
"First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
],
"note": "Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.",
"blocks": {
"build-a-tribute-page-project": {
"title": "Build a Tribute Page Project",
"intro": ["placeholder", "holder of place"]
},
"build-a-personal-portfolio-webpage-project": {
"title": "Build a Personal Portfolio Webpage Project",
"intro": ["placeholder", "holder of place"]
},
"build-a-product-landing-page-project": {
"title": "Build a Product Landing Page Project",
"intro": ["placeholder", "holder of place"]
},
"build-a-survey-form-project": {
"title": "Build a Survey Form Project",
"intro": ["placeholder", "holder of place"]
},
"build-a-technical-documentation-page-project": {
"title": "Build a Technical Documentation Page Project",
"intro": ["placeholder", "holder of place"]
},
"learn-html-by-building-a-cat-photo-app": {
"title": "Learn HTML by Building a Cat Photo App",
"intro": ["", ""]
"intro": [
"HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.",
"In this course, you'll learn the most common HTML tags by building your own cat photo app."
]
},
"learn-basic-css-by-building-a-cafe-menu": {
"title": "Learn Basic CSS by Building a Cafe Menu",
"intro": ["", ""]
"intro": [
"CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.",
"In this course, you'll learn CSS by designing a menu page for a cafe webpage."
]
},
"learn-the-css-box-model-by-building-a-rothko-painting": {
"title": "Learn the CSS Box Model by Building a Rothko Painting",
"intro": [
"Mark Rothko was known for his abstract style of painting. Rothko paintings commonly depicted rectangular regions of color in varying sizes.",
"In this lesson, you will be using CSS to create your own painting in Rothko's style. You will use many of the skills you have already been practicing, as well as new CSS tool such as blur and transform."
"Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.",
"In this course, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces."
]
},
"learn-css-variables-by-building-a-city-skyline": {
"title": "Learn CSS Variables by Building a City Skyline",
"intro": ["", ""]
"intro": [
"CSS variables help you organize your styles and reuse them.",
"In this course, you'll build a city skyline. You'll learn how to configure CSS variables so you can reuse them whenever you want."
]
},
"learn-html-forms-by-building-a-registration-form": {
"title": "Learn HTML Forms by Building a Registration Form",
"intro": [
"You can use HTML forms to collect information from people who visit your webpage.",
"In this course, you'll learn HTML forms by building a signup page. You'll learn how to control what types of data people can type into your form, and some new CSS tools for styling your page."
]
},
"learn-html-forms-by-building-a-registration-form": { "title": "Learn HTML Forms by Building a Registration Form", "intro": ["", ""] },
"learn-accessibility-by-building-a-quiz": {
"title": "Learn Accessibility by Building a Quiz",
"intro": ["", ""]
"intro": [
"Accessibility is making your webpage easy for all people to use – even people with disabilities.",
"In this course, you'll build a quiz webpage. You'll learn accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices."
]
},
"learn-intermediate-css-by-building-a-picasso-painting": {
"title": "Learn Intermediate CSS by Building a Picasso Painting",
"intro": [
"Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.",
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
"In this course, you'll use learn some intermediate CSS techniques by coding your own Picasso painting webpage. You'll learn about SVG icons, CSS positioning, and review other CSS skills you've learned."
]
},
"learn-responsive-web-design-by-building-a-piano": {
"title": "Learn Responsive Web Design by Building a Piano",
"intro": [
"Responsive Design tells your webpage how it should look on different-sized screens.",
"In this course, you'll use CSS and Responsive Design to code a piano. You'll also learn more about media queries and pseudo selectors."
]
},
"learn-css-flexbox-by-building-a-photo-gallery": {
"title": "Learn CSS Flexbox by Building a Photo Gallery",
"intro": [
"Flexbox helps you design your webpage so that it looks good on any screen size.",
"In this course, you'll use Flexbox to build a responsive photo gallery webpage."
]
},
"learn-css-grid-by-building-a-magazine": {
"title": "Learn CSS Grid by Building a Magazine",
"intro": [
"CSS Grid gives you control over the rows and columns of your webpage design.",
"In this course, you'll build a magazine article. You'll learn how to use CSS Grid, including concepts like grid rows and grid columns."
]
},
"learn-responsive-web-design-by-building-a-piano": { "title": "Learn Responsive Web Design by Building a Piano", "intro": ["", ""] },
"learn-css-flexbox-by-building-a-photo-gallery": { "title": "Learn CSS Flexbox by Building a Photo Gallery", "intro": ["", ""] },
"learn-css-grid-by-building-a-magazine": { "title": "Learn CSS Grid by Building a Magazine", "intro": ["", ""] },
"learn-typography-by-building-a-nutrition-label": {
"title": "Learn Typography by Building a Nutrition Label",
"intro": ["", ""]
"intro": [
"Typography is the art of styling your text to be easily readable and suit its purpose.",
"In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS."
]
},
"learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": ["", ""] },
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": [
"You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
"In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed."
] },
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
}
},
@@ -560,7 +632,11 @@
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
"courses": "Courses",
"steps": "Steps",
"expand": "Expand",
"collapse": "Collapse",
"expand": "Expand courses",
"collapse": "Collapse courses"
"collapse": "Collapse courses",
"legacy-header": "Legacy Courses",
"legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning."
}
}

1
client/src/pages/learn/back-end-development-and-apis/index.md
View File

@@ -1,6 +1,7 @@
---
title: Back End Development and APIs
superBlock: back-end-development-and-apis
certification: back-end-development-and-apis
---
## Introduction to Back End Development and APIs

1
client/src/pages/learn/coding-interview-prep/index.md
View File

@@ -1,6 +1,7 @@
---
title: Coding Interview Prep
superBlock: coding-interview-prep
certification: coding-interview-prep
---
## Introduction to Coding Interview Prep

1
client/src/pages/learn/data-analysis-with-python/index.md
View File

@@ -1,6 +1,7 @@
---
title: Data Analysis with Python
superBlock: data-analysis-with-python
certification: data-analysis-with-python
---
## Introduction to Data Analysis with Python

1
client/src/pages/learn/data-visualization/index.md
View File

@@ -1,6 +1,7 @@
---
title: Data Visualization
superBlock: data-visualization
certification: data-visualization
---
## Introduction to Data Visualization

1
client/src/pages/learn/front-end-development-libraries/index.md
View File

@@ -1,6 +1,7 @@
---
title: Front End Development Libraries
superBlock: front-end-development-libraries
certification: front-end-development-libraries
---
## Introduction to Front End Development Libraries

1
client/src/pages/learn/information-security/index.md
View File

@@ -1,6 +1,7 @@
---
title: Information Security
superBlock: information-security
certification: information-security
---
## Introduction to Information Security

1
client/src/pages/learn/javascript-algorithms-and-data-structures/index.md
View File

@@ -1,6 +1,7 @@
---
title: JavaScript Algorithms and Data Structures
superBlock: javascript-algorithms-and-data-structures
certification: javascript-algorithms-and-data-structures
---
## Introduction to JavaScript Algorithms and Data Structures

1
client/src/pages/learn/machine-learning-with-python/index.md
View File

@@ -1,6 +1,7 @@
---
title: Machine Learning with Python
superBlock: machine-learning-with-python
certification: machine-learning-with-python
---
## Introduction to Machine Learning with Python

1
client/src/pages/learn/quality-assurance/index.md
View File

@@ -1,6 +1,7 @@
---
title: Quality Assurance
superBlock: quality-assurance
certification: quality-assurance
---
## Introduction to Quality Assurance

1
client/src/pages/learn/relational-databases/index.md
View File

@@ -1,6 +1,7 @@
---
title: Relational Databases
superBlock: relational-databases
certification: relational-databases
---
## Introduction to Relational Databases

20
client/src/pages/learn/responsive-web-design-22/index.md Normal file
View File

@@ -0,0 +1,20 @@
---
title: Responsive Web Design
superBlock: responsive-web-design-22
certification: responsive-web-design
---
## Introduction to Responsive Web Design
Welcome to Responsive Web Design!
Let's first take a look at what is in the scope of Responsive Web Design (and what is not).
The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts.
And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`.
Ready to learn about good design practices for the web? Let's get started!
[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)

1
client/src/pages/learn/responsive-web-design/index.md
View File

@@ -1,6 +1,7 @@
---
title: Responsive Web Design
superBlock: responsive-web-design
certification: responsive-web-design
---
## Introduction to Responsive Web Design

1
client/src/pages/learn/scientific-computing-with-python/index.md
View File

@@ -1,6 +1,7 @@
---
title: Scientific Computing with Python
superBlock: scientific-computing-with-python
certification: scientific-computing-with-python
---
## Introduction to Scientific Computing with Python

3
client/src/redux/prop-types.ts
View File

@@ -86,6 +86,8 @@ export type MarkdownRemark = {
block: string;
isBeta: boolean;
superBlock: SuperBlocks;
// TODO: make enum like superBlock
certification: string;
title: typeof certMap[number]['title'];
};
headings: [
@@ -130,6 +132,7 @@ export interface VideoLocaleIds {
export type ChallengeNode = {
challenge: {
block: string;
certification: string;
challengeOrder: number;
challengeType: number;
dashedName: string;

49
client/src/resources/cert-and-project-map.ts
View File

@@ -1,7 +1,11 @@
import { SuperBlocks } from '../../../config/certification-settings';
import envData from '../../../config/env.json';
const { showNewCurriculum } = envData;
const responsiveWebBase =
'/learn/responsive-web-design/responsive-web-design-projects';
const responsiveWeb22Base = '/learn/responsive-web-design-22';
const jsAlgoBase =
'/learn/javascript-algorithms-and-data-structures/' +
'javascript-algorithms-and-data-structures-projects';
@@ -294,38 +298,50 @@ const certMap = [
certSlug: SuperBlocks.RespWebDesign,
flag: 'isRespWebDesignCert',
projects: [
{
id: 'bd7158d8c442eddfaeb5bd18',
title: 'Build a Tribute Page',
link: `${responsiveWebBase}/build-a-tribute-page`,
certSlug: SuperBlocks.RespWebDesign
},
{
id: '587d78af367417b2b2512b03',
title: 'Build a Survey Form',
link: `${responsiveWebBase}/build-a-survey-form`,
link: getResponsiveWebDesignPath('build-a-survey-form', {
showNewCurriculum
}),
certSlug: SuperBlocks.RespWebDesign
},
{
id: '587d78af367417b2b2512b04',
title: 'Build a Product Landing Page',
link: `${responsiveWebBase}/build-a-product-landing-page`,
id: 'bd7158d8c442eddfaeb5bd18',
title: 'Build a Tribute Page',
link: getResponsiveWebDesignPath('build-a-tribute-page', {
showNewCurriculum
}),
certSlug: SuperBlocks.RespWebDesign
},
{
id: '587d78b0367417b2b2512b05',
title: 'Build a Technical Documentation Page',
link: `${responsiveWebBase}/build-a-technical-documentation-page`,
link: getResponsiveWebDesignPath(
'build-a-technical-documentation-page',
{ showNewCurriculum }
),
certSlug: SuperBlocks.RespWebDesign
},
{
id: '587d78af367417b2b2512b04',
title: 'Build a Product Landing Page',
link: getResponsiveWebDesignPath('build-a-product-landing-page', {
showNewCurriculum
}),
certSlug: SuperBlocks.RespWebDesign
},
{
id: 'bd7158d8c242eddfaeb5bd13',
title: 'Build a Personal Portfolio Webpage',
link: `${responsiveWebBase}/build-a-personal-portfolio-webpage`,
link: getResponsiveWebDesignPath('build-a-personal-portfolio-webpage', {
showNewCurriculum
}),
certSlug: SuperBlocks.RespWebDesign
}
]
},
{
id: '561abd10cb81ac38a17513bc',
title: 'JavaScript Algorithms and Data Structures',
@@ -709,6 +725,15 @@ const certMap = [
}
] as const;
function getResponsiveWebDesignPath(
project: string,
{ showNewCurriculum }: { showNewCurriculum: boolean }
) {
return showNewCurriculum
? `${responsiveWeb22Base}/${project}-project/${project}`
: `${responsiveWebBase}/${project}/`;
}
const titles = certMap.map(({ title }) => title);
type Title = typeof titles[number];
const legacyProjectMap: Partial<Record<Title, unknown>> = {};

7
client/src/templates/Challenges/classic/desktop-layout.tsx
View File

@@ -2,15 +2,13 @@ import { first } from 'lodash-es';
import React, { useState, ReactElement } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
import envData from '../../../../../config/env.json';
import {
ChallengeFile,
ChallengeFiles,
ResizeProps
} from '../../../redux/prop-types';
import ActionRow from './action-row';
const { showUpcomingChanges } = envData;
import EditorTabs from './editor-tabs';
type Pane = { flex: number };
@@ -85,7 +83,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
} = props;
const challengeFile = getChallengeFile();
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
const projectBasedChallenge = hasEditableBoundaries;
const displayPreview = projectBasedChallenge
? showPreview && hasPreview
: hasPreview;
@@ -124,6 +122,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
)}
<ReflexElement flex={editorPane.flex} {...resizeProps}>
{challengeFile && !hasEditableBoundaries && <EditorTabs />}
{challengeFile && (
<ReflexContainer
key={challengeFile.fileKey}

8
client/src/templates/Challenges/classic/mobile-layout.tsx
View File

@@ -2,12 +2,9 @@ import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
import i18next from 'i18next';
import React, { Component, ReactElement } from 'react';
import envData from '../../../../../config/env.json';
import ToolPanel from '../components/tool-panel';
import EditorTabs from './editor-tabs';
const { showUpcomingChanges } = envData;
interface MobileLayoutProps {
editor: JSX.Element | null;
guideUrl: string;
@@ -70,7 +67,6 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
// Unlike the desktop layout the mobile version does not have an ActionRow,
// but still needs a way to switch between the different tabs.
const projectBasedChallenge = showUpcomingChanges && usesMultifileEditor;
return (
<>
@@ -93,7 +89,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
title={i18next.t('learn.editor-tabs.code')}
{...editorTabPaneProps}
>
{projectBasedChallenge && <EditorTabs />}
{usesMultifileEditor && <EditorTabs />}
{editor}
</TabPane>
<TabPane
@@ -103,7 +99,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
>
{testOutput}
</TabPane>
{hasNotes && projectBasedChallenge && (
{hasNotes && usesMultifileEditor && (
<TabPane
eventKey={Tab.Notes}
title={i18next.t('learn.editor-tabs.notes')}

3
client/src/templates/Challenges/classic/show.tsx
View File

@@ -409,6 +409,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
forumTopicId,
hasEditableBoundaries,
superBlock,
certification,
title,
usesMultifileEditor,
notes
@@ -474,6 +475,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
<CompletionModal
block={block}
blockName={blockName}
certification={certification}
superBlock={superBlock}
/>
<HelpModal />
@@ -508,6 +510,7 @@ export const query = graphql`
helpCategory
videoUrl
superBlock
certification
translationPending
forumTopicId
fields {

73
client/src/templates/Challenges/components/completion-modal.tsx
View File

@@ -10,6 +10,7 @@ import { Dispatch } from 'redux';
import { createSelector } from 'reselect';
import { dasherize } from '../../../../../utils/slugs';
import { isProject } from '../../../../utils/challenge-types';
import Login from '../../../components/Header/components/Login';
import {
isSignedInSelector,
@@ -40,7 +41,11 @@ const mapStateToProps = createSelector(
successMessageSelector,
(
challengeFiles: ChallengeFiles,
{ title, id }: { title: string; id: string },
{
title,
id,
challengeType
}: { title: string; id: string; challengeType: number },
completedChallengesIds: string[],
isOpen: boolean,
isSignedIn: boolean,
@@ -49,6 +54,7 @@ const mapStateToProps = createSelector(
challengeFiles,
title,
id,
challengeType,
completedChallengesIds,
isOpen,
isSignedIn,
@@ -94,6 +100,8 @@ interface CompletionModalsProps {
allowBlockDonationRequests: (arg0: string) => void;
block: string;
blockName: string;
certification: string;
challengeType: number;
close: () => void;
completedChallengesIds: string[];
currentBlockIds?: string[];
@@ -275,10 +283,30 @@ export class CompletionModalInner extends Component<
}
}
const useCurrentBlockIds = (blockName: string) => {
interface Options {
isCertificationBlock: boolean;
}
interface CertificateNode {
challenge: {
// TODO: use enum
certification: string;
tests: { id: string }[];
};
}
const useCurrentBlockIds = (
block: string,
certification: string,
options?: Options
) => {
const {
allChallengeNode: { edges }
}: { allChallengeNode: AllChallengeNode } = useStaticQuery(graphql`
allChallengeNode: { edges: challengeEdges },
allCertificateNode: { nodes: certificateNodes }
}: {
allChallengeNode: AllChallengeNode;
allCertificateNode: { nodes: CertificateNode[] };
} = useStaticQuery(graphql`
query getCurrentBlockNodes {
allChallengeNode(
sort: {
@@ -292,9 +320,17 @@ const useCurrentBlockIds = (blockName: string) => {
edges {
node {
challenge {
fields {
blockName
}
block
id
}
}
}
}
allCertificateNode {
nodes {
challenge {
certification
tests {
id
}
}
@@ -303,16 +339,27 @@ const useCurrentBlockIds = (blockName: string) => {
}
`);
const currentBlockIds = edges
.filter(edge => edge.node.challenge.fields.blockName === blockName)
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
const currentCertificateIds = certificateNodes
.filter(
node => dasherize(node.challenge.certification) === certification
)[0]
?.challenge.tests.map(test => test.id);
const currentBlockIds = challengeEdges
.filter(edge => edge.node.challenge.block === block)
.map(edge => edge.node.challenge.id);
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return currentBlockIds;
return options?.isCertificationBlock
? currentCertificateIds
: currentBlockIds;
};
const CompletionModal = (props: CompletionModalsProps) => {
const currentBlockIds = useCurrentBlockIds(props.blockName || '');
const currentBlockIds = useCurrentBlockIds(
props.block || '',
props.certification || '',
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
{ isCertificationBlock: isProject(props.challengeType) }
);
return <CompletionModalInner currentBlockIds={currentBlockIds} {...props} />;
};

3
client/src/templates/Challenges/projects/backend/Show.tsx
View File

@@ -196,6 +196,7 @@ class BackEnd extends Component<BackEndProps> {
description,
instructions,
translationPending,
certification,
superBlock,
block
}
@@ -266,6 +267,7 @@ class BackEnd extends Component<BackEndProps> {
<CompletionModal
block={block}
blockName={blockName}
certification={certification}
superBlock={superBlock}
/>
<HelpModal />
@@ -294,6 +296,7 @@ export const query = graphql`
instructions
challengeType
helpCategory
certification
superBlock
block
translationPending

3
client/src/templates/Challenges/projects/frontend/Show.tsx
View File

@@ -144,6 +144,7 @@ class Project extends Component<ProjectProps> {
description,
instructions,
superBlock,
certification,
block,
translationPending
}
@@ -203,6 +204,7 @@ class Project extends Component<ProjectProps> {
<CompletionModal
block={block}
blockName={blockName}
certification={certification}
superBlock={superBlock}
/>
<HelpModal />
@@ -232,6 +234,7 @@ export const query = graphql`
challengeType
helpCategory
superBlock
certification
block
translationPending
fields {

7
client/src/templates/Challenges/redux/completion-epic.js
View File

@@ -146,7 +146,8 @@ export default function completionEpic(action$, state$) {
switchMap(({ type }) => {
const state = state$.value;
const meta = challengeMetaSelector(state);
const { nextChallengePath, challengeType, superBlock } = meta;
const { nextChallengePath, challengeType, superBlock, certification } =
meta;
const closeChallengeModal = of(closeModal('completion'));
let submitter = () => of({ type: 'no-user-signed-in' });
@@ -165,6 +166,7 @@ export default function completionEpic(action$, state$) {
const pathToNavigateTo = async () => {
return await findPathToNavigateTo(
certification,
nextChallengePath,
superBlock,
state,
@@ -182,6 +184,7 @@ export default function completionEpic(action$, state$) {
}
async function findPathToNavigateTo(
certification,
nextChallengePath,
superBlock,
state,
@@ -196,7 +199,7 @@ async function findPathToNavigateTo(
if (isProjectSubmission) {
const username = usernameSelector(state);
try {
const response = await getVerifyCanClaimCert(username, superBlock);
const response = await getVerifyCanClaimCert(username, certification);
if (response.status === 200) {
canClaimCert = response.data?.response?.message === 'can-claim-cert';
}

3
client/src/templates/Challenges/video/Show.tsx
View File

@@ -180,6 +180,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
title,
description,
superBlock,
certification,
block,
translationPending,
videoId,
@@ -302,6 +303,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
<CompletionModal
block={block}
blockName={blockName}
certification={certification}
superBlock={superBlock}
/>
</Row>
@@ -339,6 +341,7 @@ export const query = graphql`
challengeType
helpCategory
superBlock
certification
block
fields {
blockName

5
client/src/templates/Introduction/components/cert-challenge.tsx
View File

@@ -23,6 +23,8 @@ import { getVerifyCanClaimCert } from '../../../utils/ajax';
import CertificationCard from './certification-card';
interface CertChallengeProps {
// TODO: create enum/reuse SuperBlocks enum somehow
certification: string;
createFlashMessage: typeof createFlashMessage;
fetchState: {
pending: boolean;
@@ -63,6 +65,7 @@ const mapDispatchToProps = {
};
const CertChallenge = ({
certification,
createFlashMessage,
steps = {},
superBlock,
@@ -90,7 +93,7 @@ const CertChallenge = ({
if (username) {
void (async () => {
try {
const data = await getVerifyCanClaimCert(username, superBlock);
const data = await getVerifyCanClaimCert(username, certification);
if (data?.message) {
setCanClaimCert(false);
createFlashMessage(data.message);

9
client/src/templates/Introduction/super-block-intro.tsx
View File

@@ -162,7 +162,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
const {
data: {
markdownRemark: {
frontmatter: { superBlock, title }
frontmatter: { superBlock, title, certification }
},
allChallengeNode: { edges }
},
@@ -176,6 +176,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
const blockDashedNames = uniq(
nodesForSuperBlock.map(({ challenge: { block } }) => block)
);
const i18nSuperBlock = t(`intro:${superBlock}.title`);
const i18nTitle =
superBlock === SuperBlocks.CodingInterviewPrep
@@ -184,6 +185,8 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
cert: i18nSuperBlock
});
const defaultCurriculumNames = blockDashedNames;
return (
<>
<Helmet>
@@ -203,7 +206,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
</h2>
<Spacer />
<div className='block-ui'>
{blockDashedNames.map(blockDashedName => (
{defaultCurriculumNames.map(blockDashedName => (
<Fragment key={blockDashedName}>
<Block
blockDashedName={blockDashedName}
@@ -218,6 +221,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
{superBlock !== SuperBlocks.CodingInterviewPrep && (
<div>
<CertChallenge
certification={certification}
superBlock={superBlock}
title={title}
user={user}
@@ -260,6 +264,7 @@ export const query = graphql`
query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
frontmatter {
certification
superBlock
title
}

4
client/src/utils/ajax.ts
View File

@@ -178,10 +178,10 @@ export interface GetVerifyCanClaimCert {
export function getVerifyCanClaimCert(
username: string,
superBlock: string
certification: string
): Promise<GetVerifyCanClaimCert> {
return get(
`/certificate/verify-can-claim-cert?username=${username}&superBlock=${superBlock}`
`/certificate/verify-can-claim-cert?username=${username}&superBlock=${certification}`
);
}

12
client/utils/challenge-types.js
View File

@@ -36,6 +36,18 @@ exports.challengeTypes = {
codeally
};
// (Oliver) I don't think we need this for codeally projects, so they're ignored
// here
exports.isProject = challengeType => {
if (typeof challengeType !== 'number')
throw Error('challengeType must be a number');
return (
challengeType === frontEndProject ||
challengeType === backEndProject ||
challengeType === pythonProject
);
};
// turn challengeType to file ext
exports.pathsMap = {
[html]: 'html',

14
client/utils/gatsby/challenge-page-creator.js
View File

@@ -60,6 +60,7 @@ function getTemplateComponent(challengeType) {
exports.createChallengePages = function (createPage) {
return function ({ node: { challenge } }, index, allChallengeEdges) {
const {
certification,
superBlock,
block,
fields: { slug },
@@ -76,6 +77,7 @@ exports.createChallengePages = function (createPage) {
component: getTemplateComponent(challengeType),
context: {
challengeMeta: {
certification,
superBlock,
block,
template,
@@ -152,13 +154,23 @@ exports.createSuperBlockIntroPages = function (createPage) {
return function (edge) {
const {
fields: { slug },
frontmatter: { superBlock }
frontmatter: { superBlock, certification }
} = edge.node;
if (!certification) {
throw Error(
`superBlockIntro page, '${superBlock}' must have certification in frontmatter`
);
}
// TODO: throw if it encounters an unknown certification. Also, handle
// coding-interview-prep. it's not a certification, but it is a superBlock.
createPage({
path: slug,
component: superBlockIntro,
context: {
certification,
superBlock,
slug
}

7
client/utils/help-category-map.json
View File

@@ -85,5 +85,10 @@
"learn-css-grid-by-building-a-magazine": "HTML-CSS",
"learn-css-transforms-by-building-a-penguin": "HTML-CSS",
"learn-typography-by-building-a-nutrition-label": "HTML-CSS",
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS",
"build-a-personal-portfolio-webpage-project": "HTML-CSS",
"build-a-product-landing-page-project": "HTML-CSS",
"build-a-survey-form-project": "HTML-CSS",
"build-a-technical-documentation-page-project": "HTML-CSS",
"build-a-tribute-page-project": "HTML-CSS"
}