Day_16 has been added

16_Higher_Order_Component/16_higher_order_component_boilerplate/src/index.js

@@ -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>
     )
   }