(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{22:function(e,t,a){e.exports=a(50)},49:function(e,t,a){},50:function(e,t,a){"use strict";a.r(t);var n=a(1),l=a.n(n),r=a(21),c=a.n(r),s=a(3);a(20);const d={id:"",name:"",email:"",username:"",password:""},u=n.memo(e=>{let{user:t,onUpdate:a,onDelete:l}=e;const[r,c]=n.useState({...t}),[u,i]=n.useState(!1);n.useEffect(()=>{c({...t})},[t]);const m=n.useCallback(e=>{let{target:{value:t,name:a}}=e;i(!0),c(e=>({...e,[a]:t}))},[]),o=n.useCallback(()=>{a(r),i(!1),t.id||c(d)},[a,r,t.id]),E=n.useCallback(()=>{l(r)},[r,l]);return n.createElement(s.Tr,{key:t.id||"createUser",className:u&&t.id?"edited":""},t.id?n.createElement(s.Td,null,r.id):n.createElement(s.Td,null,"New user"),n.createElement(s.Td,null,n.createElement("input",{type:"text",name:"name",value:r.name,onChange:m})),n.createElement(s.Td,null,n.createElement("input",{type:"text",name:"email",value:r.email,onChange:m})),n.createElement(s.Td,null,n.createElement("input",{type:"text",name:"username",value:r.username,onChange:m})),n.createElement(s.Td,null,n.createElement("input",{type:"password",name:"password",value:r.password,onChange:m})),t.id&&n.createElement(s.Td,null,n.createElement("button",{disabled:u?"":"disabled",onClick:o},"Update"),n.createElement("button",{onClick:E},"Delete")),!t.id&&n.createElement(s.Td,null,n.createElement("button",{disabled:u?"":"disabled",onClick:o},"Create")))}),i=l.a.memo(e=>{let{lines:t}=e;return l.a.createElement("ul",null,t.map((e,t)=>{let{line:a,isError:n}=e;return l.a.createElement("li",{key:t,className:n?"error":""},l.a.createElement("code",null,a))}))});var m=a(52);const o={headers:{"Content-Type":"application/x-www-form-urlencoded"}},E=(e,t)=>m.a.post(window.__API_URL__,((e,t)=>{switch(t){case"create":return{task:"create",name:e.name,email:e.email,username:e.username,password:e.password};case"update":return{task:"update",id:e.id,name:e.name,email:e.email,username:e.username,password:e.password};case"delete":return{task:"delete",id:e.id};case"readall":default:return{task:"readall"}}})(e,t),o).then(e=>{let{data:t}=e;return t}),p=e=>({create:()=>E(e,"create"),update:()=>E(e,"update"),delete:()=>E(e,"delete"),readall:()=>E(e,"readall")});Date.prototype.timeNow=function(){return(this.getHours()<10?"0":"")+this.getHours()+":"+(this.getMinutes()<10?"0":"")+this.getMinutes()+":"+(this.getSeconds()<10?"0":"")+this.getSeconds()};const w=e=>{let{includeHeader:t,children:a}=e;return l.a.createElement("div",null,l.a.createElement(s.Table,{className:"user-table"},t&&l.a.createElement(s.Thead,null,l.a.createElement(s.Tr,null,l.a.createElement(s.Th,null,"ID"),l.a.createElement(s.Th,null,"Name"),l.a.createElement(s.Th,null,"Email"),l.a.createElement(s.Th,null,"Username"),l.a.createElement(s.Th,null,"Password"),l.a.createElement(s.Th,null,"Actions"))),l.a.createElement(s.Tbody,null,a)))};var h=()=>{const[e,t]=l.a.useState([]),{lines:a,addLogLine:r}=(()=>{const[e,t]=l.a.useState([]);return{lines:e,addLogLine:l.a.useCallback(function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t(t=>[...t,{line:"".concat((new Date).timeNow()," ").concat(e),isError:a}].slice(-10))},[])}})();Object(n.useEffect)(()=>{p({}).readall().then(e=>{t(e),r("Read ".concat(e.length," users"))})},[r]);const c=l.a.useCallback(async e=>{if(e.id)try{e=await p(e).update(),t(t=>t.map(t=>t.id===e.id?e:t)),r("Updated user ".concat(e.id))}catch(a){t(t=>t.map(t=>t.id===e.id?{...t}:t)),r("Error updating user ".concat(e.id),!0)}else e=await p(e).create(),t(t=>[...t,e]),r("Created user ".concat(e.id))},[r]),s=l.a.useCallback(async e=>{e=await p(e).delete(),t(t=>t.filter(t=>t.id!==e.id)),r("Deleted user ".concat(e.id))},[r]),m=l.a.useMemo(()=>e.map(e=>l.a.createElement(u,{user:e,key:e.id,onUpdate:c,onDelete:s})),[e,c,s]);return l.a.createElement("div",{className:"container"},l.a.createElement("div",{className:"crud"},l.a.createElement(w,null,l.a.createElement(u,{user:d,onUpdate:c})),l.a.createElement(w,{includeHeader:!0},m),l.a.createElement("div",{className:"logger"},l.a.createElement(i,{lines:a}))))};a(49);window.__API_URL__="https://upmvc.com/demo/apiUsers";var g=function(){return l.a.createElement("div",null,!1,l.a.createElement("div",null," ",l.a.createElement(h,null)))};var T=e=>{e&&e instanceof Function&&a.e(3).then(a.bind(null,53)).then(t=>{let{getCLS:a,getFID:n,getFCP:l,getLCP:r,getTTFB:c}=t;a(e),n(e),l(e),r(e),c(e)})};c.a.createRoot(document.getElementById("root")).render(l.a.createElement(g,null)),T()}},[[22,1,2]]]);
//# sourceMappingURL=main.dc560686.chunk.js.map
|
Download
