refactor: file naming case

refactor: code clean up
types: introduce flow types

app/app.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { ThemeProvider } from 'styled-components';
@@ -15,10 +15,10 @@ export default () => (
   <ThemeProvider theme={theme}>
     <Provider store={store}>
       <ConnectedRouter history={history}>
-        <div>
+        <Fragment>
           <GlobalStyle />
           <Router />
-        </div>
+        </Fragment>
       </ConnectedRouter>
     </Provider>
   </ThemeProvider>

app/components/Layout.js

@@ -6,10 +6,9 @@ import styled from 'styled-components';
 const Layout = styled.div`
   display: flex;
   flex-direction: column;
-  width: 200px;
   position: absolute;
-  width: calc(100vh - 200px);
-  left: 0;
+  width: calc(100vw - 200px);
+  left: 200px;
   top: 0;
   height: 100vh;
   background: #ccc;
@@ -23,5 +22,9 @@ export const LayoutComponent = (props: Props) => {
   // $FlowFixMe
   const { children } = props; // eslint-disable-line
 
-  return <Layout>{children}</Layout>;
+  return (
+    <Layout>
+      {children}
+    </Layout>
+  );
 };

app/components/Sidebar.js

@@ -20,7 +20,10 @@ const StyledLink = styled(Link)`
   color: ${props => props.theme.colors.primary};
 `;
 
-type MenuItem = { route: string, label: string };
+type MenuItem = {
+  route: string,
+  label: string,
+};
 
 type Props = {
   options?: MenuItem[],

app/components/Sidebar.mdx

@@ -3,7 +3,8 @@ name: Sidebar
 ---
 
 import { Playground, PropsTable } from 'docz'
-import { SidebarComponent } from './Sidebar.js'
+
+import { SidebarComponent } from './sidebar.js'
 import { DoczWrapper } from '../theme.js'
 
 # Sidebar

app/components/todo-list.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import TodoEditInput from './TodoEditInput';
-import TodoListItem from './TodoListItem';
+import TodoEditInput from './todo-edit-input';
+import TodoListItem from './todo-list-item';
 import type { TodoType } from '../types/todo';
 
 type Props = {

app/containers/sidebar.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { connect } from 'react-redux';
-import { SidebarComponent } from '../components/Sidebar';
+import { SidebarComponent } from '../components/sidebar';
 
 const mapStateToProps = (state: Object) => ({
   todos: state.todos,

app/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import App from './app';
 
 const el = document.getElementById('root');

app/redux/create.js

@@ -4,19 +4,30 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import { routerMiddleware } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 import thunk from 'redux-thunk';
+
 import { createRootReducer } from './modules/reducer';
 
 export const history = createBrowserHistory();
 
-const shouldEnableDevTools = (process.env.NODE_ENV !== 'production' || process.env.NODE_ENV !== 'staging') && window.devToolsExtension;
+const shouldEnableDevTools = (
+  process.env.NODE_ENV !== 'production'
+  || process.env.NODE_ENV !== 'staging'
+) && window.devToolsExtension;
 
 export const configureStore = (initialState: Object) => {
-  const middleware = applyMiddleware(thunk, routerMiddleware(history));
+  const middleware = applyMiddleware(
+    thunk,
+    routerMiddleware(history),
+  );
 
   const enhancer = compose(
     middleware,
     shouldEnableDevTools ? window.devToolsExtension() : f => f,
   );
 
-  return createStore(createRootReducer(history), initialState, enhancer);
+  return createStore(
+    createRootReducer(history),
+    initialState,
+    enhancer,
+  );
 };

app/redux/modules/todo.js

@@ -52,7 +52,10 @@ export const updateTodo = (id: string, text: string) => ({
 const initialState = [];
 
 // Reducers
-export default (state: Array<TodoType> = initialState, action: Action): Array<TodoType> => {
+export default (
+  state: Array<TodoType> = initialState,
+  action: Action,
+): Array<TodoType> => {
   switch (action.type) {
     case ADD_TODO:
       return [...state, action.payload];

app/router/router.js

@@ -2,6 +2,7 @@
 
 import React, { Fragment } from 'react';
 import { Route, Switch } from 'react-router-dom';
+
 import { ScrollTopComponent } from './scroll-top';
 import { SidebarContainer } from '../containers/sidebar';
 import { DashboardView } from '../views/dashboard';
@@ -9,6 +10,7 @@ import { SendView } from '../views/send';
 import { ReceiveView } from '../views/receive';
 import { SettingsView } from '../views/settings';
 import { NotFoundView } from '../views/not-found';
+import { LayoutComponent } from '../components/layout';
 import {
   DASHBOARD_ROUTE,
   SEND_ROUTE,
@@ -20,26 +22,29 @@ export const RouterComponent = () => (
   <Fragment>
     <SidebarContainer />
     <ScrollTopComponent>
-      <Switch>
-        <Route
-          path={DASHBOARD_ROUTE}
-          exact
-          component={DashboardView}
-        />
-        <Route
-          path={SEND_ROUTE}
-          component={SendView}
-        />
-        <Route
-          path={RECEIVE_ROUTE}
-          component={ReceiveView}
-        />
-        <Route
-          path={SETTINGS_ROUTE}
-          component={SettingsView}
-        />
-        <Route component={NotFoundView} />
-      </Switch>
+      {/* $FlowFixMe */}
+      <LayoutComponent>
+        <Switch>
+          <Route
+            exact
+            path={DASHBOARD_ROUTE}
+            component={DashboardView}
+          />
+          <Route
+            path={SEND_ROUTE}
+            component={SendView}
+          />
+          <Route
+            path={RECEIVE_ROUTE}
+            component={ReceiveView}
+          />
+          <Route
+            path={SETTINGS_ROUTE}
+            component={SettingsView}
+          />
+          <Route component={NotFoundView} />
+        </Switch>
+      </LayoutComponent>
     </ScrollTopComponent>
   </Fragment>
 );

app/theme.js

@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
+import theme from 'styled-theming';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 // $FlowFixMe
-import { normalize } from 'polished';
-import theme from 'styled-theming';
+import { normalize } from 'polished'; // eslint-disable-line
 
 import { DARK } from './constants/themes';
 
@@ -12,13 +12,13 @@ const appTheme = {
   fontFamily: 'Open Sans',
   colors: {
     primary: theme('mode', {
-      light: '#fff',
-      dark: '#000',
-    }),
-    secondary: theme('mode', {
       light: '#000',
       dark: '#fff',
     }),
+    secondary: theme('mode', {
+      light: '#fff',
+      dark: '#000',
+    }),
   },
   size: {
     title: 18,
@@ -28,7 +28,11 @@ const appTheme = {
 
 /* eslint-disable react/prop-types */
 // $FlowFixMe
-export const DoczWrapper = ({ children }) => <ThemeProvider theme={appTheme}>{children()}</ThemeProvider>;
+export const DoczWrapper = ({ children }) => (
+  <ThemeProvider theme={appTheme}>
+    {children()}
+  </ThemeProvider>
+);
 
 export const GlobalStyle = createGlobalStyle`${normalize()}`;
 

app/views/todo.js

@@ -1,9 +1,12 @@
 // @flow
 
 import React from 'react';
-import TodoInput from '../components/TodoInput';
-import TodoList from '../components/TodoList';
+
+import TodoInput from '../components/todo-input';
+import TodoList from '../components/todo-list';
+
 import type { TodoType } from '../types/todo';
+
 import checklist from '../assets/images/checklist.svg';
 
 type Props = {
@@ -17,14 +20,25 @@ type Props = {
 
 export default (props: Props) => {
   const {
-    addTodo, todos, deleteTodo, toggleEdit, updateTodo, cancelUpdateTodo,
+    addTodo,
+    todos,
+    deleteTodo,
+    toggleEdit,
+    updateTodo,
+    cancelUpdateTodo,
   } = props;
 
   return (
     <div className='todo'>
       <div className='todo__heading'>
-        <img src={checklist} alt='Testing File Loader' className='todo__image' />
-        <h1 className='todo__header'>Todo List App</h1>
+        <img
+          src={checklist}
+          alt='Testing File Loader'
+          className='todo__image'
+        />
+        <h1 className='todo__header'>
+          Todo List App
+        </h1>
       </div>
       <TodoInput addTodo={addTodo} />
       <TodoList