{"version":3,"sources":["components/Header.tsx","components/Search.tsx","components/Album.tsx","components/Other.tsx","components/Results.tsx","components/App.tsx","index.tsx","assets/placeholder-music.jpg"],"names":["Header","Box","as","direction","align","justify","background","pad","left","right","vertical","style","zIndex","Text","margin","color","size","weight","Search","inputValue","handleChange","suggestions","handleSelect","top","width","TextInput","value","onChange","e","target","onSelect","suggestion","icon","FormSearch","dropHeight","placeholder","Album","image","name","round","elevation","overflow","height","Image","src","fit","Heading","level","bottom","Other","handleClick","onClick","repeat","textAlign","wordBreak","Results","artists","selectedName","albums","otherArtists","slice","length","selectedAlbums","selectedImage","uniqueAlbums","Set","forEach","album","has","add","push","Grid","rows","columns","gap","areas","gridArea","responsive","min","max","wrap","map","artist","key","id","ResponsiveContext","Consumer","count","QUERY_ARTISTS","gql","App","useState","setInputValue","useLazyQuery","getArtists","data","setArtists","setSuggestions","selected","setSelected","delayedQuery","useCallback","debounce","variables","byName","useEffect","cancel","queryArtists","updatedSuggestions","el","Grommet","theme","updatedArtists","suggestedArtists","i","selectedArtist","splice","global","colors","brand","font","family","client","ApolloClient","uri","cache","InMemoryCache","ReactDOM","render","StrictMode","ApolloProvider","document","getElementById","module","exports"],"mappings":"ySAGaA,EAAS,WACrB,OACC,kBAACC,EAAA,EAAD,CACCC,GAAG,SACHC,UAAU,MACVC,MAAM,SACNC,QAAQ,SACRC,WAAW,QACXC,IAAK,CAAEC,KAAM,SAAUC,MAAO,QAASC,SAAU,SACjDC,MAAO,CAAEC,OAAQ,IAEjB,kBAACC,EAAA,EAAD,CACCC,OAAQ,CAAEJ,SAAU,SACpBK,MAAM,UACNC,KAAK,UACLC,OAAO,QAJR,kB,kBCVUC,EAAS,SAAC,GAAD,IACrBC,EADqB,EACrBA,WACAC,EAFqB,EAErBA,aACAC,EAHqB,EAGrBA,YACAC,EAJqB,EAIrBA,aAJqB,OAWrB,kBAACrB,EAAA,EAAD,CACCC,GAAG,UACHC,UAAU,MACVE,QAAQ,SACRS,OAAQ,CAAES,IAAK,UAEf,kBAACtB,EAAA,EAAD,CACCC,GAAG,MACHY,OAAQ,CAAEJ,SAAU,QACpBc,MAAM,SAGN,kBAACC,EAAA,EAAD,CACCC,MAAOP,EACPE,YAAaA,EACbM,SAAU,SAACC,GAAD,OAAOR,EAAaQ,EAAEC,OAAOH,QACvCI,SAAU,SAACD,GAAD,OAAYP,EAAaO,EAAOE,aAC1CC,KAAM,kBAACC,EAAA,EAAD,CAAYlB,MAAM,UACxBmB,WAAW,QACXC,YAAY,2B,qDC7BHC,EAAQ,SAAC,GAAsD,IAApDC,EAAmD,EAAnDA,MAAOC,EAA4C,EAA5CA,KAM9B,OAJKD,IACJA,EAAQF,KAIR,kBAAClC,EAAA,EAAD,CAAKsC,MAAM,UAAUC,UAAU,QAAQC,SAAS,UAC/C,kBAACxC,EAAA,EAAD,CAAKyC,OAAO,SACX,kBAACC,EAAA,EAAD,CAAOC,IAAKP,EAAOQ,IAAI,WAExB,kBAACC,EAAA,EAAD,CACCC,MAAM,IACNjC,OAAQ,CAAEkC,OAAQ,QAASzB,IAAK,QAASf,KAAM,UAE9C8B,KCfQW,EAAQ,SAAC,GAQf,IAPNZ,EAOK,EAPLA,MACAC,EAMK,EANLA,KACAY,EAKK,EALLA,YAWA,OAJKb,IACJA,EAAQF,KAIR,kBAAClC,EAAA,EAAD,CACCsC,MAAM,UACNhC,IAAI,SACJ4C,QAAS,kBAAMD,EAAYZ,IAC3Bd,MAAM,SAEN,kBAACvB,EAAA,EAAD,CACCyC,OAAO,QACPlB,MAAM,QACNe,MAAM,OACNjC,WAAY,CACX8C,OAAQ,YACRpC,KAAM,QACNqB,MAAM,OAAD,OAASA,EAAT,QAGP,kBAACxB,EAAA,EAAD,CACCC,OAAQ,CAAEkC,OAAQ,QAASzB,IAAK,QAASf,KAAM,SAC/C6C,UAAU,SACVpC,OAAO,OACPqC,UAAU,cAEThB,KClCQiB,EAAU,SAAC,GAMjB,IALNC,EAKK,EALLA,QACAN,EAIK,EAJLA,YAIK,EACyCM,EAAQ,GAAxCC,EADT,EACGnB,KAAoBD,EADvB,EACuBA,MAAOqB,EAD9B,EAC8BA,OAC7BC,EAAeH,EAAQI,MAAM,EAAGJ,EAAQK,QAC1CC,EAAyB,GACzBC,EAAwB1B,EAGvBA,IACJ0B,EAAgB5B,KAKjB,IAAM6B,EAAe,IAAIC,IAQzB,OAPAP,EAAOQ,SAAQ,SAACC,GACVH,EAAaI,IAAID,EAAM7B,QAC3B0B,EAAaK,IAAIF,EAAM7B,MACvBwB,EAAeQ,KAAKH,OAKrB,kBAACI,EAAA,EAAD,CACCrE,GAAG,UACHsE,KAAM,CAAC,MAAO,OACdC,QAAS,CAAC,MAAO,OACjBC,IAAI,QACJC,MAAO,CACN,CAAC,QAAS,SACV,CAAC,eAAgB,gBACjB,CAAC,cAAe,eAChB,CAAC,cAAe,gBAEjBpE,IAAI,UAEJ,kBAACuC,EAAA,EAAD,CACCC,MAAM,IACN6B,SAAS,QACT5D,KAAK,SACLF,OAAQ,CAAEJ,SAAU,SAEnB+C,GAEF,kBAACxD,EAAA,EAAD,CACC2E,SAAS,eACTzE,UAAU,iBACV0E,YAAU,EACVH,IAAI,SAEJ,kBAACzE,EAAA,EAAD,CAAKuB,MAAO,CAAEsD,IAAK,QAASC,IAAK,UAChC,kBAAC9E,EAAA,EAAD,CACCsC,MAAM,OACNjC,WAAY,CACX8C,OAAQ,YACRpC,KAAM,QACNqB,MAAM,OAAD,OAAS0B,EAAT,MAENrB,OAAO,QACPlB,MAAM,WAGR,kBAACvB,EAAA,EAAD,CAAKI,QAAQ,UACZ,kBAACyC,EAAA,EAAD,CACCC,MAAM,IACNjC,OAAQ,CAAEJ,SAAU,QACpBM,KAAK,SAHN,iBAOA,kBAACf,EAAA,EAAD,CACCE,UAAU,cACVE,QAAQ,MACR2E,MAAI,EACJN,IAAI,SACJlD,MAAO,CAAEsD,IAAK,UAEbnB,EAAasB,KAAI,SAACC,GAAD,OACjB,kBAAC,EAAD,CACCC,IAAKD,EAAOE,GACZ/C,MAAO6C,EAAO7C,MACdC,KAAM4C,EAAO5C,KACbY,YAAaA,UAMlB,kBAACJ,EAAA,EAAD,CACCC,MAAM,IACN6B,SAAS,cACT5D,KAAK,SACLF,OAAQ,CAAEkC,OAAQ,SAJnB,eAQA,kBAACqC,EAAA,EAAkBC,SAAnB,MACE,SAACtE,GAAD,OACA,kBAACuD,EAAA,EAAD,CACCK,SAAS,cACTxE,MAAM,QACNqE,QAAS,CAAEc,MAAO,OAAQvE,KAAM,SAChC0D,IAAI,SAEHZ,EAAemB,KAAI,SAACd,GAAD,OACnB,kBAAC,EAAD,CACCgB,IAAKhB,EAAMiB,GACX/C,MAAO8B,EAAM9B,MACbC,KAAM6B,EAAM7B,gB,iQC/GpB,IAAMkD,EAAgBC,YAAH,KAeJ,SAASC,IAAO,IAAD,EACOC,mBAAS,IADhB,mBACtBxE,EADsB,KACVyE,EADU,OAEEC,YAAaL,GAFf,mBAEtBM,EAFsB,KAERC,EAFQ,KAERA,KAFQ,EAGCJ,mBAAkB,IAHnB,mBAGtBnC,EAHsB,KAGbwC,EAHa,OAISL,mBAAmB,IAJ5B,mBAItBtE,EAJsB,KAIT4E,EAJS,OAKGN,oBAAS,GALZ,mBAKtBO,EALsB,KAKZC,EALY,KAiBvBC,EAAeC,sBAAYC,oBAJb,WACnBR,EAAW,CAAES,UAAW,CAAEC,OAAQrF,OAGoB,KAAM,CAACA,IAE9DsF,qBAAU,WAGT,OAFAL,IAEOA,EAAaM,SAClB,CAACvF,EAAYiF,IAoDhB,OAbAK,qBAAU,WACT,GAAIV,GAAQA,EAAKY,eAAiB,GAAI,CAErC,IACMC,EADiBb,EAAKY,aAAa/C,MAAM,EAAG,GACEqB,KACnD,SAAC4B,GACA,OAAOA,EAAGvE,QAGZ2D,EAAeW,MAEd,CAACb,IAGH,kBAACe,EAAA,EAAD,CAASC,MAAOA,GACf,kBAAC,EAAD,MACA,kBAAC,EAAD,CACC5F,WAAYA,EACZE,YAAaA,EACbD,aAxEkB,SAACM,GACrBkE,EAAclE,IAwEZJ,aAzDkB,SAACS,GASrB,IARA,IAAIiF,EAA0B,GAE1BC,EAA4BlB,EAAKY,aACnC/C,MAAM,EAAG,GAETqB,KAAI,SAACC,GAAD,OAAoBA,KAGjBgC,EAAI,EAAGA,EAAID,EAAkBpD,OAAQqD,IAC7C,GAAID,EAAkBC,GAAG5E,OAASP,EAAY,CAC7C,IAAIoF,EAAuB,OAAGF,QAAH,IAAGA,OAAH,EAAGA,EAAkBG,OAAOF,EAAG,GACtDvD,EAAwBsD,EAC5BD,EAAc,sBAAOG,GAAP,YAA0BxD,IACxC,MAIFqC,EAAWgB,GACXb,GAAY,MAwCVD,GACA,kBAAC,EAAD,CAAS1C,QAASA,EAASN,YAtCV,SAACZ,GAGpB,IAFA,IAAI0E,EAA0B,GAErBE,EAAI,EAAGA,EAAI1D,EAAQK,OAAQqD,IACnC,GAAI1D,EAAQ0D,GAAG5E,OAASA,EAAM,CAC7B,IAAI6E,EAA0B3D,EAAQ4D,OAAOF,EAAG,GAC5CvD,EAAwBH,EAC5BwD,EAAc,sBAAOG,GAAP,YAA0BxD,IACxC,MAIFqC,EAAWgB,OAgCb,IAAMD,EAAQ,CACbM,OAAQ,CACPC,OAAQ,CACPC,MAAO,qBAERC,KAAM,CACLC,OAAQ,SACRzG,KAAM,OACN0B,OAAQ,UCtHLgF,EAAS,IAAIC,IAAa,CAC/BC,IAAK,uDACLC,MAAO,IAAIC,MAGZC,IAASC,OACR,kBAAC,IAAMC,WAAP,KACC,kBAACC,EAAA,EAAD,CAAgBR,OAAQA,GACvB,kBAAChC,EAAD,QAGFyC,SAASC,eAAe,U,mBCjBzBC,EAAOC,QAAU,IAA0B,gD","file":"static/js/main.d1df441b.chunk.js","sourcesContent":["import React from 'react';\nimport { Box, Text } from 'grommet';\n\nexport const Header = () => {\n\treturn (\n\t\t<Box\n\t\t\tas='header'\n\t\t\tdirection='row'\n\t\t\talign='center'\n\t\t\tjustify='center'\n\t\t\tbackground='brand'\n\t\t\tpad={{ left: 'medium', right: 'small', vertical: 'small' }}\n\t\t\tstyle={{ zIndex: 1 }}\n\t\t>\n\t\t\t<Text\n\t\t\t\tmargin={{ vertical: 'small' }}\n\t\t\t\tcolor='light-1'\n\t\t\t\tsize='xxlarge'\n\t\t\t\tweight='bold'\n\t\t\t>\n\t\t\t\tSpoti Search\n\t\t\t</Text>\n\t\t</Box>\n\t);\n};\n","import React from 'react';\nimport { Box, TextInput } from 'grommet';\nimport { FormSearch } from 'grommet-icons';\n\nexport const Search = ({\n\tinputValue,\n\thandleChange,\n\tsuggestions,\n\thandleSelect,\n}: {\n\tinputValue: string;\n\thandleChange: (value: string) => void;\n\tsuggestions: string[];\n\thandleSelect: (suggestion: string) => void;\n}) => (\n\t<Box\n\t\tas='section'\n\t\tdirection='row'\n\t\tjustify='center'\n\t\tmargin={{ top: 'large' }}\n\t>\n\t\t<Box\n\t\t\tas='div'\n\t\t\tmargin={{ vertical: 'none' }}\n\t\t\twidth='500px'\n\n\t\t>\n\t\t\t<TextInput\n\t\t\t\tvalue={inputValue}\n\t\t\t\tsuggestions={suggestions}\n\t\t\t\tonChange={(e) => handleChange(e.target.value)}\n\t\t\t\tonSelect={(target) => handleSelect(target.suggestion)}\n\t\t\t\ticon={<FormSearch color='plain' />}\n\t\t\t\tdropHeight='large'\n\t\t\t\tplaceholder='Type an artist name'\n\t\t\t/>\n\t\t</Box>\n\t</Box>\n);\n","import React from 'react';\nimport { Box, Heading, Image } from 'grommet';\n\nimport placeholder from '../assets/placeholder-music.jpg';\n\nexport const Album = ({ image, name }: { image: string; name: string }) => {\n\t// Load placeholder image if none provided\n\tif (!image) {\n\t\timage = placeholder;\n\t}\n\n\treturn (\n\t\t<Box round='xxsmall' elevation='small' overflow='hidden'>\n\t\t\t<Box height='300px'>\n\t\t\t\t<Image src={image} fit='cover' />\n\t\t\t</Box>\n\t\t\t<Heading\n\t\t\t\tlevel='4'\n\t\t\t\tmargin={{ bottom: 'small', top: 'small', left: 'small' }}\n\t\t\t>\n\t\t\t\t{name}\n\t\t\t</Heading>\n\t\t</Box>\n\t);\n};\n","import React from 'react';\nimport { Box, Text } from 'grommet';\n\nimport placeholder from '../assets/placeholder-music.jpg';\n\nexport const Other = ({\n\timage,\n\tname,\n\thandleClick,\n}: {\n\timage: string;\n\tname: string;\n\thandleClick: (name: string) => void;\n}) => {\n\t// Load placeholder image if none provided\n\tif (!image) {\n\t\timage = placeholder;\n\t}\n\n\treturn (\n\t\t<Box\n\t\t\tround='xxsmall'\n\t\t\tpad='xsmall'\n\t\t\tonClick={() => handleClick(name)}\n\t\t\twidth='130px'\n\t\t>\n\t\t\t<Box\n\t\t\t\theight='120px'\n\t\t\t\twidth='120px'\n\t\t\t\tround='full'\n\t\t\t\tbackground={{\n\t\t\t\t\trepeat: 'no-repeat',\n\t\t\t\t\tsize: 'cover',\n\t\t\t\t\timage: `url(${image})`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<Text\n\t\t\t\tmargin={{ bottom: 'small', top: 'small', left: 'small' }}\n\t\t\t\ttextAlign='center'\n\t\t\t\tweight='bold'\n\t\t\t\twordBreak='break-word'\n\t\t\t>\n\t\t\t\t{name}\n\t\t\t</Text>\n\t\t</Box>\n\t);\n};\n","import React from 'react';\nimport { Box, Grid, ResponsiveContext, Heading } from 'grommet';\n\nimport { Album } from './Album';\nimport { Artists, Albums } from '../interfaces';\nimport { Other } from './Other';\nimport placeholder from '../assets/placeholder-music.jpg';\n\nexport const Results = ({\n\tartists,\n\thandleClick,\n}: {\n\tartists: Artists;\n\thandleClick: (name: string) => void;\n}) => {\n\tconst { name: selectedName, image, albums } = artists[0];\n\tconst otherArtists = artists.slice(1, artists.length);\n\tlet selectedAlbums: Albums = [];\n\tlet selectedImage: string = image;\n\n\t// Load placeholder image if none provided\n\tif (!image) {\n\t\tselectedImage = placeholder;\n\t}\n\n\t// Remove duplicate albums based on `name`\n\t// Might need to refine this according to the data quality\n\tconst uniqueAlbums = new Set();\n\talbums.forEach((album) => {\n\t\tif (!uniqueAlbums.has(album.name)) {\n\t\t\tuniqueAlbums.add(album.name);\n\t\t\tselectedAlbums.push(album);\n\t\t}\n\t});\n\n\treturn (\n\t\t<Grid\n\t\t\tas='section'\n\t\t\trows={['fit', 'fit']}\n\t\t\tcolumns={['fit', 'fit']}\n\t\t\tgap='large'\n\t\t\tareas={[\n\t\t\t\t['title', 'title'],\n\t\t\t\t['artist-other', 'artist-other'],\n\t\t\t\t['disco-title', 'disco-title'],\n\t\t\t\t['discography', 'discography'],\n\t\t\t]}\n\t\t\tpad='xlarge'\n\t\t>\n\t\t\t<Heading\n\t\t\t\tlevel='1'\n\t\t\t\tgridArea='title'\n\t\t\t\tsize='medium'\n\t\t\t\tmargin={{ vertical: 'none' }}\n\t\t\t>\n\t\t\t\t{selectedName}\n\t\t\t</Heading>\n\t\t\t<Box\n\t\t\t\tgridArea='artist-other'\n\t\t\t\tdirection='row-responsive'\n\t\t\t\tresponsive\n\t\t\t\tgap='large'\n\t\t\t>\n\t\t\t\t<Box width={{ min: '300px', max: '300px' }}>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tround='full'\n\t\t\t\t\t\tbackground={{\n\t\t\t\t\t\t\trepeat: 'no-repeat',\n\t\t\t\t\t\t\tsize: 'cover',\n\t\t\t\t\t\t\timage: `url(${selectedImage})`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\theight='300px'\n\t\t\t\t\t\twidth='300px'\n\t\t\t\t\t/>\n\t\t\t\t</Box>\n\t\t\t\t<Box justify='center'>\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tlevel='2'\n\t\t\t\t\t\tmargin={{ vertical: 'none' }}\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t>\n\t\t\t\t\t\tOther results\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdirection='row-reverse'\n\t\t\t\t\t\tjustify='end'\n\t\t\t\t\t\twrap\n\t\t\t\t\t\tgap='medium'\n\t\t\t\t\t\twidth={{ min: '332px' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{otherArtists.map((artist) => (\n\t\t\t\t\t\t\t<Other\n\t\t\t\t\t\t\t\tkey={artist.id}\n\t\t\t\t\t\t\t\timage={artist.image}\n\t\t\t\t\t\t\t\tname={artist.name}\n\t\t\t\t\t\t\t\thandleClick={handleClick}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Box>\n\t\t\t<Heading\n\t\t\t\tlevel='2'\n\t\t\t\tgridArea='disco-title'\n\t\t\t\tsize='medium'\n\t\t\t\tmargin={{ bottom: 'none' }}\n\t\t\t>\n\t\t\t\tDiscography\n\t\t\t</Heading>\n\t\t\t<ResponsiveContext.Consumer>\n\t\t\t\t{(size) => (\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tgridArea='discography'\n\t\t\t\t\t\talign='start'\n\t\t\t\t\t\tcolumns={{ count: 'fill', size: '260px' }}\n\t\t\t\t\t\tgap='large'\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedAlbums.map((album) => (\n\t\t\t\t\t\t\t<Album\n\t\t\t\t\t\t\t\tkey={album.id}\n\t\t\t\t\t\t\t\timage={album.image}\n\t\t\t\t\t\t\t\tname={album.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Grid>\n\t\t\t\t)}\n\t\t\t</ResponsiveContext.Consumer>\n\t\t</Grid>\n\t);\n};\n","import React, { useState, useCallback, useEffect } from 'react';\nimport { Grommet } from 'grommet';\nimport { debounce } from 'lodash';\nimport { gql, useLazyQuery } from '@apollo/client';\n\nimport { Header } from './Header';\nimport { Search } from './Search';\nimport { Results } from './Results';\nimport { Artists, Artist } from '../interfaces';\n\nconst QUERY_ARTISTS = gql`\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`;\n\nexport default function App() {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);\n\tconst [artists, setArtists] = useState<Artists>([]);\n\tconst [suggestions, setSuggestions] = useState<string[]>([]);\n\tconst [selected, setSelected] = useState(false);\n\n\t// Debounce the database query\n\t// Based on: https://archive.is/wip/6JDqb\n\tconst handleChange = (value: string) => {\n\t\tsetInputValue(value);\n\t};\n\n\tconst updateQuery = () => {\n\t\tgetArtists({ variables: { byName: inputValue } });\n\t};\n\n\tconst delayedQuery = useCallback(debounce(updateQuery, 200), [inputValue]);\n\n\tuseEffect(() => {\n\t\tdelayedQuery();\n\t\t// Cancel previous debounce calls during useEffect cleanup.\n\t\treturn delayedQuery.cancel;\n\t}, [inputValue, delayedQuery]);\n\n\tconst handleSelect = (suggestion: string) => {\n\t\tlet updatedArtists: Artists = [];\n\n\t\tlet suggestedArtists: Artists = data.queryArtists\n\t\t\t.slice(0, 5)\n\t\t\t// Map to make a copy of the array, maybe uneeded\n\t\t\t.map((artist: Artist) => artist);\n\n\t\t// Find the selected artist and move it to index 0\n\t\tfor (let i = 0; i < suggestedArtists!.length; i++) {\n\t\t\tif (suggestedArtists![i].name === suggestion) {\n\t\t\t\tlet selectedArtist: Artists = suggestedArtists?.splice(i, 1);\n\t\t\t\tlet otherArtists: Artists = suggestedArtists;\n\t\t\t\tupdatedArtists = [...selectedArtist, ...otherArtists];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tsetArtists(updatedArtists);\n\t\tsetSelected(true);\n\t};\n\n\tconst handleClick = (name: string) => {\n\t\tlet updatedArtists: Artists = [];\n\n\t\tfor (let i = 0; i < artists.length; i++) {\n\t\t\tif (artists[i].name === name) {\n\t\t\t\tlet selectedArtist: Artists = artists.splice(i, 1);\n\t\t\t\tlet otherArtists: Artists = artists;\n\t\t\t\tupdatedArtists = [...selectedArtist, ...otherArtists];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tsetArtists(updatedArtists);\n\t};\n\n\tuseEffect(() => {\n\t\tif (data && data.queryArtists !== []) {\n\t\t\t// Limit artists to 5\n\t\t\tconst updatedArtists = data.queryArtists.slice(0, 5);\n\t\t\tconst updatedSuggestions: string[] = updatedArtists.map(\n\t\t\t\t(el: Artist) => {\n\t\t\t\t\treturn el.name;\n\t\t\t\t},\n\t\t\t);\n\t\t\tsetSuggestions(updatedSuggestions);\n\t\t}\n\t}, [data]);\n\n\treturn (\n\t\t<Grommet theme={theme}>\n\t\t\t<Header />\n\t\t\t<Search\n\t\t\t\tinputValue={inputValue}\n\t\t\t\tsuggestions={suggestions}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\thandleSelect={handleSelect}\n\t\t\t/>\n\t\t\t{selected && (\n\t\t\t\t<Results artists={artists} handleClick={handleClick} />\n\t\t\t)}\n\t\t</Grommet>\n\t);\n}\n\nconst theme = {\n\tglobal: {\n\t\tcolors: {\n\t\t\tbrand: 'rgb(24, 177, 147)',\n\t\t},\n\t\tfont: {\n\t\t\tfamily: 'Roboto',\n\t\t\tsize: '18px',\n\t\t\theight: '20px',\n\t\t},\n\t},\n};\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\n\nimport App from './components/App';\n\nconst client = new ApolloClient({\n\turi: 'https://spotify-graphql-server.herokuapp.com/graphql',\n\tcache: new InMemoryCache(),\n});\n\nReactDOM.render(\n\t<React.StrictMode>\n\t\t<ApolloProvider client={client}>\n\t\t\t<App />\n\t\t</ApolloProvider>\n\t</React.StrictMode>,\n\tdocument.getElementById('root'),\n);\n","module.exports = __webpack_public_path__ + \"static/media/placeholder-music.97fa2780.jpg\";"],"sourceRoot":""}