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

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}`
);
}