[FEAT] add a shuffle in the artist list.

This feature take a random on the artist and keep the 25 first and ge a single track for each artist.

front/src/scene/artist/ArtistsPage.tsx

@@ -1,31 +1,69 @@
 import { useState } from 'react';
 
-import { Flex, Text, Wrap, WrapItem } from '@chakra-ui/react';
+import { Button, Flex, Text, Tooltip, Wrap, WrapItem } from '@chakra-ui/react';
 import { LuUser } from 'react-icons/lu';
 import { useNavigate } from 'react-router-dom';
 
-import { Artist } from '@/back-api';
+import { Artist, Track } from '@/back-api';
 import { Covers } from '@/components/Cover';
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { SearchInput } from '@/components/SearchInput';
-import { TopBar } from '@/components/TopBar/TopBar';
+import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
 import { useArtistService, useOrderedArtists } from '@/service/Artist';
 import { useThemeMode } from '@/utils/theme-tools';
 import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
+import { MdOutlineForkRight } from 'react-icons/md';
+import { useActivePlaylistService } from '@/service/ActivePlaylist';
+import { shuffleArray } from '@/utils/arrayTools';
+import { useTrackService } from '@/service/Track';
+import { DataTools, TypeCheck } from '@/utils/data-tools';
+const LIMIT_RANDOM_VALUES = 25;
 
 export const ArtistsPage = () => {
   const { mode } = useThemeMode();
   const [filterName, setFilterName] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
+  const { playInList } = useActivePlaylistService();
   const onSelectItem = (data: Artist) => {
     navigate(`/artist/${data.id}/`);
   };
   const { dataArtist } = useOrderedArtists(filterName);
+  const { store: trackStore } = useTrackService();
+  const onRandomPlay = () => {
+    const data = shuffleArray(dataArtist)
+    const playingList: number[] = [];
+    for (let i = 0; i < Math.min(data.length, LIMIT_RANDOM_VALUES); i++) {
+      const selectedArtist: Artist = data[i];
+      const listArtistTracks: Track[] = DataTools.getsWhere(
+        trackStore.data,
+        [
+          {
+            check: TypeCheck.CONTAINS,
+            key: 'artists',
+            value: selectedArtist.id,
+          },
+        ],
+        []
+      );
+      console.log(`[${selectedArtist.id}] Find Tracks: ${listArtistTracks}`);
+      if (listArtistTracks.length === 0) {
+        continue;
+      }
+      playingList.push(listArtistTracks[Math.floor(Math.random() * listArtistTracks.length)].id);
+    }
+    playInList(0, playingList)
+  }
+
   return (
     <>
       <TopBar title="All artists">
         <SearchInput onChange={setFilterName} />
+        <Tooltip label="Random play">
+          <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>
+            <MdOutlineForkRight />
+          </Button>
+        </Tooltip>
       </TopBar>
       <PageLayout>
         <Wrap spacing={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">