diff --git a/backend/modules/pages/search.py b/backend/modules/pages/search.py index e49790a..21dad6c 100644 --- a/backend/modules/pages/search.py +++ b/backend/modules/pages/search.py @@ -8,7 +8,7 @@ from modules.proxy import ENDPOINTS router = APIRouter() -@router.post("", summary="Search for a release") +@router.get("", summary="Search for a release") async def Search(request: Request, query: str, page: int = 0): data = json.dumps({"query": query, "searchBy": 0}) return await apiRequest(request, ENDPOINTS["search"], page, data=data) diff --git a/frontend/app/App.jsx b/frontend/app/App.jsx index b0f1a4d..939d8ff 100644 --- a/frontend/app/App.jsx +++ b/frontend/app/App.jsx @@ -3,10 +3,23 @@ import "beercss"; import "material-dynamic-colors"; import { NavigationRail } from "@/app/components/NavigationRail/NavigationRail"; -import { setTheme, getTheme, setMode, getMode } from "./store/theme-store"; import { useEffect, useState } from "react"; import { ColorPicker } from "@/app/components/ColorPicker/ColorPicker"; +export function setMode(mode) { + localStorage.setItem("mode", mode); +} +export function getMode() { + return localStorage.getItem("mode"); +} + +export function setTheme(theme) { + localStorage.setItem("theme", theme); +} +export function getTheme() { + return localStorage.getItem("theme"); +} + export const App = (props) => { const [colorPicker, setColorPicker] = useState(false); diff --git a/frontend/app/api/config.js b/frontend/app/api/config.js index f6c2b0b..c45cf25 100644 --- a/frontend/app/api/config.js +++ b/frontend/app/api/config.js @@ -7,4 +7,5 @@ export const endpoints = { announce: `${API_URL}/index/announce`, finished: `${API_URL}/index/finished`, }, + search: `${API_URL}/search` }; \ No newline at end of file diff --git a/frontend/app/search/page.js b/frontend/app/search/page.js new file mode 100644 index 0000000..7ddedf5 --- /dev/null +++ b/frontend/app/search/page.js @@ -0,0 +1,129 @@ +"use client"; + +import { getData } from "@/app/api/api-utils"; +import { endpoints } from "@/app/api/config"; +import { useEffect, useState, useCallback } from "react"; +import { useRouter } from "next/navigation"; +import { CardList } from "@/app/components/CardList/CardList"; +import { useSearchParams } from "next/navigation"; + +export function saveSearches(search) { + localStorage.setItem("searches", search); +} +export function getSearches() { + return localStorage.getItem("searches"); +} + +export default function Search() { + const router = useRouter(); + + const [releases, setReleases] = useState(); + const [page, setPage] = useState(0); + const [query, setQuery] = useState(""); + const [searches, setSearches] = useState(JSON.parse(getSearches())); + + const searchParams = useSearchParams(); + const createQueryString = useCallback( + (name, value) => { + const params = new URLSearchParams(searchParams.toString()); + params.set(name, value); + + return params.toString(); + }, + [searchParams] + ); + + async function fetchData(query, page = 0) { + const url = `${endpoints.search}?query=${query}&page=${page}`; + const data = await getData(url); + + // Handle initial load (page 0) or subsequent pagination + if (page === 0) { + setReleases(data.content); + } else { + setReleases([...releases, ...data.content]); + } + } + + useEffect(() => { + if (releases) { + fetchData(query, page); // Use fetchData for pagination + } + }, [page]); + + const handleInput = (e) => { + setQuery(e.target.value); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + router.push(pathname + "?" + createQueryString("query", query)); + setReleases(null); + setPage(0); + fetchData(query); + + // save searches and update search history + if (!searches) { + setSearches([query]); + saveSearches(JSON.stringify([query])); + } else { + console.log(searches); + if (!searches.find((element) => element == query)) { + setSearches([query, ...searches.slice(0, 5)]); + saveSearches(JSON.stringify([query, ...searches.slice(0, 5)])); + } + } + }; + + return ( + <> +