diff --git a/package-lock.json b/package-lock.json index 22a07d4..7d11264 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4587,6 +4587,11 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "fuse.js": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.0.tgz", + "integrity": "sha512-MagWS1i3kj58BgF9xymo+n2ZiSs9MoyVfxkCcr11+mzMpNEyTDyLtbU3DyrVjHsy0Gkjf58FH1n+TaihylFcIA==" + }, "gensync": { "version": "1.0.0-beta.1", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", diff --git a/package.json b/package.json index 744ded2..7d190f4 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@types/redux-logger": "^3.0.8", "@types/styled-components": "^5.1.0", "date-fns": "^2.14.0", + "fuse.js": "^6.4.0", "lodash": "^4.17.15", "react": "16.11.0", "react-native": "0.62.2", diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index 086bee1..f91417b 100644 --- a/src/screens/Music/index.tsx +++ b/src/screens/Music/index.tsx @@ -4,6 +4,7 @@ import { StackParams } from './types'; import Albums from './stacks/Albums'; import Album from './stacks/Album'; import RecentAlbums from './stacks/RecentAlbums'; +import Search from './stacks/Search'; const Stack = createStackNavigator(); @@ -13,6 +14,7 @@ function MusicStack() { + ); } diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx index a7d516f..117f8f7 100644 --- a/src/screens/Music/stacks/RecentAlbums.tsx +++ b/src/screens/Music/stacks/RecentAlbums.tsx @@ -16,10 +16,12 @@ import ListButton from 'components/ListButton'; const NavigationHeader: React.FC = () => { const navigation = useNavigation(); const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]); + const handleSearchClick = useCallback(() => { navigation.navigate('Search'); }, [navigation]); return ( All Albums + Search
Recent Albums
); diff --git a/src/screens/Music/stacks/Search.tsx b/src/screens/Music/stacks/Search.tsx new file mode 100644 index 0000000..d03f776 --- /dev/null +++ b/src/screens/Music/stacks/Search.tsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import Input from 'components/Input'; +import { Text } from 'react-native'; +import styled from 'styled-components/native'; +import { useTypedSelector } from 'store'; +import Fuse from 'fuse.js'; + +const Container = styled.View` + padding: 0 20px; +`; + +export default function Search() { + const [searchTerm, setSearchTerm] = useState(''); + const albums = useTypedSelector(state => state.music.albums.entities); + const [results, setResults] = useState([]); + let fuse: Fuse<{}, {}>; + + useEffect(() => { + fuse = new Fuse(Object.values(albums), { + keys: ['Name', 'AlbumArtist', 'AlbumArtists', 'Artists'], + threshold: 0.1, + includeScore: true, + }); + }, [albums]); + + useEffect(() => { + setResults(fuse.search(searchTerm)); + }, [searchTerm, setResults, fuse]); + + return ( + + + {results.map((result) => ( + {result.item.Name} - {result.item.AlbumArtist} + ))} + + ); +} \ No newline at end of file