Merge pull request #916 from SE-TINF22B6/search_and_user_page

Fix Display of user image and linking to users
SE-TINF22B6 · Jun 10, 2024 · 0e906ee · 0e906ee
2 parents 62f45d9 + e74ea3b
commit 0e906ee
Show file tree

Hide file tree

Showing 15 changed files with 93 additions and 51 deletions.
diff --git a/src/main/java/de/tinf22b6/dhbwhub/controller/AccountController.java b/src/main/java/de/tinf22b6/dhbwhub/controller/AccountController.java
@@ -28,6 +28,10 @@ public Account create(@RequestBody AccountProposal proposal) {
         return service.create(proposal);
     }
 
+    @GetMapping("/get-user-id/{id}")
+    public Long getUserIdByAccountId(@PathVariable Long id) {
+        return service.getUserIdByAccountId(id);
+    }
     @GetMapping("/{id}")
     public Account get(@PathVariable Long id) {
         return service.get(id);

diff --git a/src/main/java/de/tinf22b6/dhbwhub/security/WebSecurityConfig.java b/src/main/java/de/tinf22b6/dhbwhub/security/WebSecurityConfig.java
@@ -50,6 +50,8 @@ public class WebSecurityConfig {
             "/user-image",
             "/user/user-by-keyword/*",
             "/user/user-information/*",
+
+            "/account/get-user-id/{id:\\d+}",
     };
 
     public WebSecurityConfig(UserDetailsServiceImpl userDetailsService, AuthEntryPointJwt unauthorizedHandler) {

diff --git a/src/main/java/de/tinf22b6/dhbwhub/service/AccountServiceImpl.java b/src/main/java/de/tinf22b6/dhbwhub/service/AccountServiceImpl.java
@@ -3,9 +3,9 @@
 import de.tinf22b6.dhbwhub.exception.NoSuchEntryException;
 import de.tinf22b6.dhbwhub.mapper.AccountMapper;
 import de.tinf22b6.dhbwhub.model.Account;
-import de.tinf22b6.dhbwhub.model.OAuthAccount;
 import de.tinf22b6.dhbwhub.proposal.AccountProposal;
 import de.tinf22b6.dhbwhub.repository.AccountRepository;
+import de.tinf22b6.dhbwhub.repository.UserRepository;
 import de.tinf22b6.dhbwhub.service.interfaces.AccountService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -15,9 +15,10 @@
 @Service
 public class AccountServiceImpl implements AccountService {
     private final AccountRepository repository;
-
-    public AccountServiceImpl(@Autowired AccountRepository repository) {
+    private final UserRepository userRepository;
+    public AccountServiceImpl(@Autowired AccountRepository repository, @Autowired UserRepository userRepository) {
         this.repository = repository;
+        this.userRepository = userRepository;
     }
 
     @Override
@@ -59,12 +60,8 @@ public void delete(Long id) {
     }
 
     @Override
-    public boolean checkIfOAuthAccountExists(Long id) {
-        return repository.existsOAuthEntry(id);
-    }
-
-    public boolean checkIfEmailExists(String email) {
-        return getAll().stream().anyMatch(account -> account.getEmail().equals(email));
+    public Long getUserIdByAccountId(Long id) {
+        return userRepository.findByAccountId(id).getId();
     }
 
     @Override
@@ -73,13 +70,4 @@ public Account findByEmail(String email) {
     }
 
 
-    @Override
-    public boolean existsOAuthEntry(Long accountId) {
-        return repository.existsOAuthEntry(accountId);
-    }
-
-    @Override
-    public OAuthAccount saveOAuthEntry(OAuthAccount account) {
-        return repository.saveOAuthEntry(account);
-    }
 }
diff --git a/src/main/java/de/tinf22b6/dhbwhub/service/interfaces/AccountService.java b/src/main/java/de/tinf22b6/dhbwhub/service/interfaces/AccountService.java
@@ -1,7 +1,6 @@
 package de.tinf22b6.dhbwhub.service.interfaces;
 
 import de.tinf22b6.dhbwhub.model.Account;
-import de.tinf22b6.dhbwhub.model.OAuthAccount;
 import de.tinf22b6.dhbwhub.proposal.AccountProposal;
 
 import java.util.List;
@@ -10,10 +9,8 @@ public interface AccountService {
     List<Account> getAll();
     Account create(AccountProposal proposal);
     Account findByEmail(String email);
-    boolean existsOAuthEntry(Long accountId);
-    OAuthAccount saveOAuthEntry(OAuthAccount account);
     Account get(Long id);
     Account update(Long id, AccountProposal proposal);
     void delete(Long id);
-    boolean checkIfOAuthAccountExists(Long id);
+    Long getUserIdByAccountId(Long id);
 }
diff --git a/src/main/web/src/atoms/Pictures/Pictures.tsx → ...b/src/atoms/Pictures/PicturesComponent.js b/src/main/web/src/atoms/Pictures/Pictures.tsx → ...b/src/atoms/Pictures/PicturesComponent.js
diff --git a/src/main/web/src/organisms/comment/Comment.tsx b/src/main/web/src/organisms/comment/Comment.tsx
@@ -10,6 +10,7 @@ import {Interaction} from "../interaction/Interaction";
 import {PostCommentModel} from "../../scenes/Home/components/post/models/PostCommentModel";
 import {EventCommentModel} from "../../scenes/Event/model/EventCommentModel";
 import {checkUserLiked, handleLike} from "../../services/LikeService";
+import {getUserIdByAccountId} from "../../services/UserPageService";
 
 type CommentProps = PostCommentModel | EventCommentModel;
 
@@ -32,6 +33,7 @@ export const Comment: React.FC<CommentProps> = (props: CommentProps) => {
   const [reportDescription, setReportDescription] = useState('');
   const [menuOpen, setMenuOpen] = useState(false);
   const [shareWindowOpen, setShareWindowOpen] = useState(false);
+  const [userId, setUserId] = useState(null);
   const currentPageURL: string = window.location.href;
   const id: number = 'postId' in props ? props.postId : props.eventId;
 
@@ -93,11 +95,20 @@ export const Comment: React.FC<CommentProps> = (props: CommentProps) => {
     };
   }, [reportOpen, handleClose]);
 
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await getUserIdByAccountId(accountId);
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [accountId]);
+
   return (
       <div className="comment">
         <div className="comment-content">
           {authorUsername && (
-              <Link to={`/user/?name=${authorUsername.toLowerCase().replace(' ', '-')}`} className="author-link"
+              <Link to={`/user/?id=${userId}`} className="author-link"
                     aria-label="To the author">
                 <img className="profile-picture" alt="Comment profile" src={image}/>
               </Link>

diff --git a/src/main/web/src/organisms/create-comment/CreateComment.tsx b/src/main/web/src/organisms/create-comment/CreateComment.tsx
@@ -5,6 +5,7 @@ import {fetchUserImage} from "../../services/ProfilePictureService";
 import config from "../../config/config";
 import {isUserLoggedIn} from "../../services/AuthService";
 import {Tooltip} from "react-tooltip";
+import {getDefaultOrRandomPicture} from "../../atoms/Pictures/PicturesComponent";
 
 interface CreateCommentProps {
   onReplyClick: (newCommentText: string) => void;
@@ -37,6 +38,9 @@ export const CreateComment: React.FC<CreateCommentProps> = ({ onReplyClick }) =>
       if (image) {
         setUserImage(image);
       }
+      else {
+        setUserImage(getDefaultOrRandomPicture(true));
+      }
     };
     fetchUserProfileImage();
   }, []);

diff --git a/src/main/web/src/organisms/header/Header.tsx b/src/main/web/src/organisms/header/Header.tsx
@@ -11,6 +11,7 @@ import config from "../../config/config";
 import {fetchUserImage} from "../../services/ProfilePictureService";
 import {fetchNotifications} from "../../services/NotificationsService";
 import {NotificationModel} from "./model/NotificationModel";
+import {getDefaultOrRandomPicture} from "../../atoms/Pictures/PicturesComponent";
 
 export const Header = () => {
     const [notifications, setNotifications] = useState<NotificationModel[]>([]);
@@ -29,6 +30,9 @@ export const Header = () => {
             if (image) {
                 setUserImage(image);
             }
+            else {
+                setUserImage(getDefaultOrRandomPicture(true));
+            }
         };
         fetchUserProfileImage();
     }, []);

diff --git a/src/main/web/src/scenes/Home/components/create-post/CreatePost.tsx b/src/main/web/src/scenes/Home/components/create-post/CreatePost.tsx
@@ -6,6 +6,7 @@ import {fetchUserImage} from "../../../../services/ProfilePictureService";
 import {isUserLoggedIn} from "../../../../services/AuthService";
 import {Tooltip} from "react-tooltip";
 import config from "../../../../config/config";
+import {getDefaultOrRandomPicture} from "../../../../atoms/Pictures/PicturesComponent";
 
 export const CreatePost = () => {
   const [draftOpen, setDraftOpen] = useState(false);
@@ -23,6 +24,9 @@ export const CreatePost = () => {
       if (image) {
         setUserImage(image);
       }
+      else {
+          setUserImage(getDefaultOrRandomPicture(true));
+      }
     };
     fetchUserProfileImage();
   }, []);

diff --git a/src/main/web/src/scenes/Home/components/create-post/PostDraft.tsx b/src/main/web/src/scenes/Home/components/create-post/PostDraft.tsx
@@ -12,6 +12,7 @@ import config from "../../../../config/config";
 import { getAccountId, getJWT } from "../../../../services/AuthService";
 import { handleTagInput } from "../../../../services/TagService";
 import {fetchUserImage} from "../../../../services/ProfilePictureService";
+import {getDefaultOrRandomPicture} from "../../../../atoms/Pictures/PicturesComponent";
 
 interface PostDraftProps {
   draftOpen: boolean;
@@ -40,6 +41,9 @@ export const PostDraft: React.FC<PostDraftProps> = (props: PostDraftProps) => {
       if (image) {
         setUserImage(image);
       }
+      else {
+        setUserImage(getDefaultOrRandomPicture(true));
+      }
     };
     fetchUserProfileImage();
   }, []);

