Frontend finished

.env

@@ -1,2 +1,3 @@
 VITE_CURRENT_SEASON = 2024
-VITE_BACKEND_URL = http://localhost:8089/api
+VITE_BACKEND_URL = http://localhost:8089/api
+VITE_BACKEND_WS = ws://localhost:8089/

src/Types.ts

@@ -124,12 +124,9 @@ export interface Driver {
 }
 
 export interface ISingleComment {
-  commentId: string;
-  userId: string;
+  id: number;
+  raceId: string;
   comment: string;
-  author: string;
-  likes: number;
-  currentlyLikes: boolean;
 }
 
 export interface QualiRes {

src/components/AddComment.tsx

@@ -4,26 +4,14 @@ import { Add16Regular } from "@fluentui/react-icons";
 import styles from "./AddComment.module.scss";
 
 interface IProps {
-  userId: string;
-  raceId: string;
+  addComment: (comment: string) => void;
 }
 
 const MAX_LENGTH = 250;
 
-function AddComment({ userId, raceId }: IProps) {
-  //TODO: useMutation for adding comments
+function AddComment({ addComment }: IProps) {
   const [comment, setComment] = useState<string>("");
 
-  const addComment = async () => {
-    console.log({
-      userId,
-      raceId,
-      comment,
-    });
-
-    setComment("");
-  };
-
   const setCommentValue = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setComment(e.target.value);
   };
@@ -44,7 +32,10 @@ function AddComment({ userId, raceId }: IProps) {
         <Button
           appearance="primary"
           icon={<Add16Regular />}
-          onClick={addComment}
+          onClick={() => {
+            addComment(comment);
+            setComment("");
+          }}
           disabled={comment.length > 250}
         >
           Add

src/components/CommentList.tsx

@@ -1,103 +1,17 @@
-import { useEffect, useState } from "react";
 import SingleComment from "./SingleComment";
 import type { ISingleComment } from "../Types";
 import styles from "./CommentList.module.scss";
-import { Label, Switch } from "@fluentui/react-components";
-import Enumerable from "linq";
 
-const propsArray: ISingleComment[] = [
-  {
-    commentId: "comment1",
-    userId: "user123",
-    comment: "Great post!",
-    author: "Alice",
-    likes: 10,
-    currentlyLikes: true,
-  },
-  {
-    commentId: "comment2",
-    userId: "user456",
-    comment: "Interesting insights.",
-    author: "Bob",
-    likes: 5,
-    currentlyLikes: false,
-  },
-  {
-    commentId: "comment3",
-    userId: "user123",
-    comment: "Great post!",
-    author: "Alice",
-    likes: 10,
-    currentlyLikes: true,
-  },
-  {
-    commentId: "comment4",
-    userId: "user456",
-    comment: "Interesting insights.",
-    author: "Bob",
-    likes: 5,
-    currentlyLikes: false,
-  },
-  {
-    commentId: "comment5",
-    userId: "user123",
-    comment: "Great post!",
-    author: "Alice",
-    likes: 10,
-    currentlyLikes: true,
-  },
-  {
-    commentId: "comment26",
-    userId: "user456",
-    comment: "Interesting insights.",
-    author: "Bob",
-    likes: 5,
-    currentlyLikes: false,
-  },
-  {
-    commentId: "comment1123",
-    userId: "user123",
-    comment: "Great post!",
-    author: "Alice",
-    likes: 10,
-    currentlyLikes: true,
-  },
-  {
-    commentId: "comment1232",
-    userId: "user456",
-    comment: "Interesting insights.",
-    author: "Bob",
-    likes: 5,
-    currentlyLikes: false,
-  },
-];
-
-function CommentList() {
-  //TODO: get comments (useQuery)
-  const [comments, setComments] = useState<ISingleComment[]>(propsArray);
-  const [orderByDescending, setOrderByDescending] = useState<boolean>(false);
-
-  useEffect(() => {
-    const orderedComments = Enumerable.from(comments)
-      .orderBy((c) => c.likes * (orderByDescending ? -1 : 1))
-      .toArray();
-    setComments(orderedComments);
-  }, [orderByDescending]);
+interface IProps {
+  wsComments: ISingleComment[];
+}
 
+function CommentList({ wsComments }: IProps) {
   return (
     <div>
-      <div>
-        <Label>Order descending by likes</Label>
-        <Switch
-          checked={orderByDescending}
-          onChange={() => {
-            setOrderByDescending(!orderByDescending);
-          }}
-        />
-      </div>
       <div className={styles.commentList}>
-        {comments.map((c) => (
-          <SingleComment key={c.commentId} changeLikes={() => {}} {...c} />
+        {wsComments.map((c) => (
+          <SingleComment key={c.id} changeLikes={() => {}} {...c} />
         ))}
       </div>
     </div>

src/components/CommentPanel.tsx

@@ -1,15 +1,21 @@
+import { memo } from "react";
 import AddComment from "./AddComment";
 import CommentList from "./CommentList";
+import { ISingleComment } from "../Types";
 
 interface IProps {
-  raceId: string;
+  addComment: (comment: string) => void;
+  comments: ISingleComment[];
 }
 
-export function CommentPanel({ raceId }: IProps) {
+export const CommentPanel = memo(function CommentPanel({
+  addComment,
+  comments,
+}: IProps) {
   return (
     <div>
-      <AddComment raceId={raceId} userId="" />
-      <CommentList />
+      <AddComment addComment={addComment} />
+      <CommentList wsComments={comments} />
     </div>
   );
-}
+});

src/components/RaceRating.tsx

@@ -3,9 +3,11 @@ import type { RaceRating as RaceRatingProps } from "../validation";
 import Enumerable from "linq";
 import RaceStar from "./RaceStar";
 
-type Props = RaceRatingProps;
+type Props = RaceRatingProps & {
+  setRaceRating: (rating: number) => void;
+};
 
-function RaceRating({ rating }: Props) {
+function RaceRating({ rating, setRaceRating }: Props) {
   const [goldStars, setGoldStars] = useState<number>(rating);
 
   const starsToRenderInGold = useMemo(
@@ -20,7 +22,7 @@ function RaceRating({ rating }: Props) {
 
   const setRating = (rating: number) => {
     setGoldStars(rating);
-    //perform call to db -> save rating
+    setRaceRating(rating);
   };
 
   return (

src/components/SingleComment.tsx

@@ -1,54 +1,23 @@
 import {
   Avatar,
-  CounterBadge,
   Textarea,
-  Button,
   Label,
 } from "@fluentui/react-components";
 
-import { Add24Filled, Delete24Filled } from "@fluentui/react-icons";
 import styles from "./SingleComment.module.scss";
 import { ISingleComment } from "../Types";
 
 interface IProps extends ISingleComment {
-  changeLikes: (commentId: string) => void;
+  changeLikes: (commentId: number) => void;
 }
 
-function SingleComment({
-  commentId,
-  comment,
-  author,
-  likes,
-  changeLikes,
-  currentlyLikes,
-}: IProps) {
-  const changeCommentLikes = () => {
-    changeLikes(commentId);
-  };
-
+function SingleComment({ comment }: IProps) {
   return (
-    <div className={styles.singleComment}>
+    <div className={styles.singleComment} style={{ padding: "1rem" }}>
       <div>
-        <Avatar name={author} /> <Label>{author}</Label>
+        <Avatar name={""} /> <Label>{""}</Label>
       </div>
       <Textarea value={comment} disabled={true} />
-      <div className={styles.actionArea}>
-        <Button
-          appearance="transparent"
-          shape="rounded"
-          icon={<Add24Filled />}
-          onClick={changeCommentLikes}
-          disabled={currentlyLikes}
-        ></Button>
-        <Button
-          appearance="transparent"
-          shape="rounded"
-          icon={<Delete24Filled />}
-          onClick={changeCommentLikes}
-          disabled={!currentlyLikes}
-        ></Button>
-        <CounterBadge appearance="filled" count={likes} />
-      </div>
     </div>
   );
 }

src/pages/Post.tsx

@@ -1,8 +1,6 @@
 import {
-  Label,
   Title3,
   Image,
-  Spinner,
   useToastController,
   Toast,
   ToastBody,