asabeneh
5 years ago
parent
0fd4349292
commit
479667a74c
@ -1,137 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import axios from '../../../17_React_Router/17_react_router_boilerplate/src/node_modules/axios'
|
|
||||||
import ReactDOM from 'react-dom'
|
|
||||||
import moment from '../../../17_React_Router/17_react_router_boilerplate/src/node_modules/moment'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
import {
|
|
||||||
TiSocialLinkedinCircular,
|
|
||||||
TiSocialGithubCircular,
|
|
||||||
TiSocialTwitterCircular,
|
|
||||||
} from '../../../17_React_Router/17_react_router_boilerplate/src/node_modules/react-icons/ti'
|
|
||||||
|
|
||||||
const Title = styled.h1`
|
|
||||||
font-size: 70px;
|
|
||||||
font-weight: 300;
|
|
||||||
`
|
|
||||||
const SubTitle = styled.h2`
|
|
||||||
font-weight: 300;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Header = styled.header`
|
|
||||||
background-color: #61dbfb;
|
|
||||||
padding: 25;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0;
|
|
||||||
`
|
|
||||||
|
|
||||||
class App extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
console.log('I am the constructor and I will be the first to run.')
|
|
||||||
this.state = {
|
|
||||||
firstName: 'John',
|
|
||||||
data: [],
|
|
||||||
day: 1,
|
|
||||||
congratulate: '',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const API_URL = 'https://restcountries.eu/rest/v2/all'
|
|
||||||
axios
|
|
||||||
.get(API_URL)
|
|
||||||
.then((response) => {
|
|
||||||
this.setState({
|
|
||||||
data: response.data,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
static getDerivedStateFromProps(props, state) {
|
|
||||||
return { firstName: props.firstName }
|
|
||||||
}
|
|
||||||
shouldComponentUpdate(nextProps, nextState) {
|
|
||||||
console.log(nextProps, nextState)
|
|
||||||
console.log(nextState.day)
|
|
||||||
if (nextState.day > 31) {
|
|
||||||
return false
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
doChallenge = () => {
|
|
||||||
this.setState({
|
|
||||||
day: this.state.day + 1,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
renderCountries = () => {
|
|
||||||
return this.state.data.map((country) => {
|
|
||||||
const languageOrLanguages =
|
|
||||||
country.languages.length > 1 ? 'Langauges' : 'Language'
|
|
||||||
const formatLanguages = country.languages
|
|
||||||
.map(({ name }) => name)
|
|
||||||
.join(', ')
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
{' '}
|
|
||||||
<img src={country.flag} alt={country.name} />{' '}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>{country.name}</h1>
|
|
||||||
<p>Capital: {country.capital}</p>
|
|
||||||
<p>
|
|
||||||
{languageOrLanguages}: {formatLanguages}
|
|
||||||
</p>
|
|
||||||
<p>Population: {country.population}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
|
||||||
if (prevState.day == 30) {
|
|
||||||
this.setState({
|
|
||||||
congratulate: 'Congratulations,Challenge has been completed',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
console.log(prevState, prevProps)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className='App'>
|
|
||||||
<Header>
|
|
||||||
<Title>30 Days Of React</Title>
|
|
||||||
<h2>Getting Started React</h2>
|
|
||||||
<h3>JavaScript Library</h3>
|
|
||||||
<p>Instructor: Asabeneh Yetayey</p>
|
|
||||||
<small>Oct 15, 2020</small>
|
|
||||||
</Header>
|
|
||||||
<p>This challenge was started {moment('2020-10-01').fromNow()}</p>
|
|
||||||
<p>The challenge will be over in {moment('2020-10-30').fromNow()}</p>
|
|
||||||
<p>Today is {moment(new Date()).format('MMMM DD, YYYY HH:mm')}</p>
|
|
||||||
<h1>React Component Life Cycle</h1>
|
|
||||||
<h1>Calling API</h1>
|
|
||||||
<TiSocialLinkedinCircular />
|
|
||||||
<TiSocialGithubCircular />
|
|
||||||
<TiSocialTwitterCircular />
|
|
||||||
|
|
||||||
<button onClick={this.doChallenge}>Do Challenge</button>
|
|
||||||
<p>Challenge: Day {this.state.day}</p>
|
|
||||||
{this.state.congratulate && <h2>{this.state.congratulate}</h2>}
|
|
||||||
<div>
|
|
||||||
<p>There are {this.state.data.length} countries in the api</p>
|
|
||||||
<div className='countries-wrapper'>{this.renderCountries()}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const rootElement = document.getElementById('root')
|
|
||||||
ReactDOM.render(<App />, rootElement)
|
|
||||||
Loading…
Reference in new issue