Refactoring 'current' reducer

Author: 64json

src/backend/controllers/categories.js renamed to src/backend/controllers/algorithms.js

@@ -112,9 +112,10 @@ router.route('/:categoryKey/:algorithmKey')
     const algorithm = category.algorithms.find(algorithm => algorithm.key === algorithmKey);
     if (!algorithm) return next(new NotFoundError());
 
-    const titles = [category.name, algorithm.name];
+    const categoryName = category.name;
+    const algorithmName = algorithm.name;
     const files = algorithm.files.map(({ name, content, contributors }) => ({ name, content, contributors }));
-    res.json({ algorithm: { titles, files } });
+    res.json({ algorithm: { categoryKey, categoryName, algorithmKey, algorithmName, files } });
   });
 
-export default router;
+export default router;

src/backend/controllers/index.js

@@ -1,3 +1,3 @@
 export { default as auth } from './auth';
-export { default as categories } from './categories';
+export { default as algorithms } from './algorithms';
 export { default as tracers } from './tracers';

src/frontend/apis/index.js

@@ -56,9 +56,9 @@ const PATCH = URL => {
   });
 };
 
-const CategoryApi = {
-  getCategories: GET('/categories'),
-  getAlgorithm: GET('/categories/:categoryKey/:algorithmKey'),
+const AlgorithmApi = {
+  getCategories: GET('/algorithms'),
+  getAlgorithm: GET('/algorithms/:categoryKey/:algorithmKey'),
 };
 
 const GitHubApi = {
@@ -95,7 +95,7 @@ const TracerApi = {
 };
 
 export {
-  CategoryApi,
+  AlgorithmApi,
   GitHubApi,
   TracerApi,
 };

src/frontend/common/util.js

@@ -10,15 +10,29 @@ const extension = fileName => /(?:\.([^.]+))?$/.exec(fileName)[1];
 
 const refineGist = gist => {
   const gistId = gist.id;
-  const titles = ['Scratch Paper', gist.description];
+  const title = gist.description;
   delete gist.files['algorithm-visualizer'];
   const { login, avatar_url } = gist.owner;
   const files = Object.values(gist.files).map(file => ({
     name: file.filename,
     content: file.content,
     contributors: [{ login, avatar_url }],
   }));
-  return { gistId, titles, files, gist };
+  return { gistId, title, files, gist };
+};
+
+const getFiles = current => {
+  const { algorithm, scratchPaper } = current;
+  if (algorithm) return algorithm.files;
+  if (scratchPaper) return scratchPaper.files;
+  return [];
+};
+
+const getTitleArray = current => {
+  const { algorithm, scratchPaper } = current;
+  if (algorithm) return [algorithm.categoryName, algorithm.algorithmName];
+  if (scratchPaper) return ['Scratch Paper', scratchPaper.title];
+  return ['Algorithm Visualizer'];
 };
 
 const handleError = function (error) {
@@ -31,5 +45,7 @@ export {
   distance,
   extension,
   refineGist,
+  getFiles,
+  getTitleArray,
   handleError,
 };

src/frontend/components/App/index.jsx

@@ -17,9 +17,9 @@ import {
   ToastContainer,
   VisualizationViewer,
 } from '/components';
-import { CategoryApi, GitHubApi } from '/apis';
+import { AlgorithmApi, GitHubApi } from '/apis';
 import { actions } from '/reducers';
-import { extension, handleError, refineGist } from '/common/util';
+import { extension, getFiles, getTitleArray, 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';
@@ -49,7 +49,7 @@ class App extends React.Component {
     const accessToken = Cookies.get('access_token');
     if (accessToken) this.signIn(accessToken);
 
-    CategoryApi.getCategories()
+    AlgorithmApi.getCategories()
       .then(({ categories }) => this.props.setCategories(categories))
       .catch(handleError.bind(this));
 
@@ -65,7 +65,12 @@ class App extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     const { params } = nextProps.match;
-    const { categoryKey, algorithmKey, gistId } = nextProps.current;
+    const { algorithm, scratchPaper } = nextProps.current;
+
+    const categoryKey = algorithm && algorithm.categoryKey;
+    const algorithmKey = algorithm && algorithm.algorithmKey;
+    const gistId = scratchPaper && scratchPaper.gistId;
+
     if (params.categoryKey !== categoryKey ||
       params.algorithmKey !== algorithmKey ||
       params.gistId !== gistId) {
@@ -135,13 +140,14 @@ class App extends React.Component {
     const { ext } = this.props.env;
     let fetchPromise = null;
     if (categoryKey && algorithmKey) {
-      fetchPromise = CategoryApi.getAlgorithm(categoryKey, algorithmKey)
-        .then(({ algorithm }) => algorithm);
+      fetchPromise = AlgorithmApi.getAlgorithm(categoryKey, algorithmKey)
+        .then(({ algorithm }) => this.props.setAlgorithm(algorithm));
     } else if (['new', 'forked'].includes(gistId)) {
       gistId = 'new';
       const language = languages.find(language => language.ext === ext);
-      fetchPromise = Promise.resolve({
-        titles: ['Scratch Paper', 'Untitled'],
+      fetchPromise = Promise.resolve(this.props.setScratchPaper({
+        gistId,
+        title: 'Untitled',
         files: [{
           name: 'README.md',
           content: SCRATCH_PAPER_MD,
@@ -151,24 +157,29 @@ class App extends React.Component {
           content: language.skeleton,
           contributors: undefined,
         }],
-      });
+      }));
     } else if (gistId) {
-      fetchPromise = GitHubApi.getGist(gistId, { timestamp: Date.now() }).then(refineGist);
+      fetchPromise = GitHubApi.getGist(gistId, { timestamp: Date.now() })
+        .then(refineGist)
+        .then(this.props.setScratchPaper);
     } else {
       fetchPromise = Promise.reject(new Error());
     }
     fetchPromise
-      .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);
+        this.props.setAlgorithm({
+          categoryName: 'Algorithm Visualizer',
+          algorithmName: 'Home',
+          files: [{
+            name: 'README.md',
+            content: README_MD,
+            contributors: [us],
+          }],
+        });
       })
       .finally(() => {
-        const { files } = this.props.current;
+        const files = getFiles(this.props.current);
         let editorTabIndex = files.findIndex(file => extension(file.name) === ext);
         if (!~editorTabIndex) editorTabIndex = files.findIndex(file => exts.includes(extension(file.name)));
         if (!~editorTabIndex) editorTabIndex = Math.min(0, files.length - 1);
@@ -182,15 +193,15 @@ class App extends React.Component {
   }
 
   handleChangeEditorTabIndex(editorTabIndex) {
-    const { files } = this.props.current;
+    const files = getFiles(this.props.current);
     if (editorTabIndex === files.length) this.handleAddFile();
     this.setState({ editorTabIndex });
     this.props.shouldBuild();
   }
 
   handleAddFile() {
     const { ext } = this.props.env;
-    const { files } = this.props.current;
+    const files = getFiles(this.props.current);
     let name = `code.${ext}`;
     let count = 0;
     while (files.some(file => file.name === name)) name = `code-${++count}.${ext}`;
@@ -210,7 +221,7 @@ class App extends React.Component {
 
   handleDeleteFile() {
     const { editorTabIndex } = this.state;
-    const { files } = this.props.current;
+    const files = getFiles(this.props.current);
     this.handleChangeEditorTabIndex(Math.min(editorTabIndex, files.length - 2));
     this.props.deleteFile(editorTabIndex);
   }
@@ -220,15 +231,15 @@ class App extends React.Component {
   }
 
   isGistSaved() {
-    const { titles, files, lastTitles, lastFiles } = this.props.current;
-    const serializeTitles = titles => JSON.stringify(titles);
+    const { scratchPaper } = this.props.current;
+    if (!scratchPaper) return true;
+    const { title, files, lastTitle, lastFiles } = scratchPaper;
     const serializeFiles = files => JSON.stringify(files.map(({ name, content }) => ({ name, content })));
-    return serializeTitles(titles) === serializeTitles(lastTitles) &&
-      serializeFiles(files) === serializeFiles(lastFiles);
+    return title === lastTitle && serializeFiles(files) === serializeFiles(lastFiles);
   }
 
   getDescription() {
-    const { files } = this.props.current;
+    const files = getFiles(this.props.current);
     const readmeFile = files.find(file => file.name === 'README.md');
     if (!readmeFile) return '';
     const groups = /^\s*# .*\n+([^\n]+)/.exec(readmeFile.content);
@@ -237,7 +248,8 @@ class App extends React.Component {
 
   render() {
     const { navigatorOpened, workspaceWeights, editorTabIndex } = this.state;
-    const { titles, files } = this.props.current;
+    const files = getFiles(this.props.current);
+    const titleArray = getTitleArray(this.props.current);
 
     const gistSaved = this.isGistSaved();
     const description = this.getDescription();
@@ -257,7 +269,7 @@ class App extends React.Component {
     return (
       <div className={styles.app}>
         <Helmet>
-          <title>{gistSaved ? '' : '(Unsaved) '}{titles.join(' - ')}</title>
+          <title>{gistSaved ? '' : '(Unsaved) '}{titleArray.join(' - ')}</title>
           <meta name="description" content={description} />
         </Helmet>
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}

src/frontend/components/Header/index.jsx

@@ -19,6 +19,7 @@ import { actions } from '/reducers';
 import { languages } from '/common/config';
 import { Button, Ellipsis, ListItem, Player } from '/components';
 import styles from './stylesheet.scss';
+import { getTitleArray } from '../../common/util';
 
 @connect(({ current, env }) => ({ current, env }), actions)
 class Header extends React.Component {
@@ -34,14 +35,15 @@ class Header extends React.Component {
 
   handleChangeTitle(e) {
     const { value } = e.target;
-    this.props.renameScratchPaper(value);
+    this.props.modifyTitle(value);
   }
 
   saveGist() {
     const { user } = this.props.env;
-    const { categoryKey, algorithmKey, gistId, titles, files, lastFiles, lastGist } = this.props.current;
+    const { scratchPaper } = this.props.current;
+    const { gistId, title, files, lastFiles, lastGist } = scratchPaper;
     const gist = {
-      description: titles[1],
+      description: title,
       files: {},
     };
     files.forEach(file => {
@@ -67,13 +69,14 @@ class Header extends React.Component {
     };
     save(gist)
       .then(refineGist)
-      .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, algorithm.gistId, algorithm.titles, algorithm.files, algorithm.gist))
+      .then(this.props.setScratchPaper)
       .then(this.props.loadScratchPapers)
       .catch(handleError.bind(this));
   }
 
   deleteGist() {
-    const { gistId } = this.props.current;
+    const { scratchPaper } = this.props.current;
+    const { gistId } = scratchPaper;
     const deletePromise = ['new', 'forked'].includes(gistId) ? Promise.resolve() : GitHubApi.deleteGist(gistId);
     deletePromise
       .then(() => this.props.loadAlgorithm({}, true))
@@ -83,7 +86,8 @@ class Header extends React.Component {
 
   render() {
     const { className, onClickTitleBar, navigatorOpened, gistSaved, file } = this.props;
-    const { gistId, titles } = this.props.current;
+    const { scratchPaper } = this.props.current;
+    const titleArray = getTitleArray(this.props.current);
     const { ext, user } = this.props.env;
 
     return (
@@ -92,12 +96,12 @@ class Header extends React.Component {
           <div className={styles.section}>
             <Button className={styles.title_bar} onClick={onClickTitleBar}>
               {
-                titles.map((title, i) => [
-                  gistId && i === 1 ?
+                titleArray.map((title, i) => [
+                  scratchPaper && i === 1 ?
                     <AutosizeInput className={styles.input_title} key={`title-${i}`} value={title}
                                    onClick={e => e.stopPropagation()} onChange={e => this.handleChangeTitle(e)} /> :
                     <Ellipsis key={`title-${i}`}>{title}</Ellipsis>,
-                  i < titles.length - 1 &&
+                  i < titleArray.length - 1 &&
                   <FontAwesomeIcon className={styles.nav_arrow} fixedWidth icon={faAngleRight} key={`arrow-${i}`} />,
                 ])
               }
@@ -106,11 +110,11 @@ class Header extends React.Component {
             </Button>
           </div>
           <div className={styles.section}>
-            <Button icon={faSave} primary disabled={!gistId || gistSaved}
+            <Button icon={faSave} primary disabled={!scratchPaper || gistSaved}
                     onClick={() => this.saveGist()}>Save</Button>
-            <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()}
+            <Button icon={faTrashAlt} primary disabled={!scratchPaper} onClick={() => this.deleteGist()}
                     confirmNeeded>Delete</Button>
-            <Button icon={faFacebook} primary disabled={['new', 'forked'].includes(gistId)}
+            <Button icon={faFacebook} primary disabled={scratchPaper && ['new', 'forked'].includes(scratchPaper.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/Navigator/index.jsx

@@ -23,16 +23,16 @@ class Navigator extends React.Component {
   }
 
   componentDidMount() {
-    const { categoryKey } = this.props.current;
-    if (categoryKey) {
-      this.toggleCategory(categoryKey, true);
+    const { algorithm } = this.props.current;
+    if (algorithm) {
+      this.toggleCategory(algorithm.categoryKey, true);
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    const { categoryKey } = nextProps.current;
-    if (categoryKey) {
-      this.toggleCategory(categoryKey, true);
+    const { algorithm } = nextProps.current;
+    if (algorithm) {
+      this.toggleCategory(algorithm.categoryKey, true);
     }
   }
 
@@ -69,8 +69,11 @@ class Navigator extends React.Component {
     const { categoriesOpened, scratchPaperOpened, query } = this.state;
     const { className, loadAlgorithm } = this.props;
     const { categories, scratchPapers } = this.props.directory;
-    const { categoryKey, algorithmKey, gistId } = this.props.current;
-    const { user } = this.props.env;
+    const { algorithm, scratchPaper } = this.props.current;
+
+    const categoryKey = algorithm && algorithm.categoryKey;
+    const algorithmKey = algorithm && algorithm.algorithmKey;
+    const gistId = scratchPaper && scratchPaper.gistId;
 
     return (
       <nav className={classes(styles.navigator, className)}>
@@ -128,4 +131,4 @@ class Navigator extends React.Component {
   }
 }
 
-export default Navigator;
+export default Navigator;