text: (this["webpackJsonpemployee-directory"]=this["webpackJsonpemployee-directory"]||[]).push([[0],{49:function(e,t,a){},51:function(e,t,a){"use strict";a.r(t);var n=a(1),s=a(0),c=a.n(s),r=a(7),i=a.n(r),o={header:{backgroundColor:"green",color:"turquoise",textShadow:"10px 10px 25px black"}};var l=function(){return Object(n.jsx)("div",{className:"jumbotron",style:o.header,children:Object(n.jsx)("h1",{className:"display-2 text-center font-weight-bold",children:"Employee Directory"})})},d=a(18),u=a(19),j=a(22),h=a(21),b=a(20),m=a.n(b),x=function(){return m.a.get("https://randomuser.me/api/?results=200&nat=us")};var O=function(e){return Object(n.jsx)("div",{children:Object(n.jsxs)("table",{className:"table",children:[Object(n.jsx)("thead",{children:Object(n.jsxs)("tr",{children:[Object(n.jsx)("th",{className:"text-center",scope:"col",children:"Picture"}),Object(n.jsx)("th",{className:"text-center hover",scope:"col","data-value":"name",onClick:e.nameSort,children:"Name"}),Object(n.jsx)("th",{className:"text-center",scope:"col",children:"Email Address"}),Object(n.jsx)("th",{className:"text-center",scope:"col",children:"Phone Number"}),Object(n.jsx)("th",{className:"text-center hover",scope:"col","data-value":"state",onClick:e.stateSort,children:"Location"})]})}),Object(n.jsx)("tbody",{children:e.users.map((function(e){return Object(n.jsxs)("tr",{children:[Object(n.jsx)("td",{className:"d-flex justify-content-center",children:Object(n.jsx)("img",{src:e.picture.medium,alt:"employee"})}),Object(n.jsxs)("td",{className:"text-center",children:[e.name.first," ",e.name.last]}),Object(n.jsx)("td",{className:"text-center",children:e.email}),Object(n.jsx)("td",{className:"text-center",children:e.phone}),Object(n.jsxs)("td",{className:"text-center",children:[e.location.city,", ",e.location.state]})]},e.login.uuid)}))})]})})},p=a(5);var f=function(e){return Object(n.jsx)("div",{children:Object(n.jsxs)(p.a,{className:"mb-5",children:[Object(n.jsx)(p.a.Toggle,{variant:"info",id:"dropdown-basic",children:"Sort by..."}),Object(n.jsxs)(p.a.Menu,{children:[Object(n.jsx)(p.a.Item,{onClick:e.name,children:"Last name"}),Object(n.jsx)(p.a.Item,{onClick:e.state,children:"State"})]})]})})},v=(a(49),function(e){Object(j.a)(a,e);var t=Object(h.a)(a);function a(){var e;Object(d.a)(this,a);for(var n=arguments.length,s=new Array(n),c=0;c<n;c++)s[c]=arguments[c];return(e=t.call.apply(t,[this].concat(s))).state={users:[],inTable:[],states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],filter:""},e.nameSort=function(){e.setState({inTable:e.state.inTable.sort((function(e,t){return e.name.last.localeCompare(t.name.last)}))})},e.stateSort=function(){e.setState({inTable:e.state.inTable.sort((function(e,t){return e.location.state.localeCompare(t.location.state)}))})},e.reset=function(t){t.preventDefault(),e.setState({inTable:e.state.users}),document.querySelector("#filterInput").value=""},e.handleFormSubmit=function(t){t.preventDefault();var a=document.querySelector("#filterInput").value,n=e.state.users.filter((function(e){return e.location.state===a}));e.setState({inTable:n})},e}return Object(u.a)(a,[{key:"componentDidMount",value:function(){this.getUsers()}},{key:"getUsers",value:function(){var e=this;x().then((function(t){console.log(t),e.setState({users:t.data.results,inTable:t.data.results})}))}},{key:"render",value:function(){return Object(n.jsxs)("div",{className:"container",children:[Object(n.jsxs)("div",{className:"row",children:[Object(n.jsx)("div",{className:"col-4",children:Object(n.jsx)(f,{name:this.nameSort,state:this.stateSort})}),Object(n.jsx)("div",{className:"col-8",children:Object(n.jsxs)("form",{children:[Object(n.jsx)("input",{id:"filterInput",type:"text",name:"filter",list:"states",style:{width:"80%"},placeholder:"See employees from State entered here"}),Object(n.jsx)("datalist",{id:"states",children:this.state.states.map((function(e){return Object(n.jsx)("option",{value:e},e)}))}),Object(n.jsx)("button",{type:"submit",className:"btn btn-info",onClick:this.handleFormSubmit,children:"Filter"}),Object(n.jsx)("button",{className:"btn btn-warning",onClick:this.reset,children:"Reset"})]})})]}),Object(n.jsx)(O,{nameSort:this.nameSort,stateSort:this.stateSort,users:this.state.inTable})]})}}]),a}(c.a.Component));var y=function(){return Object(n.jsxs)("div",{children:[Object(n.jsx)(l,{}),Object(n.jsx)(v,{})]})};a(50);i.a.render(Object(n.jsx)(y,{}),document.getElementById("root"))}},[[51,1,2]]]);
  //# sourceMappingURL=main.b1e45f4d.chunk.js.map