From 25ebff3ca843399ee924416d3429c1e8bf967949 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 13 Dec 2024 18:01:48 +0100
Subject: [PATCH] fix: separate saving logic from render logic (#57516)

---
 client/src/redux/save-challenge-saga.js       |  8 ++---
 .../templates/Challenges/classic/editor.tsx   |  9 ++---
 .../Challenges/components/reset-modal.tsx     |  6 ++--
 .../Challenges/components/tool-panel.tsx      | 33 ++++++++-----------
 shared/config/challenge-types.ts              |  4 +++
 5 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/client/src/redux/save-challenge-saga.js b/client/src/redux/save-challenge-saga.js
index f62c801246b..d62ed808524 100644
--- a/client/src/redux/save-challenge-saga.js
+++ b/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);
 
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index ed00998f34a..6832dbd38d0 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/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
diff --git a/client/src/templates/Challenges/components/reset-modal.tsx b/client/src/templates/Challenges/components/reset-modal.tsx
index 7c8d451b3d4..6aa1e72a46f 100644
--- a/client/src/templates/Challenges/components/reset-modal.tsx
+++ b/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>
diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx
index e59f7479cdf..47a2151853c 100644
--- a/client/src/templates/Challenges/components/tool-panel.tsx
+++ b/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'
               )}
diff --git a/shared/config/challenge-types.ts b/shared/config/challenge-types.ts
index 52304365436..2968acb9bc2 100644
--- a/shared/config/challenge-types.ts
+++ b/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;