Skip to content

Commit

Permalink
React useEffect Hook 💚💙
Browse files Browse the repository at this point in the history
  • Loading branch information
@SOURAV-ROY
SOURAV-ROY committed Aug 30, 2021
1 parent 76af926 commit 085fd1f
Show file tree
Hide file tree
Showing 3 changed files with 264 additions and 137 deletions.
296 changes: 159 additions & 137 deletions src/App.js
View file
@@ -1,153 +1,175 @@
import './App.css'
/**
// import Clock from "./components/Clock/Clock";
import ClockList from "./components/Clock/ClockList";
// import Form from "./components/Form/Form";
// import Calculator from "./components/Temperature/Calculator";
// import Text from "./components/Inheritance/Text";
import Text from "./components/Composition/Text";
import Emoji from "./components/Composition/AddEmoji";
import Bracket from "./components/Composition/AddBracket";

// HOC Component is here because it is used
// import ClickCounter from "./HOC/ClickCounter";
// import ClickCounter from "./HOC/ClickAndHoverCounter/ClickCounter";
// import MouseOver from "./HOC/MouseOver";
// import HoverCounter from "./HOC/ClickAndHoverCounter/HoverCounter";
// import Clock from "./components/Clock/Clock";
// import ClockList from "./components/Clock/ClockList";
// import Form from "./components/Form/Form";
// import Calculator from "./components/Temperature/Calculator";
// import Text from "./components/Inheritance/Text";

import User from "./components/User/User";
*/
import Counter from "./components/Counter/Counter";
import ClickCounter from "./components/Counter/ClickCounter";
// import HoverCounter from "./components/Counter/HoverCounter";
import {Component} from "react";
import Section from "./components/Counter/Section/Section";
import ThemeContext from "./contexts/ThemeContext";
import Text from "./components/Composition/Text";
import Emoji from "./components/Composition/AddEmoji";
import Bracket from "./components/Composition/AddBracket";

// React Hooks
import TodoClass from "./components/TodoClass/TodoClass";
import Todo from "./components/TodoClass/Todo";
import TodoObject from "./components/TodoClass/TodoObject";
import CounterCount from "./components/TodoClass/CounterCount";
// HOC Component is here because it is used
// import ClickCounter from "./HOC/ClickCounter";
// import ClickCounter from "./HOC/ClickAndHoverCounter/ClickCounter";
// import MouseOver from "./HOC/MouseOver";
// import HoverCounter from "./HOC/ClickAndHoverCounter/HoverCounter";

// function App() {
// console.log('App component render');
// const quantities = [1];
// return (
// <div className="App">
// <h1>Hello Sourav</h1>
// {/*<Clock local='bn-BD'/>*/}
// {/*<Clock/>*/}
// <ClockList quantities={quantities}/>
// {/*<Form/>*/}
// {/*<Calculator/>*/}
// {/*<Text/>*/}
// {/*<AddEmoji>*/}
// {/* <Text/>*/}
// {/*</AddEmoji>*/}
// {/*<AddEmoji>*/}
// {/* {({addEmoji}) => <Text addEmoji={addEmoji}/>}*/}
// {/*</AddEmoji>*/}
// <Emoji>
// {({addEmoji}) => (
// <Bracket>
// {({addBracket}) => <Text addEmoji={addEmoji} addBracket={addBracket}/>}
// </Bracket>
// )}
// </Emoji>
// <hr/>
// {/*<ClickCounter/>*/}
// {/*<MouseOver/>*/}
// {/*<HoverCounter/>*/}
// {/*<User name="Sourav Roy"/>*/}
// {/*<User name={() => 'SOURAV ROY'}/>*/}
// <User name={(isLoggedIn) => (isLoggedIn ? 'SOURAV ROY' : 'Guest')}/>
//
// {/*<Counter>*/}
// {/* {(counter, incrementCount) => (*/}
// {/* <ClickCounter count={counter} incrementCount={incrementCount}/>*/}
// {/* )}*/}
// {/*</Counter>*/}
// <Counter
// render={(counter, incrementCount) => (
// <ClickCounter count={counter} incrementCount={incrementCount}/>
// )}
// />
// <Counter
// render={(counter, incrementCount) => (
// <HoverCounter count={counter} incrementCount={incrementCount}/>
// )}
// />
// </div>
// );
// }
import User from "./components/User/User";

