Add: show reviews created by user

web/src/App.js

@@ -16,6 +16,7 @@ import EditReview from "./component/EditReview";
 import AudioPlayer from "./component/AudioPlayer";
 import UserStatus from "./component/UserStatus";
 import ReviewPage from "./component/ReviewPage";
+import UserProfile from "./component/UserProfile";
 import { useState } from "react";
 
 function App() {
@@ -88,6 +89,10 @@ function App() {
               path="/manage/reviews/:id"
               element={<EditReview user={user} />}
             />
+            <Route
+              path="/manage/users/:id"
+              element={<UserProfile user={user} setUser={setUser} />}
+            />
             <Route
               path="/files/:id"
               element={<FileInfo setPlayingFile={setPlayingFile} />}

web/src/component/ReviewEntry.js

@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router";
+import { convertIntToDateTime } from "./Common";
+
+function ReviewEntry(props) {
+  let navigate = useNavigate();
+  return (
+    <div>
+      <h4>
+        <Link to={`/manage/users/${props.review.user.id}`}>
+          @{props.review.user.username}
+        </Link>{" "}
+        wrote on {convertIntToDateTime(props.review.created_at)}{" "}
+      </h4>
+      <p>{props.review.content}</p>
+      {(props.user.role === 1 || props.review.user.id === props.user.id) &&
+        props.user.role != 0 && (
+          <button
+            onClick={() => {
+              navigate(`/manage/reviews/${props.review.id}`);
+            }}
+          >
+            Edit
+          </button>
+        )}
+    </div>
+  );
+}
+
+export default ReviewEntry;

web/src/component/ReviewPage.js

@@ -1,11 +1,9 @@
 import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { Link } from "react-router-dom";
-import { convertIntToDateTime } from "./Common";
+import { useParams } from "react-router";
+import ReviewEntry from "./ReviewEntry";
 
 function ReviewPage(props) {
   let params = useParams();
-  let navigate = useNavigate();
   const [newReview, setNewReview] = useState("");
   const [reviews, setReviews] = useState([]);
 
@@ -60,25 +58,7 @@ function ReviewPage(props) {
       <h3>Review Page</h3>
       <div>
         {reviews.map((review) => (
-          <div key={review.id}>
-            <h4>
-              <Link to={`/manage/users/${review.user.id}`}>
-                @{review.user.username}
-              </Link>{" "}
-              wrote on {convertIntToDateTime(review.created_at)}{" "}
-            </h4>
-            <p>{review.content}</p>
-            {(props.user.role === 1 || review.user.id === props.user.id) &&
-              props.user.role != 0 && (
-                <button
-                  onClick={() => {
-                    navigate(`/manage/reviews/${review.id}`);
-                  }}
-                >
-                  Edit
-                </button>
-              )}
-          </div>
+          <ReviewEntry key={review.id} review={review} user={props.user} />
         ))}
       </div>
       <div>

web/src/component/UserProfile.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import ReviewEntry from "./ReviewEntry";
+
+function UserProfile(props) {
+  let params = useParams();
+  const [reviews, setReviews] = useState([]);
+
+  function getReviews() {
+    fetch("/api/v1/get_reviews_by_user", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setReviews(data);
+        }
+      });
+  }
+
+  useEffect(() => {
+    getReviews();
+  }, []);
+
+  return (
+    <div className="page">
+      <h3>User Profile</h3>
+      <div>
+        <h4>Reviews</h4>
+        {reviews.map((review) => (
+          <ReviewEntry
+            key={review.id}
+            review={review}
+            user={props.user}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default UserProfile;