fix(challenge-editor): superblock names in link to challenge (#62669)

tools/challenge-editor/client/src/components/editor/editor.tsx

@@ -13,7 +13,14 @@ import { ChallengeContent } from '../../../interfaces/challenge-content';
 import SaveChallenge from '../buttons/save-challenge';
 import './editor.css';
 import { API_LOCATION } from '../../utils/handle-request';
-import { superBlockNameMap } from '../../utils/block-name-translator';
+
+// only includes superblocks whose folder names don't match their dashed names?
+export const superBlockNameMap: { [key: string]: string } = {
+  'responsive-web-design-22': '2022/responsive-web-design',
+  'javascript-algorithms-and-data-structures-22':
+    'javascript-algorithms-and-data-structures-v8',
+  'front-end-development': 'full-stack-developer'
+};
 
 const Editor = () => {
   const [error, setError] = useState<Error | null>(null);
@@ -24,7 +31,12 @@ const Editor = () => {
     fileData: ''
   });
   const [stepContent, setStepContent] = useState('');
-  const { superblock, block, challenge } = useParams();
+  const { superblock = '', block = '', challenge = '' } = useParams();
+
+  const superblockUrl =
+    superblock in superBlockNameMap
+      ? superBlockNameMap[superblock]
+      : superblock;
 
   useEffect(() => {
     fetchData();
@@ -33,9 +45,7 @@ const Editor = () => {
 
   const fetchData = () => {
     setLoading(true);
-    fetch(
-      `${API_LOCATION}/${superblock || ''}/${block || ''}/${challenge || ''}`
-    )
+    fetch(`${API_LOCATION}/${superblock}/${block}/${challenge}`)
       .then(res => res.json() as Promise<ChallengeContent>)
       .then(
         content => {
@@ -65,7 +75,7 @@ const Editor = () => {
     <div>
       <h1>{items.name}</h1>
       <span className='breadcrumb'>
-        {superblock || ''} / {block || ''}
+        {superblock} / {block}
       </span>
       <CodeMirror
         value={stepContent}
@@ -81,17 +91,17 @@ const Editor = () => {
         }}
       />
       <SaveChallenge
-        superblock={superblock || ''}
-        block={block || ''}
+        superblock={superblock}
+        block={block}
         challenge={challenge}
         content={stepContent}
       />
       <p>
-        <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
+        <Link to={`/${superblock}/${block}`}>Return to Block</Link>
       </p>
       <p>
         <Link
-          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${
+          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superblockUrl}/${block || ''}/${
             items.dashedName
           }`}
           target='_blank'

tools/challenge-editor/client/src/utils/block-name-translator.ts

@@ -1,31 +0,0 @@
-export const superBlockNameMap: { [key: string]: string } = {
-  'responsive-web-design': 'responsive-web-design',
-  'javascript-algorithms-and-data-structures':
-    'javascript-algorithms-and-data-structures',
-  'front-end-development-libraries': 'front-end-development-libraries',
-  'data-visualization': 'data-visualization',
-  'back-end-development-and-apis': 'back-end-development-and-apis',
-  'quality-assurance': 'quality-assurance',
-  'scientific-computing-with-python': 'scientific-computing-with-python',
-  'data-analysis-with-python': 'data-analysis-with-python',
-  'information-security': 'information-security',
-  'coding-interview-prep': 'coding-interview-prep',
-  'machine-learning-with-python': 'machine-learning-with-python',
-  'relational-databases': 'relational-databases',
-  'responsive-web-design-22': '2022/responsive-web-design',
-  'javascript-algorithms-and-data-structures-22':
-    'javascript-algorithms-and-data-structures-v8',
-  'the-odin-project': 'the-odin-project',
-  'college-algebra-with-python': 'college-algebra-with-python',
-  'project-euler': 'project-euler',
-  'foundational-c-sharp-with-microsoft': 'foundational-c-sharp-with-microsoft',
-  'a2-english-for-developers': 'a2-english-for-developers',
-  'rosetta-code': 'rosetta-code',
-  'python-for-everybody': 'python-for-everybody',
-  'b1-english-for-developers': 'b1-english-for-developers',
-  'front-end-development': 'full-stack-developer',
-  'a1-professional-spanish': 'a1-professional-spanish',
-  'a2-professional-spanish': 'a2-professional-spanish',
-  'a2-professional-chinese': 'a2-professional-chinese',
-  'a1-professional-chinese': 'a1-professional-chinese'
-};