Add: update foldername

web/src/component/FilesInFolder.js

@@ -7,9 +7,10 @@ function FilesInFolder(props) {
   const [files, setFiles] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [offset, setOffset] = useState(0);
+  const [newFoldername, setNewFoldername] = useState("");
   const limit = 10;
 
-  useEffect(() => {
+  function refresh() {
     setIsLoading(true);
     fetch("/api/v1/get_files_in_folder", {
       method: "POST",
@@ -22,12 +23,21 @@ function FilesInFolder(props) {
     })
       .then((response) => response.json())
       .then((data) => {
-        setFiles(data.files ? data.files : []);
+        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() {
@@ -42,6 +52,30 @@ function FilesInFolder(props) {
     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>
@@ -53,6 +87,14 @@ function FilesInFolder(props) {
         <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>
   );
 }