Handle errors better and fork a gist when modifying other's scratch paper

Author: 64json

src/backend/common/error.js

@@ -1,7 +1,4 @@
 class ClientError extends Error {
-  toJSON() {
-    return { name: this.constructor.name, message: this.message };
-  }
 }
 
 class NotFoundError extends ClientError {
@@ -26,4 +23,4 @@ export {
   UnauthorizedError,
   CompileError,
   RuntimeError,
-};
+};

src/backend/controllers/tracers.js

@@ -28,10 +28,8 @@ const trace = lang => (req, res, next) => {
   const { code } = req.body;
   const tempPath = getCodesPath(uuid.v4());
   fs.outputFile(path.resolve(tempPath, `Main.${lang}`), code)
-    .then(() => execute(`LANG=${lang} TEMP_PATH=${tempPath} ./bin/compile`, repoPath, { stdout: null, stderr: null })
-      .catch(error => Promise.reject(new CompileError(error.message))))
-    .then(() => execute(`LANG=${lang} TEMP_PATH=${tempPath} ./bin/run`, repoPath, { stdout: null, stderr: null })
-      .catch(error => Promise.reject(new RuntimeError(error.message))))
+    .then(() => execute(`LANG=${lang} TEMP_PATH=${tempPath} ./bin/compile`, repoPath, { stdout: null, stderr: null }))
+    .then(() => execute(`LANG=${lang} TEMP_PATH=${tempPath} ./bin/run`, repoPath, { stdout: null, stderr: null }))
     .then(() => res.sendFile(path.resolve(tempPath, 'traces.json')))
     .catch(next)
     .finally(() => fs.remove(tempPath));

src/backend/index.js

@@ -31,8 +31,8 @@ app.use((err, req, res, next) => {
   ];
   const [, status] = statusMap.find(([Error]) => err instanceof Error);
   res.status(status);
-  res.json(err);
+  res.send(err.message);
   console.error(err);
 });
 
-export default app;
+export default app;

src/frontend/apis/index.js

@@ -1,10 +1,13 @@
 import Promise from 'bluebird';
 import axios from 'axios';
-import { RuntimeError } from '/common/error';
 
 axios.interceptors.response.use(
   response => response.data,
-  error => Promise.reject(error.response.data),
+  error => {
+    const { data } = error.response;
+    const message = typeof data === 'string' ? data : JSON.stringify(data);
+    return Promise.reject(new Error(message));
+  },
 );
 
 const request = (url, process) => {
@@ -66,6 +69,7 @@ const GitHubApi = {
   editGist: PATCH('https://api.github.com/gists/:id'),
   getGist: GET('https://api.github.com/gists/:id'),
   deleteGist: DELETE('https://api.github.com/gists/:id'),
+  forkGist: POST('https://api.github.com/gists/:id/forks'),
 };
 
 let jsWorker = null;
@@ -83,7 +87,7 @@ const TracerApi = {
     if (jsWorker) jsWorker.terminate();
     jsWorker = new Worker('/api/tracers/js');
     jsWorker.onmessage = e => resolve(e.data);
-    jsWorker.onerror = e => reject(new RuntimeError(e.message));
+    jsWorker.onerror = reject;
     jsWorker.postMessage(code);
   }),
   cpp: POST('/tracers/cpp'),

src/frontend/common/error.js

@@ -18,12 +18,18 @@ const refineGist = gist => {
     content: file.content,
     contributors: [{ login, avatar_url }],
   }));
-  return { gistId, titles, files };
+  return { gistId, titles, files, gist };
+};
+
+const handleError = function (error) {
+  console.error(error);
+  this.props.showErrorToast(error.message);
 };
 
 export {
   classes,
   distance,
   extension,
   refineGist,
-};
+  handleError,
+};

src/frontend/common/util.js

@@ -19,7 +19,7 @@ import {
 } from '/components';
 import { CategoryApi, GitHubApi } from '/apis';
 import { actions } from '/reducers';
-import { extension, refineGist } from '/common/util';
+import { extension, handleError, refineGist } from '/common/util';
 import { exts, languages, us } from '/common/config';
 import { README_MD, SCRATCH_PAPER_MD } from '/skeletons';
 import styles from './stylesheet.scss';
