// import './App.

css';
// import {Next} from "./components"
// import styles from './index.module.css'

// date : 07-05-24
/*function App(){
console.log(styles)
// const styles = {color : "brown" , fontSize :"40px"}

var fruits =[ "appple", "banana","mango"]

return(
<div>
<h1 style = {styles}>APP COMPONENT </h1>
<p id ={styles.p1}>COLOURS IN APPP</p>
<h2>hi</h2>

<About/>
<Next/>

<ol>{fruits.map((items,i)=>{
return <li>{fruits[0]}</li>
})}
</ol>
</div>
)
}

function About(){
return (<h2>About component 1</h2> )
}*/
***********************************************************************************
******************************

//date 08-05-24
//class based component
/*
import React from "react";
class App extends React.Component{
count = 40
test(num1,num2){console.log("button is clicked");console.log(num1 + num2)}
render(){

return(<><button onClick = {()=>{this.test(5,4); }} >Click Here</button></>)

}
}*/
//date 09-05-24
/*import React from "react"
class App extends React.Component{
state={
value : 100
}
incrementedvalue(){
console.log("button is clicked")
this.setState({
value : this.state.value + 1
 })
}
render(){

return(<>
<p>Present value is {this.state.value}</p>
<button onClick={()=>{this.incrementedvalue()}} >+ One</button>
</>)

}
}*/

// import logo from './logo.svg';

//date : 10 -05-24
import React from "react"
import './App.css';

