From 9879d6e72b075572cfd0db13e2562dcd7857b1f9 Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Fri, 22 May 2020 03:24:17 +0530
Subject: [PATCH] fix(learn): update project views for python

---
 .../Challenges/projects/SolutionForm.js       | 58 ++++++++++++++-----
 .../Challenges/projects/backend/Show.js       | 12 +---
 .../Challenges/projects/frontend/Show.js      |  6 +-
 client/src/templates/Challenges/video/Show.js |  6 +-
 cypress/integration/learn/index.js            |  8 ++-
 5 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/client/src/templates/Challenges/projects/SolutionForm.js b/client/src/templates/Challenges/projects/SolutionForm.js
index 6935bf882f8..92edb4e4e5e 100644
--- a/client/src/templates/Challenges/projects/SolutionForm.js
+++ b/client/src/templates/Challenges/projects/SolutionForm.js
@@ -2,16 +2,21 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { Form } from '../../../components/formHelpers';
+import {
+  backEndProject,
+  frontEndProject,
+  pythonProject
+} from '../../../../utils/challengeTypes';
 
 const propTypes = {
-  isFrontEnd: PropTypes.bool,
-  isProject: PropTypes.bool,
+  challengeType: PropTypes.number,
+  description: PropTypes.string,
   isSubmitting: PropTypes.bool,
   onSubmit: PropTypes.func.isRequired,
   updateSolutionForm: PropTypes.func.isRequired
 };
 
