135 lines
3.3 KiB
TypeScript
135 lines
3.3 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { Divider, Group, Stack, UnstyledButton } from '@mantine/core';
|
|
import { useForm } from '@mantine/form';
|
|
import { useDebouncedValue } from '@mantine/hooks';
|
|
import { openModal } from '@mantine/modals';
|
|
import styled from 'styled-components';
|
|
import { InternetProviderLyricSearchResponse } from '../../../api/types';
|
|
import { useLyricSearch } from '../queries/lyric-search-query';
|
|
import { Badge, ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
|
|
|
|
const SearchItem = styled(UnstyledButton)`
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: var(--btn-default-fg-hover);
|
|
background: var(--btn-default-bg-hover);
|
|
}
|
|
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
`;
|
|
|
|
interface SearchResultProps {
|
|
artist?: string;
|
|
name?: string;
|
|
source?: string;
|
|
}
|
|
const SearchResult = ({ name, artist, source }: SearchResultProps) => {
|
|
return (
|
|
<SearchItem>
|
|
<Group
|
|
noWrap
|
|
position="apart"
|
|
>
|
|
<Stack
|
|
maw="65%"
|
|
spacing={0}
|
|
>
|
|
<Text size="md">{name}</Text>
|
|
<Text $secondary>{artist}</Text>
|
|
</Stack>
|
|
<Badge size="lg">{source}</Badge>
|
|
</Group>
|
|
</SearchItem>
|
|
);
|
|
};
|
|
|
|
interface LyricSearchFormProps {
|
|
artist?: string;
|
|
name?: string;
|
|
onSelect?: (lyrics: InternetProviderLyricSearchResponse) => void;
|
|
}
|
|
|
|
export const LyricsSearchForm = ({ artist, name }: LyricSearchFormProps) => {
|
|
const form = useForm({
|
|
initialValues: {
|
|
artist: artist || '',
|
|
name: name || '',
|
|
},
|
|
});
|
|
|
|
const [debouncedArtist] = useDebouncedValue(form.values.artist, 500);
|
|
const [debouncedName] = useDebouncedValue(form.values.name, 500);
|
|
|
|
const { data, isLoading } = useLyricSearch({
|
|
options: { enabled: Boolean(form.values.artist && form.values.name) },
|
|
query: { artist: debouncedArtist, name: debouncedName },
|
|
});
|
|
|
|
const searchResults = useMemo(() => {
|
|
if (!data) return [];
|
|
|
|
console.log('data', data);
|
|
|
|
const results: InternetProviderLyricSearchResponse[] = [];
|
|
Object.keys(data).forEach((key) => {
|
|
(data[key as keyof typeof data] || []).forEach((result) => results.push(result));
|
|
});
|
|
|
|
return results;
|
|
}, [data]);
|
|
|
|
return (
|
|
<Stack>
|
|
<form>
|
|
<Group grow>
|
|
<TextInput
|
|
data-autofocus
|
|
required
|
|
label="Name"
|
|
{...form.getInputProps('name')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label="Artist"
|
|
{...form.getInputProps('artist')}
|
|
/>
|
|
</Group>
|
|
</form>
|
|
<Divider />
|
|
{isLoading ? (
|
|
<Spinner container />
|
|
) : (
|
|
<ScrollArea
|
|
offsetScrollbars
|
|
h={500}
|
|
pr="1rem"
|
|
>
|
|
<Stack spacing="md">
|
|
{searchResults.map((result) => (
|
|
<SearchResult
|
|
key={`${result.source}-${result.id}`}
|
|
artist={result.artist}
|
|
name={result.name}
|
|
source={result.source}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</ScrollArea>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const openLyricSearchModal = ({ artist, name }: LyricSearchFormProps) => {
|
|
openModal({
|
|
children: (
|
|
<LyricsSearchForm
|
|
artist={artist}
|
|
name={name}
|
|
/>
|
|
),
|
|
size: 'lg',
|
|
title: 'Search for lyrics',
|
|
});
|
|
};
|