112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import { useContext, useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useQuery } from "./Common";
|
|
import FilesTable from "./FilesTable";
|
|
import { Tr, tr, langCodeContext } from "../translate";
|
|
|
|
function GetRandomFiles(props) {
|
|
const [files, setFiles] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [tags, setTags] = useState([]);
|
|
const navigator = useNavigate();
|
|
const query = useQuery();
|
|
const selectedTag = query.get("t") || "";
|
|
const { langCode } = useContext(langCodeContext);
|
|
|
|
function getRandomFiles() {
|
|
setIsLoading(true);
|
|
fetch("/api/v1/get_random_files")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setFiles(data.files);
|
|
})
|
|
.catch((error) => {
|
|
alert("get_random_files error: " + error);
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
|
|
function getRandomFilesWithTag() {
|
|
setIsLoading(true);
|
|
fetch("/api/v1/get_random_files_with_tag", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
id: parseInt(selectedTag),
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
setFiles(data.files);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
alert("get_random_files_with_tag error: " + error);
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
|
|
function refresh() {
|
|
if (selectedTag === "") {
|
|
getRandomFiles();
|
|
} else {
|
|
getRandomFilesWithTag();
|
|
}
|
|
}
|
|
|
|
function getTags() {
|
|
fetch("/api/v1/get_tags")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setTags(data.tags);
|
|
})
|
|
.catch((error) => {
|
|
alert("get_tags error: " + error);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
getTags();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
}, [selectedTag]);
|
|
|
|
return (
|
|
<div className="page">
|
|
<div className="search_toolbar">
|
|
<button className="refresh" onClick={() => refresh(setFiles)}>
|
|
{isLoading ? Tr("Loading...") : Tr("Refresh")}
|
|
</button>
|
|
<select
|
|
className="tag_select"
|
|
onChange={(event) => {
|
|
navigator(`/?t=${event.target.value}`);
|
|
}}
|
|
value={selectedTag}
|
|
>
|
|
<option value="">{tr("All", langCode)}</option>
|
|
{tags.map((tag) => (
|
|
<option key={tag.id} value={tag.id}>
|
|
{tag.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<FilesTable setPlayingFile={props.setPlayingFile} files={files} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GetRandomFiles;
|