🕴 t o o l s

Author: xavxyz

components/AppMenuDrawer.fixture.js

@@ -2,7 +2,7 @@
 
 import { createFixture } from 'react-cosmos';
 import AppMenuDrawer from './AppMenuDrawer';
-import data from '../data';
+import data from '../tools/data';
 
 const [user] = data.users;
 

components/AppMenuDrawer.js

@@ -1,22 +1,18 @@
 // @flow
 
 import * as React from 'react';
-import Link from './Link';
 import styled from 'styled-components';
 import { Spring, Trail } from 'react-spring';
-import type { User } from '../data/types';
+import Link from './Link';
+import { linksList } from '../tools/links';
+import firstName from '../tools/firstName';
+import type { User } from '../tools/types';
 
 type Props = {
   open: boolean,
   selectedUser: User,
 };
 
-const links = [
-  { href: '/', name: 'Home' },
-  { href: '/place', name: 'Places' },
-  { href: '/group', name: 'Group Trips' },
-];
-
 export default class AppMenuDrawer extends React.Component<Props> {
   render() {
     const { open, selectedUser } = this.props;
@@ -35,14 +31,14 @@ export default class AppMenuDrawer extends React.Component<Props> {
             <Trail
               from={{ opacity: 0 }}
               to={{ opacity: 1 }}
-              keys={links.map(link => link.name)}
+              keys={linksList.map(([href]) => href)}
               delay={100}
             >
-              {links.map(link => styles => (
+              {linksList.map(([href, name]) => styles => (
                 <div style={styles}>
-                  <Link href={link.href} color="white">
+                  <Link href={href} color="white">
                     {firstName(selectedUser.name)}
-                    's {link.name}
+                    's {name}
                   </Link>
                 </div>
               ))}
@@ -54,11 +50,6 @@ export default class AppMenuDrawer extends React.Component<Props> {
   }
 }
 
-function firstName(input: string): string {
-  const lastIndex = input.lastIndexOf(' ');
-  return input.substring(0, lastIndex);
-}
-
 const Drawer = styled.div`
   transform-origin: 100% 0%;
   background: rgba(0, 0, 0, 0.8);

components/AppNavTransition.fixture.js

@@ -2,24 +2,24 @@
 
 import { createFixture } from 'react-cosmos';
 import AppNavTransition from './AppNavTransition';
-import data from '../data';
-import paths from '../data/paths';
+import data from '../tools/data';
+import { linksList } from '../tools/links';
 
 const [user] = data.users;
 
-export default paths.map((path, index) =>
+export default linksList.map(([href, name], index) =>
   createFixture({
     component: AppNavTransition,
-    name: 'route: ' + path.name,
+    name: 'route: ' + name,
     props: {
-      pathname: path.pathname,
+      pathname: href,
       users: data.users,
       selectedUser: user,
       indexedUser: 0,
       addFollower: () => {},
       removeFollower: () => {},
       changeUser(number, fn) {
-        fn()
+        fn();
       },
     },
   })

components/AppNavTransition.js

@@ -8,7 +8,7 @@ import IconBase from './IconBase';
 import IconMail from './IconMail';
 import IconMapPin from './IconMapPin';
 import IconCalendar from './IconCalendar';
-import type { User } from '../data/types';
+import type { User } from '../tools/types';
 
 type Props = {
   users: Array<User>,

components/AppNavigation.js

@@ -8,12 +8,7 @@ import AppNavTransition from './AppNavTransition';
 import AppStats from './AppStats';
 import IconBase from './IconBase';
 import IconThreeDot from './IconThreeDot';
-
-const pathnames = [
-  { pathname: '/', name: 'index' },
-  { pathname: '/place', name: 'place' },
-  { pathname: '/group', name: 'group' },
-];
+import links from '../tools/links';
 
 class Header extends React.Component {
   state = {
@@ -78,15 +73,15 @@ class Header extends React.Component {
       pathname,
     } = this.props;
 
-    const pathPredicate = pathname => p => p.pathname === pathname;
+    const pathPredicate = pathname => p => p.href === pathname;
 
     return (
-      <header className={pathnames.find(pathPredicate(pathname)).name}>
+      <header className={links.find(pathPredicate(pathname)).name}>
         <TransitionGroup className="bk-img">
           <CSSTransition classNames="bk" key={pathname} timeout={400}>
             <div
               className={`header-img${1 +
-                pathnames.findIndex(pathPredicate(pathname))}`}
+                links.findIndex(pathPredicate(pathname))}`}
             />
           </CSSTransition>
         </TransitionGroup>

components/AppStats.fixture.js

@@ -2,7 +2,7 @@
 
 import { createFixture } from 'react-cosmos';
 import AppStats from './AppStats';
-import data from '../data';
+import data from '../tools/data';
 
 export default data.users.map(user =>
   createFixture({

components/AppStats.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import styled from 'styled-components';
-import type { User } from '../data/types';
+import type { User } from '../tools/types';
 
 type Props = {
   selectedUser: User,

data/paths.js

@@ -0,0 +1,4 @@
+export default function firstName(input: string): string {
+  const lastIndex = input.lastIndexOf(' ');
+  return input.substring(0, lastIndex);
+}

data/index.js tools/data.js

@@ -0,0 +1,37 @@
+// @flow
+
+// the following works, but is kind of useless in this case,
+// as I need a custom "verbose name" for each path
+// anyway that was my first time using babel macros,
+// this is... d o p e
+
+// import preval from 'babel-plugin-preval/macro';
+// const paths: Array<{ pathname: string, name: string }> = preval`
+//   const path = require('path');
+//   const fs = require('fs');
+
+//   module.exports = fs.readdirSync(path.resolve('./pages'))
+//                      .filter(file => !file.includes('_'))
+//                      .map(pageFile => pageFile.slice(0,-3))
+//                      .map(name => ({
+//                         pathname: name === 'index' ? '/' : '/' + name,
+//                         name: name,
+//                       }));
+// `;
+
+type Links = {|
+  '/': string,
+  '/place': string,
+  '/group': string,
+|};
+
+const links: Links = {
+  '/': 'Home',
+  '/place': 'Places',
+  '/group': 'Group Trips',
+};
+
+// see https://github.com/facebook/flow/issues/2221
+export const linksList: Array<any> = Object.entries(links);
+
+export default links;