text: (this["webpackJsonpgoit-react-hw-04-hooks-phonebook"]=this["webpackJsonpgoit-react-hw-04-hooks-phonebook"]||[]).push([[0],[,,,,,,,,,,,,,,,function(t,e,n){},function(t,e,n){},,,,function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";n.r(e);var a=n(1),c=n.n(a),o=n(9),r=n.n(o),s=(n(15),n(10)),i=n(7),u=n(3),l=n(4),m=n(6),d=n(5),b=(n(16),n(0));var h=function(t){var e=t.title,n=t.children;return Object(b.jsxs)("div",{className:"task__section",children:[e&&Object(b.jsx)("h2",{children:e}),n]})},f=n(2),j=n.n(f),p=n(27),O=(n(20),function(t){Object(m.a)(n,t);var e=Object(d.a)(n);function n(){var t;Object(u.a)(this,n);for(var a=arguments.length,c=new Array(a),o=0;o<a;o++)c[o]=arguments[o];return(t=e.call.apply(e,[this].concat(c))).nameId=Object(p.a)(),t.numberId=Object(p.a)(),t.state={name:"",number:""},t.formChange=function(e){var n=e.currentTarget,a=n.name,c=n.value;t.setState(Object(i.a)({},a,c))},t.formSubmit=function(e){e.preventDefault();var n={id:Object(p.a)(),name:t.state.name,number:t.state.number};t.props.onSubmit(n),t.formReset()},t.formReset=function(){t.setState({name:""}),t.setState({number:""})},t}return Object(l.a)(n,[{key:"render",value:function(){var t=this.state,e=t.name,n=t.number;return Object(b.jsxs)("form",{className:"contacts__form",onSubmit:this.formSubmit,children:[Object(b.jsxs)("label",{className:"contcts__form-label",htmlFor:this.nameId,children:["Name",Object(b.jsx)("input",{className:"contcts__form-input",type:"text",name:"name",pattern:"^[a-zA-Z\u0430-\u044f\u0410-\u042f]+(([' -][a-zA-Z\u0430-\u044f\u0410-\u042f ])?[a-zA-Z\u0430-\u044f\u0410-\u042f]*)*$",title:"\u0418\u043c\u044f \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u0431\u0443\u043a\u0432, \u0430\u043f\u043e\u0441\u0442\u0440\u043e\u0444\u0430, \u0442\u0438\u0440\u0435 \u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan \u0438 \u0442. \u043f.",required:!0,value:e,onChange:this.formChange,id:this.nameId})]}),Object(b.jsxs)("label",{className:"contcts__form-label",htmlFor:this.numberId,children:["Number",Object(b.jsx)("input",{className:"contcts__form-input",type:"tel",name:"number",pattern:"\\+?\\d{1,4}?[-.\\s]?\\(?\\d{1,3}?\\)?[-.\\s]?\\d{1,4}[-.\\s]?\\d{1,4}[-.\\s]?\\d{1,9}",title:"\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0446\u0438\u0444\u0440 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u0442\u0438\u0440\u0435, \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 +",required:!0,value:n,onChange:this.formChange,id:this.numberId})]}),Object(b.jsx)("button",{className:"contacts__form-button",type:"submit",children:"Add contact"})]})}}]),n}(a.Component));O.PropsType={onSubmit:j.a.func.isRequired};var v=O,C=(n(21),function(t){Object(m.a)(n,t);var e=Object(d.a)(n);function n(){return Object(u.a)(this,n),e.apply(this,arguments)}return Object(l.a)(n,[{key:"render",value:function(){return Object(b.jsxs)("div",{children:[Object(b.jsx)("h3",{className:"filter__header",children:"Find contacts by name :"}),Object(b.jsx)("input",{type:"text",name:"filter",value:this.props.value,onChange:this.props.onChange,className:"filter__input"})]})}}]),n}(a.Component)),g=C,_=(n(22),function(t){var e=t.id,n=t.name,a=t.number,c=t.onDeleteContact;return Object(b.jsxs)("li",{className:"contact__list-item",children:[Object(b.jsxs)("div",{children:[n,": ",a]}),Object(b.jsx)("button",{className:"contact__list-delete-button",type:"submit",onClick:function(){return c(e)},children:"Delete"})]})});_.prototype={id:j.a.number.isRequired,name:j.a.string.isRequired,number:j.a.number.isRequired,onDeleteContact:j.a.func.isRequired};var x=_,y=(n(23),function(t){var e=t.findContact,n=t.onDeleteContact;return Object(b.jsx)("ul",{className:"contact__list",children:e().map((function(t){var e=t.id,a=t.name,c=t.number;return Object(b.jsx)(x,{className:"contacts__list-item",id:e,name:a,number:c,onDeleteContact:n},e)}))})});y.prototype={findContact:j.a.func.isRequired,onDeleteContact:j.a.func.isRequired};var N=y,S=(n(24),function(t){Object(m.a)(n,t);var e=Object(d.a)(n);function n(){var t;Object(u.a)(this,n);for(var a=arguments.length,c=new Array(a),o=0;o<a;o++)c[o]=arguments[o];return(t=e.call.apply(e,[this].concat(c))).state={contacts:[],filter:""},t.getChange=function(e){var n=e.currentTarget,a=n.name,c=n.value;t.setState(Object(i.a)({},a,c))},t.addContact=function(e){t.checkContact(e.name)?alert("".concat(e.name," is already in contacts")):t.setState((function(t){var n=t.contacts;return{contacts:[e].concat(Object(s.a)(n))}}))},t.checkContact=function(e){return t.state.contacts.find((function(t){return t.name.toLocaleLowerCase()===e.toLocaleLowerCase()}))},t.findContact=function(){var e=t.state,n=e.filter,a=e.contacts,c=n.toLocaleLowerCase();return n.length?a.filter((function(t){return t.name.toLowerCase().includes(c)})):a},t.deleteContact=function(e){t.setState((function(t){return{contacts:t.contacts.filter((function(t){return t.id!==e}))}}))},t}return Object(l.a)(n,[{key:"componentDidMount",value:function(){console.log("MOUNT");var t=localStorage.getItem("contacts"),e=JSON.parse(t);e&&this.setState({contacts:e})}},{key:"componentDidUpdate",value:function(t,e){console.log("UPDATE"),e.contacts!==this.state.contacts&&localStorage.setItem("contacts",JSON.stringify(this.state.contacts))}},{key:"render",value:function(){return Object(b.jsxs)("div",{children:[Object(b.jsx)("h1",{className:"header__main",children:"React HW 004 Phonebook"}),Object(b.jsx)(h,{title:"Phonebook",children:Object(b.jsx)(v,{onSubmit:this.addContact})}),Object(b.jsxs)(h,{title:"Contacts",children:[Object(b.jsx)(g,{value:this.state.filter,onChange:this.getChange}),Object(b.jsx)(N,{findContact:this.findContact,onDeleteContact:this.deleteContact})]})]})}}]),n}(a.Component)),k=S;r.a.render(Object(b.jsx)(c.a.StrictMode,{children:Object(b.jsx)(k,{})}),document.getElementById("root"))}],[[25,1,2]]]);
  //# sourceMappingURL=main.83a191bf.chunk.js.map