Notes

import React, { Component } from "react";
import "./App.css";
import Modal from "./component/modal";
import {
validateName,
validateAddress,
validateMobile,
validateCity,
validateStates,
validateZip,
validateNameCityAddress,
} from "./component/validation";

class Home extends Component {

state = {
value:false,
radioPersonal :"",
showForm: false,
checked: "",
show: false,
show_personal: true,
name: "",
mobile: "",
addrs: "",
city: "",
states: "",
type: "",
zip: "",
name_error: "",
mobile_error: "",
addrs_error: "",
city_error: "",
states_error: "",
zip_error: "",
personal: [
{
name: "Sample",
mobile: "1234567890",
addrss: "a a a",
city: "Chennai",
states: "Tamil Nadu",
zip: "123456",
type: "Present",
},
],
business: [
{
name: "cool",
mobile: "1234567890",
addrss: "a a a",
city: "Chennai",
states: "Tamil Nadu",
zip: "123456",
type: "Both",
},
],
};

onNameChanged = (e) => {
this.setState({
name:e.target.value,
}, function () {
console.log("new status ",this.state);

if (validateNameCityAddress(this.state.name, 3)) {
this.setState({
name_error: "please enter a valid name",
}, function () {
console.log("new status ",this.state);
this.handleEnableButton()})
} else {
this.setState({
name_error: "",
}, function () {
console.log("new status ",this.state);
this.handleEnableButton()})
}
});
};

onMobileChanged = (e) => {
this.setState({
mobile:e.target.value,
}, function () {
if (validateMobile(this.state.mobile, 10)) {
this.setState({
mobile_error: "please enter a valid 10 digit mobile number",
}, function () {
this.handleEnableButton()})
} else {
this.setState({
mobile_error: "",
}, function () {
this.handleEnableButton()})
}
});
};

onAddressChanged = (e) => {
this.setState({
addrs:e.target.value,
}, function () {
if (validateAddress(this.state.addrs, 3)) {
this.setState({
addrs_error: "address should have a length of at least 3 words",
}, function () {
this.handleEnableButton()})
} else {
this.setState({
addrs_error: "",
}, function () {
this.handleEnableButton()})
}
});
};

onCityChanged = (e) => {
this.setState({
city:e.target.value,
}, function () {
if (validateNameCityAddress(this.state.city, 3)) {
this.setState({
city_error: "please enter a valid city name",
}, function () {
this.handleEnableButton()})
} else {
this.setState({
city_error: "",
}, function () {
this.handleEnableButton()})
}
});
};

onStatesChanged = (e) => {
this.setState({
states:e.target.value,
}, function () {
if (validateNameCityAddress(this.state.states, 3)) {
this.setState({
states_error: "please enter a valid state name",
}, function () {
this.handleEnableButton()})
} else {
this.setState({
states_error: "",
}, function () {
this.handleEnableButton()})
}
});
};

onZipChanged = (e) => {
this.setState({
zip:e.target.value,
}, function () {
if (validateZip(this.state.zip, 6)) {
this.setState({
zip_error: "Please enter a valid 6 digit zip pin",
}, function () {
this.handleEnableButton()})
} else {
this.setState({
zip_error: "",
}, function () {
this.handleEnableButton()})
}
});
};


handleSave = (e) => {
//write code for saving data into personal or business
e.preventDefault();
console.log(this.state.personal,this.state.business);
this.setState({show: false,
showForm: false});
this.state.radioPersonal === "personal" &&
this.setState({
personal: [...this.state.personal,
{
name: this.state.name,
mobile: this.state.mobile,
addrss: this.state.addrs,
city: this.state.city,
states: this.state.states,
zip: this.state.zip,
type: this.state.type,
}],
});

this.state.radioPersonal === "business" &&
this.setState({
business: [...this.state.business,
{
name: this.state.name,
mobile: this.state.mobile,
addrss: this.state.addrs,
city: this.state.city,
states: this.state.states,
zip: this.state.zip,
type: this.state.type,
}]});
this.handleEnableButton();
return(
<>
{
(this.state.checked ==="personal" || this.state.checked ==="") &&
this.state.personal.map((val,key) => {
return (
<tr key={key}>
<td>{val.name}</td>
<td>{val.mobile}</td>
<td>{val.addrss}</td>
<td>{val.city}</td>
<td>{val.states}</td>
<td>{val.zip}</td>
<td>{val.type}</td>
</tr>)
})
}
{
this.state.checked ==="business" &&
this.state.business.map((val,key) => {
return (
<tr key={key}>
<td>{val.name}</td>
<td>{val.mobile}</td>
<td>{val.addrss}</td>
<td>{val.city}</td>
<td>{val.states}</td>
<td>{val.zip}</td>
<td>{val.type}</td>
</tr>)
})
}
</>
);

};

handleBorder = () => {
this.setState({
borderBottom1: "hidden",
borderBottom: "3px solid rgb(71, 68, 206)",
show_personal: true,
});
};

handleBorder1 = () => {
this.setState({
borderBottom: "hidden",
borderBottom1: "3px solid rgb(71, 68, 206)",
show_personal: false,
});
};

componentDidMount = () => {
this.handleBorder();
};

onClose = () => {
//write code for Modal close
this.setState({show: false,
showForm: false});
this.handleEnableButton();
};


handleChange = (e) => {
//write code to handle onchange event for input fields

};

handleClear = () => {
//write code for clearning input fields
this.setState({
showForm: false,
radioPersonal:""});
this.handleEnableButton();
};



handleClick = (e) => {
//e.preventDefault();
this.setState({
checked: "personal",
show_personal:true,
});
};

handleClick2 = (e) => {
//e.preventDefault();
this.setState({
checked: "business",
show_personal:false,
});
};

handleChangeRadio = e => {
this.setState({
radioPersonal: e.target.value
});
this.handleEnableButton();
};

handleEnableButton = () => {
if (this.state.name!=="" &&
this.state.mobile!=="" &&
this.state.addrs!=="" &&
this.state.city!=="" &&
this.state.states!=="" &&
this.state.zip!=="" &&
this.state.type!=="" &&
this.state.name_error==="" &&
this.state.mobile_error==="" &&
this.state.addrs_error==="" &&
this.state.city_error==="" &&
this.state.states_error==="" &&
this.state.zip_error==="")
{
this.setState({
value: true,
},function () {
});
}
else{
this.setState({
value: false,
},function () {
});
}
};

handleClick3= e => {
this.setState({
type:e.target.value,
}, function () {
console.log("new status ",this.state);
this.handleEnableButton()
});
}

handleReset = () => {
this.setState({
showForm:true,
name: "",
mobile: "",
addrs: "",
city: "",
states: "",
type: "",
zip: "",
name_error: "",
mobile_error: "",
addrs_error: "",
city_error: "",
states_error: "",
zip_error: "",
}, function () {
console.log("new status ",this.state);
this.myFormReference.reset();
this.handleEnableButton();
});
}

form = e =>{

return (<>
<form ref={(el) => this.myFormReference = el}>
<label> Name</label>
<br />
<input className="input" type="text" onChange={this.onNameChanged}></input>
{this.state.name_error !=="" && <span className="span">{this.state.name_error}</span>}
<br />
<label>Mobile No</label>
<br />
<input className="input" type="number" onChange={this.onMobileChanged}/>
{this.state.mobile_error !=="" && <span className="span">{this.state.mobile_error}</span>}
<br />
<div>
<label >Address</label>
<br />
<textarea className="textarea" onChange={this.onAddressChanged}
/>
{this.state.addrs_error !=="" && <span className="span">{this.state.addrs_error}</span>}
</div>
<br />
<label>City</label>
<br />
<input className="input" type="text" onChange={this.onCityChanged}/>
{this.state.city_error !=="" && <span className="span">{this.state.city_error}</span>}
<br />
<label>State</label>
<br />
<input className="input" type="text" onChange={this.onStatesChanged}/>
{this.state.states_error !=="" && <span className="span">{this.state.states_error}</span>}
<br />
<label>Postal Code/Zip Code</label>
<br />
<div>
<input className="input" type="number" onChange={this.onZipChanged}/>
{this.state.zip_error !=="" && <span className="span">{this.state.zip_error}</span>}
</div>
<br />
<div className="radios">
<input type="radio" value="present" name="typeRadio"
onChange={this.handleClick3} />
Present
<input type="radio" value="permanent" name="typeRadio"
onChange={this.handleClick3} />
Permanent
<input type="radio" value="both" name="typeRadio"
onChange={this.handleClick3} />
Both
</div>
<br />
<div className="btns">
<button className="save" onClick={this.handleSave} disabled={!this.state.value}

>Save</button>
<button className="clear" onClick={this.handleClear}>
Clear
</button>
</div>
</form>

</>);
}
showForm = () => {

return (
<>
<Modal/>
<div className="bg">
</div>
<div className="pop">
<h3>Fill Address Details</h3>
<button className="close" onClick={this.onClose}>X</button>
<div className="radios">
<input type="radio" value="personal"
name="demo"
onChange={this.handleChangeRadio} onClick={this.handleReset} checked={this.state.radioPersonal==="personal"}/> Personal
<input type="radio" value="business"
name="demo"
onChange={this.handleChangeRadio} onClick={this.handleReset} checked={this.state.radioPersonal==="business"}/> Business
</div>
{this.state.showForm ? this.form() : null}
</div>
</>
);
}


render() {
return (
<>
<div className="App"></div>
<div>
<h2 className="App-header">Address Book</h2>
<button className="add" onClick={() => this.setState({show: true,radioPersonal:""}) }>ADD</button>

<table className="table">
<tbody>
<tr className="buttons">
<th onClick={this.handleClick}>Personal</th>
<th onClick={this.handleClick2}>Business</th>
</tr>

<tr>
<td>Name</td>
<td>Moblie No.</td>
<td>Address</td>
<td>City</td>
<td>State</td>
<td>Zip</td>
<td>Pesent/Perment Address</td>
</tr>

{
(this.state.checked ==="personal" || this.state.checked ==="") &&
this.state.personal.map((val,key) => {
return (
<tr key={key}>
<td>{val.name}</td>
<td>{val.mobile}</td>
<td>{val.addrss}</td>
<td>{val.city}</td>
<td>{val.states}</td>
<td>{val.zip}</td>
<td>{val.type}</td>
</tr>
)
})
}
{
this.state.checked ==="business" &&
this.state.business.map((val,key) => {
return (
<tr key={key}>
<td>{val.name}</td>
<td>{val.mobile}</td>
<td>{val.addrss}</td>
<td>{val.city}</td>
<td>{val.states}</td>
<td>{val.zip}</td>
<td>{val.type}</td>
</tr>)
})
}
{
(this.state.checked ==="business" &&
this.state.business.length === 0 ) &&
<h3>No business recordes to display</h3>
}
{
(this.state.checked ==="personal" &&
this.state.personal.length === 0 ) &&
<h3>No personal recordes to display</h3>
}
</tbody>
</table>
{this.state.show ? this.showForm() : null}

</div>
</>
);

}
}

export default Home;