Merge pull request #878 from bounswe/main

Deploy recent changes 27.11.2023 15.37
bounswe · Nov 27, 2023 · 4946d87 · 4946d87
2 parents 76930f4 + 17fed80
commit 4946d87
Show file tree

Hide file tree

Showing 17 changed files with 334 additions and 143 deletions.
diff --git a/app/backend/src/main/java/com/app/gamereview/GamereviewApplication.java b/app/backend/src/main/java/com/app/gamereview/GamereviewApplication.java
@@ -1,7 +1,11 @@
 package com.app.gamereview;
 
+import org.apache.coyote.http11.AbstractHttp11Protocol;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
+import org.springframework.boot.web.server.WebServerFactoryCustomizer;
+import org.springframework.context.annotation.Bean;
 
 @SpringBootApplication
 public class GamereviewApplication {
@@ -10,4 +14,11 @@ public static void main(String[] args) {
 		SpringApplication.run(GamereviewApplication.class, args);
 	}
 
+	@Bean
+	public WebServerFactoryCustomizer<TomcatServletWebServerFactory> tomcatCustomizer() {
+		return (tomcat) -> {
+			tomcat.addConnectorCustomizers((connector) ->
+					((AbstractHttp11Protocol<?>)connector.getProtocolHandler()).setRelaxedQueryChars("[]"));
+		};
+	}
 }
diff --git a/app/frontend/src/Components/Achievement/SquareAchievement/SquareAchievement.module.scss b/app/frontend/src/Components/Achievement/SquareAchievement/SquareAchievement.module.scss
@@ -1,58 +1,54 @@
 @import "../../../colors";
 .achievement {
-    display: flex;
-    align-items: center;
-    margin: 10px;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    transition: border-color 0.3s;
-    width: 10%;
-    height: 10%;
-    background-color: $violet-light-30;
-  }
-
-
-
-  .icon {
-    border-radius: 10%;
-    width: 100%;
-    height: 100%;
-  }
-
-  .achievement_content {
-    flex: 1;
-  }
-
-
-  .achievementTitle {
-    visibility: visible;
-    font-size: 18px;
-  }
-
-  .achievementGame {
-    visibility: visible;
-    font-size: 14px;
-  }
-
-
-  .achievement_description {
-    font-size: 14px;
-    color: #555;
-  }
-
-  .floatingDescription {
-    visibility: hidden;
-    color: #fff;
-    text-align: center  ;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .tooltip{
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black;
-  }
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  transition: border-color 0.3s;
+  width: 100px;
+  height: 100px;
+  background-color: $violet-light-30;
+}
+
+.icon {
+  border-radius: 10%;
+  width: 100%;
+  height: 100%;
+}
+
+.achievement_content {
+  flex: 1;
+}
+
+.achievementTitle {
+  visibility: visible;
+  font-size: 18px;
+}
+
+.achievementGame {
+  visibility: visible;
+  font-size: 14px;
+}
+
+.achievement_description {
+  font-size: 14px;
+  color: #555;
+}
+
+.floatingDescription {
+  visibility: hidden;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+  padding: 0;
+}
diff --git a/app/frontend/src/Components/Achievement/SquareAchievement/SquareAchievement.tsx b/app/frontend/src/Components/Achievement/SquareAchievement/SquareAchievement.tsx
@@ -1,31 +1,24 @@
-import React, { useState } from 'react';
-import styles from './SquareAchievement.module.scss';
-import { Tooltip } from 'antd';
-
-
-function SquareAchievement ({ props }:{ props: any }) {
-
+import React, { useState } from "react";
+import styles from "./SquareAchievement.module.scss";
+import { Tooltip } from "antd";
 
+function SquareAchievement({ props }: { props: any }) {
   return (
-    <div>
-        <div className= {styles.achievement}>
-
-
-            <div className={styles.achievement_content}>
-                <Tooltip title={props.title+ ": "+ props.description} className={styles.tootip}>
-                    <img
-                        src={`${import.meta.env.VITE_APP_IMG_URL}${props?.icon}`}
-                        alt="achievement icon"
-                        className={styles.icon}
-                    ></img>
-                </Tooltip>
-            </div>
-
-        </div>
-
+    <div className={styles.achievement}>
+      <div className={styles.achievement_content}>
+        <Tooltip
+          title={props.title + ": " + props.description}
+          className={styles.tootip}
+        >
+          <img
+            src={`${import.meta.env.VITE_APP_IMG_URL}${props?.icon}`}
+            alt="achievement icon"
+            className={styles.icon}
+          ></img>
+        </Tooltip>
+      </div>
     </div>
   );
-};
-
+}
 