diff --git a/src/main/web/src/scenes/Home/components/post/Post.tsx b/src/main/web/src/scenes/Home/components/post/Post.tsx
@@ -14,6 +14,7 @@ import {useMediaQuery} from "@mui/system";
 import config from "../../../../config/config";
 import {getJWT, getUserId} from "../../../../services/AuthService";
 import {sendReportToBackend} from "../../../../services/ReportService";
+import {getUserIdByAccountId} from "../../../../services/UserPageService";
 
 export const Post: React.FC<PostModel> = (props: PostModel) => {
   const {
@@ -37,7 +38,8 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
   const currentPageURL: string = window.location.href;
   const location = useLocation();
   const [shortDescription, setShortDescription] = useState('');
-  const userId: number | null =  getUserId();
+  const [userId, setUserId] = useState(null);
+  const userSelfId: number | null =  getUserId();
   const jwt: string | null = getJWT();
   const headersWithJwt = {
     ...config.headers,
@@ -91,7 +93,7 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
         credentials: 'include',
         body: JSON.stringify({
           postId: id,
-          userId: userId,
+          userId: userSelfId,
         }),
         headers: headersWithJwt
       });
@@ -114,7 +116,7 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
         credentials: 'include',
         body: JSON.stringify({
           postId: id,
-          userId: userId,
+          userId: userSelfId,
         }),
         headers: headersWithJwt
       });
