melhorias na página de pesquisa

src/app/[locale]/(enabledErrors)/page.tsx

@@ -1,61 +1,32 @@
 "use client";
 import { useState } from "react";
-import Button from "@/components/template/Button";
 import SongCard from "@/components/home/SongCard";
-import SearchInput from "@/components/home/SearchInput";
-import useErrorMessage from "@/hooks/useErrorMessage";
 import { useTranslations } from "next-intl";
-import { searchSong } from "@/actions/Api";
+import SearchForm from "@/components/home/SearchForm";
 
 export default function InitialPage(props: { params: { locale: string } }) {
-	const [title, setTitle] = useState("heroes");
-	const [artist, setArtist] = useState("david");
 	const [difficultySlider, setDifficultySlider] = useState(10);
 	const [foundSongs, setFoundSongs] = useState([]);
-	const { addError } = useErrorMessage();
 	const locale = props.params.locale;
 	const t = useTranslations();
 
-	const search = async () => {
-		try {
-			const results = await searchSong(title, artist);
-			setFoundSongs(results);
-		} catch (e) {
-			if (e.toString().includes("title")) {
-				addError(new Error(t("errors.songTitleNotInformed")));
-			} else if (e.toString().includes("artist")) {
-				addError(new Error(t("errors.songAuthorNotInformed")));
-			} else {
-				addError(new Error(t("errors.unknownProblem")));
-			}
-			setFoundSongs([]);
-		}
-	};
-
 	return (
 		<div className="flex flex-col xl:flex-row justify-center p-5 md:p-10 xl:p-20">
-			<div className="text-md md:text-xl bg-gray-100 p-8 rounded-lg shadow-2xl shadow-gray-500 border-blue-500 border-2 w-full xl:w-1/3 mb-2 md:mb-4 self-start">
-				<h1 className="text-2xl md:text-4xl font-bold my-2 md:my-5 text-center">{t("homePage.searchTitle")}</h1>
-				<div className="flex flex-col flex-wrap my-4 ">
-					<SearchInput value={title} textLabel={`${t("homePage.songTitle")}:`} callback={setTitle} defaultText="Heroes" />
-					<SearchInput value={artist} textLabel={`${t("homePage.songAuthor")}:`} callback={setArtist} defaultText="David Bowie" />
-					<div className="flex flex-col md:flex-row align-center gap-3 my-3">
-						<label>{`${t("homePage.songDifficulty")}:`} </label>
-						<input
-							type="range"
-							name="difficulty"
-							min="10"
-							max="90"
-							value={difficultySlider}
-							step="5"
-							className="bg-red-300 text-yellow-400"
-							onChange={(e) => setDifficultySlider(parseInt(e.target.value))}
-						/>
-						<label className="font-semibold text-center">{difficultySlider}</label>
-					</div>
+			<SearchForm setSongs={setFoundSongs}>
+				<div className="flex flex-col md:flex-row align-center gap-3 my-3">
+					<label>{`${t("homePage.songDifficulty")}:`} </label>
+					<input
+						type="range"
+						name="difficulty"
+						min="10"
+						max="90"
+						value={difficultySlider}
+						step="5"
+						onChange={(e) => setDifficultySlider(parseInt(e.target.value))}
+					/>
+					<label className="font-semibold text-center">{difficultySlider}</label>
 				</div>
-				<Button text="Pesquisar" callback={search} color="bg-blue-500" className="w-full h-16 px-6" />
-			</div>
+			</SearchForm>
 			<ul className="flex  flex-wrap justify-center">
 				{foundSongs.map((song) => {
 					return <SongCard song={song} difficulty={difficultySlider} key={song.id} songURL={`/${locale}/song`} />;

src/components/home/SearchForm.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import Button from "../template/Button";
+import SearchInput from "./SearchInput";
+import { searchSong } from "@/actions/Api";
+import useErrorMessage from "@/hooks/useErrorMessage";
+import { useTranslations } from "next-intl";
+
+interface SearchFormProps {
+	setSongs: (p: any) => void;
+	children: any;
+}
+
+export default function ({ setSongs, children }: SearchFormProps) {
+	const [title, setTitle] = useState("");
+	const [artist, setArtist] = useState("");
+	const { addError } = useErrorMessage();
+	const t = useTranslations();
+
+	const search = async () => {
+		try {
+			const results = await searchSong(title, artist);
+			setSongs(results);
+		} catch (e) {
+			if (e.toString().includes("title")) {
+				addError(new Error(t("errors.songTitleNotInformed")));
+			} else if (e.toString().includes("artist")) {
+				addError(new Error(t("errors.songAuthorNotInformed")));
+			} else {
+				addError(new Error(t("errors.unknownProblem")));
+			}
+			setSongs([]);
+		}
+	};
+
+	return (
+		<div className="text-md md:text-xl bg-gray-100 p-8 rounded-lg shadow-2xl shadow-gray-500 border-blue-500 border-2 w-full xl:w-1/3 mb-2 md:mb-4 self-start">
+			<h1 className="text-2xl md:text-4xl font-bold my-2 md:my-5 text-center">{t("homePage.searchTitle")}</h1>
+			<div className="flex flex-col flex-wrap my-4 ">
+				<SearchInput value={title} textLabel={`${t("homePage.songTitle")}:`} callback={setTitle} defaultText="Heroes" />
+				<SearchInput value={artist} textLabel={`${t("homePage.songAuthor")}:`} callback={setArtist} defaultText="David Bowie" />
+				{children}
+			</div>
+			<Button text="Pesquisar" callback={search} className="bg-blue-500 w-full h-16 px-6" />
+		</div>
+	);
+}

src/components/home/SongCard.tsx

@@ -13,16 +13,16 @@ interface SongCardProps {
 }
 
 export default function SongCard({ song, difficulty, songURL }: SongCardProps) {
-	const { set } = useLocalStorage();
+	const { setToLS } = useLocalStorage();
 
 	const setSong = () => {
-		const songTitleAndAuthor = String(song?.title).split("by");
-		const title = songTitleAndAuthor[0]?.trim().toUpperCase();
-		const artist = songTitleAndAuthor[1]?.trim().toUpperCase();
+		const songTitleAndAuthor = String(song?.title)
+			.split("by")
+			.map((text) => text.trim().toUpperCase());
 
-		set({
-			title,
-			artist,
+		setToLS({
+			title: songTitleAndAuthor[0],
+			artist: songTitleAndAuthor[1],
 			difficulty,
 		});
 	};

src/components/template/Button.tsx

@@ -1,14 +1,13 @@
 interface ButtonProps {
 	text: string;
-	color: string;
 	className?: string;
 	callback: () => void;
 }
 
-export default function Button({ text, color, callback, className }: ButtonProps) {
+export default function Button({ text, callback, className }: ButtonProps) {
 	return (
 		<button
-			className={` md:px-8 leading-none text-gray-50 font-semibold text-lg md:text-2xl rounded-md shadow-md ${color} hover:bg-slate-800  ${className}`}
+			className={` md:px-8 leading-none text-gray-50 font-semibold text-lg md:text-2xl rounded-md shadow-md hover:bg-slate-800  ${className}`}
 			onClick={callback}>
 			{text}
 		</button>

src/hooks/useLocalStorage.tsx

@@ -1,13 +1,13 @@
 type ItemType = {
 	title: string;
-    artist: string;
+	artist: string;
 	difficulty: number;
 };
 
 export default function useLocalStorage() {
 	const key = "song_info";
 
-	const get = () => {
+	const getFromLS = () => {
 		if (typeof window !== "undefined") {
 			const item = window.localStorage.getItem(key);
 			if (item) {
@@ -17,17 +17,17 @@ export default function useLocalStorage() {
 		return null;
 	};
 
-	const set = (value: ItemType) => {
+	const setToLS = (value: ItemType) => {
 		if (typeof window !== "undefined") {
 			window.localStorage.setItem(key, JSON.stringify(value));
 		}
 	};
 
-	const remove = () => {
+	const removeFromLS = () => {
 		if (typeof window !== "undefined") {
 			window.localStorage.removeItem(key);
 		}
 	};
 
-	return { get, set, remove };
+	return { getFromLS, setToLS, removeFromLS };
 }