albums show in ascending order

parent 00b0ce0f
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {getAlbumsByQueryParams} from '../features/album/albumSlice'; import {getAlbumsByQueryParams} from '../features/album/albumSlice';
import {useAppDispatch, useAppSelector} from '../store/hooks'; import {useAppDispatch, useAppSelector} from '../store/hooks';
import {useLocation} from 'react-router-dom';
const Albums = () => { const Albums = () => {
const {albums} = useAppSelector((state) => state.album); const {albums} = useAppSelector((state) => state.album);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const artist = params.get('artist'); const artist = params.get('artist');
const {state} = useLocation();
useEffect(() => { useEffect(() => {
dispatch(getAlbumsByQueryParams(artist!)); dispatch(getAlbumsByQueryParams(artist!));
}, []); }, [dispatch]);
return ( return (
<div> <div>
<h2>{state.artist}</h2>
{albums.map((album) => { {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> </div>
); );
......
...@@ -19,10 +19,13 @@ const HomePage = () => { ...@@ -19,10 +19,13 @@ const HomePage = () => {
<div key={artist._id}> <div key={artist._id}>
<img <img
onClick={() => 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 " 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} alt={artist.name}
/> />
<span>{artist.name}</span> <span>{artist.name}</span>
......
...@@ -46,7 +46,6 @@ export const albumSlice = createSlice({ ...@@ -46,7 +46,6 @@ export const albumSlice = createSlice({
.addCase( .addCase(
getAlbumsByQueryParams.fulfilled, getAlbumsByQueryParams.fulfilled,
(state, {payload}: PayloadAction<IAlbum[]>) => { (state, {payload}: PayloadAction<IAlbum[]>) => {
console.log(payload);
state.albums = payload; state.albums = payload;
} }
); );
......
import IArtist from './IArtist';
export default interface IAlbum { export default interface IAlbum {
name: string; name: string;
artist: string; artist: IArtist;
year: number; year: number;
image: string; image: string;
_id: string; _id: string;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment