fix(client): update invalid stored code (#44437)

* fix: repair invalid stored code

client/src/templates/Challenges/redux/code-storage-epic.js

@@ -121,8 +121,6 @@ function saveCodeEpic(action$, state$) {
   );
 }
 
-// TODO: Ignored temporarily while we update the code storage UI
-// eslint-disable-next-line no-unused-vars
 function loadCodeEpic(action$, state$) {
   return action$.pipe(
     ofType(actionTypes.challengeMounted),
@@ -143,16 +141,45 @@ function loadCodeEpic(action$, state$) {
       if (codeFound && isFilesAllPoly(codeFound)) {
         finalFiles = challengeFiles.reduce((challengeFiles, challengeFile) => {
           let foundChallengeFile = {};
+          // TODO: after sufficient time, say 6 months from this commit, we can
+          // assume that the majority of users have revisited any pages with old
+          // stored code. At this point we can remove everything related to
+          // indexjsCode.
+          let indexjsCode = null;
           if (Array.isArray(codeFound)) {
             foundChallengeFile = codeFound.find(
               x => x.fileKey === challengeFile.fileKey
             );
+            indexjsCode = codeFound.find(x => x.fileKey === 'indexjs');
           } else {
             // TODO: After sufficient time, remove parsing of old code-storage format
             // This was pushed to production with https://github.com/freeCodeCamp/freeCodeCamp/pull/43023
             foundChallengeFile = codeFound[challengeFile.fileKey];
+            indexjsCode = codeFound['indexjs'];
+          }
+          let isCodeFound;
+          // Fix the format of the old file
+          if (indexjsCode) {
+            indexjsCode.fileKey = 'scriptjs';
+            delete indexjsCode.key;
+            indexjsCode.history = ['script.js'];
+            indexjsCode.name = 'script';
+            indexjsCode.path = 'script.js';
+          }
+
+          if (foundChallengeFile) {
+            isCodeFound = Object.keys(foundChallengeFile).length > 0;
+          } else if (indexjsCode) {
+            isCodeFound = Object.keys(indexjsCode).length > 0;
+            foundChallengeFile = indexjsCode;
+            // Repair the store, by replacing old style code with the repaired
+            // file
+            store.set(id, [indexjsCode]);
+          } else {
+            // The stored code is neither old code nor new, so we do not know
+            // how to handle it.  The safest option is to delete it.
+            store.remove(id);
           }
-          const isCodeFound = Object.keys(foundChallengeFile).length > 0;
           return [
             ...challengeFiles,
             {
@@ -175,4 +202,4 @@ function loadCodeEpic(action$, state$) {
   );
 }
 
-export default combineEpics(saveCodeEpic, clearCodeEpic);
+export default combineEpics(saveCodeEpic, loadCodeEpic, clearCodeEpic);

cypress/integration/learn/challenges/code-storage.js

@@ -19,18 +19,17 @@ describe('Challenge with editor', function () {
     cy.get('@editor', { timeout: 10000 }).contains(editorContents);
   });
 
-  // DISABLED until we update the local storage UI
+  it('renders code from localStorage after "Ctrl + S"', () => {
-  // it('renders code from localStorage after "Ctrl + S"', () => {
+    const editorContents = `<h1>Hello</h1>`;
-  //   const editorContents = `<h1>Hello</h1>`;
+    cy.get(selectors.editor).as('editor').contains(editorContents);
-  //   cy.get(selectors.editor).as('editor').contains(editorContents);
+    cy.get('@editor')
-  //   cy.get('@editor')
+      .click()
-  //     .click()
+      .focused()
-  //     .focused()
+      .type(`{movetoend}<h1>Hello World</h1>{ctrl+s}`);
-  //     .type(`{movetoend}<h1>Hello World</h1>{ctrl+s}`);
+    cy.contains("Saved! Your code was saved to your browser's local storage.");
-  //   cy.contains("Saved! Your code was saved to your browser's local storage.");
+    cy.reload();
-  //   cy.reload();
+    cy.get('@editor', { timeout: 10000 }).contains(
-  //   cy.get('@editor', { timeout: 10000 }).contains(
+      '<h1>Hello</h1><h1>Hello World</h1>'
-  //     '<h1>Hello</h1><h1>Hello World</h1>'
+    );
-  //   );
+  });
-  // });
 });