2 lines
4.8 KiB
JavaScript
2 lines
4.8 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),i=a.n(l),c=a(56),o=a(57),s=a(88),m=a(55),u=a(51),g=a(91),d=a(145),h=a(92),f=a(77),p=a(89),b=a(146),v=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))},E=a(143),j=a(144),y=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(E.a,{value:t,onChange:function(e){return a(e.target.value)},onSelect:function(e){return l(e.suggestion)},placeholder:"Type an artist name",icon:r.a.createElement(j.a,{color:"plain"}),dropHeight:"large",suggestions:n}))},O=a(149),k=a(148),w=a(142),S=a(147),x=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(k.a,{level:"4",margin:{bottom:"small",top:"small",left:"small"}},a))},A=function(e){var t=e.image,a=e.name,n=e.handleClick;return r.a.createElement(b.a,{round:"xxsmall",overflow:"hidden",align:"center",pad:"small",onClick:function(){return n(a)}},r.a.createElement(k.a,{level:"4",margin:{bottom:"small",top:"small",left:"small"}},a),r.a.createElement(b.a,{height:"small",width:"small",round:"full",background:{repeat:"no-repeat",size:"cover",image:"url(".concat(t,")")}}))},C=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=new Set;return c.forEach((function(e){m.has(e.name)||(m.add(e.name),s.push(e))})),r.a.createElement(O.a,{as:"section",rows:["fit","fit"],columns:["fit","2/3"],gap:"small",areas:[["artist-title","other-title"],["artist","other"],["disco-title","disco-title"],["discography","discography"]]},r.a.createElement(k.a,{level:"1",gridArea:"artist-title",margin:{vertical:"none"}},l),r.a.createElement(O.a,{gridArea:"artist",margin:{bottom:"medium"}},r.a.createElement(b.a,{round:"full",background:{repeat:"no-repeat",size:"cover",image:"url(".concat(i,")")},height:"300px",width:"300px"})),r.a.createElement(k.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(b.a,{gridArea:"other",direction:"row",wrap:!0},o.map((function(e){return r.a.createElement(A,{key:e.id,image:e.image,name:e.name,handleClick:a})})))})),r.a.createElement(k.a,{level:"2",gridArea:"disco-title",size:"large"},"Discography"),r.a.createElement(w.a.Consumer,null,(function(e){return r.a.createElement(O.a,{gridArea:"discography",align:"start",columns:{count:"fill",size:"300px"},gap:"large"},s.map((function(e){return r.a.createElement(x,{key:e.id,image:e.image,name:e.name})})))})))};function q(){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 q=function(){return e},e}var z=Object(f.a)(q());function N(){var e=Object(n.useState)(""),t=Object(u.a)(e,2),a=t[0],l=t[1],i=Object(p.a)(z),c=Object(u.a)(i,2),o=c[0],s=c[1].data,g=Object(n.useState)([]),f=Object(u.a)(g,2),b=f[0],E=f[1],j=Object(n.useState)([]),O=Object(u.a)(j,2),k=O[0],w=O[1],S=Object(n.useState)(!1),x=Object(u.a)(S,2),A=x[0],q=x[1],N=Object(n.useCallback)(Object(h.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}));w(e)}}),[s]),r.a.createElement(d.a,{theme:I},r.a.createElement(v,null,r.a.createElement("h1",null,"Spoti Search")),r.a.createElement(y,{inputValue:a,handleChange:function(e){l(e)},suggestions:k,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}E(t),q(!0)}}),A&&r.a.createElement(C,{artists:b,handleClick:function(e){for(var t=[],a=0;a<b.length;a++)if(b[a].name===e){var n=b.splice(a,1),r=b;t=[].concat(Object(m.a)(n),Object(m.a)(r));break}E(t)}}))}var I={global:{font:{family:"Roboto",size:"18px",height:"20px"}}},J=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:J},r.a.createElement(N,null))),document.getElementById("root"))}},[[115,1,2]]]);
|
|
//# sourceMappingURL=main.22b0658b.chunk.js.map
|