-const challengeFields = ['solution'];
+const frontEndProjectFields = ['solution'];
 const backEndProjectFields = ['solution', 'githubLink'];
 
 const options = {
@@ -35,25 +40,52 @@ export class SolutionForm extends Component {
     this.props.onSubmit();
   }
   render() {
-    const { isSubmitting, isFrontEnd, isProject } = this.props;
+    const { isSubmitting, challengeType, description } = this.props;
     const buttonCopy = isSubmitting
       ? 'Submit and go to my next challenge'
       : "I've completed this challenge";
+
+    let solutionFormFields = frontEndProjectFields;
+    let solutionLink = 'Link, ex: ';
+    let solutionFormID = 'front-end-form';
+
+    switch (challengeType) {
+      case frontEndProject:
+        solutionFormFields = frontEndProjectFields;
+        solutionLink =
+          solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
+        break;
+
+      case backEndProject:
+        solutionFormFields = backEndProjectFields;
+        solutionLink = solutionLink + 'https://camperbot.glitch.me';
+        solutionFormID = 'back-end-form';
+        break;
+
+      case pythonProject:
+        solutionFormFields = frontEndProjectFields;
+        solutionLink =
+          solutionLink +
+          (description.includes('Colaboratory')
+            ? 'https://colab.research.google.com/drive/1i5EmInTWi1RFvFr2_aRXky96YxY6sbWy'
+            : 'https://repl.it/@camperbot/hello');
+        break;
+
+      default:
+        solutionFormFields = frontEndProjectFields;
+        solutionLink =
+          solutionLink + 'https://codepen.io/camperbot/full/oNvPqqo';
+    }
+
     return (
       <Form
         buttonText={`${buttonCopy}`}
-        formFields={
-          isProject && !isFrontEnd ? backEndProjectFields : challengeFields
-        }
-        id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
+        formFields={solutionFormFields}
+        id={solutionFormID}
         options={{
           ...options,
           placeholders: {
-            solution:
-              'Link, ex: ' +
-              (isFrontEnd
-                ? 'https://codepen.io/camperbot/full/oNvPqqo'
-                : 'https://camperbot.glitch.me'),
+            solution: solutionLink,
             githubLink: 'ex: https://github.com/camperbot/hello'
           }
         }}
diff --git a/client/src/templates/Challenges/projects/backend/Show.js b/client/src/templates/Challenges/projects/backend/Show.js
index fec4521ea57..fa48df384c9 100644
--- a/client/src/templates/Challenges/projects/backend/Show.js
+++ b/client/src/templates/Challenges/projects/backend/Show.js
@@ -34,7 +34,6 @@ import { isSignedInSelector } from '../../../../redux';
 import Hotkeys from '../../components/Hotkeys';
 
 import '../../components/test-frame.css';
-import { backEndProject } from '../../../../../utils/challengeTypes';
 
 const propTypes = {
   challengeMounted: PropTypes.func.isRequired,
@@ -156,12 +155,10 @@ export class BackEnd extends Component {
       },
       tests,
       executeChallenge,
-      updateSolutionFormValues,
       updateBackendFormValues
     } = this.props;
 
     const blockNameTitle = `${blockName} - ${title}`;
-    const isBackEndProject = challengeType === backEndProject;
 
     return (
       <Hotkeys
@@ -182,14 +179,9 @@ export class BackEnd extends Component {
                   instructions={instructions}
                 />
                 <SolutionForm
-                  isFrontEnd={false}
-                  isProject={isBackEndProject}
+                  challengeType={challengeType}
                   onSubmit={executeChallenge}
-                  updateSolutionForm={values =>
-                    isBackEndProject
-                      ? updateSolutionFormValues(values)
-                      : updateBackendFormValues(values)
-                  }
+                  updateSolutionForm={updateBackendFormValues}
                 />
                 <ProjectToolPanel
                   guideUrl={getGuideUrl({ forumTopicId, title })}
diff --git a/client/src/templates/Challenges/projects/frontend/Show.js b/client/src/templates/Challenges/projects/frontend/Show.js
index 6e4ab9a9c13..28ac6c08e1f 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.js
+++ b/client/src/templates/Challenges/projects/frontend/Show.js
@@ -13,7 +13,6 @@ import {
   openModal,
   updateSolutionFormValues
 } from '../../redux';
-import { frontEndProject } from '../../../../../utils/challengeTypes';
 import { getGuideUrl } from '../../utils';
 
 import LearnLayout from '../../../../components/layouts/Learn';
@@ -108,7 +107,6 @@ export class Project extends Component {
       updateSolutionFormValues
     } = this.props;
 
-    const isFrontEndProject = challengeType === frontEndProject;
     const blockNameTitle = `${blockName} - ${title}`;
 
     return (
@@ -127,8 +125,8 @@ export class Project extends Component {
                 <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
                 <ChallengeDescription description={description} />
                 <SolutionForm
-                  isFrontEnd={true}
-                  isProject={isFrontEndProject}
+                  challengeType={challengeType}
+                  description={description}
                   onSubmit={openCompletionModal}
                   updateSolutionForm={updateSolutionFormValues}
                 />
diff --git a/client/src/templates/Challenges/video/Show.js b/client/src/templates/Challenges/video/Show.js
index 3e38ccef64d..809d2a76029 100644
--- a/client/src/templates/Challenges/video/Show.js
+++ b/client/src/templates/Challenges/video/Show.js
@@ -24,7 +24,7 @@ import {
   challengeMounted,
   updateChallengeMeta,
   openModal,
-  updateProjectFormValues
+  updateSolutionFormValues
 } from '../redux';
 
 // Styles
@@ -42,7 +42,7 @@ const mapDispatchToProps = dispatch =>
     {
       updateChallengeMeta,
       challengeMounted,
-      updateProjectFormValues,
+      updateSolutionFormValues,
       openCompletionModal: () => openModal('completion')
     },
     dispatch
@@ -61,7 +61,7 @@ const propTypes = {
     challengeMeta: PropTypes.object
   }),
   updateChallengeMeta: PropTypes.func.isRequired,
-  updateProjectFormValues: PropTypes.func.isRequired
+  updateSolutionFormValues: PropTypes.func.isRequired
 };
 
 // Component
diff --git a/cypress/integration/learn/index.js b/cypress/integration/learn/index.js
index 2d8daf7489e..306d2f674aa 100644
--- a/cypress/integration/learn/index.js
+++ b/cypress/integration/learn/index.js
@@ -14,7 +14,11 @@ const superBlockNames = [
   'Front End Libraries',
   'Data Visualization',
   'APIs and Microservices',
-  'Information Security and Quality Assurance',
+  'Quality Assurance',
+  'Scientific Computing with Python',
+  'Data Analysis with Python',
+  'Information Security',
+  'Machine Learning with Python',
   'Coding Interview Prep'
 ];
 
@@ -36,7 +40,7 @@ describe('Learn Landing page', function() {
       const superBlocks = document.querySelectorAll(
         `${selectors.challengeMap} > ul > li`
       );
-      expect(superBlocks).to.have.length(7);
+      expect(superBlocks).to.have.length(11);
 
       superBlocks.forEach((superBlock, idx) => {
         expect(superBlock.innerText).to.have.string(superBlockNames[idx]);