From 46a5cc50c837d164f30c046768f1d9ba75dfc0cd Mon Sep 17 00:00:00 2001 From: Daniel Moura Date: Mon, 13 Apr 2020 22:41:07 -0300 Subject: [PATCH 1/2] (wip) Init refactor --- src/canned-data.js | 22 +- src/canned.js | 12 +- src/config.js | 4 +- src/index.js | 4 +- src/{About.js => routes/about/index.jsx} | 11 +- src/{About.css => routes/about/style.css} | 0 src/{App.js => routes/home/index.jsx} | 12 +- .../home/index.test.js} | 4 +- src/{App.css => routes/home/style.css} | 0 yarn.lock | 7605 +++++++++++++++++ 10 files changed, 7640 insertions(+), 34 deletions(-) rename src/{About.js => routes/about/index.jsx} (97%) rename src/{About.css => routes/about/style.css} (100%) rename src/{App.js => routes/home/index.jsx} (86%) rename src/{App.test.js => routes/home/index.test.js} (70%) rename src/{App.css => routes/home/style.css} (100%) create mode 100644 yarn.lock diff --git a/src/canned-data.js b/src/canned-data.js index 436fc93..f50e64c 100644 --- a/src/canned-data.js +++ b/src/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}, diff --git a/src/canned.js b/src/canned.js index 5a18c6b..3d8e628 100644 --- a/src/canned.js +++ b/src/canned.js @@ -46,11 +46,11 @@ 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, []); @@ -58,9 +58,9 @@ for (let c of CANNED_SONGS) { 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) }; diff --git a/src/config.js b/src/config.js index 926dcb7..d3d62f2 100644 --- a/src/config.js +++ b/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] diff --git a/src/index.js b/src/index.js index e7527a2..47c5fd4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import About from './About.js'; +import About from './routes/about/index.js'; import Gallery from './Gallery.js'; import Songsim from './Songsim.js'; import { IndexRoute, Router, Route, hashHistory } from 'react-router'; @@ -13,7 +13,7 @@ import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render( ( - + diff --git a/src/About.js b/src/routes/about/index.jsx similarity index 97% rename from src/About.js rename to src/routes/about/index.jsx index 0a6415a..abd76cd 100644 --- a/src/About.js +++ b/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 = (

Below are some common patterns to look out for.

@@ -81,6 +81,7 @@ class About extends Component { } } +// TODO: check what that do (seems like its hardcoded) const SECTIONS = { 'default': [ diff --git a/src/About.css b/src/routes/about/style.css similarity index 100% rename from src/About.css rename to src/routes/about/style.css diff --git a/src/App.js b/src/routes/home/index.jsx similarity index 86% rename from src/App.js rename to src/routes/home/index.jsx index 8bdb50b..fc25569 100644 --- a/src/App.js +++ b/src/routes/home/index.jsx @@ -1,7 +1,7 @@ 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"}, @@ -9,10 +9,10 @@ const LINKS = [ {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.name}); } render() { - var links = LINKS.map(this.renderNavLink); + const links = LINKS.map(this.renderNavLink); return (