flag markdown that fails to parse

Author: ShMcK

web-app/src/components/Markdown/index.tsx

@@ -8,7 +8,7 @@ import * as React from 'react'
 import './prism.css'
 
 // markdown highlighter instance
-const md = new MarkdownIt({
+const md: MarkdownIt = new MarkdownIt({
   breaks: true,
   // highlight: syntaxHighlight,
   html: true,
@@ -25,8 +25,17 @@ interface Props {
 }
 
 const Markdown = (props: Props) => {
-  const html = md.render(props.children)
-  // TODO: sanitize HTML
+  let html: string
+  try {
+    html = md.render(props.children)
+  } catch (error) {
+    console.log(`failed to parse markdown for ${props.children}`)
+    html = `<div style='background-color: #FFB81A; padding: 0.5rem;'>
+			<strong style='padding-bottom: 0.5rem;'>ERROR: Failed to parse markdown</strong>
+			<p>${props.children}</p>
+		</div>`
+  }
+  // TODO: sanitize markdown or HTML
   return <div dangerouslySetInnerHTML={{ __html: html }} />
 }
 

web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

@@ -71,17 +71,20 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
       <div>
         <div style={styles.header}>Tasks</div>
         <div style={styles.steps}>
-					{level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
-						if (!step) {
-							return null
-						}
-						return <Step
-							order={index + 1}
-							status={step.status}
-							content={step.content}
-							onLoadSolution={onLoadSolution}
-						/>
-					})}
+          {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => {
+            if (!step) {
+              return null
+            }
+            return (
+              <Step
+                key={step.id}
+                order={index + 1}
+                status={step.status}
+                content={step.content}
+                onLoadSolution={onLoadSolution}
+              />
+            )
+          })}
         </div>
       </div>
 

web-app/stories/Level.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import * as G from '../../typings/graphql'
+import * as T from '../../typings'
 
 import { action } from '@storybook/addon-actions'
 import { withKnobs } from '@storybook/addon-knobs'
@@ -8,11 +9,17 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 import Level from '../src/containers/Tutorial/LevelPage/Level/index'
 
+type ModifiedLevel = G.Level & {
+  status: T.ProgressStatus
+  index: number
+  steps: Array<G.Step & { status: T.ProgressStatus }>
+}
+
 storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => {
-    const level: G.Level & { index: number } = {
+    const level = {
       id: 'L1',
       index: 2,
       title: 'A Title',
@@ -67,3 +74,49 @@ storiesOf('Level', module)
     }
     return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
   })
+  .add('Level 2', () => {
+    const level = {
+      id: 'L1',
+      title: 'A Title',
+      description: 'A description',
+      content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+      setup: { commits: ['77e57cd'], commands: ['npm install'], files: [] },
+      steps: [
+        {
+          id: 'L1:S1',
+          content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+          setup: { commits: ['a4679b1'], commands: [], files: ['package.json'] },
+          solution: {
+            commits: ['7c64508'],
+            commands: ['npm install'],
+            files: ['package.json'],
+          },
+          status: 'ACTIVE',
+        },
+        {
+          id: 'L1:S2',
+          content: 'Should support markdown test\n ```ts\nvar a = 1\n```\nwhew it works!',
+          setup: { commits: ['8a8a5cb'], commands: [], files: ['src/main.ts'] },
+          solution: { commits: ['c2f7973'], commands: [], files: ['src/main.ts'] },
+          status: 'INCOMPLETE',
+        },
+        {
+          id: 'L1:S3',
+          content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+          setup: { commits: ['992bcb1'], commands: [], files: ['src/main.ts'] },
+          solution: { commits: ['1b92779'], commands: [], files: ['src/main.ts'] },
+          status: 'INCOMPLETE',
+        },
+        {
+          id: 'L1:S4',
+          content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+          setup: { commits: ['be32adb'], commands: [], files: ['src/main.ts'] },
+          solution: { commits: ['7fe26cb'], commands: [], files: ['src/main.ts'] },
+          status: 'INCOMPLETE',
+        },
+      ],
+      index: 0,
+      status: 'ACTIVE',
+    }
+    return <Level level={level} onContinue={action('onContinue')} onLoadSolution={action('onLoadSolution')} />
+  })