Add Sorting on Genres page

pom.xml

@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.gmt</groupId>
 	<artifactId>g-player</artifactId>
-	<version>2.4.9</version>
+	<version>2.4.10</version>
 	<name>G-Player-SB</name>
 	<description>G-Player-SB</description>
 	<properties>

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){

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" />

src/main/resources/gp_react/asset-manifest.json

@@ -1,18 +1,18 @@
 {
   "files": {
     "main.css": "/static/css/main.d922c6a5.css",
-    "main.js": "/static/js/main.a3adfe0c.js",
+    "main.js": "/static/js/main.cf16b909.js",
     "static/js/787.09cba7e9.chunk.js": "/static/js/787.09cba7e9.chunk.js",
     "static/media/Loading.gif": "/static/media/Loading.757857ce13a4e4e598e4.gif",
     "static/media/def_album_art.png": "/static/media/def_album_art.8f703ea1e26cee1e8ebb.png",
     "static/media/g_player_icon.png": "/static/media/g_player_icon.afa3935b5fcf43d3e484.png",
     "index.html": "/index.html",
     "main.d922c6a5.css.map": "/static/css/main.d922c6a5.css.map",
-    "main.a3adfe0c.js.map": "/static/js/main.a3adfe0c.js.map",
+    "main.cf16b909.js.map": "/static/js/main.cf16b909.js.map",
     "787.09cba7e9.chunk.js.map": "/static/js/787.09cba7e9.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.d922c6a5.css",
-    "static/js/main.a3adfe0c.js"
+    "static/js/main.cf16b909.js"
   ]
 }

src/main/resources/gp_react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.a3adfe0c.js"></script><link href="/static/css/main.d922c6a5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/g-player-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/g-player-icon.png"/><link rel="manifest" href="/manifest.json"/><title>G player</title><script defer="defer" src="/static/js/main.cf16b909.js"></script><link href="/static/css/main.d922c6a5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/main/resources/gp_react/static/js/main.cf16b909.js.LICENSE.txt

@@ -0,0 +1,119 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.1.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.5.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */