59f17f237b
* fix(client): fix client * fix propType and add comment * revert user.json prettification * slight type refactor and payload correction Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * update ChallengeFile type imports * add cypress test for code-storage * update test and storage epic * fix Shaun's tired brain's logic * refactor with suggestions Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * update codeReset * increate cypress timeout because firefox is slow * remove unused import to make linter happy * use focus on editor Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * use more specific seletor for cypress editor test * account for silly null challengeFiles Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
import { Panel } from '@freecodecamp/react-bootstrap';
|
|
import Prism from 'prismjs';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
|
|
const prismLang = {
|
|
css: 'css',
|
|
js: 'javascript',
|
|
jsx: 'javascript',
|
|
html: 'markup'
|
|
};
|
|
|
|
const SolutionViewer = ({
|
|
challengeFiles,
|
|
solution = '// The solution is not available for this project'
|
|
}) =>
|
|
challengeFiles?.length ? (
|
|
challengeFiles.map(challengeFile => (
|
|
<Panel
|
|
bsStyle='primary'
|
|
className='solution-viewer'
|
|
key={challengeFile.ext}
|
|
>
|
|
<Panel.Heading>{challengeFile.ext.toUpperCase()}</Panel.Heading>
|
|
<Panel.Body>
|
|
<pre>
|
|
<code
|
|
className={`language-${prismLang[challengeFile.ext]}`}
|
|
dangerouslySetInnerHTML={{
|
|
__html: Prism.highlight(
|
|
challengeFile.contents.trim(),
|
|
Prism.languages[prismLang[challengeFile.ext]]
|
|
)
|
|
}}
|
|
/>
|
|
</pre>
|
|
</Panel.Body>
|
|
</Panel>
|
|
))
|
|
) : (
|
|
<Panel
|
|
bsStyle='primary'
|
|
className='solution-viewer'
|
|
key={solution.slice(0, 10)}
|
|
>
|
|
<Panel.Heading>JS</Panel.Heading>
|
|
<Panel.Body>
|
|
<pre>
|
|
<code
|
|
className='language-markup'
|
|
dangerouslySetInnerHTML={{
|
|
__html: Prism.highlight(
|
|
solution.trim(),
|
|
Prism.languages.js,
|
|
'javascript'
|
|
)
|
|
}}
|
|
/>
|
|
</pre>
|
|
</Panel.Body>
|
|
</Panel>
|
|
);
|
|
|
|
SolutionViewer.displayName = 'SolutionViewer';
|
|
SolutionViewer.propTypes = {
|
|
challengeFiles: PropTypes.array,
|
|
solution: PropTypes.string
|
|
};
|
|
|
|
export default SolutionViewer;
|