Add: insert review

web/src/App.js

@@ -14,6 +14,7 @@ import Tags from "./component/Tags";
 import EditTag from "./component/EditTag";
 import AudioPlayer from "./component/AudioPlayer";
 import UserStatus from "./component/UserStatus";
+import ReviewPage from "./component/ReviewPage";
 import { useState } from "react";
 
 function App() {
@@ -90,6 +91,10 @@ function App() {
               path="/files/:id/share"
               element={<Share setPlayingFile={setPlayingFile} />}
             />
+            <Route
+              path="/files/:id/review"
+              element={<ReviewPage setPlayingFile={setPlayingFile} />}
+            />
           </Routes>
         </main>
         <footer>

web/src/component/FileInfo.js

@@ -106,6 +106,13 @@ function FileInfo(props) {
         >
           Play
         </button>
+        <button
+          onClick={() => {
+            navigate(`/files/${params.id}/review`);
+          }}
+        >
+          Review
+        </button>
         <button
           onClick={() => {
             navigate(`/files/${params.id}/share`);

web/src/component/ReviewPage.js

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useParams } from "react-router";
+
+function ReviewPage() {
+  let params = useParams();
+  const [newReview, setNewReview] = useState("");
+
+  function submitReview() {
+    fetch("/api/v1/insert_review", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        content: newReview,
+        file_id: parseInt(params.id),
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setNewReview("");
+        }
+      });
+  }
+
+  return (
+    <div className="page">
+      <h3>Review Page</h3>
+      <div>
+        <textarea
+          value={newReview}
+          onChange={(e) => setNewReview(e.target.value)}
+        />
+        <button onClick={() => submitReview()}>Submit</button>
+      </div>
+    </div>
+  );
+}
+
+export default ReviewPage;