103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
import { useParams } from "react-router";
|
|
import { useState, useEffect } from "react";
|
|
import FilesTable from "./FilesTable";
|
|
|
|
function FilesInFolder(props) {
|
|
let params = useParams();
|
|
const [files, setFiles] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [offset, setOffset] = useState(0);
|
|
const [newFoldername, setNewFoldername] = useState("");
|
|
const limit = 10;
|
|
|
|
function refresh() {
|
|
setIsLoading(true);
|
|
fetch("/api/v1/get_files_in_folder", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
folder_id: parseInt(params.id),
|
|
offset: offset,
|
|
limit: limit,
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
setFiles(data.files);
|
|
setNewFoldername(data.files[0].foldername);
|
|
}
|
|
})
|
|
.catch((error) => alert(error))
|
|
.finally(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
refresh();
|
|
}, [params.id, offset]);
|
|
|
|
function nextPage() {
|
|
setOffset(offset + limit);
|
|
}
|
|
|
|
function lastPage() {
|
|
const offsetValue = offset - limit;
|
|
if (offsetValue < 0) {
|
|
return;
|
|
}
|
|
setOffset(offsetValue);
|
|
}
|
|
|
|
function updateFoldername() {
|
|
setIsLoading(true);
|
|
fetch("/api/v1/update_foldername", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
id: parseInt(params.id),
|
|
foldername: newFoldername,
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
refresh();
|
|
}
|
|
})
|
|
.catch((error) => alert(error))
|
|
.finally(() => {
|
|
setIsLoading(false);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="page">
|
|
<h3>Files in Folder</h3>
|
|
<div className="search_toolbar">
|
|
<button onClick={lastPage}>Last page</button>
|
|
<button disabled>
|
|
{isLoading ? "Loading..." : `${offset} - ${offset + files.length}`}
|
|
</button>
|
|
<button onClick={nextPage}>Next page</button>
|
|
</div>
|
|
<FilesTable setPlayingFile={props.setPlayingFile} files={files} />
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={newFoldername}
|
|
onChange={(e) => setNewFoldername(e.target.value)}
|
|
/>
|
|
<button onClick={() => updateFoldername()}>Save</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FilesInFolder;
|