From 1e53d4857a8721f3d07a1de897e87422096d2dca Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 13 Dec 2021 01:25:58 -0800 Subject: [PATCH] Add useColumnSort hook --- src/hooks/useColumnSort.ts | 109 +++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 src/hooks/useColumnSort.ts diff --git a/src/hooks/useColumnSort.ts b/src/hooks/useColumnSort.ts new file mode 100644 index 0000000..3eb83ce --- /dev/null +++ b/src/hooks/useColumnSort.ts @@ -0,0 +1,109 @@ +/* eslint-disable array-callback-return */ +/* eslint-disable consistent-return */ +import { useState, useEffect } from 'react'; +import _ from 'lodash'; +import { Item } from '../types'; + +const ALBUM_COLUMNS = [ + { label: 'Artist', dataKey: 'albumArtist' }, + { label: 'Created', dataKey: 'created' }, + { label: 'Duration', dataKey: 'duration' }, + { label: 'Favorite', dataKey: 'starred' }, + { label: 'Genre', dataKey: 'albumGenre' }, + { label: 'Rating', dataKey: 'userRating' }, + { label: 'Song Count', dataKey: 'songCount' }, + { label: 'Title', dataKey: 'title' }, + { label: 'Year', dataKey: 'year' }, +]; + +const ARTIST_COLUMNS = [ + { label: 'Album Count', dataKey: 'albumCount' }, + { label: 'Duration', dataKey: 'duration' }, + { label: 'Favorite', dataKey: 'starred' }, + { label: 'Rating', dataKey: 'userRating' }, + { label: 'Title', dataKey: 'title' }, +]; + +const MUSIC_COLUMNS = [ + { label: 'Artist', dataKey: 'albumArtist' }, + { label: 'Bitrate', dataKey: 'bitRate' }, + { label: 'Created', dataKey: 'created' }, + { label: 'Duration', dataKey: 'duration' }, + { label: 'Favorite', dataKey: 'starred' }, + { label: 'Genre', dataKey: 'albumGenre' }, + { label: 'Play Count', dataKey: 'playCount' }, + { label: 'Rating', dataKey: 'userRating' }, + { label: 'Size', dataKey: 'size' }, + { label: 'Title', dataKey: 'title' }, + { label: 'Year', dataKey: 'year' }, +]; + +const PLAYLIST_COLUMNS = [ + { label: 'Comment', dataKey: 'comment' }, + { label: 'Created', dataKey: 'created' }, + { label: 'Duration', dataKey: 'duration' }, + { label: 'Modified', dataKey: 'modified' }, + { label: 'Owner', dataKey: 'owner' }, + { label: 'Public', dataKey: 'public' }, + { label: 'Song Count', dataKey: 'songCount' }, + { label: 'Title', dataKey: 'title' }, +]; + +const GENRE_COLUMNS = [ + { label: 'Album Count', dataKey: 'albumCount' }, + { label: 'Song Count', dataKey: 'songCount' }, + { label: 'Title', dataKey: 'title' }, +]; + +const useColumnSort = (data: any[], type: Item, sort: { column: string; type: 'asc' | 'desc' }) => { + const [sortProps, setSortProps] = useState(sort); + const [sortedData, setSortedData] = useState([]); + const [sortColumns, setSortColumns] = useState([]); + + useEffect(() => { + if (type === Item.Album) { + return setSortColumns(ALBUM_COLUMNS); + } + + if (type === Item.Artist) { + return setSortColumns(ARTIST_COLUMNS); + } + + if (type === Item.Music) { + return setSortColumns(MUSIC_COLUMNS); + } + + if (type === Item.Genre) { + return setSortColumns(GENRE_COLUMNS); + } + + if (type === Item.Playlist) { + return setSortColumns(PLAYLIST_COLUMNS); + } + }, [type]); + + useEffect(() => { + setSortProps(sort); + + const sortedByColumn = sortProps.column + ? _.orderBy( + data, + [ + (entry: any) => { + return typeof entry[sortProps.column!] === 'string' + ? entry[sortProps.column!].toLowerCase() || '' + : +entry[sortProps.column!] || ''; + }, + ], + sortProps.type + ) + : data; + + setSortedData(_.compact(_.uniqBy(sortedByColumn, 'uniqueId'))); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data, sort.column, sort.type, sortProps.column, sortProps.type]); + + return { sortedData, sortColumns }; +}; + +export default useColumnSort;