gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(settings): fix-up user objects for solutions (#17556)

Browse Source
This commit is contained in:
Stuart Taylor
2018-06-12 16:50:35 +01:00
committed by mrugesh mohapatra
parent e10a9fcda0
commit f54b7c07f5
11 changed files with 200 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
common/app/routes/Settings/components/SolutionViewer.jsx
View File

@@ -11,35 +11,59 @@ const prismLang = {
html: 'markup'
};
function getContentString(file) {
return file.trim() || '// We do not have the solution to this challenge';
}
function SolutionViewer({ files }) {
const solutions = files && Array.isArray(files) ?
files.map(file => (
<Panel
bsStyle='primary'
className='solution-viewer'
header={ file.ext.toUpperCase() }
key={ file.ext }
>
<pre>
<code
className={ `language-${prismLang[file.ext]}` }
dangerouslySetInnerHTML={{
__html: Prism.highlight(
file.contents.trim(),
Prism.languages[prismLang[file.ext]]
)
}}
/>
</pre>
</Panel>
)) : (
<Panel
bsStyle='primary'
className='solution-viewer'
header='JS'
key={ files.slice(0, 10) }
>
<pre>
<code
className='language-markup'
dangerouslySetInnerHTML={{
__html: Prism.highlight(
getContentString(files),
Prism.languages.js
)
}}
/>
</pre>
</Panel>
)
;
return (
<div>
<Helmet>
<link href='/css/prism.css' rel='stylesheet' />
</Helmet>
{
Object.keys(files)
.map(key => files[key])
.map(file => (
<Panel
bsStyle='primary'
className='solution-viewer'
header={ file.ext.toUpperCase() }
key={ file.ext }
>
<pre>
<code
className={ `language-${prismLang[file.ext]}` }
dangerouslySetInnerHTML={{
__html: Prism.highlight(
file.contents.trim(),
Prism.languages[prismLang[file.ext]]
)
}}
/>
</pre>
</Panel>
))
solutions
}
</div>
);
@@ -47,7 +71,10 @@ function SolutionViewer({ files }) {
SolutionViewer.displayName = 'SolutionViewer';
SolutionViewer.propTypes = {
files: PropTypes.object
files: PropTypes.oneOfType(
PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
PropTypes.string
)
};
export default SolutionViewer;