feat: show project preview (#43967)

* feat: add data for preview to challengeMeta

* feat: allow creation of project preview frames

* feat: make project preview data available for frame

* refactor: simplify reducer

* feat: show project preview for first challenge

* feat: show project preview on MultiFile challenges

* test: check for presence/absence of preview modal

* fix: simplify previewProject saga

* test: uncomment project preview test

* fix: increase modal size + change modal title

* modal-footer

* feat: adjust preview size

* fix: remove margin, padding, and line-height for preview of finished projects

* Revert "fix: remove margin, padding, and line-height for preview of finished projects"

This reverts commit 0db11a0819.

* fix: remove margin on all previews

* refactor: use closeModal('projectPreview') for clarity

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: get started -> start coding!

* fix: update closeModal type

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/utils/gatsby/challenge-page-creator.js

@@ -1,6 +1,7 @@
 const path = require('path');
+const { createPoly } = require('../../../utils/polyvinyl');
 const { dasherize } = require('../../../utils/slugs');
-
+const { sortChallengeFiles } = require('../../../utils/sort-challengefiles');
 const { viewTypes } = require('../challenge-types');
 
 const backend = path.resolve(
@@ -57,7 +58,7 @@ function getTemplateComponent(challengeType) {
 }
 
 exports.createChallengePages = function (createPage) {
-  return function ({ node }, index, thisArray) {
+  return function ({ node: challenge }, index, allChallengeEdges) {
     const {
       superBlock,
       block,
@@ -66,7 +67,7 @@ exports.createChallengePages = function (createPage) {
       template,
       challengeType,
       id
-    } = node;
+    } = challenge;
     // TODO: challengeType === 7 and isPrivate are the same, right? If so, we
     // should remove one of them.
 
@@ -79,16 +80,56 @@ exports.createChallengePages = function (createPage) {
           block,
           template,
           required,
-          nextChallengePath: getNextChallengePath(node, index, thisArray),
-          prevChallengePath: getPrevChallengePath(node, index, thisArray),
+          nextChallengePath: getNextChallengePath(
+            challenge,
+            index,
+            allChallengeEdges
+          ),
+          prevChallengePath: getPrevChallengePath(
+            challenge,
+            index,
+            allChallengeEdges
+          ),
           id
         },
+        projectPreview: getProjectPreviewConfig(challenge, allChallengeEdges),
         slug
       }
     });
   };
 };
 
+function getProjectPreviewConfig(challenge, allChallengeEdges) {
+  const { block, challengeOrder, usesMultifileEditor } = challenge;
+
+  const challengesInBlock = allChallengeEdges
+    .filter(({ node }) => node.block === block)
+    .map(({ node }) => node);
+  const lastChallenge = challengesInBlock[challengesInBlock.length - 1];
+  const solutionToLastChallenge = sortChallengeFiles(
+    lastChallenge.solutions[0] ?? []
+  );
+  const lastChallengeFiles = sortChallengeFiles(
+    lastChallenge.challengeFiles ?? []
+  );
+  const projectPreviewChallengeFiles = lastChallengeFiles.map((file, id) =>
+    createPoly({
+      ...file,
+      contents: solutionToLastChallenge[id]?.contents ?? file.contents
+    })
+  );
+
+  return {
+    showProjectPreview: challengeOrder === 0 && usesMultifileEditor,
+    challengeData: {
+      challengeType: lastChallenge.challengeType,
+      challengeFiles: projectPreviewChallengeFiles,
+      required: lastChallenge.required,
+      template: lastChallenge.template
+    }
+  };
+}
+
 exports.createBlockIntroPages = function (createPage) {
   return function (edge) {
     const {