fix(client): refactor a challenge preview saga

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -22,11 +22,12 @@ import {
   disableBuildOnError
 } from './';
 
-import { buildChallenge, getTestRunner } from '../utils/build';
+import {
-
+  buildChallenge,
-import { challengeTypes } from '../../../../utils/challengeTypes';
+  getTestRunner,
-
+  challengeHasPreview,
-import { createMainFramer } from '../utils/frame.js';
+  updatePreview
+} from '../utils/build';
 
 export function* executeChallengeSaga() {
   const isBuildEnabled = yield select(isBuildEnabledSelector);
@@ -41,7 +42,8 @@ export function* executeChallengeSaga() {
     yield fork(logToConsole, consoleProxy);
     const proxyLogger = args => consoleProxy.put(args);
 
-    const buildData = yield buildChallengeData();
+    const challengeData = yield select(challengeDataSelector);
+    const buildData = yield buildChallengeData(challengeData);
     const document = yield getContext('document');
     const testRunner = yield call(
       getTestRunner,
@@ -67,13 +69,13 @@ function* logToConsole(channel) {
   });
 }
 
-function* buildChallengeData() {
+function* buildChallengeData(challengeData) {
-  const challengeData = yield select(challengeDataSelector);
   try {
     return yield call(buildChallenge, challengeData);
   } catch (e) {
     yield put(disableBuildOnError(e));
-    throw ['Build failed'];
+    // eslint-disable-next-line no-throw-literal
+    throw 'Build failed';
   }
 }
 
@@ -110,24 +112,23 @@ function* executeTests(testRunner) {
   return testResults;
 }
 
-function* updateMainSaga() {
+function* previewChallengeSaga() {
+  yield delay(700);
+
   const isBuildEnabled = yield select(isBuildEnabledSelector);
   if (!isBuildEnabled) {
     return;
   }
+  const challengeData = yield select(challengeDataSelector);
+  if (!challengeHasPreview(challengeData)) {
+    return;
+  }
 
-  yield delay(700);
   try {
     yield put(initConsole(''));
-    const { html, modern } = challengeTypes;
+    const ctx = yield buildChallengeData(challengeData);
-    const { challengeType } = yield select(challengeDataSelector);
-    if (challengeType !== html && challengeType !== modern) {
-      return;
-    }
-    const ctx = yield buildChallengeData();
     const document = yield getContext('document');
-    const frameMain = yield call(createMainFramer, document);
+    yield call(updatePreview, ctx, document);
-    yield call(frameMain, ctx);
   } catch (err) {
     console.error(err);
   }
@@ -143,7 +144,7 @@ export function createExecuteChallengeSaga(types) {
         types.challengeMounted,
         types.resetChallenge
       ],
-      updateMainSaga
+      previewChallengeSaga
     )
   ];
 }

client/src/templates/Challenges/utils/build.js

@@ -2,7 +2,11 @@ import { transformers } from '../rechallenge/transformers';
 import { cssToHtml, jsToHtml, concatHtml } from '../rechallenge/builders.js';
 import { challengeTypes } from '../../../../utils/challengeTypes';
 import createWorker from './worker-executor';
-import { createTestFramer, runTestInTestFrame } from './frame';
+import {
+  createTestFramer,
+  runTestInTestFrame,
+  createMainFramer
+} from './frame';
 
 const frameRunner = [
   {
@@ -66,7 +70,7 @@ export async function buildChallenge(challengeData) {
   if (build) {
     return build(challengeData);
   }
-  return null;
+  throw new Error(`Cannot build challenge of type ${challengeType}`);
 }
 
 const testRunners = {
@@ -75,7 +79,12 @@ const testRunners = {
   [challengeTypes.backend]: getDOMTestRunner
 };
 export function getTestRunner(buildData, proxyLogger, document) {
-  return testRunners[buildData.challengeType](buildData, proxyLogger, document);
+  const { challengeType } = buildData;
+  const testRunner = testRunners[challengeType];
+  if (testRunner) {
+    return testRunner(buildData, proxyLogger, document);
+  }
+  throw new Error(`Cannot get test runner for challenge type ${challengeType}`);
 }
 
 function getJSTestRunner({ build, sources }, proxyLogger) {
@@ -149,3 +158,19 @@ export function buildBackendChallenge({ url }) {
     sources: { url }
   };
 }
+
+export function updatePreview(buildData, document) {
+  const { challengeType } = buildData;
+  if (challengeType === challengeTypes.html) {
+    createMainFramer(document)(buildData);
+  } else {
+    throw new Error(`Cannot show preview for challenge type ${challengeType}`);
+  }
+}
+
+export function challengeHasPreview({ challengeType }) {
+  return (
+    challengeType === challengeTypes.html ||
+    challengeType === challengeTypes.modern
+  );
+}