Merge pull request #945 from SE-TINF22B6/frontend

Fixed report, profile page adaptions, deleted logs
SE-TINF22B6 · Jun 12, 2024 · cf78edc · cf78edc
2 parents e3a7ca9 + 4de7dba
commit cf78edc
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 124 deletions.
diff --git a/src/main/web/src/organisms/comment/Comment.tsx b/src/main/web/src/organisms/comment/Comment.tsx
diff --git a/src/main/web/src/organisms/login/Login.tsx b/src/main/web/src/organisms/login/Login.tsx
@@ -61,7 +61,7 @@ const Login: React.FC<Props> = () => {
     const handleGoogleLogin = (credentialResponse: CredentialResponse): void => {
         googleLogin(JSON.stringify({ token: credentialResponse.credential })).then(
             (): void => {
-                localStorage.setItem('oathUser', 'true');
+                localStorage.setItem('oAuthUser', 'true');
                 window.location.reload();
             },
             (): void => {
@@ -114,9 +114,7 @@ const Login: React.FC<Props> = () => {
                             <GoogleLogin size={'medium'} logo_alignment={'center'} ux_mode={'popup'} useOneTap={true}
                                          text={"continue_with"}
                                          onSuccess={handleGoogleLogin}
-                                         onError={(): void => {
-                                             console.log('Login Failed');
-                                         }}
+                                         onError={(): void => {console.error('Login Failed');}}
                             />
                         </div>
 

diff --git a/src/main/web/src/organisms/report/Report.tsx b/src/main/web/src/organisms/report/Report.tsx
@@ -6,17 +6,13 @@ import * as yup from 'yup';
 
 interface ReportPostProps {
   reportOpen: boolean;
-  setReportReason: React.Dispatch<React.SetStateAction<string>>;
-  setReportDescription: React.Dispatch<React.SetStateAction<string>>;
-  handleReportSubmit: () => void;
+  handleReportSubmit: (reportReason: string, reportDescription: string) => void;
   handleClose: () => void;
 }
 
 export const Report: React.FC<ReportPostProps> = (props: ReportPostProps) => {
   const {
     reportOpen,
-    setReportReason,
-    setReportDescription,
     handleReportSubmit,
     handleClose,
   } = props;
@@ -26,15 +22,10 @@ export const Report: React.FC<ReportPostProps> = (props: ReportPostProps) => {
   });
 
   const formik = useFormik({
-    initialValues: {
-      reportReason: '',
-      reportDescription: '',
-    },
+    initialValues: {reportReason: '', reportDescription: ''},
     validationSchema: validationSchema,
     onSubmit: (values): void => {
-      setReportReason(values.reportReason);
-      setReportDescription(values.reportDescription);
-      handleReportSubmit();
+      handleReportSubmit(values.reportReason, values.reportDescription);
     },
   });
 

diff --git a/src/main/web/src/organisms/share/Share.tsx b/src/main/web/src/organisms/share/Share.tsx
@@ -72,7 +72,7 @@ export const Share = (props: ShareProps) => {
   };
 
   const openWindowsShareOptions = (): void => {
-    sharePost().then(() => console.log('Shared ' + type + ' successfully.'));
+    sharePost();
   };
 
   return (

diff --git a/src/main/web/src/organisms/signup/EmailInput.tsx b/src/main/web/src/organisms/signup/EmailInput.tsx
@@ -70,10 +70,9 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
   };
 
   const handleGoogleLogin = (credentialResponse: CredentialResponse) => {
-    console.log(credentialResponse);
     googleLogin(JSON.stringify({ token: credentialResponse.credential })).then(
         (): void => {
-          localStorage.setItem('oathUser', 'true');
+          localStorage.setItem('oAuthUser', 'true');
           navigate("/profile");
           window.location.reload();
         },
@@ -157,7 +156,7 @@ export const EmailInput = forwardRef<HTMLDivElement, { onSuccess: () => void }>(
           text={"signup_with"}
           onSuccess={handleGoogleLogin}
           onError={(): void => {
-            console.log("Login Failed");
+            console.error("Login Failed");
           }}
         />
       </div>

diff --git a/src/main/web/src/scenes/Home/components/post/Post.tsx b/src/main/web/src/scenes/Home/components/post/Post.tsx
@@ -47,18 +47,14 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
   };
 
   const [reportOpen, setReportOpen] = useState(false);
-  const [reportReason, setReportReason] = useState('');
-  const [reportDescription, setReportDescription] = useState('');
 
   const handleReportClick = (): void => {
     setReportOpen(!reportOpen);
   };
 
-  const handleReportSubmit = (): void => {
-    sendReportToBackend(reportReason, reportDescription, id, accountId, "post");
+  const handleReportSubmit = (reason: string, description: string): void => {
+    sendReportToBackend(reason, description, id, accountId, "post");
     setReportOpen(!reportOpen);
-    setReportReason('');
-    setReportDescription('');
   };
 
   const [likes, setLikes] = useState(likeAmount);
@@ -103,7 +99,6 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
         headers: headersWithJwt
       });
       if (response.ok) {
-        console.log('Post has been saved!');
         alert('Post has been saved!');
       } else {
         console.error('Error saving the post: ', response.statusText);
@@ -209,18 +204,17 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
           <div className="post-infos" style={{marginLeft: marginLeft}}>
             <Link to={`/post/?id=${id}`} className="post-button">
               <p className="post-title">
-                {title ? shortenDescription(title, 50): title }</p>
+                {title ? shortenDescription(title, 50): title }
+              </p>
             </Link>
             <div className="post-tags" style={{marginTop: marginTop}}>
               {tags && tags.slice(0, 3).map((tag: string, index: number) => (
                   <Tag name={tag} key={index} index={index} isEventTag={false}/>
               ))}
             </div>
-
             <p className="short-description" style={{ width: width}}>
               {postImage && shortDescription ? shortenDescription(shortDescription, 150) : shortDescription}
             </p>
-
             <div className="footer">
               <Link to={`/user/?id=${userId}`} className="author-link" aria-label="To the author">
                 {username}
@@ -241,7 +235,6 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
             />
           </div>
         </div>
-
         {menuOpen && (
             <div className="post-menu-container">
             <PostMenu
@@ -259,13 +252,7 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
             </div>
         )}
         {reportOpen && (
-            <Report
-                reportOpen={reportOpen}
-                setReportReason={setReportReason}
-                setReportDescription={setReportDescription}
-                handleReportSubmit={handleReportSubmit}
-                handleClose={handleClose}
-            />
+            <Report reportOpen={reportOpen} handleReportSubmit={handleReportSubmit} handleClose={handleClose}/>
         )}
       </div>
   );

diff --git a/src/main/web/src/scenes/Post/PostDetail.tsx b/src/main/web/src/scenes/Post/PostDetail.tsx
@@ -47,18 +47,14 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
   };
 
   const [reportOpen, setReportOpen] = useState(false);
-  const [reportReason, setReportReason] = useState('');
-  const [reportDescription, setReportDescription] = useState('');
 
   const handleReportClick = (): void => {
     setReportOpen(true);
   };
 
-  const handleReportSubmit = (): void => {
-    sendReportToBackend(reportReason, reportDescription, id, accountId, "post");
+  const handleReportSubmit = (reason: string, description: string): void => {
+    sendReportToBackend(reason, description, id, accountId, "post");
     setReportOpen(!reportOpen);
-    setReportReason('');
-    setReportDescription('');
   };
 
   useEffect((): void => {
@@ -90,7 +86,6 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
         headers: headersWithJwt
       });
       if (response.ok) {
-        console.log('Post has been saved!');
         alert('Post has been saved!');
       } else {
         console.error('Error saving the post: ', response.statusText);
@@ -218,13 +213,7 @@ export const PostDetail: React.FC<PostDetailModel> = (props: PostDetailModel) =>
         )}
         {reportOpen && (
             <div className="post-detail-report-window">
-              <Report
-                  reportOpen={reportOpen}
-                  setReportReason={setReportReason}
-                  setReportDescription={setReportDescription}
-                  handleReportSubmit={handleReportSubmit}
-                  handleClose={handleClose}
-              />
+              <Report reportOpen={reportOpen} handleReportSubmit={handleReportSubmit} handleClose={handleClose}/>
             </div>
         )}
       </div>

diff --git a/src/main/web/src/scenes/Post/index.tsx b/src/main/web/src/scenes/Post/index.tsx
@@ -102,8 +102,8 @@ export const Post = () => {
         const newComment = await response.json();
         setComments(prevComments => [...prevComments, newComment]);
       } else {
-        console.error("Failed to create the comment: ");
-        console.log(response);
+        console.error("Failed to create the comment");
+        console.error("Response:", response);
       }
       setLoading(false);
     } catch (error) {

diff --git a/src/main/web/src/scenes/Profile/index.css b/src/main/web/src/scenes/Profile/index.css
@@ -12,7 +12,10 @@
   width: 100px;
   height: 100px;
   object-fit: cover;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
+  &&:hover {
+    filter: brightness(75%);
+  }
 }
 
 .profile-page-picture {
@@ -46,7 +49,7 @@
   border-radius: 5px;
   padding: 10px 20px;
   cursor: pointer;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .profile-field {
@@ -75,13 +78,14 @@
 }
 
 .profile-field button {
-  background-color: #5a5a5a;
+  background-color: var(--lighter-grey);
   color: white;
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
   cursor: pointer;
   margin-top: 10px;
+  margin-left: 5px;
 }
 
 .label-profile-page-text {

diff --git a/src/main/web/src/scenes/Profile/index.tsx b/src/main/web/src/scenes/Profile/index.tsx
@@ -59,18 +59,18 @@ export const ProfilePage = () => {
         description: false
     });
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const {name, value} = event.target;
         const sanitizedValue = DOMPurify.sanitize(value);
         setUserData({...userData, [name]: sanitizedValue});
     };
 
-    const handleEdit = (field: string) => {
+    const handleEdit = (field: string): void => {
         setIsEditing({...isEditing, [field]: !isEditing[field]});
     };
 
-    const handleSaveChanges = async (field: string) => {
-        let success = false;
+    const handleSaveChanges = async (field: string): Promise<void> => {
+        let success: boolean = false;
         switch (field) {
             case 'username':
                 success = await updateUsername(userData.username);
@@ -94,30 +94,27 @@ export const ProfilePage = () => {
         }
 
         if (success) {
-            console.log(`${field} updated successfully`);
             setIsEditing({...isEditing, [field]: false});
         } else {
             console.error(`Failed to update ${field}`);
         }
     };
 
     const handlePictureChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-        console.log(event.target.files);
         if (event.target.files && event.target.files.length > 0) {
-            const reader = new FileReader();
-            reader.onloadend = async () => {
+            const reader: FileReader = new FileReader();
+            reader.onloadend = async (): Promise<void> => {
                 if (reader.result && event.target.files) {
-                    const imageData = reader.result as string;
-                    const success = await updatePicture(imageData);
+                    const imageData: string = reader.result as string;
+                    const success: boolean = await updatePicture(imageData);
                     if (success) {
                         setUserData(prevState => ({
                             ...prevState,
                             picture: {
                                 ...prevState.picture,
-                                imageData // Aktualisieren Sie den imageData-Zustand mit dem aktualisierten Bild
+                                imageData
                             }
                         }));
-                        console.log("Bild erfolgreich aktualisiert");
                     } else {
                         console.error("Fehler beim Aktualisieren des Bildes");
                     }
@@ -135,11 +132,10 @@ export const ProfilePage = () => {
 
     useEffect((): void => {
         const fetchData = async (): Promise<void> => {
-            const id = getUserId();
+            const id: number | null = getUserId();
             if (id) {
                 const [data, image] = await Promise.all([fetchUserData(), fetchUserImage()]);
                 if (data) {
-                    console.log("Fetched user data:", data);
                     if (image) {
                         data.picture.imageData = image;
                     }
@@ -154,11 +150,11 @@ export const ProfilePage = () => {
         fetchData();
     }, []);
 
-    const adBlockDetected = useDetectAdBlock();
+    const adBlockDetected: boolean = useDetectAdBlock();
     usePreventScrolling(adBlockDetected);
     const scrollUpRef = useRef<HTMLDivElement>(null);
 
-    const disableEmailAndPasswordEdit = localStorage.getItem("oathUser") === "true";
+    const disableEmailAndPasswordEdit: boolean = localStorage.getItem("oAuthUser") === "true";
 
     return (
         <div className="page">
@@ -192,12 +188,16 @@ export const ProfilePage = () => {
                     <button onClick={() => isEditing.username ? handleSaveChanges('username') : handleEdit('username')}>
                         {isEditing.username ? 'Save' : 'Edit'}
                     </button>
-                    <p className="profile-page-info-message">If you want to change your user name, you will be logged out and must log in again for the change to take effect!</p>
+                    {isEditing.username && (
+                        <p className="profile-page-info-message">
+                            If you want to change your user name, you will be logged out and must log in again for the change to take effect!
+                        </p>
+                    )}
                 </div>
 
                 {!disableEmailAndPasswordEdit && (
                     <div className="profile-field">
-                        <label className="label-profile-page-text">Email Address</label>
+                    <label className="label-profile-page-text">Email Address</label>
                         {isEditing.email ? (
                             <input type="email" name="email" value={userData.email} onChange={handleChange}/>
                         ) : (
@@ -210,9 +210,7 @@ export const ProfilePage = () => {
                 )}
 
                 <div className="profile-field">
-                    <label className="label-profile
-
--page-text">Course</label>
+                    <label className="label-profile-page-text">Course</label>
                     {isEditing.course ? (
                         <input type="text" name="course" value={userData.course} onChange={handleChange}/>
                     ) : (

diff --git a/src/main/web/src/services/AuthService.tsx b/src/main/web/src/services/AuthService.tsx
@@ -25,7 +25,7 @@ export const login = async (username: string, password: string, rememberMe: bool
         rememberMe
     });
     saveUserDataToLocalStorage(response.data);
-    localStorage.setItem('oathUser', 'false');
+    localStorage.setItem('oAuthUser', 'false');
 
     return response.data;
 };
@@ -64,7 +64,7 @@ export const logout = (): void => {
     localStorage.removeItem("username");
     localStorage.removeItem("token");
     localStorage.removeItem('userImage');
-    localStorage.removeItem('oathUser');
+    localStorage.removeItem('oAuthUser');
 
     Object.keys(localStorage)
       .filter(x =>

diff --git a/src/main/web/src/services/LikeService.tsx b/src/main/web/src/services/LikeService.tsx
@@ -77,8 +77,8 @@ export const handleLike = async (
     const response: Response = await fetch(config.apiUrl + endpoint, requestOptions);
 
     if (!response.ok) {
-      console.log("Response:", response);
       console.error(`Failed to ${userLiked ? 'unlike' : 'like'} ${type}: ${response.statusText}`);
+      console.error("Response: ", response);
     } else {
       if (!userLiked) {
         setLikes(likes + 1);