diff --git a/app/components/layout/index.js b/app/components/Layout.js similarity index 52% rename from app/components/layout/index.js rename to app/components/Layout.js index 564e9fb..d396038 100644 --- a/app/components/layout/index.js +++ b/app/components/Layout.js @@ -2,21 +2,26 @@ import React from 'react'; import styled from 'styled-components'; -import { styles } from './styles'; + +const Layout = styled.div` + display: flex; + flex-direction: column; + width: 200px; + position: absolute; + width: calc(100vh - 200px); + left: 0; + top: 0; + height: 100vh; + background: #ccc; +`; type Props = { chidren: any, // eslint-disable-line }; -const Layout = styled.div`${styles.layout}`; - export const LayoutComponent = (props: Props) => { // $FlowFixMe const { children } = props; // eslint-disable-line - return ( - - {children} - - ); + return {children}; }; diff --git a/app/components/sidebar/index.js b/app/components/Sidebar.js similarity index 56% rename from app/components/sidebar/index.js rename to app/components/Sidebar.js index 12985aa..5503578 100644 --- a/app/components/sidebar/index.js +++ b/app/components/Sidebar.js @@ -3,13 +3,21 @@ import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; -import { MENU_OPTIONS } from '../../constants/sidebar'; -import { styles } from './styles'; +import { MENU_OPTIONS } from '../constants/sidebar'; -// TODO: Not sure this is the best approach to styling -// in a StyledComponents-powered application const Wrapper = styled.div` - ${styles.wrapper} + display: flex; + flex-direction: column; + width: 200px; + position: absolute; + left: 0; + top: 0; + height: 100vh; + background: #ccc; +`; + +const StyledLink = styled(Link)` + color: ${props => props.theme.colors.primary}; `; type MenuItem = { route: string, label: string }; @@ -21,9 +29,9 @@ type Props = { export const SidebarComponent = ({ options }: Props) => ( {(options || []).map(item => ( - + {item.label} - + ))} ); diff --git a/app/components/sidebar/sidebar.mdx b/app/components/Sidebar.mdx similarity index 100% rename from app/components/sidebar/sidebar.mdx rename to app/components/Sidebar.mdx diff --git a/app/components/todo/todo-edit-input.js b/app/components/TodoEditInput.js similarity index 64% rename from app/components/todo/todo-edit-input.js rename to app/components/TodoEditInput.js index 919a4da..dcc1122 100644 --- a/app/components/todo/todo-edit-input.js +++ b/app/components/TodoEditInput.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; -import type { TodoType } from '../../types/todo'; +import type { TodoType } from '../types/todo'; type Props = { updateTodo: Function, @@ -33,17 +33,19 @@ export default class TodoEditInput extends Component { updateTodo(id, trimValue); this.setState({ value: '' }); } - } + }; handleCancel = (id: string) => { const { cancelUpdateTodo } = this.props; cancelUpdateTodo(id); - } + }; handleInputChange = (event: SyntheticInputEvent) => { - const { target: { value } } = event; + const { + target: { value }, + } = event; this.setState({ value }); - } + }; render() { const { value } = this.state; @@ -51,28 +53,13 @@ export default class TodoEditInput extends Component { return (
-
this.handleSubmit(e, todo.id)} - > - -
-
diff --git a/app/components/todo/todo-input.js b/app/components/TodoInput.js similarity index 67% rename from app/components/todo/todo-input.js rename to app/components/TodoInput.js index fd2884f..ae71f0e 100644 --- a/app/components/todo/todo-input.js +++ b/app/components/TodoInput.js @@ -26,30 +26,22 @@ export default class TodoInput extends Component { addTodo(trimValue); this.setState({ value: '' }); } - } + }; handleInputChange = (event: SyntheticInputEvent) => { - const { target: { value } } = event; + const { + target: { value }, + } = event; this.setState({ value }); - } + }; render() { const { value } = this.state; return ( -
- -
diff --git a/app/components/todo/todo-list.js b/app/components/TodoList.js similarity index 53% rename from app/components/todo/todo-list.js rename to app/components/TodoList.js index a643449..53aef64 100644 --- a/app/components/todo/todo-list.js +++ b/app/components/TodoList.js @@ -1,9 +1,9 @@ // @flow import React, { PureComponent } from 'react'; -import TodoEditInput from './todo-edit-input'; -import TodoListItem from './todo-list-item'; -import type { TodoType } from '../../types/todo'; +import TodoEditInput from './TodoEditInput'; +import TodoListItem from './TodoListItem'; +import type { TodoType } from '../types/todo'; type Props = { todos: Array, @@ -17,26 +17,14 @@ export default class TodoList extends PureComponent { renderTodoView = (todo: TodoType) => { const { deleteTodo, toggleEdit } = this.props; - return ( - - ); - } + return ; + }; renderEditView = (todo: TodoType) => { const { updateTodo, cancelUpdateTodo } = this.props; - return ( - - ); - } + return ; + }; renderList = () => { const { todos } = this.props; @@ -45,24 +33,15 @@ export default class TodoList extends PureComponent { return (
    {sortTodosByTime.map(todo => ( -
  • - {todo.editing ? ( - this.renderEditView(todo) - ) : ( - this.renderTodoView(todo) - )} +
  • + {todo.editing ? this.renderEditView(todo) : this.renderTodoView(todo)}
    • ))}
); - } + }; - renderEmptyState = () => ( -

No todos right now

- ); + renderEmptyState = () =>

