From 25de45da462403ea6a7dc28daff3f1b71fe4a41b Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Thu, 5 Dec 2024 09:55:00 +0100 Subject: [PATCH] fix(client): remove video component (#57389) --- .../src/templates/Challenges/video/show.tsx | 357 ------------------ client/utils/gatsby/challenge-page-creator.js | 6 - shared/config/challenge-types.ts | 2 +- 3 files changed, 1 insertion(+), 364 deletions(-) delete mode 100644 client/src/templates/Challenges/video/show.tsx diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx deleted file mode 100644 index 0165e47051f..00000000000 --- a/client/src/templates/Challenges/video/show.tsx +++ /dev/null @@ -1,357 +0,0 @@ -// Package Utilities -import { graphql } from 'gatsby'; -import React, { Component } from 'react'; -import Helmet from 'react-helmet'; -import { ObserveKeys } from 'react-hotkeys'; -import type { TFunction } from 'i18next'; -import { withTranslation } from 'react-i18next'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import type { Dispatch } from 'redux'; -import { createSelector } from 'reselect'; -import { isEqual } from 'lodash-es'; -import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui'; - -// Local Utilities -import LearnLayout from '../../../components/layouts/learn'; -import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types'; -import { challengeTypes } from '../../../../../shared/config/challenge-types'; -import ChallengeDescription from '../components/challenge-description'; -import Hotkeys from '../components/hotkeys'; -import VideoPlayer from '../components/video-player'; -import ChallengeTitle from '../components/challenge-title'; -import CompletionModal from '../components/completion-modal'; -import HelpModal from '../components/help-modal'; -import MultipleChoiceQuestions from '../components/multiple-choice-questions'; -import { - challengeMounted, - updateChallengeMeta, - openModal, - updateSolutionFormValues, - initTests -} from '../redux/actions'; -import { isChallengeCompletedSelector } from '../redux/selectors'; - -// Redux Setup -const mapStateToProps = createSelector( - isChallengeCompletedSelector, - (isChallengeCompleted: boolean) => ({ - isChallengeCompleted - }) -); -const mapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators( - { - initTests, - updateChallengeMeta, - challengeMounted, - updateSolutionFormValues, - openCompletionModal: () => openModal('completion'), - openHelpModal: () => openModal('help') - }, - dispatch - ); - -// Types -interface ShowVideoProps { - challengeMounted: (arg0: string) => void; - data: { challengeNode: ChallengeNode }; - description: string; - initTests: (xs: Test[]) => void; - isChallengeCompleted: boolean; - openCompletionModal: () => void; - openHelpModal: () => void; - pageContext: { - challengeMeta: ChallengeMeta; - }; - t: TFunction; - updateChallengeMeta: (arg0: ChallengeMeta) => void; - updateSolutionFormValues: () => void; -} - -interface ShowVideoState { - subtitles: string; - downloadURL: string | null; - selectedMcqOptions: (number | null)[]; - submittedMcqAnswers: (number | null)[]; - showFeedback: boolean; - videoIsLoaded: boolean; -} - -// Component -class ShowVideo extends Component { - static displayName: string; - private container: React.RefObject = React.createRef(); - - constructor(props: ShowVideoProps) { - super(props); - - const { - data: { - challengeNode: { - challenge: { questions } - } - } - } = this.props; - - this.state = { - subtitles: '', - downloadURL: null, - selectedMcqOptions: questions.map(() => null), - submittedMcqAnswers: questions.map(() => null), - showFeedback: false, - videoIsLoaded: false - }; - } - - componentDidMount(): void { - const { - challengeMounted, - data: { - challengeNode: { - challenge: { - fields: { tests }, - title, - challengeType, - helpCategory - } - } - }, - pageContext: { challengeMeta }, - initTests, - updateChallengeMeta - } = this.props; - initTests(tests); - updateChallengeMeta({ - ...challengeMeta, - title, - challengeType, - helpCategory - }); - challengeMounted(challengeMeta.id); - this.container.current?.focus(); - } - - componentDidUpdate(prevProps: ShowVideoProps): void { - const { - data: { - challengeNode: { - challenge: { title: prevTitle } - } - } - } = prevProps; - const { - challengeMounted, - data: { - challengeNode: { - challenge: { title: currentTitle, challengeType, helpCategory } - } - }, - pageContext: { challengeMeta }, - updateChallengeMeta - } = this.props; - if (prevTitle !== currentTitle) { - updateChallengeMeta({ - ...challengeMeta, - title: currentTitle, - challengeType, - helpCategory - }); - challengeMounted(challengeMeta.id); - } - } - - handleSubmit = () => { - const { - data: { - challengeNode: { - challenge: { questions } - } - }, - openCompletionModal - } = this.props; - - // subract 1 because the solutions are 1-indexed - const mcqSolutions = questions.map(question => question.solution - 1); - - this.setState({ - submittedMcqAnswers: this.state.selectedMcqOptions, - showFeedback: true - }); - - const allMcqAnswersCorrect = isEqual( - mcqSolutions, - this.state.selectedMcqOptions - ); - - if (allMcqAnswersCorrect) { - openCompletionModal(); - } - }; - - handleMcqOptionChange = ( - questionIndex: number, - answerIndex: number - ): void => { - this.setState(state => ({ - selectedMcqOptions: state.selectedMcqOptions.map((option, index) => - index === questionIndex ? answerIndex : option - ) - })); - }; - - onVideoLoad = () => { - this.setState({ - videoIsLoaded: true - }); - }; - - render() { - const { - data: { - challengeNode: { - challenge: { - title, - challengeType, - description, - superBlock, - block, - translationPending, - videoId, - videoLocaleIds, - bilibiliIds, - fields: { blockName }, - questions - } - } - }, - openHelpModal, - pageContext: { - challengeMeta: { nextChallengePath, prevChallengePath } - }, - t, - isChallengeCompleted - } = this.props; - - const blockNameTitle = `${t( - `intro:${superBlock}.blocks.${block}.title` - )} - ${title}`; - - return ( - - - - - - - - {title} - - - {challengeType === challengeTypes.video && ( - - - - )} - - - - - - - - - - - - - - - - - - - ); - } -} - -ShowVideo.displayName = 'ShowVideo'; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(withTranslation()(ShowVideo)); - -export const query = graphql` - query VideoChallenge($id: String!) { - challengeNode(id: { eq: $id }) { - challenge { - videoId - videoLocaleIds { - espanol - italian - portuguese - } - bilibiliIds { - aid - bvid - cid - } - title - description - challengeType - helpCategory - superBlock - block - fields { - blockName - slug - tests { - text - testString - } - } - questions { - text - answers { - answer - feedback - } - solution - } - translationPending - } - } - } -`; diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index cf43e0093db..3e733405d54 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/client/utils/gatsby/challenge-page-creator.js @@ -31,11 +31,6 @@ const quiz = path.resolve( '../../src/templates/Challenges/quiz/show.tsx' ); -const video = path.resolve( - __dirname, - '../../src/templates/Challenges/video/show.tsx' -); - const exam = path.resolve( __dirname, '../../src/templates/Challenges/exam/show.tsx' @@ -62,7 +57,6 @@ const views = { modern: classic, frontend, quiz, - video, codeAlly, exam, msTrophy, diff --git a/shared/config/challenge-types.ts b/shared/config/challenge-types.ts index 110ecfe915b..76973e61e80 100644 --- a/shared/config/challenge-types.ts +++ b/shared/config/challenge-types.ts @@ -92,7 +92,7 @@ export const viewTypes = { [step]: 'step', [quiz]: 'quiz', [backend]: 'backend', - [video]: 'video', + [video]: 'generic', [codeAllyPractice]: 'codeAlly', [codeAllyCert]: 'codeAlly', [multifileCertProject]: 'classic',