@@ -51,7 +51,7 @@ class App extends React.Component {
 
     CategoryApi.getCategories()
       .then(({ categories }) => this.props.setCategories(categories))
-      .catch(this.props.showErrorToast);
+      .catch(handleError.bind(this));
 
     window.onbeforeunload = () => this.isGistSaved() ? undefined : 'Changes you made will not be saved.';
   }
@@ -90,6 +90,7 @@ class App extends React.Component {
       .then(user => {
         const { login, avatar_url } = user;
         this.props.setUser({ login, avatar_url });
+        Cookies.set('login', login);
       })
       .then(() => this.loadScratchPapers())
       .catch(() => this.signOut());
@@ -98,7 +99,10 @@ class App extends React.Component {
   signOut() {
     Cookies.remove('access_token');
     GitHubApi.auth(undefined)
-      .then(() => this.props.setUser(undefined))
+      .then(() => {
+        this.props.setUser(undefined);
+        Cookies.remove('login');
+      })
       .then(() => this.props.setScratchPapers([]));
   }
 
@@ -122,7 +126,7 @@ class App extends React.Component {
     });
     return paginateGists()
       .then(scratchPapers => this.props.setScratchPapers(scratchPapers))
-      .catch(this.props.showErrorToast);
+      .catch(handleError.bind(this));
   }
 
   loadAlgorithm({ categoryKey, algorithmKey, gistId }, forceLoad = false) {
@@ -133,7 +137,8 @@ class App extends React.Component {
     if (categoryKey && algorithmKey) {
       fetchPromise = CategoryApi.getAlgorithm(categoryKey, algorithmKey)
         .then(({ algorithm }) => algorithm);
-    } else if (gistId === 'new') {
+    } else if (['new', 'forked'].includes(gistId)) {
+      gistId = 'new';
       const language = languages.find(language => language.ext === ext);
       fetchPromise = Promise.resolve({
         titles: ['Scratch Paper', 'Untitled'],
@@ -153,12 +158,15 @@ class App extends React.Component {
       fetchPromise = Promise.reject(new Error());
     }
     fetchPromise
-      .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, gistId, algorithm.titles, algorithm.files))
-      .catch(() => this.props.setCurrent(undefined, undefined, undefined, ['Algorithm Visualizer'], [{
-        name: 'README.md',
-        content: README_MD,
-        contributors: [us],
-      }]))
+      .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, gistId, algorithm.titles, algorithm.files, algorithm.gist))
+      .catch(error => {
+        if (error.message) handleError.bind(this)(error);
+        this.props.setCurrent(undefined, undefined, undefined, ['Algorithm Visualizer'], [{
+          name: 'README.md',
+          content: README_MD,
+          contributors: [us],
+        }], undefined);
+      })
       .finally(() => {
         const { files } = this.props.current;
         let editorTabIndex = files.findIndex(file => extension(file.name) === ext);

src/frontend/components/App/index.jsx

@@ -14,7 +14,7 @@ import faSave from '@fortawesome/fontawesome-free-solid/faSave';
 import faFacebook from '@fortawesome/fontawesome-free-brands/faFacebook';
 import faStar from '@fortawesome/fontawesome-free-solid/faStar';
 import { GitHubApi } from '/apis';
-import { classes, refineGist } from '/common/util';
+import { classes, handleError, refineGist } from '/common/util';
 import { actions } from '/reducers';
 import { languages } from '/common/config';
 import { Button, Ellipsis, ListItem, Player } from '/components';
@@ -38,7 +38,8 @@ class Header extends React.Component {
   }
 
   saveGist() {
-    const { categoryKey, algorithmKey, gistId, titles, files, lastFiles } = this.props.current;
+    const { user } = this.props.env;
+    const { categoryKey, algorithmKey, gistId, titles, files, lastFiles, lastGist } = this.props.current;
     const gist = {
       description: titles[1],
       files: {},
@@ -56,21 +57,28 @@ class Header extends React.Component {
     gist.files['algorithm-visualizer'] = {
       content: 'https://algorithm-visualizer.org/',
     };
-    const savePromise = gistId === 'new' ? GitHubApi.createGist(gist) : GitHubApi.editGist(gistId, gist);
-    savePromise
+    const save = gist => {
+      if (!user) return Promise.reject(new Error('Sign In Required'));
+      if (gistId === 'new') return GitHubApi.createGist(gist);
+      if (gistId === 'forked') {
+        return GitHubApi.forkGist(lastGist.id).then(forkedGist => GitHubApi.editGist(forkedGist.id, gist));
+      }
+      return GitHubApi.editGist(gistId, gist);
+    };
+    save(gist)
       .then(refineGist)
-      .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, algorithm.gistId, algorithm.titles, algorithm.files))
+      .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, algorithm.gistId, algorithm.titles, algorithm.files, algorithm.gist))
       .then(this.props.loadScratchPapers)
-      .catch(this.props.showErrorToast);
+      .catch(handleError.bind(this));
   }
 
   deleteGist() {
     const { gistId } = this.props.current;
-    const deletePromise = gistId === 'new' ? Promise.resolve() : GitHubApi.deleteGist(gistId);
+    const deletePromise = ['new', 'forked'].includes(gistId) ? Promise.resolve() : GitHubApi.deleteGist(gistId);
     deletePromise
       .then(() => this.props.loadAlgorithm({}, true))
       .then(this.props.loadScratchPapers)
-      .catch(this.props.showErrorToast);
+      .catch(handleError.bind(this));
   }
 
   render() {
@@ -102,7 +110,7 @@ class Header extends React.Component {
                     onClick={() => this.saveGist()}>Save</Button>
             <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()}
                     confirmNeeded>Delete</Button>
-            <Button icon={faFacebook} primary disabled={gistId === 'new'}
+            <Button icon={faFacebook} primary disabled={['new', 'forked'].includes(gistId)}
                     href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`}>Share</Button>
             <Button icon={faExpandArrowsAlt} primary
                     onClick={() => this.handleClickFullScreen()}>Fullscreen</Button>

src/frontend/components/Header/index.jsx

@@ -7,13 +7,11 @@ import faChevronLeft from '@fortawesome/fontawesome-free-solid/faChevronLeft';
 import faChevronRight from '@fortawesome/fontawesome-free-solid/faChevronRight';
 import faPause from '@fortawesome/fontawesome-free-solid/faPause';
 import faWrench from '@fortawesome/fontawesome-free-solid/faWrench';
-import { classes, extension } from '/common/util';
+import { classes, extension, handleError } from '/common/util';
 import { TracerApi } from '/apis';
-import { CompileError } from '/common/error';
 import { actions } from '/reducers';
-import { Button } from '/components';
+import { Button, ProgressBar } from '/components';
 import styles from './stylesheet.scss';
-import ProgressBar from '../ProgressBar';
 
 @connect(({ player }) => ({ player }), actions)
 class Player extends React.Component {
@@ -73,10 +71,10 @@ class Player extends React.Component {
     const ext = extension(file.name);
     (ext in TracerApi ?
       TracerApi[ext]({ code: file.content }) :
-      Promise.reject(new CompileError('Language Not Supported')))
+      Promise.reject(new Error('Language Not Supported')))
       .then(traces => this.reset(traces))
       .then(() => this.next())
-      .catch(error => this.handleError(error))
+      .catch(handleError.bind(this))
       .finally(() => this.setState({ building: false }));
   }
 
@@ -117,11 +115,6 @@ class Player extends React.Component {
     return true;
   }
 
-  handleError(error) {
-    console.error(error);
-    this.props.showErrorToast({ name: error.name, message: error.message });
-  }
-
   handleChangeInterval(interval) {
     this.setState({ interval });
   }

src/frontend/components/Player/index.jsx

@@ -13,7 +13,6 @@ class ProgressBar extends React.Component {
 
   handleMouseDown(e) {
     this.target = e.target;
-    console.log(this.target)
     this.handleMouseMove(e);
     document.addEventListener('mousemove', this.handleMouseMove);
     document.addEventListener('mouseup', this.handleMouseUp);