Skip to content

Commit

Permalink
Day_16 has been added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asabeneh
Asabeneh committed Oct 15, 2020
1 parent ad6b501 commit 0fd4349
Showing 1 changed file with 80 additions and 118 deletions.
198 changes: 80 additions & 118 deletions 16_Higher_Order_Component/16_higher_order_component_boilerplate/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,95 @@
import React, { Component } from 'react'
import axios from '../../../17_React_Router/15_react_router_boilerplate/src/node_modules/axios'
import ReactDOM from 'react-dom'
import moment from '../../../17_React_Router/15_react_router_boilerplate/src/node_modules/moment'
import styled from 'styled-components'
import {
TiSocialLinkedinCircular,
TiSocialGithubCircular,
TiSocialTwitterCircular,
} from '../../../17_React_Router/15_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: '',
}
}
const Button = ({ onClick, text, style }) => {
return (
<button onClick={onClick} style={style}>
{text}
</button>
)
}

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)
})
const buttonWithStyles = (CompParam, bgColor = 'default') => {
const colors = [
{
name: 'default',
backgroundColor: '#e7e7e7',
color: '#000000',
},
{
name: 'react',
backgroundColor: '#61dbfb',
color: '#ffffff',
},
{
name: 'success',
backgroundColor: '#4CAF50',
color: '#ffffff',
},
{
name: 'info',
backgroundColor: '#2196F3',
color: '#ffffff',
},
{
name: 'warning',
backgroundColor: '#ff9800',
color: '#ffffff',
},
{
name: 'danger',
backgroundColor: '#f44336',
color: '#ffffff',
},
]
const { backgroundColor, color } = colors.find((c) => c.name === bgColor)

const buttonStyles = {
backgroundColor,
padding: '10px 45px',
border: 'none',
borderRadius: 3,
margin: 3,
cursor: 'pointer',
fontSize: '1.25rem',
color,
}
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
}
return (props) => {
return <CompParam {...props} style={buttonStyles} />
}
}

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)
}
const NewButton = buttonWithStyles(Button)
const ReactButton = buttonWithStyles(Button, 'react')
const InfoButton = buttonWithStyles(Button, 'info')
const WarningButton = buttonWithStyles(Button, 'warning')
const DangerButton = buttonWithStyles(Button, 'danger')
const SuccessButton = buttonWithStyles(Button, 'success')

class App extends Component {
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>
<h1>Higher Order Components</h1>
<Button text='No Style' onClick={() => alert('I am not styled yet')} />
<NewButton
text='Styled Button'
onClick={() => alert('I am the default style')}
/>
<ReactButton text='React' onClick={() => alert('I have react color')} />
<InfoButton
text='Info'
onClick={() => alert('I am styled with info color')}
/>
<SuccessButton text='Success' onClick={() => alert('I am succesful')} />
<WarningButton
text='Warning'
onClick={() => alert('I warn you many times')}
/>
<DangerButton
text='Danger'
onClick={() => alert('Oh no, you can not restore it')}
/>
</div>
)
}
Expand Down

0 comments on commit 0fd4349

Please sign in to comment.