{"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","props","Box","as","direction","align","justify","background","pad","left","right","vertical","style","zIndex","Search","inputValue","handleChange","suggestions","handleSelect","margin","top","width","TextInput","value","onChange","e","target","onSelect","suggestion","icon","FormSearch","color","dropHeight","placeholder","Album","image","name","round","elevation","overflow","height","Image","src","fit","Heading","level","bottom","Other","handleClick","onClick","repeat","size","Results","artists","selectedName","albums","otherArtists","slice","length","selectedAlbums","selectedImage","uniqueAlbums","Set","forEach","album","has","add","push","Grid","rows","columns","gap","areas","gridArea","alignSelf","ResponsiveContext","Consumer","wrap","map","artist","key","id","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":"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","file":"static/js/main.c7cb2f1e.chunk.js","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport { Box } from 'grommet';\n\nexport const Header = (props: PropsWithChildren<{}>) => {\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\t{...props}\n\t\t/>\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, Heading } 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\toverflow='hidden'\n\t\t\talign='center'\n\t\t\tpad='small'\n\t\t\tonClick={() => handleClick(name)}\n\t\t>\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\t<Box\n\t\t\t\theight='small'\n\t\t\t\twidth='small'\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</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', '2/3']}\n\t\t\tgap='large'\n\t\t\tareas={[\n\t\t\t\t['artist-title', 'other-title'],\n\t\t\t\t['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\tsize='small'\n\t\t\t\tgridArea='artist-title'\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 gridArea='artist'>\n\t\t\t\t<Box\n\t\t\t\t\tround='full'\n\t\t\t\t\tbackground={{\n\t\t\t\t\t\trepeat: 'no-repeat',\n\t\t\t\t\t\tsize: 'cover',\n\t\t\t\t\t\timage: `url(${selectedImage})`,\n\t\t\t\t\t}}\n\t\t\t\t\theight='300px'\n\t\t\t\t\twidth='300px'\n\t\t\t\t/>\n\t\t\t</Box>\n\t\t\t<Heading\n\t\t\t\tlevel='2'\n\t\t\t\tgridArea='other-title'\n\t\t\t\tmargin={{ vertical: 'none' }}\n\t\t\t\talignSelf='end'\n\t\t\t\tsize='small'\n\t\t\t>\n\t\t\t\tOther results\n\t\t\t</Heading>\n\t\t\t<ResponsiveContext.Consumer>\n\t\t\t\t{(size) => (\n\t\t\t\t\t<Box gridArea='other' direction='row-reverse' justify='end' wrap gap='medium'>\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)}\n\t\t\t</ResponsiveContext.Consumer>\n\t\t\t<Heading level='2' gridArea='disco-title' size='large' margin={{bottom: \"none\"}}>\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: '300px' }}\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, Heading } 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\t\tlet suggestedArtists: Artists = data.queryArtists.slice(0, 5);\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\t<Heading level='1' margin={{ vertical: 'small' }} color='light-1'>\n\t\t\t\t\tSpoti Search\n\t\t\t\t</Heading>\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":""}