Merge pull request #2290 from paulkaplan/project-not-available

Add "project not available" view for when project body cannot be loaded

src/components/not-available/not-available.jsx

@@ -0,0 +1,24 @@
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+
+require('./not-available.scss');
+
+const ProjectNotAvailable = () => (
+    <div className="not-available-outer">
+        <FlexRow className="inner">
+            <img
+                className="not-available-image"
+                src="/images/404-giga.png"
+            />
+            <h1>
+                <FormattedMessage id="general.notAvailableHeadline" />
+            </h1>
+            <p>
+                <FormattedMessage id="general.notAvailableSubtitle" />
+            </p>
+        </FlexRow>
+    </div>
+);
+
+module.exports = ProjectNotAvailable;

src/components/not-available/not-available.scss

@@ -0,0 +1,5 @@
+@import "../../colors";
+
+.not-available-image {
+    padding: 5rem 0 2rem;
+}

src/l10n.json

@@ -86,6 +86,8 @@
     "general.wiki": "Scratch Wiki",
     "general.copyLink": "Copy Link",
     "general.report": "Report",
+    "general.notAvailableHeadline": "Whoops! Our server is Scratch'ing its head",
+    "general.notAvailableSubtitle": "We couldn't find the page you're looking for. Check to make sure you've typed the url correctly.",
 
     "general.all": "All",
     "general.animations": "Animations",

src/redux/preview.js

@@ -38,7 +38,8 @@ module.exports.getInitialState = () => ({
     projectStudios: [],
     curatedStudios: [],
     currentStudioIds: [],
-    moreCommentsToLoad: false
+    moreCommentsToLoad: false,
+    projectNotAvailable: false
 });
 
 module.exports.previewReducer = (state, action) => {
@@ -51,7 +52,8 @@ module.exports.previewReducer = (state, action) => {
         return module.exports.getInitialState();
     case 'SET_PROJECT_INFO':
         return Object.assign({}, state, {
-            projectInfo: action.info
+            projectInfo: action.info ? action.info : {},
+            projectNotAvailable: !action.info
         });
     case 'SET_REMIXES':
         return Object.assign({}, state, {
@@ -309,15 +311,16 @@ module.exports.getProjectInfo = (id, token) => (dispatch => {
         Object.assign(opts, {authentication: token});
     }
     dispatch(module.exports.setFetchStatus('project', module.exports.Status.FETCHING));
-    api(opts, (err, body) => {
+    api(opts, (err, body, response) => {
         if (err) {
             dispatch(module.exports.setFetchStatus('project', module.exports.Status.ERROR));
             dispatch(module.exports.setError(err));
             return;
         }
-        if (typeof body === 'undefined') {
+        if (typeof body === 'undefined' || response.statusCode === 404) {
             dispatch(module.exports.setFetchStatus('project', module.exports.Status.ERROR));
             dispatch(module.exports.setError('No project info'));
+            dispatch(module.exports.setProjectInfo(null));
             return;
         }
         dispatch(module.exports.setFetchStatus('project', module.exports.Status.FETCHED));

src/views/preview/presentation.jsx

@@ -25,6 +25,7 @@ const InplaceInput = require('../../components/forms/inplace-input.jsx');
 const TopLevelComment = require('./comment/top-level-comment.jsx');
 const ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
+const NotAvailable = require('../../components/not-available/not-available.jsx');
 
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
@@ -67,6 +68,7 @@ const PreviewPresentation = ({
     projectHost,
     projectId,
     projectInfo,
+    projectNotAvailable,
     remixes,
     reportOpen,
     replies,
@@ -93,6 +95,15 @@ const PreviewPresentation = ({
     onUpdate
 }) => {
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
+
+    if (projectNotAvailable) {
+        return (
+            <div className="preview">
+                <NotAvailable />
+            </div>
+        );
+    }
+
     return (
         <div className="preview">
             {canShare && !isShared && (
@@ -477,6 +488,7 @@ PreviewPresentation.propTypes = {
     projectHost: PropTypes.string,
     projectId: PropTypes.string,
     projectInfo: projectShape,
+    projectNotAvailable: PropTypes.bool,
     projectStudios: PropTypes.arrayOf(PropTypes.object),
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),

src/views/preview/preview.jsx

@@ -423,6 +423,7 @@ class Preview extends React.Component {
                         projectHost={this.props.projectHost}
                         projectId={this.state.projectId}
                         projectInfo={this.props.projectInfo}
+                        projectNotAvailable={this.props.projectNotAvailable}
                         projectStudios={this.props.projectStudios}
                         remixes={this.props.remixes}
                         replies={this.props.replies}
@@ -530,6 +531,7 @@ Preview.propTypes = {
     playerMode: PropTypes.bool,
     projectHost: PropTypes.string.isRequired,
     projectInfo: projectShape,
+    projectNotAvailable: PropTypes.bool,
     projectStudios: PropTypes.arrayOf(PropTypes.object),
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),
@@ -610,6 +612,7 @@ const mapStateToProps = state => {
         parent: state.preview.parent,
         playerMode: state.scratchGui.mode.isPlayerOnly,
         projectInfo: state.preview.projectInfo,
+        projectNotAvailable: state.preview.projectNotAvailable,
         projectStudios: state.preview.projectStudios,
         remixes: state.preview.remixes,
         replies: state.preview.replies,