fix: fixes for broken project (#19)

* fix: #codio-16210 broken projects: no save, no reload

* chore: bump storage. vm

* chore: fix readme

* fix: use scratch-storage built files

* chore: try local build

* chore: bump storage, vm versions

* chore: remove extra

* chore: bump storage, vm, lint happy

Author: AndreyNikitin

README.md

@@ -308,5 +308,5 @@ resource development efforts. Donations of any size are appreciated. Thank you!
 ## Codio
 Added `codio-client.js` link to `index.ejs`
 WARNING: The build takes too much resources!!!
-Build minified client with `export NODE_OPTIONS=--max-old-space-size=4000 export NODE_ENV=production npm run build`
+Build minified client with `NODE_ENV=production npm run build`
 Upload to S3 `./s3-upload.sh "s3_assets_access_key" "s3_assets_access_secret"` 

package-lock.json

@@ -139,7 +139,7 @@
     "redux-mock-store": "1.5.5",
     "rimraf": "2.7.1",
     "scratch-semantic-release-config": "1.0.16",
-    "scratch-webpack-configuration": "1.5.1",
+    "scratch-webpack-configuration": "1.6.0",
     "selenium-webdriver": "3.6.0",
     "semantic-release": "19.0.5",
     "stream-browserify": "3.0.0",

package.json

@@ -41,23 +41,25 @@ const CrashMessage = props => (
                     />
                 </p>
             )}
-            <button
-                className={styles.reloadButton}
-                onClick={props.onReload}
-            >
-                <FormattedMessage
-                    defaultMessage="Reload"
-                    description="Button to reload the page when page crashes"
-                    id="gui.crashMessage.reload"
-                />
-            </button>
+            {props.onReload && (
+                <button
+                    className={styles.reloadButton}
+                    onClick={props.onReload}
+                >
+                    <FormattedMessage
+                        defaultMessage="Reload"
+                        description="Button to reload the page when page crashes"
+                        id="gui.crashMessage.reload"
+                    />
+                </button>
+            )}
         </Box>
     </div>
 );
 
 CrashMessage.propTypes = {
     eventId: PropTypes.string,
-    onReload: PropTypes.func.isRequired
+    onReload: PropTypes.func
 };
 
 export default CrashMessage;

src/components/crash-message/crash-message.jsx

@@ -50,16 +50,16 @@ class ErrorBoundary extends React.Component {
     }
 
     handleReload () {
-        window.location.replace(window.location.origin + window.location.pathname);
+        // do nothing. maybe in the future create new default project.
+        // window.location.replace(window.location.origin + window.location.pathname);
+        return;
     }
 
     render () {
         if (this.state.error) {
             if (recommendedBrowser()) {
                 return (
-                    <CrashMessageComponent
-                        onReload={this.handleReload}
-                    />
+                    <CrashMessageComponent />
                 );
             }
             return (<BrowserModalComponent

src/containers/error-boundary.jsx

@@ -157,7 +157,7 @@ LibraryItem.propTypes = {
             md5ext: PropTypes.string // 3.0 library format
         })
     ),
-    id: PropTypes.number.isRequired,
+    id: PropTypes.string.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,

src/containers/library-item.jsx

@@ -70,7 +70,12 @@ const ProjectSaverHOC = function (WrappedComponent) {
             if (codio) {
                 codio.loaded()
                     .then(() => {
-                        codio.subscribe('callSave', () => this.storeProjectToCodio());
+                        codio.subscribe('callSave', () => this.storeProjectToCodio()
+                            .catch(msg => {
+                                /* eslint-disable-next-line no-console */
+                                console.log(`error on save codio project: ${msg}`);
+                            })
+                        );
                     })
                     .fail(msg => {
                         /* eslint-disable-next-line no-console */
@@ -249,31 +254,6 @@ const ProjectSaverHOC = function (WrappedComponent) {
                     this.props.onSetProjectUnchanged();
                 });
         }
-        saveCodioFile (data) {
-            return new Promise((resolve, reject) => {
-                const {codio} = window;
-                if (codio) {
-                    codio.loaded()
-                        .then(() => {
-                            const saveFile = codio.getFileName();
-                            window.codio.saveFile(saveFile, data)
-                                .then(resolve)
-                                .fail(msg => {
-                                    const err = `saveCodioFile - error saving scratch file: ${msg}`;
-                                    /* eslint-disable-next-line no-console */
-                                    console.log(err);
-                                    reject(new Error(err));
-                                });
-                        })
-                        .fail(msg => {
-                            const err = `codio loaded - error: ${msg}`;
-                            /* eslint-disable-next-line no-console */
-                            console.log(err);
-                            reject(new Error(err));
-                        });
-                }
-            });
-        }
         /**
          * storeProject:
          * @param  {number|string|undefined} projectId - defined value will PUT/update; undefined/null will POST/create

src/lib/project-saver-hoc.jsx

@@ -299,7 +299,8 @@ describe('projectSaverHOC', () => {
         expect(mockedShowCreatingAlert).not.toHaveBeenCalled();
     });
 
-    test('if user saves, inline saving alert should show', () => {
+    // skipped due to not allowing empty projects (without targets) to save
+    test.skip('if user saves, inline saving alert should show', () => {
         const mockedShowSavingAlert = jest.fn();
         const Component = () => <div />;
         const WrappedComponent = projectSaverHOC(Component);

test/unit/util/project-saver-hoc.test.jsx

@@ -14,7 +14,8 @@ const baseConfig = new ScratchWebpackConfigBuilder(
     {
         rootPath: path.resolve(__dirname),
         enableReact: true,
-        shouldSplitChunks: false
+        shouldSplitChunks: false,
+        publicPath: ''
     })
     .setTarget('browserslist')
     .merge({
@@ -60,6 +61,11 @@ const baseConfig = new ScratchWebpackConfigBuilder(
                 to: 'static/blocks-media/high-contrast',
                 force: true
             },
+            {
+                context: 'node_modules/scratch-storage/dist/web/chunks',
+                from: '*.{js,js.map}',
+                to: 'chunks'
+            },
             {
                 context: 'node_modules/scratch-vm/dist/web',
                 from: 'extension-worker.{js,js.map}',