Fix handleSelect and render basic result page

This commit is contained in:
rui hildt 2020-07-23 19:53:47 +02:00
parent 09fdb55b3e
commit 21c65dbb5b
4 changed files with 46 additions and 26 deletions

View File

@ -26,21 +26,22 @@ const QUERY_ARTISTS = gql`
export default function App() {
const [inputValue, setInputValue] = useState('');
const [getArtists, { data }] = useLazyQuery(QUERY_ARTISTS);
const [artists, setArtists] = useState<Artists>(undefined);
const [suggestions, setSuggestions] = useState<string[] | undefined>(
undefined,
);
const [artists, setArtists] = useState<Artists>([]);
const [suggestions, setSuggestions] = useState<string[] | undefined>();
const [selected, setSelected] = useState(false);
// Debounce the database query
// Based on: https://archive.is/wip/6JDqb
const updateQuery = () => {
getArtists({ variables: { byName: inputValue } });
};
const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const updateQuery = () => {
getArtists({ variables: { byName: inputValue } });
};
const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
useEffect(() => {
delayedQuery();
// Cancel previous debounce calls during useEffect cleanup.
@ -49,15 +50,19 @@ export default function App() {
const handleSelect = (suggestion: any) => {
const selectedName: string = suggestion.suggestion;
const suggestedArtists = data.queryArtists.slice(0, 5);
let updatedArtists: Artists;
let updatedArtists: Artists = [];
// Use map to create a copy of the array
let suggestedArtists: Artists = data.queryArtists
.slice(0, 5)
.map((item: Artist) => item);
// Find the selected artist and move it to index 0
for (let i = 0; i < suggestedArtists.length; i++) {
if (suggestedArtists[i].name === selectedName) {
const selectedArtist: Artists = suggestedArtists?.splice(i, 1);
const otherArtists: Artists = suggestedArtists;
updatedArtists = [...selectedArtist!, ...otherArtists!]
for (let i = 0; i < suggestedArtists!.length; i++) {
if (suggestedArtists![i].name === selectedName) {
let selectedArtist: Artists = suggestedArtists?.splice(i, 1);
let otherArtists: Artists = suggestedArtists;
updatedArtists = [...selectedArtist, ...otherArtists];
break;
}
}
@ -78,7 +83,6 @@ export default function App() {
},
);
setSuggestions(updatedSuggestions);
// setArtists(updatedArtists);
}
}, [data]);

View File

@ -1,16 +1,18 @@
import React from 'react';
import { Box, Grid } from 'grommet';
import { Box, Grid, Avatar } from 'grommet';
import { Artists } from '../interfaces';
export const Results = ({ artists }: { artists: Artists }) => {
// Selected artist is always the first of the array
const selectedArtist: Artists = artists?.splice(0, 1);
const otherArtists = artists;
const {
name: selectedName,
image: selectedImage,
albums: selectedAlbums,
} = artists[0];
return (
<Grid
rows={['small', 'small']}
rows={['fit', 'fit']}
columns={['1/4', '3/4']}
gap='small'
areas={[
@ -19,13 +21,26 @@ export const Results = ({ artists }: { artists: Artists }) => {
]}
>
<Box gridArea='artist' background='light-5'>
Artist
<Avatar src={selectedImage} />
<h1>{selectedName}</h1>
</Box>
<Box gridArea='similar' background='light-2'>
Similar
<h3>Similar results</h3>
{artists.map((artist) => (
<Box gridArea='artist' background='light-5' key={artist.id}>
<Avatar src={artist.image} />
<h4>{artist.name}</h4>
</Box>
))}
</Box>
<Box gridArea='discography' background='brand'>
discography
<h2>discography</h2>
{selectedAlbums.map((albums) => (
<Box gridArea='albums' background='light-5' key={albums.id}>
<Avatar src={albums.image} />
<h4>{albums.name}</h4>
</Box>
))}
</Box>
</Grid>
);

View File

@ -11,4 +11,4 @@ export interface Artist {
albums: Album[];
}
export type Artists = Artist[] | undefined;
export type Artists = Artist[];

View File

@ -17,7 +17,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
"jsx": "react",
"downlevelIteration": true
},
"include": [
"src"