From a9225b9497bcda5c89deeeb9e94bff3f5c7d30ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <andrerfneves@protonmail.com>
Date: Wed, 28 Nov 2018 23:14:44 -0500
Subject: [PATCH] refactor: file naming case refactor: code clean up types:
 introduce flow types

---
 app/app.js                                    |  6 +--
 app/components/Layout.js                      | 11 +++--
 app/components/Sidebar.js                     |  5 ++-
 app/components/Sidebar.mdx                    |  3 +-
 .../{TodoEditInput.js => todo-edit-input.js}  |  0
 .../{TodoInput.js => todo-input.js}           |  0
 .../{TodoListItem.js => todo-list-item.js}    |  0
 app/components/{TodoList.js => todo-list.js}  |  4 +-
 app/containers/sidebar.js                     |  2 +-
 app/index.js                                  |  1 +
 app/redux/create.js                           | 17 +++++--
 app/redux/modules/todo.js                     |  5 ++-
 app/router/router.js                          | 45 ++++++++++---------
 app/theme.js                                  | 18 +++++---
 app/views/todo.js                             | 24 +++++++---
 15 files changed, 93 insertions(+), 48 deletions(-)
 rename app/components/{TodoEditInput.js => todo-edit-input.js} (100%)
 rename app/components/{TodoInput.js => todo-input.js} (100%)
 rename app/components/{TodoListItem.js => todo-list-item.js} (100%)
 rename app/components/{TodoList.js => todo-list.js} (93%)

diff --git a/app/app.js b/app/app.js
index 0bfd998..157fd9f 100644
--- a/app/app.js
+++ b/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>
diff --git a/app/components/Layout.js b/app/components/Layout.js
index d396038..277bff1 100644
--- a/app/components/Layout.js
+++ b/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>
+  );
 };
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 2403bdb..65aec62 100644
--- a/app/components/Sidebar.js
+++ b/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[],
diff --git a/app/components/Sidebar.mdx b/app/components/Sidebar.mdx
index 50d64b4..f9d8863 100644
--- a/app/components/Sidebar.mdx
+++ b/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
diff --git a/app/components/TodoEditInput.js b/app/components/todo-edit-input.js
similarity index 100%
rename from app/components/TodoEditInput.js
rename to app/components/todo-edit-input.js
diff --git a/app/components/TodoInput.js b/app/components/todo-input.js
similarity index 100%
rename from app/components/TodoInput.js
rename to app/components/todo-input.js
diff --git a/app/components/TodoListItem.js b/app/components/todo-list-item.js
similarity index 100%
rename from app/components/TodoListItem.js
rename to app/components/todo-list-item.js
diff --git a/app/components/TodoList.js b/app/components/todo-list.js
similarity index 93%
rename from app/components/TodoList.js
rename to app/components/todo-list.js
index 53aef64..244a6c2 100644
--- a/app/components/TodoList.js
+++ b/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 = {
diff --git a/app/containers/sidebar.js b/app/containers/sidebar.js
index b74a6c5..d4dbc21 100644
--- a/app/containers/sidebar.js
+++ b/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,
diff --git a/app/index.js b/app/index.js
index 5c2fbff..ec64a6d 100644
--- a/app/index.js
+++ b/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');
diff --git a/app/redux/create.js b/app/redux/create.js
index c574d10..fa3aa73 100644
--- a/app/redux/create.js
+++ b/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,
+  );
 };
diff --git a/app/redux/modules/todo.js b/app/redux/modules/todo.js
index fea3072..e390843 100644
--- a/app/redux/modules/todo.js
+++ b/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];
diff --git a/app/router/router.js b/app/router/router.js
index 0a14761..212fe6f 100644
--- a/app/router/router.js
+++ b/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>
 );
diff --git a/app/theme.js b/app/theme.js
index 7cf0ebd..245b114 100644
--- a/app/theme.js
+++ b/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()}`;
 
diff --git a/app/views/todo.js b/app/views/todo.js
index 1de5d4e..78c6ec3 100644
--- a/app/views/todo.js
+++ b/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