Organize source code files

package.json

@@ -6,6 +6,9 @@
   "devDependencies": {
     "react-scripts": "0.9.0"
   },
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
   "dependencies": {
     "bootstrap": "^3.3.7",
     "clipboard": "^1.6.1",

src/LyricsEditor.js → src/components/lyrics/editor/index.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-import './LyricsPane.css';
+import '../lyrics.css';
 
-import {CustomVerse} from './verse.js';
+import {CustomVerse} from '../../../utils/verse.js';
 
 class LyricsEditor extends Component {
 

src/LyricsPane.js → src/components/lyrics/pane/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import './LyricsPane.css';
+import '../lyrics.css';
 
-import Word from './Word.js';
-import { NOINDEX } from './constants.js';
+import Word from '../../word/';
+import { NOINDEX } from '../../../constants';
 
 /** Shows the entire current verse in a big multi-column block. Not responsible
  * for the editing view. */

src/LyricsPorthole.js → src/components/lyrics/porthole/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import './LyricsPorthole.css';
+import './style.css';
 
 
 class LyricsPorthole extends Component {

src/DummyMatrix.js → src/components/matrix/DummyMatrix.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import './Matrix.css';
+import './style.css';
 
 class DummyMatrix extends Component {
 

src/Matrix.js → src/components/matrix/index.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import { hsluvToHex } from 'hsluv';
 import { saveAs } from 'file-saver';
 
-import './Matrix.css';
+import './style.css';
 
-import {STOPWORDS, NOINDEX, MODE} from './constants.js';
-import config from './config.js';
+import {STOPWORDS, NOINDEX, MODE} from '../../constants.js';
+import config from '../../config.js';
 
 // TODO: colormap docs (https://www.npmjs.com/package/colormap) say that n>10
 // should be enough divisions for any colormap, but using the 'warm' colormap

src/SongSelector.js → src/components/song-selector/index.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import {hashHistory} from 'react-router';
 
-import './SongSelector.css';
+import './style.css';
 
-import {CUSTOM_SLUG} from './constants.js';
-import { GROUPED_CANS } from './canned.js';
-import CANNED_SONGS, { ORDERED_CATEGORIES } from './canned-data.js';
-import {CannedVerse} from './verse.js';
+import {CUSTOM_SLUG} from '../../constants';
+import { GROUPED_CANS } from '../../utils/canned';
+import CANNED_SONGS, { ORDERED_CATEGORIES } from '../../utils/canned.data';
+import {CannedVerse} from '../../utils/verse';
 
 
 class SongSelector extends Component {

src/Songsim.js → src/components/songsim/index.jsx

@@ -5,23 +5,23 @@ import JSZip from 'jszip';
 import { hashHistory } from 'react-router';
 import browser from 'detect-browser';
 
-import './Songsim.css';
+import './style.css';
 
-import LyricsPorthole from './LyricsPorthole.js';
-import Toolbox from './Toolbox';
-import Matrix from './Matrix.js';
-import { Diagonal } from './utils.js';
-import DummyMatrix from './DummyMatrix.js';
-import LyricsPane from './LyricsPane.js';
-import SongSelector from './SongSelector.js';
-import LyricsEditor from './LyricsEditor.js';
-import {CustomVerse, CannedVerse} from './verse.js';
-import { MODE, CUSTOM_SLUG, NOINDEX } from './constants.js';
-import { LANDING_CANNED } from './canned.js';
-import LANDING_LYRICS from './landing_lyrics.js';
-import config from './config.js';
-import DBHelper from './firebasehelper.js';
-import CANNED_SONGS from './canned-data.js';
+import LyricsPorthole from '../lyrics/porthole';
+import Toolbox from '../toolbox';
+import Matrix from '../matrix';
+import { Diagonal } from '../../utils';
+import DummyMatrix from '../matrix/DummyMatrix';
+import LyricsPane from '../lyrics/pane';
+import SongSelector from '../song-selector';
+import LyricsEditor from '../lyrics/editor';
+import {CustomVerse, CannedVerse} from '../../utils/verse';
+import { MODE, CUSTOM_SLUG, NOINDEX } from '../../constants';
+import { LANDING_CANNED } from '../../utils/canned';
+import LANDING_LYRICS from '../../utils/landing-lyrics';
+import config from '../../config';
+import DBHelper from '../../utils/firebasehelper';
+import CANNED_SONGS from '../../utils/canned.data';
 
 const MOBILE_THRESH = 768;
 

src/Toolbox.js → src/components/toolbox/index.jsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import Clipboard from 'clipboard';
 
-import './Toolbox.css';
+import './style.css';
 
-import config from './config.js';
-import {MODE, MODE_TOOLTIPS} from './constants.js';
+import config from '../../config';
+import {MODE, MODE_TOOLTIPS} from '../../constants';
 
 // TODO: is this really the orthodox way to do this? :/
 new Clipboard('#perma');

src/Word.js → src/components/word/index.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-import {NOINDEX} from './constants.js';
+import {NOINDEX} from '../../constants';
 
-import './Word.css';
+import './style.css';
 
 
 class Word extends Component {

src/config.js

@@ -1,9 +1,9 @@
 import {MODE} from './constants.js';
 
-var config = {
+const config = {
   alleys: true, 
   default_mode: MODE.vanilla,
-  debug: false,
+  debug: true,
   exportSVGEnabled: true,
   checkerboard: true,
   rect_saturation: 100, // range [0-100]

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import About from './About.js';
-import Gallery from './Gallery.js';
-import Songsim from './Songsim.js';
+import Home from './routes/home';
+import About from './routes/about';
+import Gallery from './routes/gallery';
+import Songsim from './components/songsim';
 import { IndexRoute, Router, Route, hashHistory } from 'react-router';
 import './index.css';
 
@@ -13,7 +13,7 @@ import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(
   (<Router history={hashHistory}>
-    <Route path="/" component={App} >
+      <Route path="/" component={Home} >
       <Route path="about(/:chapter)" component={About} />
       <Route path="gallery(/:cat)" component={Gallery} />
       <Route path="custom(/:customKey)" component={Songsim} />

src/About.js → src/routes/about/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
 
-import './About.css';
+import './style.css';
 
 const IMG_DIR = '/img/about/';
 
@@ -28,7 +28,7 @@ class About extends Component {
         return p(i);
       });
     }
-    var panelClass = SECTION_METADATA[chapter] ? 
+    let panelClass = SECTION_METADATA[chapter] ? 
       SECTION_METADATA[chapter].panelClass
       : "col-lg-10 col-lg-offset-1 col-xs-12";
     panelClass += " abtPanel";
@@ -51,9 +51,9 @@ class About extends Component {
   }
 
   render() {
-    var chapter = this.props.params.chapter || 'default';
-    var sections = SECTIONS[chapter].map((sect) => (this.renderSection(sect, chapter)));
-    var chapter_preamble;
+    const chapter = this.props.params.chapter || 'default';
+    const sections = SECTIONS[chapter].map((sect) => (this.renderSection(sect, chapter)));
+    let chapter_preamble;
     if (this.props.params.chapter === 'advanced') {
       chapter_preamble = (
           <p>Below are some common patterns to look out for.</p>
@@ -81,6 +81,7 @@ class About extends Component {
   }
 }
 
+// TODO: check what that do (seems like its hardcoded)
 const SECTIONS = 
 {
 'default': [

src/Gallery.js → src/routes/gallery/index.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import { Link } from 'react-router';
 import Lightbox from 'react-image-lightbox';
 
-import './Gallery.css';
+import './style.css';
 
-import { Canned, GROUPED_CANS } from './canned.js';
-import CANNED_SONGS, { ORDERED_CATEGORIES } from './canned-data.js';
+import { Canned, GROUPED_CANS } from '../../utils/canned';
+import CANNED_SONGS, { ORDERED_CATEGORIES } from '../../utils/canned.data';
 
 const GALLERY_FILE_PATH = '/img/gallery/';
 

src/App.js → src/routes/home/index.jsx

@@ -1,18 +1,18 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import './App.css';
-import octocat from './octocat.svg';
+import './style.css';
+import octocat from '../../octocat.svg';
 
 const LINKS = [
   {path: "/", name: "SongSim"},
   {path: "/about", name: "About"},
   {path: "/gallery", name: "Gallery"}
 ];
 
-class App extends Component {
+class Home extends Component {
   renderNavLink = (link) => {
     // I'm sure there's a better way to do this...
-    let active = link.path === "/" ? 
+    const active = link.path === "/" ? 
         !LINKS.some((l) => 
             ( l.path !== "/" && this.props.location.pathname.startsWith(l.path))
         )
@@ -25,7 +25,7 @@ class App extends Component {
             <Link to={link.path}>{link.name}</Link></li>);
   }
   render() {
-    var links = LINKS.map(this.renderNavLink);
+    const links = LINKS.map(this.renderNavLink);
     return (
       <div className="App">
         <nav className="navbar navbar-default">
@@ -51,4 +51,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default Home;

src/App.test.js → src/routes/home/index.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Home from './index';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<Home />, div);
 });

src/canned-data.js → src/utils/canned.data.js

@@ -1,18 +1,18 @@
-var POETRY = {label: 'Poetry', slug: 'poetry'};
-var NR = {label: "Nursery Rhymes", slug: "nursery_rhymes"};
-var MISC = {label: "Misc", slug: "misc"};
-var SIXTIES = {label: "60's", slug: "60s"};
-var SEVENTIES = {label: "70's", slug: "70s"};
-var EIGHTIES = {label: "80's", slug: "80s"};
-var NINETIES = {label: "90's", slug: "90s"};
-var NAUGHTS = {label: "00's", slug: "00s"};
-var CONTEMP = {label: "Contemporary", slug: "contemp"};
+const POETRY = {label: 'Poetry', slug: 'poetry'};
+const NR = {label: "Nursery Rhymes", slug: "nursery_rhymes"};
+const MISC = {label: "Misc", slug: "misc"};
+const SIXTIES = {label: "60's", slug: "60s"};
+const SEVENTIES = {label: "70's", slug: "70s"};
+const EIGHTIES = {label: "80's", slug: "80s"};
+const NINETIES = {label: "90's", slug: "90s"};
+const NAUGHTS = {label: "00's", slug: "00s"};
+const CONTEMP = {label: "Contemporary", slug: "contemp"};
 
-var ORDERED_CATEGORIES = [
+const ORDERED_CATEGORIES = [
   CONTEMP, NAUGHTS, NINETIES, EIGHTIES, SEVENTIES, SIXTIES, NR, POETRY, MISC
 ];
 
-var CANNED_SONGS = [
+const CANNED_SONGS = [
   {slug: "12daysofxmas", artist: "", title: "The 12 Days Of Christmas", group: MISC.slug, dropdown: true},
   {slug: "4thofjuly", artist: "Kelis", title: "4th Of July", group: NAUGHTS.slug, hidden: true},
   {slug: "abc", artist: "Jackson 5", title: "ABC", group: SEVENTIES.slug, dropdown: true},

src/canned.js → src/utils/canned.js

@@ -1,4 +1,4 @@
-import CANNED_SONGS from './canned-data.js';
+import CANNED_SONGS from './canned.data.js';
 
 // 25 = buddy holly, 27 = callmemaybe
 var LANDING_CANNED = CANNED_SONGS[27]; 
@@ -46,21 +46,21 @@ class Canned {
 
 }
 
-var CANNED = [];
-var GROUPED_CANS = new Map();
+const CANNED = [];
+const GROUPED_CANS = new Map();
 
 for (let c of CANNED_SONGS) {
-  var can = new Canned(c);
+  const can = new Canned(c);
   CANNED.push(can);
   if (!GROUPED_CANS.has(can.group)) {
     GROUPED_CANS.set(can.group, []);
   }
   GROUPED_CANS.get(can.group).push(can);
 }
 // sort values
-let cmp = (a,b) => {
-  var keya = a.artist || a.title;
-  var keyb = b.artist || b.title;
+const cmp = (a,b) => {
+  const keya = a.artist || a.title;
+  const keyb = b.artist || b.title;
   return keya < keyb ? -1 : 
     (keyb < keya ? 1 : 0)
 };

src/verse.js → src/utils/verse.js

@@ -1,5 +1,5 @@
-import {Diagonal} from './utils.js';
-import {CUSTOM_SLUG} from './constants.js';
+import {Diagonal} from './index.js';
+import {CUSTOM_SLUG} from '../constants.js';
 
 /** A sequence of repeated words. */
 class Lala {