fix: separate saving logic from render logic (#57516)

client/src/redux/save-challenge-saga.js

@@ -1,6 +1,6 @@
 import { call, put, select, takeEvery } from 'redux-saga/effects';
 
-import { challengeTypes } from '../../../shared/config/challenge-types';
+import { canSaveToDB } from '../../../shared/config/challenge-types';
 import { createFlashMessage } from '../components/Flash/redux';
 import { FlashMessages } from '../components/Flash/redux/flash-messages';
 import {
@@ -34,11 +34,7 @@ function* saveChallengeSaga() {
     );
   }
 
-  // only allow saving of multifileCertProject's
-  if (
-    challengeType === challengeTypes.multifileCertProject ||
-    challengeType === challengeTypes.multifilePythonCertProject
-  ) {
+  if (canSaveToDB(challengeType)) {
     const body = standardizeRequestBody({ id, challengeFiles, challengeType });
     const bodySizeInBytes = getStringSizeInBytes(body);
 

client/src/templates/Challenges/classic/editor.tsx

@@ -34,7 +34,10 @@ import {
 } from '../../../redux/prop-types';
 import { editorToneOptions } from '../../../utils/tone/editor-config';
 import { editorNotes } from '../../../utils/tone/editor-notes';
-import { challengeTypes } from '../../../../../shared/config/challenge-types';
+import {
+  canSaveToDB,
+  challengeTypes
+} from '../../../../../shared/config/challenge-types';
 import {
   executeChallenge,
   saveEditorContent,
@@ -543,9 +546,7 @@ const Editor = (props: EditorProps): JSX.Element => {
         monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_S
       ],
       run:
-        (props.challengeType === challengeTypes.multifileCertProject ||
-          props.challengeType === challengeTypes.multifilePythonCertProject) &&
-        props.isSignedIn
+        canSaveToDB(props.challengeType) && props.isSignedIn
           ? // save to database
             props.saveChallenge
           : // save to local storage

client/src/templates/Challenges/components/reset-modal.tsx

@@ -8,7 +8,7 @@ import { Button, Modal } from '@freecodecamp/ui';
 import { closeModal, resetChallenge } from '../redux/actions';
 import { isResetModalOpenSelector } from '../redux/selectors';
 import callGA from '../../../analytics/call-ga';
-import { isProjectBased } from '../../../utils/curriculum-layout';
+import { canSaveToDB } from '../../../../../shared/config/challenge-types';
 
 interface ResetModalProps {
   close: () => void;
@@ -54,7 +54,7 @@ function ResetModal({
       </Modal.Header>
       <Modal.Body alignment='center'>
         <p>
-          {isProjectBased(challengeType)
+          {canSaveToDB(challengeType)
             ? t('learn.revert-warn')
             : t('learn.reset-warn')}
         </p>
@@ -69,7 +69,7 @@ function ResetModal({
           variant='danger'
           onClick={withActions(reset, close)}
         >
-          {isProjectBased(challengeType)
+          {canSaveToDB(challengeType)
             ? t('buttons.revert-to-saved-code')
             : t('buttons.reset-lesson')}
         </Button>

client/src/templates/Challenges/components/tool-panel.tsx

@@ -6,15 +6,14 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { challengeTypes } from '../../../../../shared/config/challenge-types';
 
-import './tool-panel.css';
+import { canSaveToDB } from '../../../../../shared/config/challenge-types';
 import { openModal, executeChallenge } from '../redux/actions';
 import { challengeMetaSelector } from '../redux/selectors';
-
 import { saveChallenge } from '../../../redux/actions';
 import { isSignedInSelector } from '../../../redux/selectors';
-import { isProjectBased } from '../../../utils/curriculum-layout';
+
+import './tool-panel.css';
 
 const mapStateToProps = createSelector(
   challengeMetaSelector,
@@ -77,27 +76,21 @@ function ToolPanel({
       <Button block={true} variant='primary' onClick={handleRunTests}>
         {isMobile ? t('buttons.run') : t('buttons.run-test')}
       </Button>
-      {isSignedIn &&
-        (challengeType === challengeTypes.multifileCertProject ||
-          challengeType === challengeTypes.multifilePythonCertProject) && (
-          <>
-            <Spacer size='xxs' />
-            <Button block={true} variant='primary' onClick={saveChallenge}>
-              {isMobile ? t('buttons.save') : t('buttons.save-code')}
-            </Button>
-          </>
-        )}
+      {isSignedIn && canSaveToDB(challengeType) && (
+        <>
+          <Spacer size='xxs' />
+          <Button block={true} variant='primary' onClick={saveChallenge}>
+            {isMobile ? t('buttons.save') : t('buttons.save-code')}
+          </Button>
+        </>
+      )}
       <>
         <Spacer size='xxs' />
         <Button block={true} variant='primary' onClick={openResetModal}>
           {isMobile
-            ? t(
-                isProjectBased(challengeType)
-                  ? 'buttons.revert'
-                  : 'buttons.reset'
-              )
+            ? t(canSaveToDB(challengeType) ? 'buttons.revert' : 'buttons.reset')
             : t(
-                isProjectBased(challengeType)
+                canSaveToDB(challengeType)
                   ? 'buttons.revert-to-saved-code'
                   : 'buttons.reset-lesson'
               )}

shared/config/challenge-types.ts

@@ -143,3 +143,7 @@ export const submitTypes = {
   [generic]: 'tests',
   [lab]: 'tests'
 };
+
+export const canSaveToDB = (challengeType: number): boolean =>
+  challengeType === challengeTypes.multifileCertProject ||
+  challengeType === challengeTypes.multifilePythonCertProject;