Load project into editor when app starts

src/components/crash-message/crash-message.css

@@ -26,3 +26,7 @@
     font-size: 0.875rem;
     cursor: pointer;
 }
+
+.text-link {
+    color: white;
+}

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

@@ -5,6 +5,7 @@ import {FormattedMessage} from 'react-intl';
 
 import styles from './crash-message.css';
 import reloadIcon from './reload.svg';
+import { BASE_API_URL } from '../../utils/constants.js';
 
 const CrashMessage = props => (
     <div className={styles.crashWrapper}>
@@ -20,15 +21,6 @@ const CrashMessage = props => (
                     id="gui.crashMessage.label"
                 />
             </h2>
-            <p>
-                <FormattedMessage
-                    defaultMessage={'We are so sorry, but it looks like Scratch has crashed. This bug has been' +
-                        ' automatically reported to the Scratch Team. Please refresh your page to try' +
-                        ' again.'}
-                    description="Message to inform the user that page has crashed."
-                    id="gui.crashMessage.description"
-                />
-            </p>
             {props.eventId && (
                 <p>
                     <FormattedMessage
@@ -41,16 +33,7 @@ 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>
+            <a href={`${BASE_API_URL}/`} className={styles.textLink}>Go back to project list</a>
         </Box>
     </div>
 );

src/components/menu-bar/menu-bar.jsx

@@ -547,8 +547,7 @@ class MenuBar extends React.Component {
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
                     <Divider className={classNames(styles.divider)} /> */}
-                    {/* hide this code for first release */}
-                    {/* {this.props.canEditTitle ? (
+                    {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
                             <MenuBarItemTooltip
                                 enable
@@ -567,7 +566,7 @@ class MenuBar extends React.Component {
                             userId={this.props.authorId}
                             username={this.props.authorUsername}
                         />
-                    ) : null)} */}
+                    ) : null)}
                     {/* hide share button for first release */}
                     {/* <div className={classNames(styles.menuBarItem)}>
                         {this.props.canShare ? (

src/lib/hash-parser-hoc.jsx

@@ -23,6 +23,10 @@ const HashParserHOC = function (WrappedComponent) {
         }
         componentDidMount () {
             window.addEventListener('hashchange', this.handleHashChange);
+            // FIXME: replace mock projectId with real one
+            window.addEventListener('load', () => {
+                window.location.hash = '/project/1'
+            });
             this.handleHashChange();
         }
         componentDidUpdate (prevProps) {
@@ -37,7 +41,7 @@ const HashParserHOC = function (WrappedComponent) {
             window.removeEventListener('hashchange', this.handleHashChange);
         }
         handleHashChange () {
-            const hashMatch = window.location.hash.match(/#(\d+)/);
+            const hashMatch = window.location.hash.match(/\/(\d+)$/);
             const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];
             this.props.setProjectId(hashProjectId.toString());
         }

src/lib/project-fetcher-hoc.jsx

@@ -131,7 +131,7 @@ const ProjectFetcherHOC = function (WrappedComponent) {
     };
     ProjectFetcherComponent.defaultProps = {
         assetHost: 'https://assets.scratch.mit.edu',
-        projectHost: 'https://projects.scratch.mit.edu'
+        projectHost: 'http://localhost:3000/ccm/scratch-api/projects'
     };
 
     const mapStateToProps = state => ({

src/lib/project-saver-hoc.jsx

@@ -226,25 +226,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
             // serialized project refers to a newer asset than what
             // we just finished saving).
             const savedVMState = this.props.vm.toJSON();
-            return Promise.all(this.props.vm.assets
-                .filter(asset => !asset.clean)
-                .map(
-                    asset => storage.store(
-                        asset.assetType,
-                        asset.dataFormat,
-                        asset.data,
-                        asset.assetId
-                    ).then(response => {
-                        // Asset servers respond with {status: ok} for successful POSTs
-                        if (response.status !== 'ok') {
-                            // Errors include a `code` property, e.g. "Forbidden"
-                            return Promise.reject(response.code);
-                        }
-                        asset.clean = true;
-                    })
-                )
-            )
-                .then(() => this.props.onUpdateProjectData(projectId, savedVMState, requestParams))
+            return this.props.onUpdateProjectData(projectId, savedVMState, requestParams, this.props.reduxProjectTitle)
                 .then(response => {
                     this.props.onSetProjectUnchanged();
                     const id = response.id.toString();

src/lib/save-project-to-server.js

@@ -1,6 +1,7 @@
 import queryString from 'query-string';
 import xhr from 'xhr';
 import storage from '../lib/storage';
+import { BASE_API_URL } from '../utils/constants';
 
 /**
  * Save a project JSON to the project server.
@@ -14,14 +15,18 @@ import storage from '../lib/storage';
  * @property {?string} params.title the title of the project.
  * @return {Promise} A promise that resolves when the network request resolves.
  */
-export default function (projectId, vmState, params) {
+export default function (projectId, vmState, params, projectTitle) {
     const opts = {
-        body: vmState,
+        body: JSON.stringify({
+            file: vmState,
+            name: projectTitle,
+        }),
         // If we set json:true then the body is double-stringified, so don't
+        // FIXME: pass token to authorization header
         headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer 123`
         },
-        withCredentials: true
     };
     const creatingProject = projectId === null || typeof projectId === 'undefined';
     const queryParams = {};
@@ -39,7 +44,7 @@ export default function (projectId, vmState, params) {
     } else {
         Object.assign(opts, {
             method: 'put',
-            url: `${storage.projectHost}/${projectId}${qs}`
+            url: `${BASE_API_URL}/projects/${projectId}`
         });
     }
     return new Promise((resolve, reject) => {

src/playground/render-gui.jsx

@@ -78,7 +78,7 @@ export default appTarget => {
                 backpackVisible
                 showComingSoon
                 backpackHost={backpackHost}
-                canSave={false}
+                canSave={true}
                 onClickLogo={onClickLogo}
             />,
         appTarget);

src/utils/constants.js

@@ -0,0 +1 @@
+export const BASE_API_URL = "http://adventure-lab-cms.docker.amazee.io/md/api";