diff --git a/src/components/App.tsx b/src/components/App.tsx
index 229d93b..72604e0 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -71,6 +71,10 @@ export default function App() {
setSelected(true);
};
+ const handleClick = () => {
+ console.log('click')
+ }
+
useEffect(() => {
// TODO optimize re-rendering, probably by using onCompleted instead of this useEffect
// See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174
@@ -97,7 +101,7 @@ export default function App() {
suggestions={suggestions}
handleSelect={handleSelect}
/>
- {selected && }
+ {selected && }
);
}
diff --git a/src/components/Other.tsx b/src/components/Other.tsx
index 9773fc8..8bd4b98 100644
--- a/src/components/Other.tsx
+++ b/src/components/Other.tsx
@@ -1,9 +1,23 @@
import React from 'react';
-import { Box, Heading, Image } from 'grommet';
+import { Box, Heading } from 'grommet';
-export const Other = ({ image, name }: { image: string; name: string }) => {
+export const Other = ({
+ image,
+ name,
+ handleClick,
+}: {
+ image: string;
+ name: string;
+ handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+}) => {
return (
-
+
{
+export const Results = ({
+ artists,
+ handleClick,
+}: {
+ artists: Artists;
+ handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+}) => {
const {
name: selectedName,
image: selectedImage,
@@ -32,10 +38,7 @@ export const Results = ({ artists }: { artists: Artists }) => {
>
{selectedName}
-
+
{
gridArea='other-title'
margin={{ vertical: 'none' }}
alignSelf='end'
- size="small"
+ size='small'
>
Other results
@@ -64,6 +67,7 @@ export const Results = ({ artists }: { artists: Artists }) => {
key={artist.id}
image={artist.image}
name={artist.name}
+ handleClick={handleClick}
/>
))}