albums show in ascending order

frontend/src/containers/Albums.tsx

 import React, {useEffect} from 'react';
 import {getAlbumsByQueryParams} from '../features/album/albumSlice';
 import {useAppDispatch, useAppSelector} from '../store/hooks';
+import {useLocation} from 'react-router-dom';
 
 const Albums = () => {
 	const {albums} = useAppSelector((state) => state.album);
 	const dispatch = useAppDispatch();
 	const params = new URLSearchParams(window.location.search);
 	const artist = params.get('artist');
+	const {state} = useLocation();
 
 	useEffect(() => {
 		dispatch(getAlbumsByQueryParams(artist!));
-	}, []);
+	}, [dispatch]);
 
 	return (
 		<div>
+			<h2>{state.artist}</h2>
 			{albums.map((album) => {
-				return <div key={album._id}>{album.name}</div>;
+				return (
+					<div key={album._id}>
+						<img
+							className="w-48 h-48 object-cover "
+							src={`${import.meta.env.VITE_MY_URL}/${album.image}`}
+							alt={album.name}
+						/>
+						<p>{album.name}</p>
+						<p>{album.year}</p>
+					</div>
+				);
 			})}
 		</div>
 	);

frontend/src/containers/HomePage.tsx

@@ -19,10 +19,13 @@ const HomePage = () => {
 					<div key={artist._id}>
 						<img
 							onClick={() =>
-								navigate({pathname: '/albums', search: `?artist=${artist._id}`})
+								navigate(
+									{pathname: '/albums', search: `?artist=${artist._id}`},
+									{state: {artist: artist.name}}
+								)
 							}
 							className="w-48 h-48 object-cover "
-							src={`http://localhost:3000/${artist.photo}`}
+							src={`${import.meta.env.VITE_MY_URL}/${artist.photo}`}
 							alt={artist.name}
 						/>
 						<span>{artist.name}</span>

frontend/src/features/album/albumSlice.ts

@@ -46,7 +46,6 @@ export const albumSlice = createSlice({
 			.addCase(
 				getAlbumsByQueryParams.fulfilled,
 				(state, {payload}: PayloadAction<IAlbum[]>) => {
-					console.log(payload);
 					state.albums = payload;
 				}
 			);

frontend/src/interfaces/IAlbum.ts

+import IArtist from './IArtist';
+
 export default interface IAlbum {
 	name: string;
-	artist: string;
+	artist: IArtist;
 	year: number;
 	image: string;
 	_id: string;