No todos right now

; render() { const { todos } = this.props; diff --git a/app/components/TodoListItem.js b/app/components/TodoListItem.js new file mode 100644 index 0000000..d668f40 --- /dev/null +++ b/app/components/TodoListItem.js @@ -0,0 +1,55 @@ +// @flow + +import React, { PureComponent } from 'react'; +import type { TodoType } from '../types/todo'; + +type Props = { + todo: TodoType, + deleteTodo: Function, + toggleEdit: Function, +}; + +export default class TodoListItem extends PureComponent { + handleDelete = (id: string) => { + if (!id) return; + + const { deleteTodo } = this.props; + deleteTodo(id); + }; + + handleEditToggle = (id: string) => { + if (!id) return; + + const { toggleEdit } = this.props; + toggleEdit(id); + }; + + render() { + const { todo } = this.props; + + return ( +
+ {todo.text} +
+ + +
+
+ ); + } +} diff --git a/app/components/layout/styles.js b/app/components/layout/styles.js deleted file mode 100644 index 2b7250e..0000000 --- a/app/components/layout/styles.js +++ /dev/null @@ -1,15 +0,0 @@ -// @flow - -export const styles: Object = { - layout: ` - display: flex; - flex-direction: column; - width: 200px; - position: absolute; - width: calc(100vh - 200px); - left: 0; - top: 0; - height: 100vh; - background: #ccc; - `, -}; diff --git a/app/components/sidebar/styles.js b/app/components/sidebar/styles.js deleted file mode 100644 index 5a23074..0000000 --- a/app/components/sidebar/styles.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export const styles: Object = { - wrapper: ` - display: flex; - flex-direction: column; - width: 200px; - position: absolute; - left: 0; - top: 0; - height: 100vh; - background: #ccc; - `, -}; diff --git a/app/components/todo/todo-list-item.js b/app/components/todo/todo-list-item.js deleted file mode 100644 index bf118ec..0000000 --- a/app/components/todo/todo-list-item.js +++ /dev/null @@ -1,56 +0,0 @@ -// @flow - -import React, { PureComponent } from 'react'; -import type { TodoType } from '../../types/todo'; - -type Props = { - todo: TodoType, - deleteTodo: Function, - toggleEdit: Function, -}; - -export default class TodoListItem extends PureComponent { - handleDelete = (id: string) => { - if (!id) return; - - const { deleteTodo } = this.props; - deleteTodo(id); - } - - handleEditToggle = (id: string) => { - if (!id) return; - - const { toggleEdit } = this.props; - toggleEdit(id); - } - - render() { - const { - todo, - } = this.props; - - return ( -
- - {todo.text} - -
- - -
-
- ); - } -}