-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.tsx
41 lines (35 loc) 路 1.07 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import * as React from 'react';
import { query as urqlQuery } from 'urql';
import { unstable_createResource as createResource} from 'react-cache';
import { client } from '../../../helpers';
import { SearchResultsQuery } from '../../../queries';
import {
AlbumList,
PlaylistList,
TrackList,
} from '../';
import { Spinner } from '../../';
import './style.css';
const SearchDataResource = createResource(
(query) => client.executeQuery(urqlQuery(SearchResultsQuery, { query }), true)
);
function Results(props) {
const { query } = props;
const { data } = SearchDataResource.read(query);
const { albums, playlists, tracks } = data.search;
React.useEffect(() => {
window.scrollTo(0, 0);
});
return (
<div className="search-results">
<AlbumList albums={albums} />
<PlaylistList playlists={playlists} />
<TrackList tracks={tracks} />
</div>
);
}
export default (props) => (
<React.Suspense fallback={<Spinner size="large" />}>
<Results {...props} />
</React.Suspense>
);