Enable the SkillPage page to show empty skills

frontend/public/locales/de/eduTools/pages/meta.json

@@ -1,5 +1,6 @@
 {
-	"noExerciseWarning": "Für diese Kompetenz gibt es noch keine Übungen. Sie kann im Moment nicht geübt werden. Übungen werden wahrscheinlich bald kommen.",
+	"emptySkillWarning": "Der Inhalt dieser Kompetenz ist noch nicht entwickelt worden.<check><on-false> Die üblichen Metainformationen sind unten zu finden.</on-false></check> Theorie und Übungen werden wahrscheinlich bald folgen.",
+	"noExerciseWarning": "Für diese Kompetenz gibt es noch keine Übungen. Sie kann im Moment nicht geübt werden. Übungen werden wahrscheinlich bald folgen.",
 	"title": "Verknüpfung mit anderen Kompetenzen",
 	"noPrerequisites": "Diese Kompetenz erfordert keine <strong>Vorkenntnisse</strong>.",
 	"prerequisites": "Dieze Kompetenz hat <counting-word/> <strong>Vorkenntnisse</strong>-<count-check><one>Kompetenz</one><not-one>Kompetenzen</not-one></count-check>.",

frontend/public/locales/en/eduTools/pages/meta.json

@@ -1,4 +1,5 @@
 {
+  "emptySkillWarning": "The contents of this skill have not been created yet.<check><on-false> The default meta-info is shown below.</on-false></check> Theory and exercises will likely be added soon.",
   "noExerciseWarning": "This skill has no exercises yet. It cannot be practiced at this moment. Exercises will likely be added soon.",
   "title": "Links to other skills",
   "noPrerequisites": "This skill has no <strong>prerequisites</strong>.",

frontend/public/locales/nl/eduTools/pages/meta.json

@@ -1,7 +1,8 @@
 {
+	"emptySkillWarning": "De inhoud van deze vaardigheid is nog niet ontwikkeld.<check><on-false> De standaard meta-info kun je hieronder vinden.</on-false></check> Theorie en opgaven komen er waarschijnlijk binnenkort aan.",
 	"noExerciseWarning": "Deze vaardigheid heeft nog geen opgaven. Hij kan op het moment niet geoefend worden. Opgaven komen er waarschijnlijk binnenkort aan.",
 	"title": "Links met andere vaardigheden",
-	"noPrerequisites": "Deze vaardigheid heeft geen <strong>voorkennis</strong>.",
+"noPrerequisites": "Deze vaardigheid heeft geen <strong>voorkennis</strong>.",
 	"prerequisites": "Deze vaardigheid heeft <counting-word/> <strong>voorkennis</strong>-<count-check><one>vaardigheid</one><not-one>vaardigheden</not-one></count-check>.",
 	"links": "Hij is <strong>soortgelijk</strong> (gecorreleerd) aan <counting-word/> <count-check><one>vaardigheid</one><not-one>vaardigheden</not-one></count-check>.",
 	"noContinuations": "Het is een <strong>einddoel</strong>: hij is niet nodig voor enige andere vaardigheid.",

frontend/src/ui/eduTools/skills/MetaWrapper.js

@@ -2,17 +2,19 @@ import React from 'react'
 
 import { skillTree } from 'step-wise/eduTools/skills/skillTree'
 
-import { TranslationFile, Translation, Plurals, CountingWord } from 'i18n'
+import { TranslationFile, Translation, Check, Plurals, CountingWord } from 'i18n'
 import { Head, Par, List, Warning } from 'ui/components'
 
 import { SkillLink } from './routing'
 
-export function MetaWrapper({ children, skillId }) {
+export function MetaWrapper({ skillId, empty, children }) {
 	const skill = skillTree[skillId]
+	const hasExercises = Array.isArray(skill.exercises) && skill.exercises.length > 0
 	return <>
 		{children}
 		<TranslationFile path="eduTools/pages/meta" extend={false}>
-			{skill.exercises.length === 0 ? <Warning><Translation entry="noExerciseWarning">This skill has no exercises yet. It cannot be practiced at this moment. Exercises will likely be added soon.</Translation></Warning> : null}
+			{empty ? <Warning><Translation entry="emptySkillWarning">The contents of this skill have not been created yet.<Check value={!!children}><Check.False> The default meta-info is shown below.</Check.False></Check> Theory and exercises will likely be added soon.</Translation></Warning> : null}
+			{!empty && !hasExercises ? <Warning><Translation entry="noExerciseWarning">This skill has no exercises yet. It cannot be practiced at this moment. Exercises will likely be added soon.</Translation></Warning> : null}
 			<Head><Translation entry="title">Links to other skills</Translation></Head>
 			<Prerequisites skillId={skillId} />
 			<Links skillId={skillId} />

frontend/src/ui/eduTools/skills/SkillPage.js

@@ -27,35 +27,53 @@ export function SkillPage() {
 				throw new Error(`Invalid skill path: tried to find skill pages at "skills/contents/${path}/${skillId}" but no files were found there. Could not render skill pages.`)
 			Pages.current = pages
 			setLoadedForSkillId(skillId)
-		}).catch((error) => {
-			console.error('Skill pages failed to load.')
-			console.error(error) // ToDo later: properly process errors.
-			throw error
+		}).catch((error) => { // Probably an empty skill that simply couldn't be loaded.
+			console.warn(`Could not find contents for skill "${skillId}". This skill appears to have not been developed yet.`)
+			Pages.current = {}
+			setLoadedForSkillId(skillId)
 		})
 	}
 	useEffect(reload, [Pages, setLoadedForSkillId, skillId])
 
 	// When pages have been loaded, assemble them.
 	const loadedPages = Pages.current
 	const pages = useMemo(() => {
+		// On a non-loaded skill, show the meta page. (Probably not needed, since this case is already caught below.)
 		if (!loadedForSkillId || loadedForSkillId !== skillId)
-			return {}
-		const pages = { practice: <ExercisePage /> } // Always have a practice page.
+			return { meta: <MetaWrapper skillId={skillId} empty={true} /> }
+
+		// Assemble the pages, starting with the examples and exercises if present.
+		const skill = skillTree[skillId]
+		const pages = {}
+		const hasExamples = Array.isArray(skill.examples) && skill.examples.length > 0
+		const hasExercises = Array.isArray(skill.exercises) && skill.exercises.length > 0
+		if (hasExamples)
+			pages.example = <ExamplePage />
+		if (hasExercises)
+			pages.practice = <ExercisePage />
+		let numPages = (hasExamples ? 1 : 0) + (hasExercises ? 1 : 0)
+
+		// Add in other pages that may have loaded.
 		if (loadedPages) {
 			Object.keys(loadedPages).filter(key => !!tabData[firstToLowerCase(key)]).forEach(key => {
 				const Component = loadedPages[key]
 				pages[firstToLowerCase(key)] = <Component />
+				numPages++
 			})
 		}
-		if (skillTree[skillId].examples.length > 0)
-			pages.example = <ExamplePage />
-		if (pages.meta) // Add a wrapper to the Meta information.
+
+		// Add in a wrapper for the Meta page, which adds in useful warning/info blocks when needed.
+		if (numPages === 0) // No pages at all: show a Meta page.
+			pages.meta = <MetaWrapper skillId={skillId} empty={true} />
+		else if (numPages === 1 && pages.meta) // Only the Meta page.
+			pages.meta = <MetaWrapper skillId={skillId} empty={true}>{pages.meta}</MetaWrapper>
+		else  // Has a page, probably either Theory or Exercises.
 			pages.meta = <MetaWrapper skillId={skillId}>{pages.meta}</MetaWrapper>
 		return pages
 	}, [loadedForSkillId, skillId, loadedPages])
 
 	// Upon loading, show a loading note.
-	if (!loadedForSkillId || Object.keys(pages).length === 0)
+	if (!loadedForSkillId)
 		return <LoadingNote text={translate('Loading skill pages...', 'loadingNotes.loadingSkillPages', 'eduTools/pages/skillPage')} />
 
 	// Render the pages. Use a key to force a reload on a new skillId.