Skip to content
This repository was archived by the owner on Nov 18, 2024. It is now read-only.

Commit f6820a9

Browse files
yingrayyingray
committed
update todo page
1 parent ab4a363 commit f6820a9

File tree

16 files changed

+176
-104
lines changed

16 files changed

+176
-104
lines changed

‎src/components/Header.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ import Navigation from './Navigation'
33
import logo from '../images/logo.svg'
44

55
const Header = props =>
6-
<div className="App-header">
7-
<img src={logo} className="App-logo" alt="create-react-redux-app-logo" />
6+
<div className="c-header">
7+
<img src={logo} className="c-header__logo" alt="create-react-redux-app-logo" />
88
<h2>Create React Redux App</h2>
99
<p>
10-
<i className="material-icons">account_balance</i>
11-
Github:&nbsp;
1210
<a href="https://github.com/yingray/create-react-redux-app">
1311
https://github.com/yingray/create-react-redux-app
1412
</a>

‎src/components/Todo.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React from 'react'
22

3-
const Todo = ({ onClick, completed, text }) => (
4-
<tr>
5-
<td className="mdl-data-table__cell--non-numeric"
6-
onClick={onClick}
7-
style={{
8-
textDecoration: completed ? 'line-through' : 'none'
9-
}}
10-
>
11-
<span className="mdl-list__item-primary-content">
12-
{text}
13-
</span>
14-
</td>
15-
</tr>
16-
)
3+
const Todo = ({ onClick, completed, text }) =>
4+
<tr>
5+
<td className="c-todo__list_item"
6+
onClick={onClick}
7+
style={{
8+
textDecoration: completed ? 'line-through' : 'none'
9+
}}
10+
>
11+
<span>
12+
{text}
13+
</span>
14+
</td>
15+
</tr>
1716

18-
export default Todo
17+
export default Todo

‎src/components/TodoList.js‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
11
import React from 'react'
22
import Todo from './Todo'
33

4-
const TodoList = ({ todos, onTodoClick }) => (
5-
<div className="mdl-grid">
6-
<table className="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-cell mdl-cell--12-col">
7-
<thead>
8-
<tr>
9-
<th className="mdl-data-table__cell--non-numeric">Todo List</th>
10-
</tr>
11-
</thead>
12-
<tbody>
13-
{todos.map(todo =>
14-
<Todo
15-
key={todo.id}
16-
{...todo}
17-
onClick={() => onTodoClick(todo.id)}
18-
/>
19-
)}
20-
</tbody>
21-
</table>
22-
</div>
4+
const TodoList = ({ todos, onTodoClick }) =>
5+
<table className="c-todo__list">
6+
<thead />
7+
<tbody>
8+
{todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />)}
9+
</tbody>
10+
</table>
2311

24-
)
25-
26-
export default TodoList
12+
export default TodoList

‎src/containers/AddTodo.js‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,42 @@ import React from 'react'
22
import { connect } from 'react-redux'
33
import { addTodo } from '../actions/todoActions'
44

