gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: convert mstrophy show.tsx to function (#57392)

Browse Source 
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Anna
2024-12-03 10:01:36 -05:00
committed by GitHub
parent f09e12edd0
commit 7f5ed21ab7
1 changed files with 96 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/templates/Challenges/ms-trophy/show.tsx
+96 -128
View File
@@ -1,5 +1,5 @@
import { graphql } from 'gatsby';
import React, { Component } from 'react';
import React, { useEffect, useRef } from 'react';
import Helmet from 'react-helmet';
import type { TFunction } from 'i18next';
import { withTranslation } from 'react-i18next';
@@ -82,16 +82,16 @@ interface MsTrophyProps {
updateChallengeMeta: (arg0: ChallengeMeta) => void;
}
// Component
class MsTrophy extends Component<MsTrophyProps> {
static displayName: string;
private container: React.RefObject<HTMLElement> = React.createRef();
constructor(props: MsTrophyProps) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
function MsTrophy(props: MsTrophyProps) {
const container = useRef<HTMLElement>(null);
const {
data: {
challengeNode: {
challenge: { title }
}
}
} = props;
useEffect(() => {
const {
challengeMounted,
data: {
@@ -107,7 +107,7 @@ class MsTrophy extends Component<MsTrophyProps> {
pageContext: { challengeMeta },
initTests,
updateChallengeMeta
} = this.props;
} = props;
initTests(tests);
updateChallengeMeta({
...challengeMeta,
@@ -116,133 +116,101 @@ class MsTrophy extends Component<MsTrophyProps> {
helpCategory
});
challengeMounted(challengeMeta.id);
this.container.current?.focus();
}
container.current?.focus();
// This effect should be run once on mount
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
componentDidUpdate(prevProps: MsTrophyProps): 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 = (): void => {
const { setIsProcessing, submitChallenge } = this.props;
const handleSubmit = () => {
const { setIsProcessing, submitChallenge } = props;
setIsProcessing(true);
submitChallenge();
};
render() {
const {
data: {
challengeNode: {
challenge: {
title,
description,
instructions,
superBlock,
block,
translationPending,
fields: { blockName }
}
const {
data: {
challengeNode: {
challenge: {
description,
instructions,
superBlock,
block,
translationPending,
fields: { blockName }
}
},
isChallengeCompleted,
isProcessing,
msUsername,
openHelpModal,
pageContext: {
challengeMeta: { nextChallengePath, prevChallengePath }
},
t
} = this.props;
}
},
isChallengeCompleted,
isProcessing,
msUsername,
openHelpModal,
pageContext: {
challengeMeta: { nextChallengePath, prevChallengePath }
},
t
} = props;
const blockNameTitle = `${t(
`intro:${superBlock}.blocks.${block}.title`
)} - ${title}`;
const blockNameTitle = `${t(
`intro:${superBlock}.blocks.${block}.title`
)} - ${title}`;
return (
<Hotkeys
containerRef={this.container}
nextChallengePath={nextChallengePath}
prevChallengePath={prevChallengePath}
>
<LearnLayout>
<Helmet
title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}
/>
<Container>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer size='m' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
>
{title}
</ChallengeTitle>
<ChallengeDescription
description={description}
instructions={instructions}
/>
<LinkMsUser />
<hr />
<Button
block={true}
variant='primary'
data-playwright-test-label='verify-trophy-button'
disabled={!msUsername || isProcessing}
onClick={this.handleSubmit}
>
{t('buttons.verify-trophy')}
</Button>
<Spacer size='xxs' />
<Button
block={true}
variant='primary'
data-playwright-test-label='ask-for-help-button'
onClick={openHelpModal}
>
{t('buttons.ask-for-help')}
</Button>
<br />
<Spacer size='m' />
</Col>
<CompletionModal />
<HelpModal challengeTitle={title} challengeBlock={blockName} />
</Row>
</Container>
</LearnLayout>
</Hotkeys>
);
}
return (
<Hotkeys
containerRef={container}
nextChallengePath={nextChallengePath}
prevChallengePath={prevChallengePath}
>
<LearnLayout>
<Helmet
title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}
/>
<Container>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer size='m' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
>
{title}
</ChallengeTitle>
<ChallengeDescription
description={description}
instructions={instructions}
/>
<LinkMsUser />
<hr />
<Button
block={true}
variant='primary'
data-playwright-test-label='verify-trophy-button'
disabled={!msUsername || isProcessing}
onClick={handleSubmit}
>
{t('buttons.verify-trophy')}
</Button>
<Spacer size='xxs' />
<Button
block={true}
variant='primary'
data-playwright-test-label='ask-for-help-button'
onClick={openHelpModal}
>
{t('buttons.ask-for-help')}
</Button>
<br />
<Spacer size='m' />
</Col>
<CompletionModal />
<HelpModal challengeTitle={title} challengeBlock={blockName} />
</Row>
</Container>
</LearnLayout>
</Hotkeys>
);
}
MsTrophy.displayName = 'MsTrophy';
export default connect(
mapStateToProps,
mapDispatchToProps