From 09075e0bf20ddd89f121e4d359495cf3f504c3f2 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Sun, 12 Nov 2023 16:25:24 +0300
Subject: [PATCH 01/10] Adds review component in alignment with  #644

---
 .../GameDetails/Review/Review.module.scss     | 98 +++++++++++++++++++
 .../Components/GameDetails/Review/Review.tsx  | 64 ++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 app/frontend/src/Components/GameDetails/Review/Review.module.scss
 create mode 100644 app/frontend/src/Components/GameDetails/Review/Review.tsx

diff --git a/app/frontend/src/Components/GameDetails/Review/Review.module.scss b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
new file mode 100644
index 00000000..654100a4
--- /dev/null
+++ b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
@@ -0,0 +1,98 @@
+@import "../../../colors";
+
+
+.review-input-container {
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    color: white !important;
+    background-color: $blue-green;
+    border-radius: 0.5em;
+    margin: 5px 5px 5px 5px;
+    overflow: hidden;
+    padding: 10px 10px 0 10px;
+    gap: 10px;
+
+    .content-input {
+        background-color: $prussian-blue-dark-10 !important;
+        flex: 4;
+        width: 100%;
+        border-radius: 0.5em;
+        padding: 5px;
+        font-size: 13px;
+    }
+}
+
+.reviews-subpage-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+.review-container {
+    display: flex;
+    width: min-content;
+    background-color: $prussian-blue-dark-40;
+    border-radius: 0.5em;
+    margin: 5px 5px 5px 5px;
+    overflow: hidden;
+    
+    .vote {
+        display: flex;
+        flex-direction: column;
+        background-color: $celadon-light-10;
+        padding: 10px;
+        align-items: center;
+        gap: 5px;
+        color: $color-text;
+        width: 60px;
+        justify-content: center;
+    }
+
+    .review {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 10px; 
+        color: $color-text-light;
+        gap: 5px;
+        justify-content: space-between;
+
+        .header {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            gap: 100px;
+            .user {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .buttons {
+                display: flex;
+                justify-self: flex-end;;
+            }
+        }
+        .date {
+            font-size: 10px;
+            align-self: flex-start;
+        }
+        .stars {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2px;
+            color: $yellow;
+            align-self: flex-end;
+        }
+
+        .content {
+            background-color: $prussian-blue-dark-10 !important;
+            flex: 4;
+            width: 100%;
+            border-radius: 0.5em;
+            padding: 5px;
+            font-size: 13px;
+        }
+    }
+    
+}
\ No newline at end of file
diff --git a/app/frontend/src/Components/GameDetails/Review/Review.tsx b/app/frontend/src/Components/GameDetails/Review/Review.tsx
new file mode 100644
index 00000000..0c9cc10d
--- /dev/null
+++ b/app/frontend/src/Components/GameDetails/Review/Review.tsx
@@ -0,0 +1,64 @@
+import { Button } from "antd";
+import styles from "./Review.module.scss";
+import {
+  DeleteOutlined,
+  DownOutlined,
+  EditOutlined,
+  StarFilled,
+  UpOutlined,
+} from "@ant-design/icons";
+import TextArea from "antd/es/input/TextArea";
+import { useState } from "react";
+import { formatDate } from "../../../Library/utils/formatDate";
+
+function Review({ review }: { review: any }) {
+  const [inputMode, setInputMode] = useState(false);
+
+  return (
+    <div className={styles.reviewContainer} id={review.id}>
+      <div className={styles.vote}>
+        <Button type="primary" shape="circle" icon={<UpOutlined />} />
+        <span>{review.overallVote}</span>
+        <Button type="primary" shape="circle" icon={<DownOutlined />} />
+      </div>
+      <div className={styles.review}>
+        <div className={styles.header}>
+          <div className={styles.user}>
+            <b>{review.reviewedBy}</b>
+          </div>
+          <div className={styles.buttons}>
+            <Button
+              type="text"
+              ghost={true}
+              shape="circle"
+              size="small"
+              icon={<EditOutlined style={{ color: "#aacdbe" }} />}
+              onClick={() => setInputMode(true)}
+            />
+            <Button
+              type="text"
+              ghost={true}
+              shape="circle"
+              size="small"
+              icon={<DeleteOutlined style={{ color: "#aacdbe" }} />}
+            />
+          </div>
+        </div>
+        <div className={styles.date}>{formatDate(review.createdAt)}</div>
+        <div className={styles.stars}>
+          {[1, 2, 3, 4, 5].map((starValue) =>
+            starValue <= review.rating ? <StarFilled /> : ""
+          )}
+          {Math.round(review.rating) !== review.rating ? <span>½</span> : ""}
+        </div>
+        {inputMode ? (
+          <TextArea />
+        ) : (
+          <div className={styles.content}>{review.reviewDescription}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Review;

From 2cd9192950ac65194a0fce0427a77e43ed78cb69 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Sun, 12 Nov 2023 22:35:50 +0300
Subject: [PATCH 02/10] Implements review posting in alignment with #632

---
 .../GameDetails/Review/ReviewInput.tsx        | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx

diff --git a/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx b/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx
new file mode 100644
index 00000000..b2387ce3
--- /dev/null
+++ b/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Button, Input, Rate } from "antd";
+import styles from "./Review.module.scss";
+import { CheckOutlined } from "@ant-design/icons";
+import { useMutation, useQueryClient } from "react-query";
+import { postReview } from "../../../Services/review";
+const { TextArea } = Input;
+
+function ReviewInput({ gameId }: { gameId: string }) {
+  const [content, setContent] = useState("");
+  const [rating, setRating] = useState(0);
+
+  const queryClient = useQueryClient();
+
+  const { mutate: addReview, isLoading } = useMutation(
+    (review: any) => postReview(review),
+    {
+      onSuccess() {
+        queryClient.invalidateQueries(["reviews", gameId, ""]);
+      },
+      onMutate(review: any) {
+        queryClient.setQueryData(["reviews", gameId, ""], (prev: any) => [
+          review,
+          ...prev,
+        ]);
+      },
+    }
+  );
+
+  const handleClick = () => {
+    const review = {
+      reviewDescription: content,
+      rating: rating,
+      gameId: gameId,
+    };
+    addReview(review);
+  };
+
+  return (
+    <div className={styles.reviewInputContainer}>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Rate
+          style={{ alignSelf: "flex-end" }}
+          allowHalf
+          defaultValue={0}
+          onChange={setRating}
+          value={rating}
+        />
+        <Button icon={<CheckOutlined />} onClick={() => handleClick()}></Button>
+      </div>
+
+      <TextArea
+        style={{ backgroundColor: "#022b40", color: "#faf7cf" }}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        autoSize={{ minRows: 3, maxRows: 5 }}
+      />
+    </div>
+  );
+}
+
+export default ReviewInput;

From 42fe9b6d608a110ad71d011ce7268488c9989d08 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Sun, 12 Nov 2023 22:36:53 +0300
Subject: [PATCH 03/10] Removes default theme color for background container

---
 app/frontend/src/Components/Providers/AntdConfigProvider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/frontend/src/Components/Providers/AntdConfigProvider.tsx b/app/frontend/src/Components/Providers/AntdConfigProvider.tsx
index 382b0e5e..74c9195b 100644
--- a/app/frontend/src/Components/Providers/AntdConfigProvider.tsx
+++ b/app/frontend/src/Components/Providers/AntdConfigProvider.tsx
@@ -13,7 +13,6 @@ function AntdConfigProvider({ children }: { children: ReactNode }) {
       colorBgBase: getThemeColor("color-background"),
       colorTextBase: getThemeColor("color-text"),
       colorPrimary: getThemeColor("color-primary"),
-      colorBgContainer: getThemeColor("color-container"),
     },
   };
   return <ConfigProvider theme={theme}>{children}</ConfigProvider>;

From e9d05e7d7c953b7e0a1875bbd587c17710c03e51 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Sun, 12 Nov 2023 22:37:58 +0300
Subject: [PATCH 04/10] Integrates backend services to components

---
 .../GameDetails/Review/Review.module.scss     |  11 +-
 .../Components/GameDetails/Review/Review.tsx  | 127 +++++++++++++++---
 app/frontend/src/Library/utils/formatDate.ts  |   8 ++
 app/frontend/src/Services/review.ts           |  53 ++++++++
 4 files changed, 174 insertions(+), 25 deletions(-)
 create mode 100644 app/frontend/src/Library/utils/formatDate.ts
 create mode 100644 app/frontend/src/Services/review.ts

diff --git a/app/frontend/src/Components/GameDetails/Review/Review.module.scss b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
index 654100a4..0ae5de71 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.module.scss
+++ b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
@@ -10,8 +10,9 @@
     border-radius: 0.5em;
     margin: 5px 5px 5px 5px;
     overflow: hidden;
-    padding: 10px 10px 0 10px;
-    gap: 10px;
+    padding: 5px;
+    gap: 5px;
+    justify-content: center;
 
     .content-input {
         background-color: $prussian-blue-dark-10 !important;
@@ -21,6 +22,10 @@
         padding: 5px;
         font-size: 13px;
     }
+
+    .button {
+        color: $celadon;
+    }
 }
 
 .reviews-subpage-container {
@@ -69,7 +74,7 @@
 
             .buttons {
                 display: flex;
-                justify-self: flex-end;;
+                justify-self: flex-end;
             }
         }
         .date {
diff --git a/app/frontend/src/Components/GameDetails/Review/Review.tsx b/app/frontend/src/Components/GameDetails/Review/Review.tsx
index 0c9cc10d..8217929d 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Review.tsx
@@ -1,6 +1,7 @@
-import { Button } from "antd";
+import { Button, Rate } from "antd";
 import styles from "./Review.module.scss";
 import {
+  CheckOutlined,
   DeleteOutlined,
   DownOutlined,
   EditOutlined,
@@ -10,9 +11,51 @@ import {
 import TextArea from "antd/es/input/TextArea";
 import { useState } from "react";
 import { formatDate } from "../../../Library/utils/formatDate";
+import { useAuth } from "../../Hooks/useAuth";
+import { useMutation, useQueryClient } from "react-query";
+import { deleteReview, updateReview } from "../../../Services/review";
 
 function Review({ review }: { review: any }) {
   const [inputMode, setInputMode] = useState(false);
+  const [reviewContent, setReviewContent] = useState(review.reviewDescription);
+  const [rating, setRating] = useState(review.rating);
+
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+
+  const { mutate: removeReview } = useMutation(
+    (id: string) => deleteReview(id),
+    {
+      onSuccess() {
+        queryClient.invalidateQueries(["reviews", review.gameId, ""]);
+      },
+      onMutate(id: string) {
+        queryClient.setQueryData(["reviews", review.gameId, ""], (prev: any) =>
+          prev.filter((review: any) => id !== review.id)
+        );
+      },
+    }
+  );
+
+  const { mutate: editReview } = useMutation(
+    ({ id, updatedReview }: { id: string; updatedReview: any }) =>
+      updateReview(id, updatedReview),
+    {
+      onSuccess() {
+        queryClient.invalidateQueries(["reviews", review.gameId, ""]);
+        setInputMode(false);
+      },
+      onMutate({ id, updatedReview }) {
+        queryClient.setQueryData(
+          ["reviews", updatedReview.gameId, ""],
+          (prev: any) =>
+            prev.map((review: any) =>
+              review.id === id ? { ...review, ...updatedReview } : review
+            )
+        );
+      },
+    }
+  );
 
   return (
     <div className={styles.reviewContainer} id={review.id}>
@@ -26,33 +69,73 @@ function Review({ review }: { review: any }) {
           <div className={styles.user}>
             <b>{review.reviewedBy}</b>
           </div>
-          <div className={styles.buttons}>
-            <Button
-              type="text"
-              ghost={true}
-              shape="circle"
-              size="small"
-              icon={<EditOutlined style={{ color: "#aacdbe" }} />}
-              onClick={() => setInputMode(true)}
-            />
-            <Button
-              type="text"
-              ghost={true}
-              shape="circle"
-              size="small"
-              icon={<DeleteOutlined style={{ color: "#aacdbe" }} />}
-            />
-          </div>
+          {/*TODO: change id to username*/}
+          {user.id === review.reviewedBy && (
+            <div className={styles.buttons}>
+              {!inputMode ? (
+                <Button
+                  type="text"
+                  ghost={true}
+                  shape="circle"
+                  size="small"
+                  icon={<EditOutlined style={{ color: "#aacdbe" }} />}
+                  onClick={() => setInputMode(true)}
+                />
+              ) : (
+                <Button
+                  type="text"
+                  ghost={true}
+                  shape="circle"
+                  size="small"
+                  icon={<CheckOutlined style={{ color: "#aacdbe" }} />}
+                  onClick={() =>
+                    editReview({
+                      id: review.id,
+                      updatedReview: {
+                        rating: rating,
+                        reviewDescription: reviewContent,
+                      },
+                    })
+                  }
+                />
+              )}
+              <Button
+                type="text"
+                ghost={true}
+                shape="circle"
+                size="small"
+                icon={<DeleteOutlined style={{ color: "#aacdbe" }} />}
+                onClick={() => removeReview(review.id)}
+              />
+            </div>
+          )}
         </div>
         <div className={styles.date}>{formatDate(review.createdAt)}</div>
         <div className={styles.stars}>
-          {[1, 2, 3, 4, 5].map((starValue) =>
-            starValue <= review.rating ? <StarFilled /> : ""
+          {inputMode ? (
+            <Rate
+              allowHalf
+              defaultValue={rating}
+              onChange={setRating}
+              value={rating}
+            />
+          ) : (
+            <>
+              {[1, 2, 3, 4, 5].map((starValue) =>
+                starValue <= review.rating ? (
+                  <StarFilled key={starValue} />
+                ) : null
+              )}
+              {Math.round(review.rating) !== review.rating && <span>½</span>}
+            </>
           )}
-          {Math.round(review.rating) !== review.rating ? <span>½</span> : ""}
         </div>
         {inputMode ? (
-          <TextArea />
+          <TextArea
+            style={{ backgroundColor: "#022b40", color: "#faf7cf" }}
+            defaultValue={reviewContent}
+            onChange={(e) => setReviewContent(e.target.value)}
+          />
         ) : (
           <div className={styles.content}>{review.reviewDescription}</div>
         )}
diff --git a/app/frontend/src/Library/utils/formatDate.ts b/app/frontend/src/Library/utils/formatDate.ts
new file mode 100644
index 00000000..07e22af2
--- /dev/null
+++ b/app/frontend/src/Library/utils/formatDate.ts
@@ -0,0 +1,8 @@
+
+export function formatDate(date: Date)  {
+    return new Date(date).toLocaleDateString('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+}
\ No newline at end of file
diff --git a/app/frontend/src/Services/review.ts b/app/frontend/src/Services/review.ts
new file mode 100644
index 00000000..af97c7bd
--- /dev/null
+++ b/app/frontend/src/Services/review.ts
@@ -0,0 +1,53 @@
+import axios from "axios";
+
+export async function getReview(id : string ) {
+ 
+    const reviews = await axios.get(`${import.meta.env.VITE_APP_API_URL}/review`, {
+        params: {
+            id
+        }
+    });
+
+    return reviews;
+}
+
+export async function getAllReviews(gameId : string, reviewedBy?: string) {
+ 
+    const reviews = await axios.get(`${import.meta.env.VITE_APP_API_URL}/review/get-all`, {
+        params: {
+            gameId,
+            reviewedBy
+        }
+    });
+
+    return reviews;
+}
+
+export async function postReview(review: any) {
+    console.log("posting");
+
+    await axios.post(`${import.meta.env.VITE_APP_API_URL}/review/create`, review); 
+
+}
+
+export async function updateReview(id: string, review: any) {
+ 
+    await axios.put(`${import.meta.env.VITE_APP_API_URL}/review/update`, review, {
+        params: {
+            id
+        }
+    });
+
+}
+
+export async function deleteReview(id: string) {
+ 
+   await axios.delete(`${import.meta.env.VITE_APP_API_URL}/review/delete`, {
+        params: {
+            id
+        }
+    });
+
+}
+
+

From d5d9592522df3bdc3c940efed6131f31e09925f4 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Sun, 12 Nov 2023 23:37:40 +0300
Subject: [PATCH 05/10] Implements reviews subpage and integrates with the game
 details page #621

---
 .../GameDetails/Review/Review.module.scss     |  3 +-
 .../Components/GameDetails/Review/Review.tsx  |  5 ++-
 .../Components/GameDetails/Review/Reviews.tsx | 32 +++++++++++++++++++
 .../src/Pages/GameDetails/GameDetails.tsx     |  8 +++--
 app/frontend/src/Services/review.ts           |  1 -
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 app/frontend/src/Components/GameDetails/Review/Reviews.tsx

diff --git a/app/frontend/src/Components/GameDetails/Review/Review.module.scss b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
index 0ae5de71..05bde74a 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.module.scss
+++ b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
@@ -35,6 +35,7 @@
 .review-container {
     display: flex;
     width: min-content;
+    min-width: 200px;
     background-color: $prussian-blue-dark-40;
     border-radius: 0.5em;
     margin: 5px 5px 5px 5px;
@@ -60,7 +61,7 @@
         color: $color-text-light;
         gap: 5px;
         justify-content: space-between;
-
+        flex: 1;
         .header {
             display: flex;
             justify-content: flex-start;
diff --git a/app/frontend/src/Components/GameDetails/Review/Review.tsx b/app/frontend/src/Components/GameDetails/Review/Review.tsx
index 8217929d..77738159 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Review.tsx
@@ -67,10 +67,9 @@ function Review({ review }: { review: any }) {
       <div className={styles.review}>
         <div className={styles.header}>
           <div className={styles.user}>
-            <b>{review.reviewedBy}</b>
+            <b>{review.reviewedUser}</b>
           </div>
-          {/*TODO: change id to username*/}
-          {user.id === review.reviewedBy && (
+          {user.username === review.reviewedUser && (
             <div className={styles.buttons}>
               {!inputMode ? (
                 <Button
diff --git a/app/frontend/src/Components/GameDetails/Review/Reviews.tsx b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
new file mode 100644
index 00000000..d52f0633
--- /dev/null
+++ b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
@@ -0,0 +1,32 @@
+import { useQuery } from "react-query";
+import Review from "./Review";
+import styles from "./Review.module.scss";
+import ReviewInput from "./ReviewInput";
+import { getAllReviews } from "../../../Services/review";
+import { useState } from "react";
+
+function Reviews({ gameId }: { gameId: string }) {
+  const [reviewedBy, setReviewedBy] = useState("");
+
+  const { data: reviews, isLoading } = useQuery(
+    ["reviews", gameId, reviewedBy],
+    () =>
+      reviewedBy === ""
+        ? getAllReviews(gameId).then((res) => res.data)
+        : getAllReviews(gameId, reviewedBy).then((res) => res.data)
+  );
+
+  return (
+    <>
+      <ReviewInput gameId={gameId} />
+      {reviews && (
+        <div className={styles.reviewsSubpageContainer}>
+          {reviews?.map((review: any) => (
+            <Review key={review.id} review={review} />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+export default Reviews;
diff --git a/app/frontend/src/Pages/GameDetails/GameDetails.tsx b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
index aa822134..a7466cb8 100644
--- a/app/frontend/src/Pages/GameDetails/GameDetails.tsx
+++ b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
@@ -6,6 +6,7 @@ import { useParams } from "react-router-dom";
 import { getGame } from "../../Services/gamedetail";
 import { useQuery } from "react-query";
 import { PacmanLoader } from "react-spinners";
+import Reviews from "../../Components/GameDetails/Review/Reviews";
 
 function formatDate(date: Date) {
   const day = date.getDate();
@@ -83,14 +84,17 @@ function GameDetails() {
                 type="button"
                 className={subPage === name ? styles.active : ""}
                 onClick={() => setSubPage(name as any)}
-                disabled
               >
                 {name}
               </button>
             ))}
           </div>
           <div className={styles.subPage}>
-            <Summary game={data} />
+            {subPage === "summary" ? (
+              <Summary game={data} />
+            ) : (
+              <Reviews gameId={data.id} />
+            )}
           </div>
         </>
       )}
diff --git a/app/frontend/src/Services/review.ts b/app/frontend/src/Services/review.ts
index af97c7bd..c58d9e8b 100644
--- a/app/frontend/src/Services/review.ts
+++ b/app/frontend/src/Services/review.ts
@@ -24,7 +24,6 @@ export async function getAllReviews(gameId : string, reviewedBy?: string) {
 }
 
 export async function postReview(review: any) {
-    console.log("posting");
 
     await axios.post(`${import.meta.env.VITE_APP_API_URL}/review/create`, review); 
 

From 2d73c01d57ab199be30ceb1b194daf608a188ba4 Mon Sep 17 00:00:00 2001
From: alperen-bircak <bircakalperen@gmail.com>
Date: Mon, 13 Nov 2023 16:07:57 +0200
Subject: [PATCH 06/10] initial functionality done

---
 .../src/Components/Forum/Forum.module.scss    | 21 ++++++
 app/frontend/src/Components/Forum/Forum.tsx   | 44 ++++++++++++
 .../Forum/ForumPost/ForumPost.module.scss     | 27 ++++++++
 .../Components/Forum/ForumPost/ForumPost.tsx  | 20 ++++++
 app/frontend/src/Library/utils/formatDate.ts  | 25 +++++++
 .../src/Pages/ForumPost/ForumPost.module.scss | 20 ++++++
 .../src/Pages/ForumPost/ForumPost.tsx         | 23 +++++++
 .../ForumPostForm/ForumPostForm.module.scss   |  3 +
 .../src/Pages/ForumPostForm/ForumPostForm.tsx | 50 ++++++++++++++
 .../src/Pages/GameDetails/GameDetails.tsx     | 55 +++++++--------
 app/frontend/src/Services/forum.ts            | 69 +++++++++++++++++++
 app/frontend/src/router.tsx                   | 18 ++++-
 12 files changed, 342 insertions(+), 33 deletions(-)
 create mode 100644 app/frontend/src/Components/Forum/Forum.module.scss
 create mode 100644 app/frontend/src/Components/Forum/Forum.tsx
 create mode 100644 app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
 create mode 100644 app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
 create mode 100644 app/frontend/src/Library/utils/formatDate.ts
 create mode 100644 app/frontend/src/Pages/ForumPost/ForumPost.module.scss
 create mode 100644 app/frontend/src/Pages/ForumPost/ForumPost.tsx
 create mode 100644 app/frontend/src/Pages/ForumPostForm/ForumPostForm.module.scss
 create mode 100644 app/frontend/src/Pages/ForumPostForm/ForumPostForm.tsx
 create mode 100644 app/frontend/src/Services/forum.ts

diff --git a/app/frontend/src/Components/Forum/Forum.module.scss b/app/frontend/src/Components/Forum/Forum.module.scss
new file mode 100644
index 00000000..ca16e0e1
--- /dev/null
+++ b/app/frontend/src/Components/Forum/Forum.module.scss
@@ -0,0 +1,21 @@
+@import "../../colors";
+
+.container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  padding: 1em;
+
+  .top {
+    display: flex;
+    justify-content: end;
+  }
+
+  .posts {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1em;
+  }
+}
diff --git a/app/frontend/src/Components/Forum/Forum.tsx b/app/frontend/src/Components/Forum/Forum.tsx
new file mode 100644
index 00000000..bf902310
--- /dev/null
+++ b/app/frontend/src/Components/Forum/Forum.tsx
@@ -0,0 +1,44 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styles from "./Forum.module.scss";
+import { useQuery } from "react-query";
+import { getPostList } from "../../Services/forum";
+import { Button } from "antd";
+import { PlusCircleOutlined } from "@ant-design/icons";
+import { useAuth } from "../Hooks/useAuth";
+import ForumPost from "./ForumPost/ForumPost";
+
+function Forum({
+  forumId,
+  redirect = "/",
+}: {
+  forumId: string;
+  redirect?: string;
+}) {
+  const { isLoggedIn } = useAuth();
+  const { data: posts, isLoading } = useQuery(["forum", forumId], () =>
+    getPostList({ forum: forumId })
+  );
+  const navigate = useNavigate();
+  return (
+    <div className={styles.container}>
+      <div className={styles.top}>
+        {isLoggedIn && (
+          <Button
+            onClick={() =>
+              navigate(`/forum/form?forumId=${forumId}&&redirect=${redirect}`)
+            }
+          >
+            <PlusCircleOutlined /> Add Post
+          </Button>
+        )}
+      </div>
+      <div className={styles.posts}>
+        {posts?.map((post: any) => (
+          <ForumPost key={post.id} post={post} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Forum;
diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
new file mode 100644
index 00000000..6b56054c
--- /dev/null
+++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
@@ -0,0 +1,27 @@
+@import "../../../colors";
+
+.container {
+  position: relative;
+  padding: 1em;
+  background-color: $celadon;
+  border-radius: 0.5em;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5em;
+  .title {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+  .meta {
+    display: flex;
+    gap: 1em;
+    font-size: 0.8em;
+    opacity: 80%;
+  }
+  .readMore {
+    position: absolute;
+    bottom: 0.5em;
+    right: 0.5em;
+  }
+}
diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
new file mode 100644
index 00000000..3f12f517
--- /dev/null
+++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
@@ -0,0 +1,20 @@
+import { Button } from "antd";
+import { formatDate } from "../../../Library/utils/formatDate";
+import styles from "./ForumPost.module.scss";
+
+function ForumPost({ post }: { post: any }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{post.title}</div>
+      <div className={styles.meta}>
+        <span>{post.poster.username}</span>
+        <span>{post.createdAt && formatDate(post.createdAt)}</span>
+      </div>
+      <div className={styles.readMore}>
+        <Button href={`/forum/detail/${post.id}`}>Read More</Button>
+      </div>
+    </div>
+  );
+}
+
+export default ForumPost;
diff --git a/app/frontend/src/Library/utils/formatDate.ts b/app/frontend/src/Library/utils/formatDate.ts
new file mode 100644
index 00000000..72db9986
--- /dev/null
+++ b/app/frontend/src/Library/utils/formatDate.ts
@@ -0,0 +1,25 @@
+export function formatDate(inputDate: Date | string) {
+  const date = new Date(inputDate);
+  const day = date.getDate();
+  const monthIndex = date.getMonth();
+  const year = date.getFullYear();
+
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const monthName = monthNames[monthIndex];
+
+  return `${day} ${monthName} ${year}`;
+}
diff --git a/app/frontend/src/Pages/ForumPost/ForumPost.module.scss b/app/frontend/src/Pages/ForumPost/ForumPost.module.scss
new file mode 100644
index 00000000..ed819397
--- /dev/null
+++ b/app/frontend/src/Pages/ForumPost/ForumPost.module.scss
@@ -0,0 +1,20 @@
+@import "../../colors";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 2.5em;
+
+  .postContainer {
+    display: grid;
+    grid-template-rows: 50px 1fr;
+    border-radius: 0.5em;
+    padding: 1em;
+    background-color: $celadon;
+    .title {
+      font-size: 1.5em;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/frontend/src/Pages/ForumPost/ForumPost.tsx b/app/frontend/src/Pages/ForumPost/ForumPost.tsx
new file mode 100644
index 00000000..9e69004a
--- /dev/null
+++ b/app/frontend/src/Pages/ForumPost/ForumPost.tsx
@@ -0,0 +1,23 @@
+import { useParams } from "react-router-dom";
+import styles from "./ForumPost.module.scss";
+import { useQuery } from "react-query";
+import { getPost } from "../../Services/forum";
+
+function ForumPost() {
+  const { postId } = useParams();
+  const { data: post, isLoading } = useQuery(["post", postId], () =>
+    getPost(postId!)
+  );
+  return (
+    <div className={styles.container}>
+      {!isLoading && (
+        <div className={styles.postContainer}>
+          <span className={styles.title}>{post.title}</span>
+          <span>{post.postContent}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ForumPost;
diff --git a/app/frontend/src/Pages/ForumPostForm/ForumPostForm.module.scss b/app/frontend/src/Pages/ForumPostForm/ForumPostForm.module.scss
new file mode 100644
index 00000000..ee42325a
--- /dev/null
+++ b/app/frontend/src/Pages/ForumPostForm/ForumPostForm.module.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 2.5em;
+}
diff --git a/app/frontend/src/Pages/ForumPostForm/ForumPostForm.tsx b/app/frontend/src/Pages/ForumPostForm/ForumPostForm.tsx
new file mode 100644
index 00000000..fc4a81aa
--- /dev/null
+++ b/app/frontend/src/Pages/ForumPostForm/ForumPostForm.tsx
@@ -0,0 +1,50 @@
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import styles from "./ForumPostForm.module.scss";
+import TextArea from "antd/es/input/TextArea";
+import { Button, Form, Input } from "antd";
+import { useMutation } from "react-query";
+import { createPost } from "../../Services/forum";
+
+function ForumPostForm() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const { mutate: addPost, isLoading } = useMutation(
+    ({ title, postContent }: { title: string; postContent: string }) =>
+      createPost({ forum: searchParams.get("forumId")!, title, postContent }),
+    {
+      onSuccess() {
+        navigate(searchParams.get("redirect") ?? "/");
+      },
+    }
+  );
+
+  return (
+    <div className={styles.container}>
+      <Form onFinish={addPost}>
+        <Form.Item
+          name="title"
+          rules={[{ required: true, message: "Please enter a title" }]}
+        >
+          <Input placeholder="Come up with a totes cool title my dude" />
+        </Form.Item>
+        <Form.Item
+          name="postContent"
+          rules={[{ required: true, message: "Please enter post content" }]}
+        >
+          <Input.TextArea
+            rows={5}
+            placeholder="Your posts gonna talk-the-talk, but can it walk-the-walk?"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" disabled={isLoading}>
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}
+
+export default ForumPostForm;
diff --git a/app/frontend/src/Pages/GameDetails/GameDetails.tsx b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
index aa822134..b370e81e 100644
--- a/app/frontend/src/Pages/GameDetails/GameDetails.tsx
+++ b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
@@ -2,35 +2,12 @@ import { StarFilled, StarOutlined } from "@ant-design/icons";
 import styles from "./GameDetails.module.scss";
 import { useState } from "react";
 import Summary from "../../Components/GameDetails/Summary/Summary";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { getGame } from "../../Services/gamedetail";
 import { useQuery } from "react-query";
 import { PacmanLoader } from "react-spinners";
-
-function formatDate(date: Date) {
-  const day = date.getDate();
-  const monthIndex = date.getMonth();
-  const year = date.getFullYear();
-
-  const monthNames = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-
-  const monthName = monthNames[monthIndex];
-
-  return `${day} ${monthName} ${year}`;
-}
+import Forum from "../../Components/Forum/Forum";
+import { formatDate } from "../../Library/utils/formatDate";
 
 function GameDetails() {
   const { gameId } = useParams();
@@ -40,8 +17,10 @@ function GameDetails() {
   );
 
   const score = 4;
+  const [searchParams] = useSearchParams();
+
   const [subPage, setSubPage] = useState<"summary" | "reviews" | "forum">(
-    "summary"
+    (searchParams.get("subPage") as any) ?? "summary"
   );
 
   const date = new Date();
@@ -83,15 +62,29 @@ function GameDetails() {
                 type="button"
                 className={subPage === name ? styles.active : ""}
                 onClick={() => setSubPage(name as any)}
-                disabled
               >
                 {name}
               </button>
             ))}
           </div>
-          <div className={styles.subPage}>
-            <Summary game={data} />
-          </div>
+          {data && (
+            <div className={styles.subPage}>
+              {subPage === "summary" ? (
+                <Summary game={data} />
+              ) : subPage === "forum" ? (
+                data?.forum ? (
+                  <Forum
+                    forumId={data.forum}
+                    redirect={`/game/${gameId}?subPage=forum`}
+                  />
+                ) : (
+                  <>No forum on this game.</>
+                )
+              ) : (
+                <></>
+              )}
+            </div>
+          )}
         </>
       )}
     </div>
diff --git a/app/frontend/src/Services/forum.ts b/app/frontend/src/Services/forum.ts
new file mode 100644
index 00000000..d1faa714
--- /dev/null
+++ b/app/frontend/src/Services/forum.ts
@@ -0,0 +1,69 @@
+import axios from "axios";
+export const getPostList = async ({
+  findDeleted = false,
+  tags = [],
+  search = "",
+  sortBy = "CREATION_DATE",
+  forum,
+  sortDirection = "DESCENDING",
+}: {
+  findDeleted?: boolean;
+  tags?: string[];
+  search?: string;
+  forum: string;
+  sortBy?: string;
+  sortDirection?: string;
+}) => {
+  const response = await axios.get(
+    import.meta.env.VITE_APP_API_URL + "/post/get-post-list",
+    {
+      params: {
+        findDeleted,
+        tags,
+        search,
+        sortBy,
+        forum,
+        sortDirection,
+      },
+    }
+  );
+  return response.data;
+};
+
+export const createPost = async ({
+  title,
+  postContent,
+  postImage,
+  forum,
+  tags = [],
+}: {
+  title: string;
+  postContent: string;
+  postImage?: string;
+  forum: string;
+  tags?: string[];
+}) => {
+  const response = await axios.post(
+    import.meta.env.VITE_APP_API_URL + "/post/create",
+    {
+      title,
+      postContent,
+      postImage,
+      forum,
+      tags,
+    }
+  );
+  return response.data;
+};
+
+export const getPost = async (id: string) => {
+  const response = await axios.get(
+    import.meta.env.VITE_APP_API_URL + "/post/get-post-detail",
+    {
+      params: {
+        id,
+      },
+    }
+  );
+  return response.data;
+};
diff --git a/app/frontend/src/router.tsx b/app/frontend/src/router.tsx
index 31162f40..58685de7 100644
--- a/app/frontend/src/router.tsx
+++ b/app/frontend/src/router.tsx
@@ -8,10 +8,11 @@ import Register from "./Pages/Register/Register";
 import GameDetails from "./Pages/GameDetails/GameDetails";
 import axios from "axios";
 import Games from "./Pages/Games/Games";
+import ForumPostForm from "./Pages/ForumPostForm/ForumPostForm";
+import ForumPost from "./Pages/ForumPost/ForumPost";
 
 axios.defaults.headers.common["Content-Type"] = "application/json";
 
-
 const router = createBrowserRouter([
   {
     path: "/",
@@ -28,9 +29,22 @@ const router = createBrowserRouter([
         element: <HelloWorld />,
       },
       {
-        path: "/game/:gameId",
+        path: "game/:gameId",
         element: <GameDetails />,
       },
+      {
+        path: "forum",
+        children: [
+          {
+            path: "form",
+            element: <ForumPostForm />,
+          },
+          {
+            path: "detail/:postId",
+            element: <ForumPost />,
+          },
+        ],
+      },
       {
         path: "games",
         element: <Games />,

From 43a715be28a438cf8306fc836f3c9778a2232369 Mon Sep 17 00:00:00 2001
From: alperen-bircak <bircakalperen@gmail.com>
Date: Mon, 13 Nov 2023 19:12:53 +0200
Subject: [PATCH 07/10] votes added

---
 app/frontend/src/Components/Forum/Forum.tsx   |  2 +-
 .../Forum/ForumPost/ForumPost.module.scss     | 29 +++++++++++++++++--
 .../Components/Forum/ForumPost/ForumPost.tsx  | 18 +++++++++++-
 app/frontend/src/Components/Hooks/useVote.tsx | 29 +++++++++++++++++++
 app/frontend/src/Services/vote.tsx            | 13 +++++++++
 5 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 app/frontend/src/Components/Hooks/useVote.tsx
 create mode 100644 app/frontend/src/Services/vote.tsx

diff --git a/app/frontend/src/Components/Forum/Forum.tsx b/app/frontend/src/Components/Forum/Forum.tsx
index bf902310..ce1a5937 100644
--- a/app/frontend/src/Components/Forum/Forum.tsx
+++ b/app/frontend/src/Components/Forum/Forum.tsx
@@ -34,7 +34,7 @@ function Forum({
       </div>
       <div className={styles.posts}>
         {posts?.map((post: any) => (
-          <ForumPost key={post.id} post={post} />
+          <ForumPost key={post.id} post={post} forumId={forumId} />
         ))}
       </div>
     </div>
diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
index 6b56054c..d4296e63 100644
--- a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
+++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
@@ -5,19 +5,42 @@
   padding: 1em;
   background-color: $celadon;
   border-radius: 0.5em;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  display: grid;
   gap: 0.5em;
+  grid-template-areas:
+    "v t"
+    "v m";
+  grid-template-rows: 50px 25px;
+  grid-template-columns: 25px 1fr;
+  .vote {
+    grid-area: v;
+    grid-template-rows: repeat(3, 1fr);
+    justify-items: center;
+    align-items: center;
+    display: grid;
+    color: $orange;
+
+    button {
+      all: unset;
+      cursor: pointer;
+      color: $orange-dark-40;
+
+      .active {
+        color: $orange;
+      }
+    }
+  }
   .title {
     font-weight: bold;
     font-size: 1.2em;
+    grid-area: t;
   }
   .meta {
     display: flex;
     gap: 1em;
     font-size: 0.8em;
     opacity: 80%;
+    grid-area: m;
   }
   .readMore {
     position: absolute;
diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
index 3f12f517..ef96849d 100644
--- a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
+++ b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
@@ -1,10 +1,26 @@
 import { Button } from "antd";
 import { formatDate } from "../../../Library/utils/formatDate";
 import styles from "./ForumPost.module.scss";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import { useVote } from "../../Hooks/useVote";
 
-function ForumPost({ post }: { post: any }) {
+function ForumPost({ post, forumId }: { post: any; forumId: string }) {
+  const { upvote, downvote } = useVote({
+    voteType: "POST",
+    typeId: post.id,
+    invalidateKey: ["forum", forumId],
+  });
   return (
     <div className={styles.container}>
+      <div className={styles.vote}>
+        <button type="button" onClick={upvote}>
+          <ArrowUpOutlined />
+        </button>
+        <div>{post.overallVote}</div>
+        <button type="button" onClick={downvote}>
+          <ArrowDownOutlined />
+        </button>
+      </div>
       <div className={styles.title}>{post.title}</div>
       <div className={styles.meta}>
         <span>{post.poster.username}</span>
diff --git a/app/frontend/src/Components/Hooks/useVote.tsx b/app/frontend/src/Components/Hooks/useVote.tsx
new file mode 100644
index 00000000..c7f39e96
--- /dev/null
+++ b/app/frontend/src/Components/Hooks/useVote.tsx
@@ -0,0 +1,29 @@
+import { QueryKey, useMutation, useQueryClient } from "react-query";
+import { createVote } from "../../Services/vote";
+
+export function useVote({
+  voteType,
+  typeId,
+  invalidateKey,
+}: {
+  voteType: "POST" | "REVIEW";
+  typeId: string;
+  invalidateKey: QueryKey;
+}) {
+  const queryClient = useQueryClient();
+  const { mutate: vote, isLoading } = useMutation(
+    (choice: "UPVOTE" | "DOWNVOTE") => createVote({ voteType, typeId, choice }),
+    {
+      onSuccess() {
+        queryClient.invalidateQueries(invalidateKey);
+      },
+    }
+  );
+
+  return {
+    vote,
+    upvote: () => vote("UPVOTE"),
+    downvote: () => vote("DOWNVOTE"),
+    isLoading,
+  };
+}
diff --git a/app/frontend/src/Services/vote.tsx b/app/frontend/src/Services/vote.tsx
new file mode 100644
index 00000000..a70566ab
--- /dev/null
+++ b/app/frontend/src/Services/vote.tsx
@@ -0,0 +1,13 @@
+import axios from "axios";
+
+export const createVote = async (body: {
+  voteType: "POST" | "REVIEW";
+  typeId: string;
+  choice: "UPVOTE" | "DOWNVOTE";
+}) => {
+  const response = await axios.post(
+    import.meta.env.VITE_APP_API_URL + "/vote/create",
+    body
+  );
+  return response.data;
+};

From 2d9573c4d1e86993f112ee31ef8b24b1412616cd Mon Sep 17 00:00:00 2001
From: alperen-bircak <bircakalperen@gmail.com>
Date: Mon, 13 Nov 2023 19:15:27 +0200
Subject: [PATCH 08/10] release date fix

---
 app/frontend/src/Library/utils/formatDate.ts       | 4 ++--
 app/frontend/src/Pages/GameDetails/GameDetails.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/frontend/src/Library/utils/formatDate.ts b/app/frontend/src/Library/utils/formatDate.ts
index 72db9986..674132f0 100644
--- a/app/frontend/src/Library/utils/formatDate.ts
+++ b/app/frontend/src/Library/utils/formatDate.ts
@@ -1,5 +1,5 @@
-export function formatDate(inputDate: Date | string) {
-  const date = new Date(inputDate);
+export function formatDate(inputDate?: Date | string) {
+  const date = inputDate ? new Date(inputDate) : new Date(0);
   const day = date.getDate();
   const monthIndex = date.getMonth();
   const year = date.getFullYear();
diff --git a/app/frontend/src/Pages/GameDetails/GameDetails.tsx b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
index b370e81e..806aee1f 100644
--- a/app/frontend/src/Pages/GameDetails/GameDetails.tsx
+++ b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
@@ -23,7 +23,7 @@ function GameDetails() {
     (searchParams.get("subPage") as any) ?? "summary"
   );
 
-  const date = new Date();
+  const date = data?.releaseDate;
   return (
     <div className={styles.container}>
       {isLoading ? (

From 1f898c5191595be28140f357dafd6f38b3678d03 Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Mon, 13 Nov 2023 22:11:35 +0300
Subject: [PATCH 09/10] Adds search

---
 .../GameDetails/Review/Review.module.scss     |  5 ++-
 .../Components/GameDetails/Review/Review.tsx  | 37 +++++++++++++------
 .../Components/GameDetails/Review/Reviews.tsx | 28 ++++++++++----
 .../src/Pages/GameDetails/GameDetails.tsx     |  1 +
 4 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/app/frontend/src/Components/GameDetails/Review/Review.module.scss b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
index 05bde74a..41d71323 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.module.scss
+++ b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
@@ -4,7 +4,7 @@
 .review-input-container {
     display: flex;
     flex-direction: column;
-    width: 300px;
+    width: 350px;
     color: white !important;
     background-color: $blue-green;
     border-radius: 0.5em;
@@ -34,8 +34,9 @@
 }
 .review-container {
     display: flex;
+    flex-shrink: 0;
     width: min-content;
-    min-width: 200px;
+    min-width: 350px;
     background-color: $prussian-blue-dark-40;
     border-radius: 0.5em;
     margin: 5px 5px 5px 5px;
diff --git a/app/frontend/src/Components/GameDetails/Review/Review.tsx b/app/frontend/src/Components/GameDetails/Review/Review.tsx
index 77738159..f6c37f56 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Review.tsx
@@ -14,6 +14,7 @@ import { formatDate } from "../../../Library/utils/formatDate";
 import { useAuth } from "../../Hooks/useAuth";
 import { useMutation, useQueryClient } from "react-query";
 import { deleteReview, updateReview } from "../../../Services/review";
+import { useVote } from "../../Hooks/useVote";
 
 function Review({ review }: { review: any }) {
   const [inputMode, setInputMode] = useState(false);
@@ -23,14 +24,20 @@ function Review({ review }: { review: any }) {
   const { user } = useAuth();
   const queryClient = useQueryClient();
 
+  const { upvote, downvote } = useVote({
+    voteType: "REVIEW",
+    typeId: review.id,
+    invalidateKey: ["reviews", review.gameId],
+  });
+
   const { mutate: removeReview } = useMutation(
     (id: string) => deleteReview(id),
     {
       onSuccess() {
-        queryClient.invalidateQueries(["reviews", review.gameId, ""]);
+        queryClient.invalidateQueries(["reviews", review.gameId]);
       },
       onMutate(id: string) {
-        queryClient.setQueryData(["reviews", review.gameId, ""], (prev: any) =>
+        queryClient.setQueryData(["reviews", review.gameId], (prev: any) =>
           prev.filter((review: any) => id !== review.id)
         );
       },
@@ -42,16 +49,14 @@ function Review({ review }: { review: any }) {
       updateReview(id, updatedReview),
     {
       onSuccess() {
-        queryClient.invalidateQueries(["reviews", review.gameId, ""]);
+        queryClient.invalidateQueries(["reviews", review.gameId]);
         setInputMode(false);
       },
       onMutate({ id, updatedReview }) {
-        queryClient.setQueryData(
-          ["reviews", updatedReview.gameId, ""],
-          (prev: any) =>
-            prev.map((review: any) =>
-              review.id === id ? { ...review, ...updatedReview } : review
-            )
+        queryClient.setQueryData(["reviews"], (prev: any) =>
+          prev.map((review: any) =>
+            review.id === id ? { ...review, ...updatedReview } : review
+          )
         );
       },
     }
@@ -60,9 +65,19 @@ function Review({ review }: { review: any }) {
   return (
     <div className={styles.reviewContainer} id={review.id}>
       <div className={styles.vote}>
-        <Button type="primary" shape="circle" icon={<UpOutlined />} />
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<UpOutlined />}
+          onClick={upvote}
+        />
         <span>{review.overallVote}</span>
-        <Button type="primary" shape="circle" icon={<DownOutlined />} />
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<DownOutlined />}
+          onClick={downvote}
+        />
       </div>
       <div className={styles.review}>
         <div className={styles.header}>
diff --git a/app/frontend/src/Components/GameDetails/Review/Reviews.tsx b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
index d52f0633..faabd86e 100644
--- a/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
@@ -4,9 +4,13 @@ import styles from "./Review.module.scss";
 import ReviewInput from "./ReviewInput";
 import { getAllReviews } from "../../../Services/review";
 import { useState } from "react";
+import { Input } from "antd";
 
 function Reviews({ gameId }: { gameId: string }) {
   const [reviewedBy, setReviewedBy] = useState("");
+  const [searchText, setSearchText] = useState("");
+
+  const { Search } = Input;
 
   const { data: reviews, isLoading } = useQuery(
     ["reviews", gameId, reviewedBy],
@@ -18,14 +22,22 @@ function Reviews({ gameId }: { gameId: string }) {
 
   return (
     <>
-      <ReviewInput gameId={gameId} />
-      {reviews && (
-        <div className={styles.reviewsSubpageContainer}>
-          {reviews?.map((review: any) => (
-            <Review key={review.id} review={review} />
-          ))}
-        </div>
-      )}
+      <Search
+        placeholder="Search by user or content"
+        enterButton
+        onSearch={setSearchText}
+      />
+      <div className={styles.reviewsSubpageContainer}>
+        <ReviewInput gameId={gameId} />
+        {reviews &&
+          reviews
+            ?.filter((review: any) => {
+              return `${review.reviewDescription}${review.reviewedUser}`.includes(
+                searchText
+              );
+            })
+            .map((review: any) => <Review key={review.id} review={review} />)}
+      </div>
     </>
   );
 }
diff --git a/app/frontend/src/Pages/GameDetails/GameDetails.tsx b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
index 496a1284..f6b65ae8 100644
--- a/app/frontend/src/Pages/GameDetails/GameDetails.tsx
+++ b/app/frontend/src/Pages/GameDetails/GameDetails.tsx
@@ -8,6 +8,7 @@ import { useQuery } from "react-query";
 import { PacmanLoader } from "react-spinners";
 import Reviews from "../../Components/GameDetails/Review/Reviews";
 import Forum from "../../Components/Forum/Forum";
+import { formatDate } from "../../Library/utils/formatDate";
 
 function GameDetails() {
   const { gameId } = useParams();

From 3795c365ffdbdab26da2a01925944746e759616e Mon Sep 17 00:00:00 2001
From: cisel-zumbul <ciselzumbul09@gmail.com>
Date: Mon, 13 Nov 2023 22:59:45 +0300
Subject: [PATCH 10/10] Visual enhancements are added

---
 .../GameDetails/Review/Review.module.scss     | 11 +++++++-
 .../Components/GameDetails/Review/Review.tsx  | 12 ++++-----
 .../GameDetails/Review/ReviewInput.tsx        | 26 +++++++++++++------
 .../Components/GameDetails/Review/Reviews.tsx | 13 ++++++----
 4 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/app/frontend/src/Components/GameDetails/Review/Review.module.scss b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
index 41d71323..e7830612 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.module.scss
+++ b/app/frontend/src/Components/GameDetails/Review/Review.module.scss
@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;
     width: 350px;
-    color: white !important;
+    color: $color-text-light ;
     background-color: $blue-green;
     border-radius: 0.5em;
     margin: 5px 5px 5px 5px;
@@ -14,6 +14,14 @@
     gap: 5px;
     justify-content: center;
 
+    .header {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        margin: 5px 0px 0px 10px;
+        font-size: 18px;
+    }
+
     .content-input {
         background-color: $prussian-blue-dark-10 !important;
         flex: 4;
@@ -31,6 +39,7 @@
 .reviews-subpage-container {
     display: flex;
     flex-wrap: wrap;
+    padding: 10px;
 }
 .review-container {
     display: flex;
diff --git a/app/frontend/src/Components/GameDetails/Review/Review.tsx b/app/frontend/src/Components/GameDetails/Review/Review.tsx
index f6c37f56..4f451076 100644
--- a/app/frontend/src/Components/GameDetails/Review/Review.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Review.tsx
@@ -27,7 +27,7 @@ function Review({ review }: { review: any }) {
   const { upvote, downvote } = useVote({
     voteType: "REVIEW",
     typeId: review.id,
-    invalidateKey: ["reviews", review.gameId],
+    invalidateKey: ["reviews", review.gameId, ""],
   });
 
   const { mutate: removeReview } = useMutation(
@@ -37,9 +37,9 @@ function Review({ review }: { review: any }) {
         queryClient.invalidateQueries(["reviews", review.gameId]);
       },
       onMutate(id: string) {
-        queryClient.setQueryData(["reviews", review.gameId], (prev: any) =>
-          prev.filter((review: any) => id !== review.id)
-        );
+        queryClient.setQueriesData(["reviews", review.gameId], (prev: any) => {
+          return prev?.filter((review: any) => id !== review.id);
+        });
       },
     }
   );
@@ -53,8 +53,8 @@ function Review({ review }: { review: any }) {
         setInputMode(false);
       },
       onMutate({ id, updatedReview }) {
-        queryClient.setQueryData(["reviews"], (prev: any) =>
-          prev.map((review: any) =>
+        queryClient.setQueriesData(["reviews", review.gameId], (prev: any) =>
+          prev?.map((review: any) =>
             review.id === id ? { ...review, ...updatedReview } : review
           )
         );
diff --git a/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx b/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx
index b2387ce3..234cd818 100644
--- a/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/ReviewInput.tsx
@@ -38,14 +38,24 @@ function ReviewInput({ gameId }: { gameId: string }) {
 
   return (
     <div className={styles.reviewInputContainer}>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <Rate
-          style={{ alignSelf: "flex-end" }}
-          allowHalf
-          defaultValue={0}
-          onChange={setRating}
-          value={rating}
-        />
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+        }}
+      >
+        <div className={styles.header}>
+          <div>
+            <b>Post Review</b>
+          </div>
+          <Rate
+            style={{ alignSelf: "flex-end" }}
+            allowHalf
+            defaultValue={0}
+            onChange={setRating}
+            value={rating}
+          />
+        </div>
         <Button icon={<CheckOutlined />} onClick={() => handleClick()}></Button>
       </div>
 
diff --git a/app/frontend/src/Components/GameDetails/Review/Reviews.tsx b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
index faabd86e..4ccf51ed 100644
--- a/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
+++ b/app/frontend/src/Components/GameDetails/Review/Reviews.tsx
@@ -22,12 +22,15 @@ function Reviews({ gameId }: { gameId: string }) {
 
   return (
     <>
-      <Search
-        placeholder="Search by user or content"
-        enterButton
-        onSearch={setSearchText}
-      />
       <div className={styles.reviewsSubpageContainer}>
+        <div style={{ width: "100%" }}>
+          <Search
+            placeholder="Search reviews by content or reviewer"
+            enterButton
+            onSearch={setSearchText}
+            style={{ width: "350px", padding: "5px" }}
+          />
+        </div>
         <ReviewInput gameId={gameId} />
         {reviews &&
           reviews