5-
let AddTodo = ({ dispatch }) => {
6-
let input
5+
class AddTodo extends React.Component {
6+
constructor(props) {
7+
super(props)
8+
this.state = {
9+
input: ''
10+
}
11+
this.handleChange = this.handleChange.bind(this)
12+
this.handleSubmit = this.handleSubmit.bind(this)
13+
}
714

8-
return (
9-
<div>
10-
<form onSubmit={e => {
11-
e.preventDefault()
12-
if (!input.value.trim()) {
13-
return
14-
}
15-
dispatch(addTodo(input.value))
16-
input.value = ''
17-
}}>
18-
<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
19-
<label className="mdl-textfield__label" htmlFor="todoInput">Add Todo...</label>
20-
<input className="mdl-textfield__input" type="text" id="todoInput" ref={node => { input = node }}/>
21-
</div>
22-
<button type="submit" className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
23-
Add Todo
24-
</button>
25-
</form>
26-
</div>
27-
)
15+
handleChange(e) {
16+
this.setState({ input: e.target.value })
17+
}
18+
19+
handleSubmit(e) {
20+
const { props: { dispatch }, state: { input } } = this
21+
e.preventDefault()
22+
if (!input.trim()) {
23+
return
24+
}
25+
dispatch(addTodo(input))
26+
this.setState({ input: '' })
27+
}
28+
29+
render() {
30+
return (
31+
<form className="c-todo__section" onSubmit={this.handleSubmit}>
32+
<input className="c-todo__input" type="text" onChange={this.handleChange} value={this.state.input} />
33+
<button type="submit" className="c-todo__icon">
34+
<i className="material-icons">assignment_returned</i>
35+
</button>
36+
</form>
37+
)
38+
}
2839
}
40+
2941
AddTodo = connect()(AddTodo)
3042

31-
export default AddTodo
43+
export default AddTodo

‎src/pages/Home.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import Card from '../components/Card'
33

44
const HomePage = () => {
55
const content = {
6-
title: 'Material Design Lite',
6+
title: 'Welcome to CRRS-APP',
77
article:
8-
'lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now.'
8+
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum facere assumenda libero maiores rem veritatis quisquam saepe unde quam, molestiae iste in rerum magnam temporibus, impedit commodi dicta officiis aliquid?'
99
}
1010

1111
return (
12-
<Card title="Index">
13-
<strong>
12+
<main className="p-home">
13+
<h3 className="p-home__title">
1414
{content.title}
15-
</strong>
16-
<p>
15+
</h3>
16+
<article className="p-home__article">
1717
{content.article}
18-
</p>
19-
</Card>
18+
</article>
19+
</main>
2020
)
2121
}
2222

‎src/pages/Todo.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import AddTodo from '../containers/AddTodo'
55
import VisibleTodoList from '../containers/VisibleTodoList'
66

77
const TodoPage = () =>
8-
<div>
9-
<Card title="Redux Example - Todo List">
10-
<AddTodo />
11-
<VisibleTodoList />
12-
<TodoFooter />
13-
</Card>
14-
</div>
8+
<main className="p-todo">
9+
<h3 className="p-todo__title">CRRS - Todo List</h3>
10+
<AddTodo />
11+
<VisibleTodoList />
12+
<TodoFooter />
13+
</main>
1514

1615
export default TodoPage

‎src/services/weatherApi.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const headers = {
55
const options = {}
66
const book = {
77
getWeather: {
8-
url: 'https://query.yahooapis.com/v1/public/yql',
8+
url: '/v1/public/yql',
99
method: 'GET',
1010
payload: {
1111
query: {
@@ -29,6 +29,7 @@ function toJsonMiddleware(response) {
2929
return response.json()
3030
}
3131
const Apis = new ApiBook.ApiCreator(book, {
32+
host: 'https://query.yahooapis.com',
3233
fetchAndThen: [statusMiddleware, toJsonMiddleware]
3334
})
3435
export default Apis

‎src/styles/base/_typography.sass‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
* Typography Settings
44
-----------------------------*/
55
body
6-
max-width: 800px
6+
font-family: 'Source Sans Pro', sans-serif
7+
background-color: #eee
78
margin: 0 auto
8-
border: solid 1px #eee
9-
box-sizing: border-box
9+
color: $base_font_color
1010

1111
h1, h2, h3, h4, h5, h6
1212
text-align: center
@@ -19,30 +19,30 @@ a
1919
color: inherit
2020

2121
input
22-
width: 100%
23-
height: 40px
22+
display: inline-flex
23+
width: 300px
2424
outline: none
2525
border: solid 1px #ccc
2626
border-radius: 2px
27-
margin-bottom: 10px
27+
box-sizing: border-box
2828
padding: 10px
29-
&[type="checkbox"]
30-
width: 10px
31-
height: 10px
3229

3330
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder
3431
color: #ccc
3532
input:focus
36-
color: #69C3BC
33+
color: $base_font_color
3734

3835
button
39-
background-color: white
36+
display: inline-block
37+
margin: 0 10px
38+
background-color: #A082D1
4039
width: 130px
4140
height: 40px
42-
color: #ccc
41+
color: #fff
42+
text-transform: uppercase
4343
outline: none
44-
border: solid 1px #ccc
45-
border-radius: 4px
44+
border: solid 1px $base_border_color
45+
border-radius: 2em
4646
cursor: pointer
4747
transition: all 1s ease 0s
4848
&:hover

‎src/styles/components/_button.sass‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
/* BEM naming: component - button */
22
.c-button
33
display: inline-block
4-
color:#888
5-
width: 100px
6-
height: 30px
7-
line-height: 30px
8-
border: solid 1px #ccc
9-
border-radius: 3px
4+
color: #A082D1
5+
width: 150px
6+
height: 35px
7+
line-height: 35px
8+
border: solid 1px #A082D1
9+
border-radius: 2em
1010
text-decoration: none
11+
text-transform: uppercase
1112
margin: 0 10px
1213
background-color: #fff
1314
&:hover
14-
background-color: #ddd
15+
background-color: #A082D1
16+
color: #fff

‎src/styles/components/_header.sass‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.c-header
2+
text-align: center
3+
background-color: #fff
4+
width: 100%
5+
box-sizing: border-box
6+
padding: 20px
7+
// color: #764abc
8+
color: #444
9+
10+
&__logo
11+
animation: App-logo-spin infinite 20s linear
12+
height: 80px

0 commit comments

Comments
 (0)