From 2dd106eb2f0380b612336632950644d9e6a4f957 Mon Sep 17 00:00:00 2001 From: Igor Cunha Date: Fri, 17 Sep 2021 13:37:53 -0400 Subject: [PATCH] feat(client): migrate to ts - (HelpModal, Preview, VideoModal, Side-Panel) (#42857) * refactor: migrate HelpModal, Preview, VideoModal, Side-Panel * refactor: import order Co-authored-by: Oliver Eyton-Williams --- client/src/declarations.d.ts | 16 ++++ .../Challenges/classic/{Show.tsx => show.tsx} | 38 ++++---- .../Challenges/components/HelpModal.js | 90 ------------------- .../Challenges/components/Preview.js | 66 -------------- .../Challenges/components/Side-Panel.js | 81 ----------------- .../Challenges/components/VideoModal.js | 67 -------------- .../Challenges/components/help-modal.tsx | 90 +++++++++++++++++++ .../Challenges/components/preview.tsx | 52 +++++++++++ .../Challenges/components/side-panel.tsx | 86 ++++++++++++++++++ .../Challenges/components/video-modal.tsx | 64 +++++++++++++ .../Challenges/projects/backend/Show.tsx | 13 ++- .../Challenges/projects/frontend/Show.tsx | 4 +- client/utils/gatsby/challenge-page-creator.js | 2 +- 13 files changed, 332 insertions(+), 337 deletions(-) rename client/src/templates/Challenges/classic/{Show.tsx => show.tsx} (96%) delete mode 100644 client/src/templates/Challenges/components/HelpModal.js delete mode 100644 client/src/templates/Challenges/components/Preview.js delete mode 100644 client/src/templates/Challenges/components/Side-Panel.js delete mode 100644 client/src/templates/Challenges/components/VideoModal.js create mode 100644 client/src/templates/Challenges/components/help-modal.tsx create mode 100644 client/src/templates/Challenges/components/preview.tsx create mode 100644 client/src/templates/Challenges/components/side-panel.tsx create mode 100644 client/src/templates/Challenges/components/video-modal.tsx diff --git a/client/src/declarations.d.ts b/client/src/declarations.d.ts index 83cd1b3d1b..929499afaf 100644 --- a/client/src/declarations.d.ts +++ b/client/src/declarations.d.ts @@ -9,3 +9,19 @@ declare module '*.svg' { const content: string; export default content; } +declare namespace NodeJS { + interface Global { + MathJax: { + Hub: { + Config: (attributes: { + tex2jax: { + inlineMath: Array; + processEscapes: boolean; + processClass: string; + }; + }) => void; + Queue: (attributes: unknown[]) => void; + }; + }; + } +} diff --git a/client/src/templates/Challenges/classic/Show.tsx b/client/src/templates/Challenges/classic/show.tsx similarity index 96% rename from client/src/templates/Challenges/classic/Show.tsx rename to client/src/templates/Challenges/classic/show.tsx index 3a3c9edb97..fc3e217de1 100644 --- a/client/src/templates/Challenges/classic/Show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -1,4 +1,3 @@ -// Package Utilities import { graphql } from 'gatsby'; import React, { Component } from 'react'; import Helmet from 'react-helmet'; @@ -8,49 +7,47 @@ import { HandlerProps } from 'react-reflex'; import Media from 'react-responsive'; import { bindActionCreators, Dispatch } from 'redux'; import { createStructuredSelector } from 'reselect'; - -// Local Utilities import store from 'store'; import { challengeTypes } from '../../../../utils/challenge-types'; + import LearnLayout from '../../../components/layouts/learn'; import { - ChallengeNodeType, - ChallengeFiles, ChallengeFile, + ChallengeFiles, ChallengeMetaType, - Test, - ResizePropsType + ChallengeNodeType, + ResizePropsType, + Test } from '../../../redux/prop-types'; import { isContained } from '../../../utils/is-contained'; import ChallengeDescription from '../components/Challenge-Description'; -import HelpModal from '../components/HelpModal'; import Hotkeys from '../components/Hotkeys'; -import Preview from '../components/Preview'; import ResetModal from '../components/ResetModal'; -import SidePanel from '../components/Side-Panel'; -import VideoModal from '../components/VideoModal'; import ChallengeTitle from '../components/challenge-title'; import CompletionModal from '../components/completion-modal'; +import HelpModal from '../components/help-modal'; import Output from '../components/output'; +import Preview from '../components/preview'; +import SidePanel from '../components/side-panel'; +import VideoModal from '../components/video-modal'; import { - createFiles, + cancelTests, challengeFilesSelector, + challengeMounted, challengeTestsSelector, + consoleOutputSelector, + createFiles, + executeChallenge, initConsole, initTests, - updateChallengeMeta, - challengeMounted, - consoleOutputSelector, - executeChallenge, - cancelTests, - isChallengeCompletedSelector + isChallengeCompletedSelector, + updateChallengeMeta } from '../redux'; import { getGuideUrl } from '../utils'; import DesktopLayout from './DesktopLayout'; import MobileLayout from './MobileLayout'; import MultifileEditor from './MultifileEditor'; -// Styles import './classic.css'; import '../components/test-frame.css'; @@ -124,7 +121,7 @@ class ShowClassic extends Component { static displayName: string; containerRef: React.RefObject; editorRef: React.RefObject; - instructionsPanelRef: React.RefObject; + instructionsPanelRef: React.RefObject; resizeProps: ResizePropsType; constructor(props: ShowClassicProps) { @@ -309,7 +306,6 @@ class ShowClassic extends Component { {title} } - className='full-height' guideUrl={getGuideUrl({ forumTopicId, title })} instructionsPanelRef={this.instructionsPanelRef} showToolPanel={showToolPanel} diff --git a/client/src/templates/Challenges/components/HelpModal.js b/client/src/templates/Challenges/components/HelpModal.js deleted file mode 100644 index 1e84b29fd0..0000000000 --- a/client/src/templates/Challenges/components/HelpModal.js +++ /dev/null @@ -1,90 +0,0 @@ -import { Button, Modal } from '@freecodecamp/react-bootstrap'; -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { Trans, withTranslation } from 'react-i18next'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; - -import envData from '../../../../../config/env.json'; -import { executeGA } from '../../../redux'; -import { createQuestion, closeModal, isHelpModalOpenSelector } from '../redux'; - -import './help-modal.css'; - -const { forumLocation } = envData; - -const mapStateToProps = state => ({ isOpen: isHelpModalOpenSelector(state) }); -const mapDispatchToProps = dispatch => - bindActionCreators( - { createQuestion, executeGA, closeHelpModal: () => closeModal('help') }, - dispatch - ); - -const propTypes = { - closeHelpModal: PropTypes.func.isRequired, - createQuestion: PropTypes.func.isRequired, - executeGA: PropTypes.func, - isOpen: PropTypes.bool, - t: PropTypes.func.isRequired -}; - -const RSA = forumLocation + '/t/19514'; - -export class HelpModal extends Component { - render() { - const { isOpen, closeHelpModal, createQuestion, executeGA, t } = this.props; - if (isOpen) { - executeGA({ type: 'modal', data: '/help-modal' }); - } - return ( - - - - {t('buttons.ask-for-help')} - - - -

- - - placeholder - - -

- - - - - ); - } -} - -HelpModal.displayName = 'HelpModal'; -HelpModal.propTypes = propTypes; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(withTranslation()(HelpModal)); diff --git a/client/src/templates/Challenges/components/Preview.js b/client/src/templates/Challenges/components/Preview.js deleted file mode 100644 index 87f476e764..0000000000 --- a/client/src/templates/Challenges/components/Preview.js +++ /dev/null @@ -1,66 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { withTranslation } from 'react-i18next'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; - -import { previewMounted } from '../redux'; - -import './preview.css'; - -const mainId = 'fcc-main-frame'; - -const mapDispatchToProps = dispatch => - bindActionCreators( - { - previewMounted - }, - dispatch - ); - -const propTypes = { - className: PropTypes.string, - disableIframe: PropTypes.bool, - previewMounted: PropTypes.func.isRequired, - t: PropTypes.func.isRequired -}; - -class Preview extends Component { - constructor(...props) { - super(...props); - - this.state = { - iframeStatus: props.disableIframe - }; - } - - componentDidMount() { - this.props.previewMounted(); - } - - componentDidUpdate(prevProps) { - if (this.props.disableIframe !== prevProps.disableIframe) { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ iframeStatus: !this.state.iframeStatus }); - } - } - - render() { - const { t } = this.props; - const iframeToggle = this.state.iframeStatus ? 'disable' : 'enable'; - return ( -
-