Skip to content

Commit 9e03ffa

Browse files
raphaelcordonraphaelcordon
committed
improving artist search for review
1 parent a605ce7 commit 9e03ffa

File tree

4 files changed

+87
-32
lines changed

4 files changed

+87
-32
lines changed

‎src/axios/spotifyAxios.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,16 @@ export const GetArtistById = async (id) => {
2323
}
2424
};
2525

26-
export const SearchArtistByName = async (name) => {
26+
export const SearchArtistByName = async (name, limit=5, offset=0) => {
2727
try {
2828
const config = getAxiosConfig();
29-
const res = await axios.get(`spotify/artist/searchbyname/${name}/`, config);
29+
const res = await axios.get(`spotify/artist/searchbyname/${name}/`, {
30+
...config,
31+
params: {
32+
limit: limit,
33+
offset: offset,
34+
},
35+
});
3036
return res.data;
3137
} catch (error) {
3238
throw new Error("Not possible to fetch data");

‎src/components/review/reviewCardFindArtistComponent.jsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,28 @@ const ReviewCardFindArtistComponent = ({ item }) => {
1616

1717

1818
return (
19-
<div className="w-[90%] md:w-[95%] shadow m-0 pb-4">
19+
<div className="w-[90%] md:w-[95%] shadow mb-4 pb-4">
2020

2121
{/* Image block */}
22-
<div className="w-full">
23-
<img src={imageUrl} alt={name} className="w-full h-40 lg:h-64 object-cover block"/>
22+
<div className="w-42">
23+
<img src={imageUrl} alt={name} className="w-full h-40 md:h-64 object-cover block"/>
2424
</div>
2525

2626
{/* Text block */}
27-
<article className="flex flex-col w-full h-16 md:h-24 p-4 bg-white pb-3">
28-
<div className="flex flex-col justify-between text-sm text-gray-600">
27+
<article className="flex flex-col w-full h-16 md:h-24 p-4 bg-white pb-3 overflow-hidden">
28+
<div className="flex flex-col justify-between text-sm text-gray-600 overflow-hidden">
2929
<div>
3030
<span>Artist:</span>
3131
<span className="text-sm md:text-base font-bold pl-1">{truncateText(name, 20)}</span>
3232
</div>
3333
<div className="hidden md:block">
3434
<span>Genres: </span>
3535
{ genres.length > 0 ? (
36-
<span className="text-smal font-bold pl-1">{truncateText(ListGenres(genres), 55)}</span>
36+
<span className="w-full text-sm pl-1">
37+
{truncateText(ListGenres(genres), 100)}</span>
3738
) :
3839
(
39-
<span className="text-smal text-gray-500 pl-1">Not defined</span>
40+
<span className="text-sm text-gray-500 pl-1">Not defined</span>
4041
)
4142
}
4243
</div>

‎src/components/review/reviewFindArtistComponent.jsx

+70-22
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,66 @@
1-
import { useState } from "react";
1+
import { useState, useRef } from "react";
22
import { SearchArtistByName } from "../../axios/spotifyAxios.js";
33
import LoaderComponent from "../Common/LoaderComponent.jsx";
4-
import ButtonSubmitDefault from "../Buttons/ButtonSubmitDefault.jsx";
54
import ReviewCardFindArtistComponent from "./reviewCardFindArtistComponent.jsx";
65

76
const ReviewFindArtistComponent = () => {
87
const [search, setSearch] = useState("");
8+
const [searchLimit, setSearchLimit] = useState(5);
9+
const [searchOffset, setSearchOffset] = useState(0);
910
const [searchResult, setSearchResult] = useState([]);
1011
const [isLoading, setIsLoading] = useState(false);
1112
const [isResultNull, setIsResultNull] = useState(false);
13+
const elementRef = useRef(null); // Reference for the element to scroll to
1214

13-
const getSubmitData = async (e) => {
14-
e.preventDefault();
15+
const getSubmitData = async (limit, offset) => {
1516
setIsLoading(true);
1617
try {
17-
const res = await SearchArtistByName(search);
18-
console.log(res);
19-
res?.length === 0 ? setIsResultNull(true) : setIsResultNull(false);
20-
setSearchResult(res || []); // Update based on actual response structure
18+
const res = await SearchArtistByName(search, limit, offset);
19+
if (res?.length === 0) {
20+
setIsResultNull(true);
21+
} else {
22+
setIsResultNull(false);
23+
setSearchResult((prevResults) => [...prevResults, ...res]);
24+
}
2125
} catch (error) {
2226
console.log(error);
23-
setSearchResult([]); // Clear results if there's an error
27+
setIsResultNull(true);
2428
} finally {
2529
setIsLoading(false);
2630
}
2731
};
2832

33+
const handleSearch = async (e) => {
34+
e.preventDefault(); // Prevent page reload
35+
setSearchResult([]); // Clear previous results
36+
setSearchOffset(0); // Reset offset for the first search
37+
setSearchLimit(5); // Reset limit for the first search
38+
await getSubmitData(5, 0); // Fetch first set of results
39+
};
40+
41+
const loadMore = async () => {
42+
if (searchOffset === 0) {
43+
// Second search: Limit 10, Offset 6
44+
setSearchLimit(10);
45+
setSearchOffset(6);
46+
await getSubmitData(10, 6);
47+
48+
// Scroll to the element with index 6
49+
setTimeout(() => {
50+
elementRef.current?.scrollIntoView({
51+
behavior: "smooth",
52+
block: "center",
53+
});
54+
}, 100);
55+
}
56+
};
57+
2958
return (
3059
<div className="w-full md:w-4/5 flex flex-col items-center">
60+
{/* Search Bar */}
3161
<div className="w-[95vw] md:w-full h-10 flex items-center bg-gray-300 rounded-2xl pl-3 md:m-5">
3262
<span className="w-auto text-xs md:text-sm text-gray-500 text-nowrap">Search for an artist:</span>
33-
<form onSubmit={getSubmitData} className="w-full h-full flex items-center pl-2 rounded-2xl">
63+
<form onSubmit={handleSearch} className="w-full h-full flex items-center pl-2 rounded-2xl">
3464
<input
3565
type="text"
3666
name="search"
@@ -44,24 +74,42 @@ const ReviewFindArtistComponent = () => {
4474
</form>
4575
</div>
4676

47-
<hr className="mt-5"/>
48-
4977
{/* Display loader or results */}
5078
{isLoading ? (
5179
<LoaderComponent />
5280
) : searchResult.length > 0 ? (
53-
<div className="w-full flex flex-wrap justify-start md:gap-1 pl-2 md:pl-0">
54-
{searchResult
55-
.filter((item) => item.images.length > 0) // Filter items with non-empty images
56-
.map((item) => (
57-
<div key={item.id} className="w-1/2 md:w-1/6">
58-
<ReviewCardFindArtistComponent item={item} />
81+
<div className="flex flex-col w-full">
82+
<div className="text-gray-500 pl-2 md:pl-0 pt-4 md:pt-0 pb-4">
83+
Results of your search:
84+
</div>
85+
<div className="w-full flex flex-wrap justify-start md:gap-1 pl-2 md:pl-0">
86+
{searchResult
87+
.filter((item) => item.images.length > 0)
88+
.map((item, index) => (
89+
<div
90+
key={item.id}
91+
className="w-1/2 md:w-1/6"
92+
ref={index === 5 ? elementRef : null} // Add ref to the 6th element
93+
>
94+
<ReviewCardFindArtistComponent item={item} />
95+
</div>
96+
))}
97+
</div>
98+
{searchResult.length < 15 && (
99+
<div className="w-full flex items-center justify-center mt-4 mb-0 md:mb-6">
100+
<div className="w-full flex items-center gap-4 px-2">
101+
<div className="flex-1 border-t border-gray-400"></div>
102+
<button onClick={loadMore} className="px-4 py-2 bg-gray-400 text-white rounded">
103+
Load More
104+
</button>
105+
<div className="flex-1 border-t border-gray-400"></div>
106+
</div>
59107
</div>
60-
))}
61-
</div>
62-
) : isResultNull ? (
108+
)}
109+
</div>
110+
) : isResultNull ? (
63111
<p className="text-center mt-4 text-gray-500">No results found.</p>
64-
) : null }
112+
) : null}
65113
</div>
66114
);
67115
};

‎src/routes/_baseLayout/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const _BaseLayout = () => {
2727

2828
{/* Footer */}
2929
<div
30-
className="flex flex-col justify-center items-center min-h-20vh w-full bg-gray-800 order-3 md:order-3 pb-16 md:pb-0">
30+
className="flex flex-col justify-center items-center min-h-[24vh] md:min-h-[18vh] w-full bg-gray-800 order-3 md:order-3 pb-16 md:pb-0">
3131
<Footer/>
3232
</div>
3333

0 commit comments

Comments
 (0)