text: (this["webpackJsonpgoit-react-hw-03-phonebook"]=this["webpackJsonpgoit-react-hw-03-phonebook"]||[]).push([[0],[,,function(t,e,a){t.exports={input:"ContactForm_input__1DPgX",paragraf:"ContactForm_paragraf__14YiE",numberBox:"ContactForm_numberBox__1op53",buttonAdd:"ContactForm_buttonAdd__3Nb8B"}},,,function(t,e,a){t.exports={contactList:"ContactList_contactList__185HO",contactListItem:"ContactList_contactListItem__3jYL8",TelBox:"ContactList_TelBox__2j_eX",buttonDel:"ContactList_buttonDel__2nUc6",linkToTel:"ContactList_linkToTel__2oBrk"}},function(t,e,a){t.exports={formBox:"App_formBox__z2KoR",title:"App_title__MXZaL",paragraf:"App_paragraf__2dQYe",notificationBox:"App_notificationBox__l333r"}},,,,,,,,function(t,e,a){t.exports={search:"Filter_search__3ZCOp",paragraf:"Filter_paragraf__1dNxW"}},function(t,e,a){t.exports={NotificationBox:"Notification_NotificationBox__l6LyS",NotificationMessage:"Notification_NotificationMessage__4JHmm"}},,,function(t,e,a){t.exports={enter:"ContactTransition_enter__rGvG1",enterActive:"ContactTransition_enterActive__3Q5CH",exit:"ContactTransition_exit__8Dr87",exitActive:"ContactTransition_exitActive__1-dBs"}},function(t,e,a){t.exports={enter:"TitleTransition_enter__vaqsD",enterActive:"TitleTransition_enterActive__1Ntbm"}},function(t,e,a){t.exports={enter:"FilterTransition_enter__AB6T-",enterActive:"FilterTransition_enterActive__26CY2",exit:"FilterTransition_exit__uAjpp",exitActive:"FilterTransition_exitActive__3Tlqc"}},function(t,e,a){t.exports={enter:"NotificationTransition_enter__2pNm2",enterActive:"NotificationTransition_enterActive__2ODGU",exit:"NotificationTransition_exit__1XkZS",exitActive:"NotificationTransition_exitActive__2Il4Q"}},,,,function(t,e,a){t.exports=a(32)},,,,,,,function(t,e,a){"use strict";a.r(e);var n=a(0),i=a.n(n),o=a(7),c=a.n(o),r=a(22),s=a(8),l=a(9),m=a(11),u=a(12),_=a(34),f=a(17),p=a(36),h=a(2),b=a.n(h),d=function(t){Object(u.a)(a,t);var e=Object(m.a)(a);function a(){var t;Object(s.a)(this,a);for(var n=arguments.length,i=new Array(n),o=0;o<n;o++)i[o]=arguments[o];return(t=e.call.apply(e,[this].concat(i))).state={name:"",number:""},t.handleSubmit=function(e){e.preventDefault(),t.props.submitContact({name:t.state.name,number:t.state.number,id:Object(p.a)()}),t.setState({name:"",number:""})},t.handleChange=function(e){t.setState(Object(f.a)({},e.target.name,e.target.value))},t}return Object(l.a)(a,[{key:"render",value:function(){return i.a.createElement(i.a.Fragment,null,i.a.createElement("form",{onSubmit:this.handleSubmit},i.a.createElement("h2",{className:b.a.paragraf},"Name"),i.a.createElement("input",{type:"text",name:"name",placeholder:"Enter Name",maxLength:"18",onChange:this.handleChange,value:this.state.name,className:b.a.input,required:!0}),i.a.createElement("h2",{className:b.a.paragraf},"Number"),i.a.createElement("div",{className:b.a.numberBox},i.a.createElement("input",{type:"tel",pattern:"(\\+?\\d[- .]*){7,10}",maxLength:"10",name:"number",placeholder:"Enter Number",onChange:this.handleChange,value:this.state.number,className:b.a.input,required:!0}),i.a.createElement("button",{type:"submit",className:b.a.buttonAdd}))))}}]),a}(n.Component),N=a(35),x=a(18),g=a.n(x),v=a(5),E=a.n(v),C=function(t){var e=t.contacts,a=t.deleteContact;return i.a.createElement(N.a,{component:"ul",className:E.a.contactList},e.map((function(t){return i.a.createElement(_.a,{key:t.id,timeout:700,classNames:g.a,unmountOnExit:!0},i.a.createElement("li",{key:t.id,className:E.a.contactListItem},i.a.createElement("span",null,t.name,": "),i.a.createElement("div",{className:E.a.TelBox},i.a.createElement("a",{className:E.a.linkToTel,href:"tel:"+t.number},t.number),i.a.createElement("button",{className:E.a.buttonDel,type:"button",onClick:a,id:t.id}))))})))},T=a(14),A=a.n(T),y=function(t){var e=t.getName;return i.a.createElement("div",null,i.a.createElement("p",{className:A.a.paragraf},"Find contact by name"),i.a.createElement("input",{className:A.a.search,placeholder:"Search by name",type:"text",onChange:e}))},B=a(6),O=a.n(B),S=a(19),L=a.n(S),k=a(20),j=a.n(k),F=a(21),D=a.n(F),w=a(15),I=a.n(w),J=function(){return i.a.createElement("div",{className:I.a.NotificationBox},i.a.createElement("p",{className:I.a.NotificationMessage},"Contact already exist."))},M=function(t){Object(u.a)(a,t);var e=Object(m.a)(a);function a(){var t;Object(s.a)(this,a);for(var n=arguments.length,i=new Array(n),o=0;o<n;o++)i[o]=arguments[o];return(t=e.call.apply(e,[this].concat(i))).state={contacts:[],filter:"",mainTitle:!1,notification:!1},t.submitContact=function(e){t.state.contacts.find((function(t){return t.name===e.name}))?t.setState({notification:!0}):t.setState((function(t){return{contacts:[].concat(Object(r.a)(t.contacts),[e])}})),setTimeout((function(){return t.setState({notification:!1})}),2e3)},t.deleteContact=function(e){var a=e.target.id;t.setState((function(t){return{contacts:t.contacts.filter((function(t){return t.id!==a}))}}))},t.getName=function(e){t.setState({filter:e.target.value})},t.filterContacts=function(){return t.state.contacts.filter((function(e){return e.name.toLowerCase().includes(t.state.filter.toLowerCase())}))},t}return Object(l.a)(a,[{key:"componentDidMount",value:function(){var t=null!==localStorage.getItem("contacts")?JSON.parse(localStorage.getItem("contacts")):[];this.setState({contacts:t,mainTitle:!0})}},{key:"componentDidUpdate",value:function(){localStorage.setItem("contacts",JSON.stringify(this.state.contacts))}},{key:"render",value:function(){return i.a.createElement("div",{className:O.a.formBox},i.a.createElement(_.a,{in:this.state.mainTitle,timeout:700,unmountOnExit:!0,classNames:L.a},i.a.createElement("h2",{className:O.a.title},"Phonebook")),i.a.createElement(d,{submitContact:this.submitContact}),i.a.createElement("h2",{className:O.a.paragraf},"Contacts"),i.a.createElement(_.a,{in:this.state.contacts.length>1,timeout:700,classNames:j.a,unmountOnExit:!0},i.a.createElement(y,{getName:this.getName})),i.a.createElement(C,{contacts:this.filterContacts(),deleteContact:this.deleteContact}),i.a.createElement(_.a,{in:this.state.notification,timeout:750,classNames:D.a,unmountOnExit:!0},i.a.createElement("div",{className:O.a.notificationBox},i.a.createElement(J,null))))}}]),a}(n.Component);c.a.render(i.a.createElement(M,null),document.getElementById("root"))}],[[25,1,2]]]);
  //# sourceMappingURL=main.71f8c30c.chunk.js.map