Add Sorting on Genres page

mgireesha · May 18, 2024 · 31c4da3 · 31c4da3
1 parent 3f4df1b
commit 31c4da3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/g-player-react/src/Components/playlist/Playlists.js b/src/g-player-react/src/Components/playlist/Playlists.js
@@ -32,8 +32,6 @@ export const Playlists = () => {
 
     useEffect(()=>{
         let tempPlaylists = [...playlists];
-        console.log("tempPlaylists: ",tempPlaylists)
-        console.log("playlistSongsCount: ",playlistSongsCount)
         if(sortBy === SORT_A_TO_Z){
             tempPlaylists = tempPlaylists.sort((a,b)=>{return a.name>b.name?1:-1});
         }else if(sortBy === SORT_A_TO_Z_DESC){

diff --git a/src/g-player-react/src/Components/screen/genre/Genres.js b/src/g-player-react/src/Components/screen/genre/Genres.js
@@ -3,9 +3,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchGenreDetails } from "../../redux/library/LibraryActions";
 import { Link } from "react-router-dom";
 import { GroupedThumbImg4 } from "../../GroupedThumbImg4";
-import { CURRENT_PAGE, GENRE, GENRES, GENRE_LABEL, TRACKS_LABEL } from "../../redux/GPActionTypes";
+import { CURRENT_PAGE, GENRE, GENRES, GENRE_LABEL, SORT_ARTIST, SORT_A_TO_Z, SORT_A_TO_Z_DESC, SORT_COUNT_TRACKS, TRACKS_LABEL } from "../../redux/GPActionTypes";
 import { ThumbnailActionBtn } from "../../ThumbnailActionBtn";
 import { camelize, setCookies } from "../../utilities/util";
+import { SortingContainer } from "../SortingContainer";
 
 export const Genres = () => {
     const dispatch = useDispatch();
@@ -15,6 +16,7 @@ export const Genres = () => {
     const [genreAlbums, setGenreAlbums] = useState({});
     const [genres, setGenres] = useState([]);
     const [genreSongCount, setGenreSongCount] = useState({});
+    const [sortBy, setSortBy] = useState(SORT_A_TO_Z);
 
     useEffect(()=>{
         if(!genreDetails || (genreDetails && !genreDetails.GENRE_SONG_COUNT)){
@@ -36,12 +38,40 @@ export const Genres = () => {
             }
         }
     },[genreDetails]);
+
+    useEffect(()=>{
+        if(genres && genres.length>0){
+            let sortedGenres = [...genres];
+            if(sortBy === SORT_A_TO_Z){
+                sortedGenres = sortedGenres.sort((a,b)=>{return a>b?1:-1});
+            }
+            if(sortBy === SORT_A_TO_Z_DESC){
+                sortedGenres = sortedGenres.sort((a,b)=>{return a>b?-1:1});
+            }
+            if(sortBy === SORT_COUNT_TRACKS){
+                sortedGenres = sortedGenres.sort((a,b)=>{return genreSongCount[a]>genreSongCount[b]?-1:1});
+            }
+            setGenres(sortedGenres);
+        }
+    },[sortBy,genres])
 
     return(
         <div className="genres">
+            <SortingContainer 
+                setSortBy={setSortBy} 
+                sortBy={sortBy} 
+                showLKey={false} 
+                sortSelectors={
+                    [
+                        SORT_COUNT_TRACKS,
+                        SORT_A_TO_Z,
+                        SORT_A_TO_Z_DESC,
+                    ]
+                } 
+            />
             <div className="genre-list">
-                {genres.length > 0 && genres.map(genre =>
-                    <div className="genre-thumb">
+                {genres.length > 0 && genres.map((genre,i) =>
+                    <div className="genre-thumb" key={i}>
                         <div className="genre-thumb-img-div">
                             <Link to={`/music/genres/${genre}`}>
                                 <GroupedThumbImg4 albumNames={genreAlbums[genre]} classPrefix="genre" />