2 lines
5.1 KiB
JavaScript
2 lines
5.1 KiB
JavaScript
(this["webpackJsonpspoti-search"]=this["webpackJsonpspoti-search"]||[]).push([[0],{116:function(e,t,a){e.exports=a(132)},132:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),l=a(33),i=a.n(l),c=a(57),o=a(58),s=a(89),m=a(56),u=a(52),g=a(92),d=a(146),h=a(149),f=a(93),p=a(78),b=a(90),v=a(147),E=function(e){return r.a.createElement(v.a,Object.assign({as:"header",direction:"row",align:"center",justify:"center",background:"brand",pad:{left:"medium",right:"small",vertical:"small"},style:{zIndex:1}},e))},j=a(144),y=a(145),O=function(e){var t=e.inputValue,a=e.handleChange,n=e.suggestions,l=e.handleSelect;return r.a.createElement(v.a,{as:"section",direction:"row",justify:"center",margin:{top:"large"}},r.a.createElement(v.a,{as:"div",margin:{vertical:"none"},width:"500px"},r.a.createElement(j.a,{value:t,suggestions:n,onChange:function(e){return a(e.target.value)},onSelect:function(e){return l(e.suggestion)},icon:r.a.createElement(y.a,{color:"plain"}),dropHeight:"large",placeholder:"Type an artist name"})))},k=a(150),w=a(143),x=a(148),S=a(49),A=a.n(S),C=function(e){var t=e.image,a=e.name;return t||(t=A.a),r.a.createElement(v.a,{round:"xxsmall",elevation:"small",overflow:"hidden"},r.a.createElement(v.a,{height:"300px"},r.a.createElement(x.a,{src:t,fit:"cover"})),r.a.createElement(h.a,{level:"4",margin:{bottom:"small",top:"small",left:"small"}},a))},z=function(e){var t=e.image,a=e.name,n=e.handleClick;return t||(t=A.a),r.a.createElement(v.a,{round:"xxsmall",overflow:"hidden",align:"center",pad:"small",onClick:function(){return n(a)}},r.a.createElement(h.a,{level:"4",margin:{bottom:"small",top:"small",left:"small"}},a),r.a.createElement(v.a,{height:"small",width:"small",round:"full",background:{repeat:"no-repeat",size:"cover",image:"url(".concat(t,")")}}))},q=function(e){var t=e.artists,a=e.handleClick,n=t[0],l=n.name,i=n.image,c=n.albums,o=t.slice(1,t.length),s=[],m=i;i||(m=A.a);var u=new Set;return c.forEach((function(e){u.has(e.name)||(u.add(e.name),s.push(e))})),r.a.createElement(k.a,{as:"section",rows:["fit","fit"],columns:["fit","2/3"],gap:"large",areas:[["artist-title","other-title"],["artist","other"],["disco-title","disco-title"],["discography","discography"]],pad:"xlarge"},r.a.createElement(h.a,{level:"1",size:"small",gridArea:"artist-title",margin:{vertical:"none"}},l),r.a.createElement(v.a,{gridArea:"artist"},r.a.createElement(v.a,{round:"full",background:{repeat:"no-repeat",size:"cover",image:"url(".concat(m,")")},height:"300px",width:"300px"})),r.a.createElement(h.a,{level:"2",gridArea:"other-title",margin:{vertical:"none"},alignSelf:"end",size:"small"},"Other results"),r.a.createElement(w.a.Consumer,null,(function(e){return r.a.createElement(v.a,{gridArea:"other",direction:"row-reverse",justify:"end",wrap:!0,gap:"medium"},o.map((function(e){return r.a.createElement(z,{key:e.id,image:e.image,name:e.name,handleClick:a})})))})),r.a.createElement(h.a,{level:"2",gridArea:"disco-title",size:"large",margin:{bottom:"none"}},"Discography"),r.a.createElement(w.a.Consumer,null,(function(e){return r.a.createElement(k.a,{gridArea:"discography",align:"start",columns:{count:"fill",size:"300px"},gap:"large"},s.map((function(e){return r.a.createElement(C,{key:e.id,image:e.image,name:e.name})})))})))};function N(){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 N=function(){return e},e}var I=Object(p.a)(N());function J(){var e=Object(n.useState)(""),t=Object(u.a)(e,2),a=t[0],l=t[1],i=Object(b.a)(I),c=Object(u.a)(i,2),o=c[0],s=c[1].data,g=Object(n.useState)([]),p=Object(u.a)(g,2),v=p[0],j=p[1],y=Object(n.useState)([]),k=Object(u.a)(y,2),w=k[0],x=k[1],S=Object(n.useState)(!1),A=Object(u.a)(S,2),C=A[0],z=A[1],N=Object(n.useCallback)(Object(f.debounce)((function(){o({variables:{byName:a}})}),200),[a]);Object(n.useEffect)((function(){return N(),N.cancel}),[a,N]);return Object(n.useEffect)((function(){if(s&&s.queryArtists!==[]){var e=s.queryArtists.slice(0,5).map((function(e){return e.name}));x(e)}}),[s]),r.a.createElement(d.a,{theme:V},r.a.createElement(E,null,r.a.createElement(h.a,{level:"1",margin:{vertical:"small"},color:"light-1"},"Spoti Search")),r.a.createElement(O,{inputValue:a,suggestions:w,handleChange:function(e){l(e)},handleSelect:function(e){for(var t=[],a=s.queryArtists.slice(0,5),n=0;n<a.length;n++)if(a[n].name===e){var r=null===a||void 0===a?void 0:a.splice(n,1),l=a;t=[].concat(Object(m.a)(r),Object(m.a)(l));break}j(t),z(!0)}}),C&&r.a.createElement(q,{artists:v,handleClick:function(e){for(var t=[],a=0;a<v.length;a++)if(v[a].name===e){var n=v.splice(a,1),r=v;t=[].concat(Object(m.a)(n),Object(m.a)(r));break}j(t)}}))}var V={global:{colors:{brand:"rgb(24, 177, 147)"},font:{family:"Roboto",size:"18px",height:"20px"}}},$=new c.a({uri:"https://spotify-graphql-server.herokuapp.com/graphql",cache:new o.a});i.a.render(r.a.createElement(r.a.StrictMode,null,r.a.createElement(s.a,{client:$},r.a.createElement(J,null))),document.getElementById("root"))},49:function(e,t,a){e.exports=a.p+"static/media/placeholder-music.97fa2780.jpg"}},[[116,1,2]]]);
|
|
//# sourceMappingURL=main.c7cb2f1e.chunk.js.map
|