class App extends React.Component{

state = {
itemName : "",
todoItems : []
}
addItems(){

console.log("button is clicked")
let copyList = [...this.state.todoItems]
copyList.push(this.state.itemName)
this.setState({todoItems : copyList})
this.state.itemName= ""
}
deleteItem(index){
console.log(index)
let copyList = [...this.state.todoItems]
copyList.splice(index,1)
this.setState({todoItems : copyList})
}
clearAll(){
this.setState({todoItems : []})
}
render(){
return(
<>
<h1> Todo list App component</h1>
<input placeholder="Enter an item here"
value ={this.state.itemName}
onChange={(e)=>{
console.log(e.target.value)
this.setState({itemName:e.target.value})//important line to learn
}}
/>
 <button onClick={()=>{this.addItems() }}> Add item</button>
<button onClick={()=>{this.clearAll() }}>Clear all items</button>
<ol> {this.state.todoItems.map((item,i)=>
{
return <li>{item} <button onClick={ ()=>{this.deleteItem(i)}}> Delete item
</button>
{/* <input placeholder="update item"></input>
<button>Update item</button> */}
</li>
})

</ol>
</>
)
}

export default App;// only one default

***********************************************************************************
***********************************************************

Date : 15 - 05 -24

there are three life cycles in class based components

1.componentDidMount() : Intially executed when created and put in Dom [exe only one
time]
*best for Api Calls
2.componentDidUpdate():It is executed When State is executed
3.ComponentWillMount(): used for remove

*Pure components : it automatically checks if the state or props has not changed
then it will avoid Render
import react{component, Pure component} from 'React'

**Intro to HOOKS
In react hooks are the functions that allow you to use state and other features in
function based components
Earlier there is no state in function based components
they will introduced in react 16.8
1.usteState :allow you to use state
import React,{useState,useEffect} from "react";

function App(){
 let [State,updatestate]= useState({a:10})
function changevalue(){
console.log("button clicked")
updatestate({a:20 }
}
return(
<>
<h1>App component</h1>
val A={State.a}
<button onClick={()=>{changevalue()}}>+1</button>
</>
)
}
export default App ;

2.useEffect: We can implement life cycle phases in function based component

*combination of didmount and didupdate

useeffect(()=>{console.log("use effect is called")},[]} // [] : it stops did

update method if need

import React,{useState,useEffect} from "react";

function App(){
let [State,updatestate]= useState({a:10,b:50,c:40})
function changevalue(){
console.log("button clicked")
updatestate({a:20 })
}
useEffect(()=>{
console.log("use effect is called")
},[])
return(
<>
<h1>App component</h1>
val A={State.a}
<button onClick={()=>{changevalue()}}>+1</button>
</>
)
}

export default App ;

*********Example : Api calling in function

component@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
import axios from "axios";
import React,{useState,useEffect} from "react";

function App(){

let [Apidata,stateupdate]= useState([])

useEffect(()=>{
axios.get("http://jsonplaceholder.typicode.com/users")
.then((res)=>{

stateupdate(res.data)
})
},)
return(
<>
<h1>App component</h1>
<ol>{Apidata.map((item,i)=>{
return<li>{item.username}</li>
})}</ol>
</>
)
}

export default App ;

Example TODO items in Function based

component**************************************************************************

import React,{useEffect,useState} from "react"

import './App.css';

function App(){

let [itemName,updateItemName]=useState("hh")
let [ todoItems,updateTodoItems]=useState([])

// function addItems(){

// console.log("button is clicked")
// let copyList = [...todoItems]
// copyList.push(itemName)
// updateTodoItems({copyList})

// }
function additem(){
console.log("button is clicked")
let copyList = [...todoItems]
copyList.push(itemName)
updateTodoItems(copyList)
}

return(
<>
<h1>TODO LIST</h1>
<input placeholder="enter an item"
onChange={(e)=>{
console.log(e.target.value)
updateItemName(e.target.value)
}}

/><button onClick={()=>{additem()}}>Add item</button>

<ol>{todoItems.map((item,i)=>{
return <li>item</li>
})}</ol>
</>)
}
export default App;// only one default
###################################################################################
#######################################################
filtred items :

const [filteredItems,setFilteredItems] = useState([])

const filterProducts = (userSearch)=>{

let result = Product.filter ((item,i)=>{
if(item.title.toLowerCase().includes(userSearch.toLowerCase())==true){
return true
}

})
setFilteredItems(result)
}

return(
<input style ={{}} placeholder="search products"
// value={userSearch}
onChange={(e)=>{
filterProducts(e.target.value)
}}

{/* condition to render */}

{ filteredItems.length==0 ? Product.map((item,i)=>{
return <Productinfo/>
}):filteredItems.map((item,i)=>{
return <Productinfo />
})}

useRef**************************************************************

when rerender no value lost

function App() {
let value = useRef(10)
const[count,setCount]=useState("")
function setvalue(){
value.current= value.current + 1
console.log(value)
}
return (
<>
<p>value = {value.current}</p>
<button onClick={()=>{
setvalue()

}}>increment +1</button>
<h1>hello react</h1>
<p>count = {count}</p>
<button onClick={()=>{
setCount(count + 1)

}}>increment +1</button>
 </>
);
}

export default App;

redux STORE:********************************
import Reducer from './reducer';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

let store = createStore(Reducer,window.__REDUX_DEVTOOLS_EXTENSION__ &&

window.__REDUX_DEVTOOLS_EXTENSION__())

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<>
<Provider store={store}><App/></Provider>);
Reducer****************************************************
let data = {
name : "sai",
age : "20",
roll : "5"
}

function Reducer (state = data , action){

console.log(action)
if(action.type== "changeName"){
return{ ...state,
name : action.payload

}
}else if (action.type =="changeAge" )
{return{
...state,
age : action.payload
}}

return state

}
export default Reducer

****************************************************88
test*****************************
import React from "react";
import Test1 from './test1';
import { connect } from "react-redux";
import Reducer from "./reducer";
function Test(props){
// console.log(props)
return(
 <> <h1>TEST COMPONENT</h1>
<p>Name :{ props.name}</p>
<p> Age :{ props.age}</p>
<p>ROLL :{ props.roll}</p>
<button onClick={
()=>{ props.changeName()}
}>change Name</button>
<button onClick={
()=>{ props.changeAge()}
}>change age</button>
<Test1/></>
)
}
const mapStateToProps=(state)=>{
return state
}
const mapDispatchToProps=(dispatch)=>{
return {
changeName : ()=>{
console.log( "button" )
dispatch({type : "changeName", payload : "santhosh"})

},
changeAge : ()=>{
console.log( "button" )
dispatch({type : "changeAge", payload : "11"})

}
}
}

export default connect(mapStateToProps,mapDispatchToProps)(Test)