Review implementation

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;
+  }
+}

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} forumId={forumId} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Forum;

app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss

@@ -0,0 +1,50 @@
+@import "../../../colors";
+
+.container {
+  position: relative;
+  padding: 1em;
+  background-color: $celadon;
+  border-radius: 0.5em;
+  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;
+    bottom: 0.5em;
+    right: 0.5em;
+  }
+}

app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx

@@ -0,0 +1,36 @@
+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, 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>
+        <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;

app/frontend/src/Components/GameDetails/Review/Review.module.scss

@@ -0,0 +1,114 @@
+@import "../../../colors";
+
+
+.review-input-container {
+    display: flex;
+    flex-direction: column;
+    width: 350px;
+    color: $color-text-light ;
+    background-color: $blue-green;
+    border-radius: 0.5em;
+    margin: 5px 5px 5px 5px;
+    overflow: hidden;
+    padding: 5px;
+    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;
+        width: 100%;
+        border-radius: 0.5em;
+        padding: 5px;
+        font-size: 13px;
+    }
+
+    .button {
+        color: $celadon;
+    }
+}
+
+.reviews-subpage-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+}
+.review-container {
+    display: flex;
+    flex-shrink: 0;
+    width: min-content;
+    min-width: 350px;
+    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;
+        flex: 1;
+        .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;
+        }
+    }
+
+}