-export default SquareAchievement;
+export default SquareAchievement;
diff --git a/app/frontend/src/Components/Forum/Forum.tsx b/app/frontend/src/Components/Forum/Forum.tsx
@@ -25,9 +25,11 @@ const sortOptions = [
 function Forum({
   forumId,
   redirect = "/",
+  gameId,
 }: {
   forumId: string;
   redirect?: string;
+  gameId?: string;
 }) {
   const { isLoggedIn } = useAuth();
   const [filterTags, setFilterTags] = useState([]);
@@ -73,7 +75,11 @@ function Forum({
         {isLoggedIn && (
           <Button
             onClick={() =>
-              navigate(`/forum/form?forumId=${forumId}&&redirect=${redirect}`)
+              navigate(
+                `/forum/form?forumId=${forumId}&&redirect=${redirect}${
+                  gameId ? `&&gameId=${gameId}` : ``
+                }`
+              )
             }
           >
             <PlusCircleOutlined /> Add Post
@@ -120,6 +126,7 @@ function Forum({
             post={post}
             forumId={forumId}
             redirect={redirect}
+            gameId={gameId}
           />
         ))}
       </div>

diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss b/app/frontend/src/Components/Forum/ForumPost/ForumPost.module.scss
@@ -17,12 +17,14 @@
 
   .imgConatiner {
     grid-area: i;
-    aspect-ratio: 1;
     padding: 0.5em;
-    img {
+    display: flex;
+    gap: 1em;
+    & > img {
       object-fit: contain;
       height: 100%;
-      width: 100%;
+      width: auto;
+      aspect-ratio: 1;
     }
   }
 

diff --git a/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx b/app/frontend/src/Components/Forum/ForumPost/ForumPost.tsx
@@ -17,15 +17,18 @@ import { truncateWithEllipsis } from "../../../Library/utils/truncate";
 import { useNavigate } from "react-router-dom";
 import TagRenderer from "../../TagRenderer/TagRenderer";
 import { twj } from "tw-to-css";
+import SquareAchievement from "../../Achievement/SquareAchievement/SquareAchievement";
 
 function ForumPost({
   post,
   forumId,
   redirect = "/",
+  gameId,
 }: {
   post: any;
   forumId: string;
   redirect?: string;
+  gameId?: string;
 }) {
   const { user, isLoggedIn } = useAuth();
   const navigate = useNavigate();
@@ -75,12 +78,15 @@ function ForumPost({
         />
       </div>
 
-      {post.postImage && (
+      {(post.postImage || post.achievement) && (
         <div className={styles.imgConatiner}>
-          <img
-            height="30px"
-            src={`${import.meta.env.VITE_APP_IMG_URL}${post.postImage}`}
-          />
+          {post.postImage && (
+            <img
+              height="30px"
+              src={`${import.meta.env.VITE_APP_IMG_URL}${post.postImage}`}
+            />
+          )}
+          {post.achievement && <SquareAchievement props={post.achievement} />}
         </div>
       )}
 
@@ -99,7 +105,7 @@ function ForumPost({
       </div>
 
       <div className={styles.meta}>
-        <span>{post.poster.username}</span>
+        <span>{post.poster?.username}</span>
         <span>{post.createdAt && formatDate(post.createdAt)}</span>
         <WarningOutlined
           style={twj("text-red-500 text-lg cursor-pointer")}
@@ -108,16 +114,22 @@ function ForumPost({
         />
       </div>
       <div className={styles.readMore}>
-        <Button onClick={() => navigate(`/forum/detail/${forumId}/${post.id}`)}>
+        <Button
+          onClick={() =>
+            navigate(`/forum/detail/${forumId}/${post.id}?back=${redirect}`)
+          }
+        >
           Read More
         </Button>
       </div>
-      {user?.id === post.poster.id && (
+      {user?.id === post.poster?.id && (
         <div className={styles.edit}>
           <Button
             onClick={() =>
               navigate(
-                `/forum/form?forumId=${forumId}&&redirect=${redirect}&&editId=${post.id}`
+                `/forum/form?forumId=${forumId}&&redirect=${redirect}&&editId=${
+                  post.id
+                }${gameId ? `&&gameId=${gameId}` : ``}`
               )
             }
           >

diff --git a/app/frontend/src/Components/Game/Game.tsx b/app/frontend/src/Components/Game/Game.tsx
@@ -34,7 +34,7 @@ function Game(props: any) {
               : game.gameDescription}
           </p>
           <Button
-            onClick={() => navigate(`/game/${game.id}`)}
+            onClick={() => navigate(`/game/detail/${game.id}`)}
             className={styles.button}
           >
             Details

diff --git a/app/frontend/src/Components/Hooks/useAuth.tsx b/app/frontend/src/Components/Hooks/useAuth.tsx
@@ -11,6 +11,7 @@ import {
 import { me } from "../../Services/me";
 import { useQuery } from "react-query";
 import { getProfile } from "../../Services/profile";
+import { useNavigate } from "react-router-dom";
 
 type User = any;
 
@@ -51,7 +52,7 @@ const useAuth = (): UseAuthProps => {
 
   function logOut() {
     Cookies.remove("token");
-    location.reload();
+    location.replace("/");
   }
 
   const { data: profile, isLoading } = useQuery(
@@ -75,14 +76,18 @@ const useAuth = (): UseAuthProps => {
 // AuthProvider component
 const AuthProvider = ({ children }: { children?: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null); // Initialize to fetch from local storage or server if needed
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const token = Cookies.get("token");
     if (token) {
       axios.defaults.headers.common["Authorization"] = `${token}`;
       me().then((res) => {
         setUser?.(res.data);
+        setLoading(false);
       });
+    } else {
+      setLoading(false);
     }
   }, []);
 
@@ -91,7 +96,11 @@ const AuthProvider = ({ children }: { children?: ReactNode }) => {
     setUser,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
 };
 
 export { useAuth, AuthProvider };