Added AddComment under Comment.tsx

bounswe · May 16, 2024 · f37cc49 · f37cc49
1 parent 2c46eaf
commit f37cc49
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 27 deletions.
diff --git a/frontend/src/components/CommentSection.tsx b/frontend/src/components/CommentSection.tsx
@@ -2,12 +2,10 @@ import { Comment } from "./Comment";
 import { FullscreenLoading } from "./FullscreenLoading";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { AlertCircle, ArrowLeft } from "lucide-react";
-import { useNavigate } from "react-router-dom";
 import { useGetCommentsForRecipe } from "../services/api/semanticBrowseComponents";
 import { renderError } from "../services/api/semanticBrowseFetcher";
 
 export const Comments = ({ recipeId }: { recipeId: number }) => {
-  const navigate = useNavigate();
   const {
     data: commentData,
     isLoading,
@@ -33,19 +31,10 @@ export const Comments = ({ recipeId }: { recipeId: number }) => {
   }
 
   return (
-    <div className="container flex flex-col gap-2 py-8">
-      <div className="flex items-center justify-between">
-        <ArrowLeft
-          className="h-6 w-6 cursor-pointer text-gray-700"
-          onClick={() => navigate("/")}
-        />
-        <h1 className="mx-auto text-2xl font-bold">Comments</h1>
-      </div>
       <div className="mt-4 grid grid-cols-1 gap-8">
         {commentData?.data
           ?.reverse()
           .map((comment) => <Comment key={comment.id} comment={comment} />)}
       </div>
-    </div>
   );
 };
diff --git a/frontend/src/routes/recipe.tsx b/frontend/src/routes/recipe.tsx
@@ -8,7 +8,6 @@ import Food from "@/assets/Icon/General/Food.svg?react";
 // import MeatDish from "@/assets/Icon/Food/MeatDish.svg?react";
 import { StarIcon } from "lucide-react";
 import {
-  useGetCommentsForRecipe,
   useGetRecipeById,
   useRateRecipe,
 } from "@/services/api/semanticBrowseComponents";
@@ -21,7 +20,8 @@ import useAuthStore from "@/services/auth";
 import FollowButton from "@/components/FollowButton";
 import BookmarkButton from "@/components/BookmarkButton";
 import { toast } from "@/components/ui/use-toast";
-import { Comment } from "@/components/Comment";
+import { AddComment} from "@/components/Comment";
+import { Comments } from "@/components/CommentSection";
 
 export default function RecipePage() {
   const { recipeId } = useParams();
@@ -36,16 +36,6 @@ export default function RecipePage() {
   );
   const { selfProfile, token } = useAuthStore();
 
-  const { data: comments, isLoading: commentsLoading } =
-    useGetCommentsForRecipe(
-      {
-        pathParams: { recipeId: recipeId ? Number(recipeId) : -1 },
-      },
-      {
-        enabled: !!recipeId,
-      },
-    );
-
   const [optimisticRating, setOptimisticRating] = useState<number | null>(null);
 
   const { mutateAsync } = useRateRecipe({
@@ -213,10 +203,8 @@ export default function RecipePage() {
         ))}
       </div>
       <h4 className="font-bold">Comments</h4>
-      {commentsLoading && <span>Loading comments...</span>}
-      {comments?.data?.map((comment) => (
-        <Comment key={comment.id} comment={comment} />
-      ))}
+      <AddComment user={selfProfile} />
+      <Comments recipeId={recipeId}/>
     </div>
   );
 }