Add Results component with basic structure

This commit is contained in:
rui hildt 2020-07-23 14:07:29 +02:00
parent ce1bd7de40
commit 84e86f170e
3 changed files with 38 additions and 19 deletions

View File

@ -26,13 +26,13 @@ const QUERY_ARTIST_ALBUMS = gql`
export default function App() {
const [inputValue, setInputValue] = useState('');
const [getArtists, { data }] = useLazyQuery(QUERY_ARTIST_ALBUMS);
const [artists, setArtists] = useState<Artists | undefined>(undefined);
const [artists, setArtists] = useState<Artists>(undefined);
const [suggestions, setSuggestions] = useState<string[] | undefined>(
undefined,
);
// Debounce the database query
// See: https://archive.is/wip/6JDqb
// Based on: https://archive.is/wip/6JDqb
const updateQuery = () => {
getArtists({ variables: { byName: inputValue } });
};
@ -49,8 +49,9 @@ export default function App() {
return delayedQuery.cancel;
}, [inputValue, delayedQuery]);
// TODO: Maybe merge the two use effects?
useEffect(() => {
// TODO optimize rendering, probably by using onCompleted instead of this useEffect
// See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174
if (data && data.queryArtists !== []) {
// Limit artists to 5
const updatedArtists = data.queryArtists.slice(0, 5);
@ -74,7 +75,7 @@ export default function App() {
handleChange={handleChange}
suggestions={suggestions}
/>
<Results />
<Results artists={artists}/>
</Grommet>
);
}

View File

@ -1,14 +1,32 @@
import React, { PropsWithChildren } from 'react';
import { Box } from 'grommet';
import React from 'react';
import { Box, Grid } from 'grommet';
export const Results = (props: PropsWithChildren<{}>) => {
return (
<Box
as='section'
direction='row'
justify='center'
margin={{ vertical: 'large' }}
import { Artists } from '../interfaces';
export const Results = ({ artists }: { artists: Artists }) => {
console.log('artists', artists);
return artists ? (
<Grid
rows={['small', 'small']}
columns={['1/4', '3/4']}
gap='small'
areas={[
['artist', 'similar'],
['discography', 'discography'],
]}
>
</Box>
<Box gridArea='artist' background='light-5'>
Artist
</Box>
<Box gridArea='similar' background='light-2'>
Similar
</Box>
<Box gridArea='discography' background='brand'>
discography
</Box>
</Grid>
) : (
<></>
);
};

View File

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