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,6 +30,7 @@ export default function App() {
const [suggestions, setSuggestions] = useState<string[] | undefined>(
undefined,
);
const [selected, setSelected] = useState(false);
// Debounce the database query
// Based on: https://archive.is/wip/6JDqb
@ -49,8 +50,12 @@ export default function App() {
return delayedQuery.cancel;
}, [inputValue, delayedQuery]);
const handleSelect = () => {
setSelected(true);
};
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
if (data && data.queryArtists !== []) {
// Limit artists to 5
@ -74,8 +79,9 @@ export default function App() {
inputValue={inputValue}
handleChange={handleChange}
suggestions={suggestions}
handleSelect={handleSelect}
/>
<Results artists={artists}/>
<Results artists={artists} selected={selected} />
</Grommet>
);
}

View File

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

View File

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