fix: Refactor challenge mounting and updating

componentDidMount and componentDidUpdate share a lot of code. This just
DRYs them out.

client/src/templates/Challenges/backend/Show.js

@@ -97,23 +97,7 @@ export class BackEnd extends Component {
   }
 
   componentDidMount() {
-    const {
+    this.initializeComponent();
-      challengeMounted,
-      initConsole,
-      initTests,
-      updateChallengeMeta,
-      data: {
-        challengeNode: {
-          fields: { tests },
-          challengeType
-        }
-      },
-      pageContext: { challengeMeta }
-    } = this.props;
-    initConsole('');
-    initTests(tests);
-    updateChallengeMeta({ ...challengeMeta, challengeType });
-    challengeMounted(challengeMeta.id);
     window.addEventListener('resize', this.updateDimensions);
   }
 
@@ -131,6 +115,17 @@ export class BackEnd extends Component {
         challengeNode: { title: prevTitle }
       }
     } = prevProps;
+    const {
+      data: {
+        challengeNode: { title: currentTitle }
+      }
+    } = this.props;
+    if (prevTitle !== currentTitle) {
+      this.initializeComponent();
+    }
+  }
+
+  initializeComponent() {
     const {
       challengeMounted,
       initConsole,
@@ -138,20 +133,17 @@ export class BackEnd extends Component {
       updateChallengeMeta,
       data: {
         challengeNode: {
-          title: currentTitle,
           fields: { tests },
           challengeType
         }
       },
       pageContext: { challengeMeta }
     } = this.props;
-    if (prevTitle !== currentTitle) {
     initConsole('');
     initTests(tests);
     updateChallengeMeta({ ...challengeMeta, challengeType });
     challengeMounted(challengeMeta.id);
   }
-  }
 
   handleSubmit(values) {
     const { updateBackendFormValues, executeChallenge } = this.props;

client/src/templates/Challenges/classic/Show.js

@@ -104,6 +104,31 @@ class ShowClassic extends Component {
   }
 
   componentDidMount() {
+    const {
+      data: {
+        challengeNode: { title }
+      }
+    } = this.props;
+    this.initializeComponent(title);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      data: {
+        challengeNode: { title: prevTitle }
+      }
+    } = prevProps;
+    const {
+      data: {
+        challengeNode: { title: currentTitle }
+      }
+    } = this.props;
+    if (prevTitle !== currentTitle) {
+      this.initializeComponent(currentTitle);
+    }
+  }
+
+  initializeComponent(title) {
     const {
       challengeMounted,
       createFiles,
@@ -113,7 +138,6 @@ class ShowClassic extends Component {
       data: {
         challengeNode: {
           files,
-          title,
           fields: { tests },
           challengeType
         }
@@ -127,41 +151,6 @@ class ShowClassic extends Component {
     challengeMounted(challengeMeta.id);
   }
 
-  componentDidUpdate(prevProps) {
-    const {
-      data: {
-        challengeNode: { title: prevTitle }
-      }
-    } = prevProps;
-    const {
-      challengeMounted,
-      createFiles,
-      initConsole,
-      initTests,
-      updateChallengeMeta,
-      data: {
-        challengeNode: {
-          files,
-          title: currentTitle,
-          fields: { tests },
-          challengeType
-        }
-      },
-      pageContext: { challengeMeta }
-    } = this.props;
-    if (prevTitle !== currentTitle) {
-      initConsole('');
-      createFiles(files);
-      initTests(tests);
-      updateChallengeMeta({
-        ...challengeMeta,
-        title: currentTitle,
-        challengeType
-      });
-      challengeMounted(challengeMeta.id);
-    }
-  }
-
   componentWillUnmount() {
     const { createFiles } = this.props;
     createFiles({});