129 lines
3.0 KiB
TypeScript
129 lines
3.0 KiB
TypeScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { Grommet } from 'grommet';
|
|
import { debounce } from 'lodash';
|
|
import { gql, useLazyQuery } from '@apollo/client';
|
|
|
|
import { Header } from './Header';
|
|
import { Search } from './Search';
|
|
import { Results } from './Results';
|
|
import { Artists, Artist } from '../interfaces';
|
|
|
|
export const QUERY_ARTISTS = gql`
|
|
query Artist($byName: String!) {
|
|
queryArtists(byName: $byName) {
|
|
name
|
|
image
|
|
id
|
|
albums {
|
|
name
|
|
image
|
|
id
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default function App() {
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
|
|
const [artists, setArtists] = useState<Artists>([]);
|
|
const [suggestions, setSuggestions] = useState<string[]>([]);
|
|
const [selected, setSelected] = useState(false);
|
|
|
|
// Debounce the database query
|
|
// Based on: https://archive.is/wip/6JDqb
|
|
const handleChange = (value: string) => {
|
|
setInputValue(value);
|
|
};
|
|
|
|
const updateQuery = () => {
|
|
getArtists({ variables: { byName: inputValue } });
|
|
};
|
|
|
|
const delayedQuery = useCallback(debounce(updateQuery, 200), [inputValue]);
|
|
|
|
useEffect(() => {
|
|
delayedQuery();
|
|
// Cancel previous debounce calls during useEffect cleanup.
|
|
return delayedQuery.cancel;
|
|
}, [inputValue, delayedQuery]);
|
|
|
|
const handleSelect = (suggestion: string) => {
|
|
let updatedArtists: Artists = [];
|
|
|
|
let suggestedArtists: Artists = data.queryArtists
|
|
.slice(0, 5)
|
|
// Map to make a copy of the array, maybe uneeded
|
|
.map((artist: Artist) => artist);
|
|
|
|
// Find the selected artist and move it to index 0
|
|
for (let i = 0; i < suggestedArtists!.length; i++) {
|
|
if (suggestedArtists![i].name === suggestion) {
|
|
let selectedArtist: Artists = suggestedArtists?.splice(i, 1);
|
|
let otherArtists: Artists = suggestedArtists;
|
|
updatedArtists = [...selectedArtist, ...otherArtists];
|
|
break;
|
|
}
|
|
}
|
|
|
|
setArtists(updatedArtists);
|
|
setSelected(true);
|
|
};
|
|
|
|
const handleClick = (name: string) => {
|
|
let updatedArtists: Artists = [];
|
|
|
|
for (let i = 0; i < artists.length; i++) {
|
|
if (artists[i].name === name) {
|
|
let selectedArtist: Artists = artists.splice(i, 1);
|
|
let otherArtists: Artists = artists;
|
|
updatedArtists = [...selectedArtist, ...otherArtists];
|
|
break;
|
|
}
|
|
}
|
|
|
|
setArtists(updatedArtists);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (data && data.queryArtists !== []) {
|
|
// Limit artists to 5
|
|
const updatedArtists = data.queryArtists.slice(0, 5);
|
|
const updatedSuggestions: string[] = updatedArtists.map(
|
|
(el: Artist) => {
|
|
return el.name;
|
|
},
|
|
);
|
|
setSuggestions(updatedSuggestions);
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<Grommet theme={theme}>
|
|
<Header />
|
|
<Search
|
|
inputValue={inputValue}
|
|
suggestions={suggestions}
|
|
handleChange={handleChange}
|
|
handleSelect={handleSelect}
|
|
/>
|
|
{selected && (
|
|
<Results artists={artists} handleClick={handleClick} />
|
|
)}
|
|
</Grommet>
|
|
);
|
|
}
|
|
|
|
const theme = {
|
|
global: {
|
|
colors: {
|
|
brand: 'rgb(24, 177, 147)',
|
|
},
|
|
font: {
|
|
family: 'Roboto',
|
|
size: '18px',
|
|
height: '20px',
|
|
},
|
|
},
|
|
};
|