class App extends Component {
state = {
theme: 'dark',
/**
import Counter from "./components/Counter/Counter";
import ClickCounter from "./components/Counter/ClickCounter";
import HoverCounter from "./components/Counter/HoverCounter";
*/

switchTheme: () => {
this.setState(({theme}) => {
/**
import {Component} from "react";
import Section from "./components/Counter/Section/Section";
import ThemeContext from "./contexts/ThemeContext";
*/

if (theme === 'dark') {
return {
theme: 'light',
}
} else {
return {
theme: 'dark',
}
}
})
}
}
/**
// React Hooks
import TodoClass from "./components/TodoClass/TodoClass";
import Todo from "./components/TodoClass/Todo";
import TodoObject from "./components/TodoClass/TodoObject";
import CounterCount from "./components/TodoClass/CounterCount";
*/

// switchTheme = () => {
// this.setState(({theme}) => {
//
// if (theme === 'dark') {
// return {
// theme: 'light',
// }
// } else {
// return {
// theme: 'dark',
// }
// }
// })
// }
// import MyClassComponent from "./components/UseEffectHook/MyClassComponent";
import MyFunComponent from "./components/UseEffectHook/MyFunComponent";
import {useState} from "react";

render() {
const {theme, switchTheme} = this.state;
return (
<div className="App">
<Counter
render={(counter, incrementCount) => (
<ClickCounter count={counter} incrementCount={incrementCount}/>
)}
/>
function App() {
console.log('App component render');
// const quantities = [1,2,3];
const [show, setShow] = useState(true);
return (
<div className="App">
<h1>Hello Sourav</h1>
{/*<Clock local='bn-BD'/>*/}
{/*<Clock/>*/}
{/*<ClockList quantities={quantities}/>*/}
{/*<Form/>*/}
{/*<Calculator/>*/}
{/*<Text/>*/}
{/*<AddEmoji>*/}
{/* <Text/>*/}
{/*</AddEmoji>*/}
{/*<AddEmoji>*/}
{/* {({addEmoji}) => <Text addEmoji={addEmoji}/>}*/}
{/*</AddEmoji>*/}
<Emoji>
{({addEmoji}) => (
<Bracket>
{({addBracket}) => <Text addEmoji={addEmoji} addBracket={addBracket}/>}
</Bracket>
)}
</Emoji>
<hr/>
{/*<ClickCounter/>*/}
{/*<MouseOver/>*/}
{/*<HoverCounter/>*/}
{/*<User name="Sourav Roy"/>*/}
{/*<User name={() => 'SOURAV ROY'}/>*/}
<User name={(isLoggedIn) => (isLoggedIn ? 'SOURAV ROY' : 'Guest')}/>

{/*<ThemeContext.Provider value={{theme, switchTheme: this.switchTheme}}>*/}
{/* /!*<Section theme={theme}/>*!/*/}
{/* <Section/>*/}
{/*</ThemeContext.Provider>*/}
{/*<Counter>*/}
{/* {(counter, incrementCount) => (*/}
{/* <ClickCounter count={counter} incrementCount={incrementCount}/>*/}
{/* )}*/}
{/*</Counter>*/}

{/*<ThemeContext.Provider value={this.state}>*/}
<ThemeContext.Provider value={{theme, switchTheme}}>
{/*<Section theme={theme}/>*/}
<Section/>
</ThemeContext.Provider>
<TodoClass/>
<hr/>
<Todo/>
<hr/>
<TodoObject/>
<CounterCount/>
<hr/>
{/*<Counter*/}
{/* render={(counter, incrementCount) => (*/}
{/* <ClickCounter count={counter} incrementCount={incrementCount}/>*/}
{/* )}*/}
{/*/>*/}
{/*<Counter*/}
{/* render={(counter, incrementCount) => (*/}
{/* <HoverCounter count={counter} incrementCount={incrementCount}/>*/}
{/* )}*/}
{/*/>*/}
<div>
{/*{show && <MyClassComponent/>}*/}
{show && <MyFunComponent/>}
</div>
);
}
<button type='button' onClick={() => setShow((prevShow) => !prevShow)}>
{show ? 'Hide Post' : 'Show Post'}
</button>
</div>
);
}


// class App extends Component {
// state = {
// theme: 'dark',
//
// switchTheme: () => {
// this.setState(({theme}) => {
//
// if (theme === 'dark') {
// return {
// theme: 'light',
// }
// } else {
// return {
// theme: 'dark',
// }
// }
// })
// }
// }
//
// // switchTheme = () => {
// // this.setState(({theme}) => {
// //
// // if (theme === 'dark') {
// // return {
// // theme: 'light',
// // }
// // } else {
// // return {
// // theme: 'dark',
// // }
// // }
// // })
// // }
//
// render() {
// const {theme, switchTheme} = this.state;
// return (
// <div className="App">
// <Counter
// render={(counter, incrementCount) => (
// <ClickCounter count={counter} incrementCount={incrementCount}/>
// )}
// />
//
// {/*<ThemeContext.Provider value={{theme, switchTheme: this.switchTheme}}>*/}
// {/* /!*<Section theme={theme}/>*!/*/}
// {/* <Section/>*/}
// {/*</ThemeContext.Provider>*/}
//
// {/*<ThemeContext.Provider value={this.state}>*/}
// <ThemeContext.Provider value={{theme, switchTheme}}>
// {/*<Section theme={theme}/>*/}
// <Section/>
// </ThemeContext.Provider>
//
// {/*<TodoClass/>*/}
// {/*<hr/>*/}
// {/*<Todo/>*/}
// {/*<hr/>*/}
// {/*<TodoObject/>*/}
// {/*<CounterCount/>*/}
// <hr/>
// </div>
// );
// }
// }

export default App;
52 changes: 52 additions & 0 deletions src/components/UseEffectHook/MyClassComponent.js
View file
@@ -0,0 +1,52 @@
import React, {Component} from 'react';

class MyClassComponent extends Component {
state = {
count: 0,
date: new Date(),
}

tick = () => {
console.log('Time TikTik');
this.setState({
date: new Date()
})
}

componentDidMount() {
const {count} = this.state;
document.title = `clicked ${count} Times`;
this.interval = setInterval(this.tick, 1000);
console.log(`Did Mount ${count}`);
}

componentDidUpdate() {
const {count} = this.state;
document.title = `Clicked ${count} Times`;
// console.log(`Component Did Update ${count}`);
}

componentWillUnmount() {
clearInterval(this.interval);
}

addClick = () => {
this.setState(({count}) => ({
count: count + 1
}));
}

render() {
const {date} = this.state;
return (
<div>
<p>Time: {date.toLocaleTimeString()}</p>
<p>
<button type='button' onClick={this.addClick}>Click</button>
</p>
</div>
);
}
}

export default MyClassComponent;

0 comments on commit 085fd1f

Please sign in to comment.