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

Commit e3eeb88

Browse files
yingrayyingray
committed
update weather page
1 parent f6820a9 commit e3eeb88

File tree

14 files changed

+108
-97
lines changed

14 files changed

+108
-97
lines changed

‎src/components/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import Header from './Header'
33

44
const App = ({ children }) =>
5-
<div className="App">
5+
<div>
66
<Header />
77
<div>
88
{children}

‎src/components/Card.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/containers/FilterLink.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ const FilterLink = connect(
2121
mapDispatchToProps
2222
)(Link)
2323

24-
export default FilterLink
24+
export default FilterLink

‎src/containers/Weather.js‎

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,69 @@
11
import React from 'react'
22
import { connect } from 'react-redux'
3-
import { bindActionCreators } from 'redux';
4-
import * as weatherActions from '../actions/weatherActions';
5-
6-
const Weather = ({ weatherState, actions }) => (
7-
<div className="demo-card-square mdl-card mdl-shadow--2dp">
8-
<div className="mdl-card__title mdl-card--expand">
9-
<h2 className="mdl-card__title-text">{weatherState.city} - {weatherState.temp}&#8457;</h2>
10-
</div>
11-
<div className="mdl-card__supporting-text">
12-
{weatherState.date}
13-
<br/>
14-
{weatherState.text}
15-
</div>
16-
<div className="mdl-card__actions mdl-card--border">
17-
<a className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
18-
onClick={actions.getWeather}>
19-
&nbsp;View Updates&nbsp;
20-
{weatherState.loading ? <i className="material-icons" style={{"animation": "App-logo-spin infinite 2s linear"}}>rotate_right</i> : ''}
21-
</a>
22-
</div>
23-
</div>
24-
)
3+
import { bindActionCreators } from 'redux'
4+
import * as weatherActions from '../actions/weatherActions'
5+
6+
class Weather extends React.Component {
7+
constructor(props) {
8+
super(props)
9+
this.handleClick = this.handleClick.bind(this)
10+
this.hasLoaded = this.hasLoaded.bind(this)
11+
this.isLoading = this.isLoading.bind(this)
12+
this.Spinner = this.Spinner.bind(this)
13+
this.Button = this.Button.bind(this)
14+
this.Information = this.Information.bind(this)
15+
}
16+
17+
handleClick() {
18+
this.props.actions.getWeather()
19+
}
20+
21+
hasLoaded() {
22+
return this.props.weatherState.city === 'Initial'
23+
}
24+
25+
isLoading() {
26+
return this.props.weatherState.loading
27+
}
28+
29+
Spinner() {
30+
return <div className="c-weather__spinner"></div>
31+
}
32+
33+
Button() {
34+
const { loading } = this.props.weatherState
35+
return loading ? this.Spinner() : <button onClick={this.handleClick.bind(this)}>Click Me!</button>
36+
}
37+
38+
Information() {
39+
const { city, temp, date, text } = this.props.weatherState
40+
return (
41+
<div>
42+
<h4>
43+
{city} - {temp}&#8457;
44+
</h4>
45+
<p>
46+
{date}
47+
</p>
48+
<p>
49+
{text}
50+
</p>
51+
</div>
52+
)
53+
}
54+
55+
render() {
56+
return <div>
57+
{this.hasLoaded() ? this.Button() : this.Information() }
58+
</div>
59+
}
60+
}
2561

2662
export default connect(
27-
state => ({
28-
weatherState: state.weatherReducer
29-
}),
30-
dispatch => ({
31-
actions: bindActionCreators(weatherActions, dispatch)
32-
})
33-
)(Weather)
63+
state => ({
64+
weatherState: state.weatherReducer
65+
}),
66+
dispatch => ({
67+
actions: bindActionCreators(weatherActions, dispatch)
68+
})
69+
)(Weather)

‎src/pages/Home.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react'
2-
import Card from '../components/Card'
32

43
const HomePage = () => {
54
const content = {
65
title: 'Welcome to CRRS-APP',
76
article:
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?'
7+
'This project was bootstrapped with Create React App and Redux + SASS Structure.'
98
}
109

1110
return (

‎src/pages/Todo.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react'
2-
import Card from '../components/Card'
32
import TodoFooter from '../components/TodoFooter'
43
import AddTodo from '../containers/AddTodo'
54
import VisibleTodoList from '../containers/VisibleTodoList'
65

76
const TodoPage = () =>
87
<main className="p-todo">
9-
<h3 className="p-todo__title">CRRS - Todo List</h3>
8+
<h3 className="p-todo__title">Todo List - Sample Practice!</h3>
109
<AddTodo />
1110
<VisibleTodoList />
1211
<TodoFooter />

‎src/pages/Weather.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react'
22
import Weather from '../containers/Weather'
33

44
const WeatherPage = () =>
5-
<div>
6-
<h4>Weather Page</h4>
5+
<main>
6+
<h3>Get Weather - Practice Async Event!</h3>
7+
<p>Click the button below to fetch RESTful API and get weather. </p>
78
<Weather />
8-
</div>
9+
</main>
910

1011
export default WeatherPage

‎src/styles/base/_typography.sass‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body
99
color: $base_font_color
1010

1111
h1, h2, h3, h4, h5, h6
12-
text-align: center
12+
// text-align: center
1313
margin-top: 10px
1414
margin-bottom: 10px
1515

@@ -33,22 +33,21 @@ input:focus
3333
color: $base_font_color
3434

3535
button
36-
display: inline-block
37-
margin: 0 10px
38-
background-color: #A082D1
39-
width: 130px
40-
height: 40px
41-
color: #fff
42-
text-transform: uppercase
36+
background-color: #fff
37+
width: 100px
38+
height: 100px
4339
outline: none
44-
border: solid 1px $base_border_color
45-
border-radius: 2em
40+
border: none
41+
border-radius: 50%
4642
cursor: pointer
4743
transition: all 1s ease 0s
44+
text-transform: uppercase
45+
color: #888
4846
&:hover
49-
background-color: #eee
47+
background-color: #ddd
5048
&:disabled
5149
cursor: auto
50+
5251
strong
5352
display: block
5453
margin-bottom: 10px
@@ -57,3 +56,4 @@ main
5756
width: 100%
5857
max-width: 600px
5958
margin: 0 auto
59+
padding: 20px

‎src/styles/components/_todo.sass‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
.c-todo
22
&__section
3-
// width: 100%
4-
// border: solid 1px #A082D1
53
position: relative
64
color: #666
75
margin: 10px auto
@@ -21,19 +19,22 @@
2119
background-color: rgba(0,0,0,0)
2220
border: 0
2321
line-height: 0
22+
width: 60px
23+
height: 40px
2424
&:hover
2525
color: #A082D1
2626
background-color: rgba(0,0,0,0)
2727

28-
2928
&__list
29+
padding: 0 20px
3030
width: 100%
3131
&_item
3232
display: block
3333
margin: 0 auto
34-
width: 100%
3534
height: 40px
3635
line-height: 40px
3736
border: solid 1px #ccc
37+
padding: 0 20px
38+
cursor: pointer
3839

3940

‎src/styles/components/_weather.sass‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.c-weather
2+
border: solid 1px #ddd
3+
padding: 20px
4+
background-color: whitesmoke
5+
&__spinner
6+
border: 16px solid #f3f3f3
7+
border-top: 16px solid #A082D1
8+
border-radius: 50%
9+
width: 50px
10+
height: 50px
11+
animation: spin .3s linear infinite
12+
13+
@keyframes spin
14+
0%
15+
transform: rotate(0deg)
16+
100%
17+
transform: rotate(360deg)

0 commit comments

Comments
 (0)