Fix Results conditional render on artist selection

This commit is contained in:
rui hildt 2020-07-23 14:23:26 +02:00
parent 84e86f170e
commit 0a4a1ea4db
3 changed files with 17 additions and 8 deletions

View File

@ -30,27 +30,32 @@ export default function App() {
const [suggestions, setSuggestions] = useState<string[] | undefined>( const [suggestions, setSuggestions] = useState<string[] | undefined>(
undefined, undefined,
); );
const [selected, setSelected] = useState(false);
// Debounce the database query // Debounce the database query
// Based on: https://archive.is/wip/6JDqb // Based on: https://archive.is/wip/6JDqb
const updateQuery = () => { const updateQuery = () => {
getArtists({ variables: { byName: inputValue } }); getArtists({ variables: { byName: inputValue } });
}; };
const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]); const delayedQuery = useCallback(debounce(updateQuery, 500), [inputValue]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value); setInputValue(e.target.value);
}; };
useEffect(() => { useEffect(() => {
delayedQuery(); delayedQuery();
// Cancel previous debounce calls during useEffect cleanup. // Cancel previous debounce calls during useEffect cleanup.
return delayedQuery.cancel; return delayedQuery.cancel;
}, [inputValue, delayedQuery]); }, [inputValue, delayedQuery]);
const handleSelect = () => {
setSelected(true);
};
useEffect(() => { useEffect(() => {
// TODO optimize rendering, probably by using onCompleted instead of this useEffect // TODO optimize re-rendering, probably by using onCompleted instead of this useEffect
// See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174 // See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174
if (data && data.queryArtists !== []) { if (data && data.queryArtists !== []) {
// Limit artists to 5 // Limit artists to 5
@ -74,8 +79,9 @@ export default function App() {
inputValue={inputValue} inputValue={inputValue}
handleChange={handleChange} handleChange={handleChange}
suggestions={suggestions} suggestions={suggestions}
handleSelect={handleSelect}
/> />
<Results artists={artists}/> <Results artists={artists} selected={selected} />
</Grommet> </Grommet>
); );
} }

View File

@ -3,10 +3,10 @@ import { Box, Grid } from 'grommet';
import { Artists } from '../interfaces'; import { Artists } from '../interfaces';
export const Results = ({ artists }: { artists: Artists }) => { export const Results = ({ artists, selected }: { artists: Artists, selected: boolean }) => {
console.log('artists', artists); console.log('artists', artists);
return artists ? ( return selected ? (
<Grid <Grid
rows={['small', 'small']} rows={['small', 'small']}
columns={['1/4', '3/4']} columns={['1/4', '3/4']}

View File

@ -6,10 +6,12 @@ export const Search = ({
inputValue, inputValue,
handleChange, handleChange,
suggestions, suggestions,
handleSelect
}: { }: {
inputValue: string; inputValue: string;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void; handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
suggestions: string[] | undefined; suggestions: string[] | undefined;
handleSelect : () => void
}) => ( }) => (
<Box <Box
as='section' as='section'
@ -20,6 +22,7 @@ export const Search = ({
<TextInput <TextInput
value={inputValue} value={inputValue}
onChange={handleChange} onChange={handleChange}
onSelect={handleSelect}
placeholder='Type an artist name' placeholder='Type an artist name'
icon={<FormSearch color='plain' />} icon={<FormSearch color='plain' />}
dropHeight='large' dropHeight='large'