Add: FilesInFolder page

web/src/App.js

@@ -9,6 +9,7 @@ import "./App.css";
 import GetRandomFiles from "./component/GetRandomFiles";
 import SearchFiles from "./component/SearchFiles";
 import SearchFolders from "./component/SearchFolders";
+import FilesInFolder from "./component/FilesInFolder";
 import Manage from "./component/Manage";
 import Share from "./component/Share";
 import AudioPlayer from "./component/AudioPlayer";
@@ -56,7 +57,7 @@ function App() {
             />
             <Route
               path="/search-folders/:id"
-              element={<SearchFolders setPlayingFile={setPlayingFile} />}
+              element={<FilesInFolder setPlayingFile={setPlayingFile} />}
             />
             <Route path="/manage" element={<Manage />} />
             <Route

web/src/component/FilesInFolder.js

@@ -0,0 +1,60 @@
+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 limit = 10;
+
+  useEffect(() => {
+    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) => {
+        setFiles(data.files ? data.files : []);
+      })
+      .catch((error) => alert(error))
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [params.id, offset]);
+
+  function nextPage() {
+    setOffset(offset + limit);
+  }
+
+  function lastPage() {
+    const offsetValue = offset - limit;
+    if (offsetValue < 0) {
+      return;
+    }
+    setOffset(offsetValue);
+  }
+
+  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>
+  );
+}
+
+export default FilesInFolder;

web/src/component/SearchFiles.js

@@ -9,25 +9,14 @@ function SearchFiles(props) {
   const limit = 10;
 
   function searchFiles() {
-    if (
-      filename === "" &&
-      (props.folder === undefined || props.folder.id === undefined)
-    ) {
-      return;
-    }
-    const folder = props.folder ? props.folder : {};
-    const url = folder.id
-      ? "/api/v1/get_files_in_folder"
-      : "/api/v1/search_files";
     setIsLoading(true);
-    fetch(url, {
+    fetch("/api/v1/search_files", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         filename: filename,
         limit: limit,
         offset: offset,
-        folder_id: folder.id,
       }),
     })
       .then((response) => response.json())
@@ -36,7 +25,7 @@ function SearchFiles(props) {
         setFiles(files);
       })
       .catch((error) => {
-        alert("get_files_in_folder error: " + error);
+        alert("search_files error: " + error);
       })
       .finally(() => {
         setIsLoading(false);
@@ -55,35 +44,29 @@ function SearchFiles(props) {
     setOffset(offsetValue);
   }
 
-  useEffect(() => searchFiles(), [offset, props.folder]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => searchFiles(), [offset]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="page">
       <h3>Search Files</h3>
       <div className="search_toolbar">
-        {!props.folder && (
-          <input
-            onChange={(event) => setFilename(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                searchFiles();
-              }
-            }}
-            type="text"
-            placeholder="Enter filename"
-          />
-        )}
+        <input
+          onChange={(event) => setFilename(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              searchFiles();
+            }
+          }}
+          type="text"
+          placeholder="Enter filename"
+        />
         <button
-          disabled={!!props.folder}
           onClick={() => {
             searchFiles();
           }}
         >
           {isLoading ? "Loading..." : "Search"}
         </button>
-        {props.folder && props.folder.foldername && (
-          <button onClick={searchFiles}>{props.folder.foldername}</button>
-        )}
         <button onClick={lastPage}>Last page</button>
         <button disabled>
           {offset} - {offset + files.length}

web/src/component/SearchFolders.js

@@ -1,12 +1,9 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
 import FoldersTable from "./FoldersTable";
-import SearchFiles from "./SearchFiles";
 
-function SearchFolders(props) {
+function SearchFolders() {
   const [foldername, setFoldername] = useState("");
   const [folders, setFolders] = useState([]);
-  const [folder, setFolder] = useState({});
   const [offset, setOffset] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
   const limit = 10;
@@ -27,13 +24,7 @@ function SearchFolders(props) {
     })
       .then((response) => response.json())
       .then((data) => {
-        let folders;
-        if (data.folders) {
-          folders = data.folders;
-        } else {
-          folders = [];
-        }
-        setFolders(folders);
+        setFolders(data.folders ? data.folders : []);
       })
       .catch((error) => {
         alert("search_folders error: " + error);
@@ -55,17 +46,7 @@ function SearchFolders(props) {
     setOffset(offsetValue);
   }
 
-  function viewFolder(folder) {
-    setFolder(folder);
-  }
-
-  let params = useParams();
   useEffect(() => searchFolder(), [offset]); // eslint-disable-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    if (params.id !== undefined) {
-      setFolder({ id: parseInt(params.id) });
-    }
-  }, [params.id]);
 
   return (
     <div className="page">
@@ -90,8 +71,7 @@ function SearchFolders(props) {
         </button>
         <button onClick={nextPage}>Next page</button>
       </div>
-      <FoldersTable viewFolder={viewFolder} folders={folders} />
-      <SearchFiles setPlayingFile={props.setPlayingFile} folder={folder} />
+      <FoldersTable folders={folders} />
     </div>
   );
 }