@@ -182,6 +184,15 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
     };
   }, [reportOpen, handleClose]);
 
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await getUserIdByAccountId(accountId);
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [accountId]);
+
   return (
       <div className="post-container">
         <div className="post">
@@ -205,7 +216,7 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
             </p>
 
             <div className="footer">
-              <Link to={`/user/?id=${accountId}`} className="author-link" aria-label="To the author">
+              <Link to={`/user/?id=${userId}`} className="author-link" aria-label="To the author">
                 {username}
               </Link>
               &nbsp;· {formattedTime}

diff --git a/src/main/web/src/scenes/Post/PostDetail.tsx b/src/main/web/src/scenes/Post/PostDetail.tsx
@@ -12,6 +12,7 @@ import {getJWT, getUserId} from "../../services/AuthService";
 import config from "../../config/config";
 import './PostDetail.css';
 import {sendReportToBackend} from "../../services/ReportService";
+import {getUserIdByAccountId} from "../../services/UserPageService";
 
 export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) => {
   const {
@@ -36,8 +37,9 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
   const [menuOpen, setMenuOpen] = useState(false);
   const [shareWindowOpen, setShareWindowOpen] = useState(false);
   const currentPageURL: string = window.location.href;
+  const [userId, setUserId] = useState(null);
   const location = useLocation();
-  const userId: number | null = getUserId();
+  const userSelfId: number | null = getUserId();
   const jwt: string | null = getJWT();
   const headersWithJwt = {
     ...config.headers,
@@ -83,7 +85,7 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
         credentials: 'include',
         body: JSON.stringify({
           postId: id,
-          userId: userId,
+          userId: userSelfId,
         }),
         headers: headersWithJwt
       });
@@ -107,7 +109,7 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
         credentials: 'include',
         body: JSON.stringify({
           postId: id,
-          userId: userId,
+          userId: userSelfId,
         }),
         headers: {
           'Authorization': 'Bearer ' + jwt,
@@ -143,14 +145,23 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
     };
   }, [reportOpen, handleClose]);
 
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await getUserIdByAccountId(accountId);
+      setUserId(id);
+    };
+
+    fetchUserId();
+  }, [accountId]);
+
   return (
       <div className="post-detail">
         <div className="post-detail-content">
           <div className="post-detail-sidebar">
             <div className="post-detail-data">
               {userImage && <img className="profile-picture" alt="Profile" src={userImage}/>}
               <div>
-                <Link to={`/user/?id=${accountId}`} className="author-link" aria-label="To the author">
+                <Link to={`/user/?id=${userId}`} className="author-link" aria-label="To the author">
                   {username}
                 </Link>
                 <br/>

diff --git a/src/main/web/src/scenes/Search/components/User.tsx b/src/main/web/src/scenes/Search/components/User.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import './User.css';
 import {Link} from "react-router-dom";
 import {UserModel} from "./models/UserModel";
-import {Pictures} from "../../../atoms/Pictures/Pictures";
+import {getDefaultOrRandomPicture} from "../../../atoms/Pictures/PicturesComponent";
 
 export const User: React.FC<UserModel> = (props: UserModel) => {
     const {
@@ -19,7 +19,7 @@ export const User: React.FC<UserModel> = (props: UserModel) => {
                 {picture && picture.imageData ? (
                     <img className="user-image" alt={username} src={picture.imageData} loading="lazy"/>
                 ) : (
-                    <Pictures defaultPicture={false} className="custom-image"/>
+                    <img className="custom-image" alt={"random-image"} src={getDefaultOrRandomPicture(false)}/>
                 )}
                 <div className="user-name">{truncatedUsername}</div>
             </Link>

diff --git a/src/main/web/src/scenes/User/index.tsx b/src/main/web/src/scenes/User/index.tsx
@@ -3,8 +3,8 @@ import "./index.css";
 import {Header} from "../../organisms/header/Header";
 import {Footer} from "../../organisms/footer/Footer";
 import config from "../../config/config";
-import {Pictures} from "../../atoms/Pictures/Pictures";
 import {getJWT, getUserId} from "../../services/AuthService";
+import {getDefaultOrRandomPicture} from "../../atoms/Pictures/PicturesComponent";
 
 export const UserPage = () => {
     const searchParams: URLSearchParams = new URLSearchParams(window.location.search);
@@ -85,7 +85,7 @@ export const UserPage = () => {
                     {picture.id !== null && picture.imageData ? (
                         <img className="user-image" alt={"user"} src={picture.imageData} loading="lazy"/>
                     ) : (
-                        <Pictures defaultPicture={false} className="custom-image"/>
+                         <img className="custom-image" alt={"random-image"} src={getDefaultOrRandomPicture(false)}/>
                     )}
                 </div>
                 <div className="user-page-name">

diff --git a/src/main/web/src/services/UserPageService.tsx b/src/main/web/src/services/UserPageService.tsx
@@ -0,0 +1,9 @@
+import config from "../config/config";
+
+
+export const getUserIdByAccountId = async (accountId: number) => {
+
+    const response = await fetch(config.apiUrl +`account/get-user-id/${accountId}`);
+    return await response.json();
+};
+