2 lines
3.9 KiB
JavaScript
2 lines
3.9 KiB
JavaScript
(this["webpackJsonpspoti-search"]=this["webpackJsonpspoti-search"]||[]).push([[0],{115:function(e,t,a){e.exports=a(131)},131:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),l=a(33),c=a.n(l),i=a(56),s=a(57),o=a(88),u=a(82),m=a(51),g=a(91),h=a(147),p=a(92),d=a(76),f=a(89),b=a(148),E=function(e){return r.a.createElement(b.a,Object.assign({as:"header",direction:"row",align:"center",justify:"center",background:"brand",pad:{left:"medium",right:"small",vertical:"small"},style:{zIndex:1}},e))},v=a(144),y=a(145),j=function(e){var t=e.inputValue,a=e.handleChange,n=e.suggestions,l=e.handleSelect;return r.a.createElement(b.a,{as:"section",direction:"row",justify:"center",margin:{vertical:"large"}},r.a.createElement(v.a,{value:t,onChange:a,onSelect:l,placeholder:"Type an artist name",icon:r.a.createElement(y.a,{color:"plain"}),dropHeight:"large",suggestions:n}))},O=a(151),S=a(149),w=a(146),x=a(143),k=a(150),A=function(e){var t=e.image,a=e.name;return r.a.createElement(b.a,{round:"xxsmall",elevation:"small",overflow:"hidden"},r.a.createElement(b.a,{height:"300px"},r.a.createElement(S.a,{src:t,fit:"cover"})),r.a.createElement(b.a,{pad:{horizontal:"small"}},r.a.createElement(b.a,{margin:{top:"small"},direction:"row",align:"center",justify:"between"},r.a.createElement(b.a,null,r.a.createElement(k.a,{level:"4",margin:{bottom:"small",top:"xsmall"}},a)))))},q=function(e){var t=e.artists,a=t[0],n=a.name,l=a.image,c=a.albums;return r.a.createElement(O.a,{rows:["fit","fit"],columns:["1/4","3/4"],gap:"small",areas:[["artist","other"],["discography","discography"]]},r.a.createElement(b.a,{gridArea:"artist",height:"300px"},r.a.createElement("h1",null,n),r.a.createElement(S.a,{src:l,fit:"cover"})),r.a.createElement(b.a,{gridArea:"other",background:"light-2"},r.a.createElement("h3",null,"Other results"),t.map((function(e){return r.a.createElement(b.a,{gridArea:"artist",key:e.id},r.a.createElement(w.a,{src:e.image}),r.a.createElement("h4",null,e.name))}))),r.a.createElement(x.a.Consumer,null,(function(e){return r.a.createElement(O.a,{gridArea:"discography",align:"start",columns:{count:"fill",size:"300px"},gap:"medium"},r.a.createElement(k.a,{level:"1"},"Discography"),c.map((function(e){return r.a.createElement(A,{key:e.id,image:e.image,name:e.name})})))})))};function C(){var e=Object(g.a)(["\n\tquery Artist($byName: String!) {\n\t\tqueryArtists(byName: $byName) {\n\t\t\tname\n\t\t\timage\n\t\t\tid\n\t\t\talbums {\n\t\t\t\tname\n\t\t\t\timage\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t}\n"]);return C=function(){return e},e}var z=Object(d.a)(C());function N(){var e=Object(n.useState)(""),t=Object(m.a)(e,2),a=t[0],l=t[1],c=Object(f.a)(z),i=Object(m.a)(c,2),s=i[0],o=i[1].data,g=Object(n.useState)([]),d=Object(m.a)(g,2),b=d[0],v=d[1],y=Object(n.useState)(),O=Object(m.a)(y,2),S=O[0],w=O[1],x=Object(n.useState)(!1),k=Object(m.a)(x,2),A=k[0],C=k[1],N=Object(n.useCallback)(Object(p.debounce)((function(){s({variables:{byName:a}})}),500),[a]);Object(n.useEffect)((function(){return N(),N.cancel}),[a,N]);return Object(n.useEffect)((function(){if(o&&o.queryArtists!==[]){var e=o.queryArtists.slice(0,5).map((function(e){return e.name}));w(e)}}),[o]),r.a.createElement(h.a,{theme:I},r.a.createElement(E,null,r.a.createElement("h1",null,"Spoti Search")),r.a.createElement(j,{inputValue:a,handleChange:function(e){l(e.target.value)},suggestions:S,handleSelect:function(e){for(var t=e.suggestion,a=[],n=o.queryArtists.slice(0,5).map((function(e){return e})),r=0;r<n.length;r++)if(n[r].name===t){var l=null===n||void 0===n?void 0:n.splice(r,1),c=n;a=[].concat(Object(u.a)(l),Object(u.a)(c));break}v(a),C(!0)}}),A&&r.a.createElement(q,{artists:b}))}var I={global:{font:{family:"Roboto",size:"18px",height:"20px"}}},J=new i.a({uri:"https://spotify-graphql-server.herokuapp.com/graphql",cache:new s.a});c.a.render(r.a.createElement(r.a.StrictMode,null,r.a.createElement(o.a,{client:J},r.a.createElement(N,null))),document.getElementById("root"))}},[[115,1,2]]]);
|
|
//# sourceMappingURL=main.d5729ca7.chunk.js.map
|