From 3713931d065bb0b6fc38631580daa0f8b660e9b5 Mon Sep 17 00:00:00 2001
From: "Schwinghammer, Max" <max.schwinghammer@vaillant-group.com>
Date: Thu, 13 Jun 2024 16:09:27 +0200
Subject: [PATCH] Deleted unused logs

---
 src/main/web/src/organisms/header/Header.css  |  10 +-
 src/main/web/src/organisms/header/Header.tsx  | 112 ++++++++++--------
 .../organisms/login/ModalLoginContainer.css   |   2 +-
 src/main/web/src/organisms/signup/SignUp.css  |   2 +-
 .../src/scenes/Home/components/post/Post.css  |  22 +++-
 src/main/web/src/scenes/Profile/index.tsx     |  42 +++++--
 6 files changed, 123 insertions(+), 67 deletions(-)

diff --git a/src/main/web/src/organisms/header/Header.css b/src/main/web/src/organisms/header/Header.css
index 70b8cf7c..78eec628 100644
--- a/src/main/web/src/organisms/header/Header.css
+++ b/src/main/web/src/organisms/header/Header.css
@@ -143,10 +143,16 @@
 
 @media (max-width: 412px) {
   .header {
-    gap: 30px;
+    left: -20px;
+    margin-left: 0;
+    padding: 15px;
+    gap: 10px;
+  }
+  .profile-component {
+    left: 20px;
   }
   .logo {
-    left: 10px;
+    left: 0;
     font-size: 14px;
     width: 43px;
   }
diff --git a/src/main/web/src/organisms/header/Header.tsx b/src/main/web/src/organisms/header/Header.tsx
index cb1d9891..91f6c7e9 100644
--- a/src/main/web/src/organisms/header/Header.tsx
+++ b/src/main/web/src/organisms/header/Header.tsx
@@ -12,6 +12,7 @@ import {fetchUserImage} from "../../services/ProfilePictureService";
 import {fetchNotifications} from "../../services/NotificationsService";
 import {NotificationModel} from "./model/NotificationModel";
 import {getDefaultOrRandomPicture} from "../../atoms/Pictures/PicturesComponent";
+import {useMediaQuery} from "@mui/system";
 
 export const Header = () => {
     const [notifications, setNotifications] = useState<NotificationModel[]>([]);
@@ -19,6 +20,7 @@ export const Header = () => {
     const [currentLocation, setCurrentLocation] = useState('');
     const [userImage, setUserImage] = useState(localStorage.getItem('userImage') || "data:image/svg+xml;base64,PHg==");
     const location = useLocation();
+    const matches = useMediaQuery('(max-width: 412px)');
 
     useEffect((): void => {
         setCurrentLocation(location.pathname);
@@ -65,60 +67,68 @@ export const Header = () => {
 
     return (
         <div className="header">
-            <Link to="/" aria-label="To the homepage">
-                <div className='logo'>
-                    <span>DHBW </span>
-                    <span>hub</span>
-                </div>
-            </Link>
-            <Link className={`home-background ${currentLocation === '/' ? 'active' : ''}`} to="/"
-                  aria-label="To the homepage">
-                <img alt="Home" src={process.env.PUBLIC_URL + '/assets/header/home.svg'} style={{height: "26px", width: "26px"}}/>
-            </Link>
-            <Link className={`friends-background ${currentLocation === '/friends' ? 'active' : ''}`} to={isUserLoggedIn() ? '/friends' : '#'}
-                  aria-label="To the friends page" data-tooltip-id="like" data-tooltip-content={config.tooltipMessage}>
-                <img alt="Friends" src={process.env.PUBLIC_URL + '/assets/header/friends.svg'} style={{height: "26px", width: "26px"}}/>
-            </Link>
-            {!isUserLoggedIn() && (
-                <Tooltip variant={"light"} id="friends" place="bottom"/>
-            )}
-            <Link className={`calendar-background ${currentLocation === '/calendar' ? 'active' : ''}`} to="/calendar"
-                  aria-label="To the calendar page">
-                <img alt="Calendar" src={process.env.PUBLIC_URL + '/assets/header/calendar.svg'} style={{height: "26px", width: "24px"}}/>
-            </Link>
-            <SearchBar/>
-            <div className="notifications-button-container" data-tooltip-id="notifications" data-tooltip-content={config.tooltipMessage}>
-                { notifications.length > 0 ? (
-                    <button className="notifications-button-new" onClick={handleNotificationsButtonClick} disabled={!isUserLoggedIn()}>
-                        <img alt="New notifications"
-                             src={process.env.PUBLIC_URL + '/assets/header/notifications.svg'} style={{height: "25px", width: "26px"}}/>
-                        <img className="notifications-dot" alt="New notifications"
-                             src={process.env.PUBLIC_URL + '/assets/header/notifications-dot.svg'} style={{height: "7px", width: "8px"}}/>
-                    </button>
-                ) : (
-                    <button className="notifications-button" onClick={handleNotificationsButtonClick}
-                            aria-label="Notifications-Button" disabled={!isUserLoggedIn()}>
-                        <img alt="New notifications" src={process.env.PUBLIC_URL + '/assets/header/notifications.svg'}
-                             style={{height: "25px", width: "26px"}}/>
-                    </button>
-                )}
+          <Link to="/" aria-label="To the homepage">
+            <div className='logo'>
+              <span>DHBW </span>
+              <span>hub</span>
             </div>
-            {!isUserLoggedIn() && (
-                <Tooltip variant={"light"} id="notifications" place="bottom" style={{zIndex: 999}}/>
-            )}
-            {showNotifications && <Notifications showNotifications={showNotifications} notifications={notifications} setNotifications={setNotifications}/>}
-            {isUserLoggedIn() ? (
-                <div className="profile-component">
-                    <Link to="/profile" aria-label="To the profile">
-                        <img className="profile-picture-header" alt="Profile" src={userImage}/>
-                    </Link>
-                </div>
+          </Link>
+          <Link className={`home-background ${currentLocation === '/' ? 'active' : ''}`} to="/"
+                aria-label="To the homepage">
+            <img alt="Home" src={process.env.PUBLIC_URL + '/assets/header/home.svg'} style={{height: "26px", width: "26px"}}/>
+          </Link>
+          <Link className={`friends-background ${currentLocation === '/friends' ? 'active' : ''}`} to={isUserLoggedIn() ? '/friends' : '#'}
+                aria-label="To the friends page" data-tooltip-id="like" data-tooltip-content={config.tooltipMessage}>
+            <img alt="Friends" src={process.env.PUBLIC_URL + '/assets/header/friends.svg'} style={{height: "26px", width: "26px"}}/>
+          </Link>
+          {!isUserLoggedIn() && (
+              <Tooltip variant={"light"} id="friends" place="bottom"/>
+          )}
+          <Link className={`calendar-background ${currentLocation === '/calendar' ? 'active' : ''}`} to="/calendar"
+                aria-label="To the calendar page">
+            <img alt="Calendar" src={process.env.PUBLIC_URL + '/assets/header/calendar.svg'} style={{height: "26px", width: "24px"}}/>
+          </Link>
+          <SearchBar/>
+          <div className="notifications-button-container" data-tooltip-id="notifications" data-tooltip-content={config.tooltipMessage}>
+            {notifications.length > 0 ? (
+                <button className="notifications-button-new" onClick={handleNotificationsButtonClick} disabled={!isUserLoggedIn()}>
+                  <img alt="New notifications"
+                       src={process.env.PUBLIC_URL + '/assets/header/notifications.svg'} style={{height: "25px", width: "26px"}}/>
+                  <img className="notifications-dot" alt="New notifications"
+                       src={process.env.PUBLIC_URL + '/assets/header/notifications-dot.svg'} style={{height: "7px", width: "8px"}}/>
+                </button>
             ) : (
-                <div className="profile-component">
-                    <ModalLoginContainer/>
-                    <SignUp/>
-                </div>
+                <button className="notifications-button" onClick={handleNotificationsButtonClick}
+                        aria-label="Notifications-Button" disabled={!isUserLoggedIn()}>
+                  <img alt="New notifications" src={process.env.PUBLIC_URL + '/assets/header/notifications.svg'}
+                       style={{height: "25px", width: "26px"}}/>
+                </button>
             )}
+          </div>
+          {!isUserLoggedIn() && (
+              <Tooltip variant={"light"} id="notifications" place="bottom" style={{zIndex: 999}}/>
+          )}
+          {matches && (
+              <div className="profile-component">
+                <Link to="/profile" aria-label="To the profile">
+                  <img className="profile-picture-header" alt="Profile" src={userImage}/>
+                </Link>
+              </div>
+          )}
+          {showNotifications &&
+              <Notifications showNotifications={showNotifications} notifications={notifications} setNotifications={setNotifications}/>}
+          {isUserLoggedIn() ? (
+              <div className="profile-component">
+                <Link to="/profile" aria-label="To the profile">
+                  <img className="profile-picture-header" alt="Profile" src={userImage}/>
+                </Link>
+              </div>
+          ) : (
+              <div className="profile-component profile-home">
+                <ModalLoginContainer/>
+                <SignUp/>
+              </div>
+          )}
         </div>
     );
 };
\ No newline at end of file
diff --git a/src/main/web/src/organisms/login/ModalLoginContainer.css b/src/main/web/src/organisms/login/ModalLoginContainer.css
index 4cf668fa..43dee210 100644
--- a/src/main/web/src/organisms/login/ModalLoginContainer.css
+++ b/src/main/web/src/organisms/login/ModalLoginContainer.css
@@ -49,7 +49,7 @@
 }
 
 @media (max-width: 412px) {
-    .log-in-wrapper {
+    .profile-home {
         visibility: hidden;
         width: 0;
         height: 0;
diff --git a/src/main/web/src/organisms/signup/SignUp.css b/src/main/web/src/organisms/signup/SignUp.css
index c86e1d8d..6a0f54f8 100644
--- a/src/main/web/src/organisms/signup/SignUp.css
+++ b/src/main/web/src/organisms/signup/SignUp.css
@@ -97,7 +97,7 @@
 }
 
 @media (max-width: 412px) {
-    .signup-wrapper {
+    .profile-home {
         visibility: hidden;
         width: 0;
         height: 0;
diff --git a/src/main/web/src/scenes/Home/components/post/Post.css b/src/main/web/src/scenes/Home/components/post/Post.css
index 5a5bca9b..f6fd1591 100644
--- a/src/main/web/src/scenes/Home/components/post/Post.css
+++ b/src/main/web/src/scenes/Home/components/post/Post.css
@@ -106,33 +106,42 @@
 @media (max-width: 412px) {
   .post {
     width: 350px;
-    height: 200px;
+    height: 250px;
     margin-right: 20px;
   }
+  .home-post-interaction {
+    position: relative;
+    top: -100px;
+    right: 20px;
+  }
   .post-menu-container {
     top: -190px;
     margin-bottom: -85px;
     margin-left: 0;
   }
   .post-infos {
-    margin-top: -10px;
     width: 220px;
     gap: -20px;
   }
+  .post-title {
+    margin-top: -10px;
+    margin-left: 20px;
+  }
   .short-description {
     width: 220px;
     height: 100px;
+    margin-left: 20px;
   }
   .post-image {
-    height: 120px;
-    width: auto;
+    max-width: 125px;
+    height: auto;
     margin-top: -45px;
     margin-left: -10px;
   }
   .post-tags {
     flex-direction: column;
     position: absolute;
-    margin-top: 140px;
+    top: 40px;
     margin-left: -120px;
     gap: 5px;
   }
@@ -142,6 +151,9 @@
     right: 30px;
     margin-top: -10px;
   }
+  .footer {
+    margin-left: 20px;
+  }
 }
 
 @media (max-width: 375px) {
diff --git a/src/main/web/src/scenes/Profile/index.tsx b/src/main/web/src/scenes/Profile/index.tsx
index 60e416ba..73833c65 100644
--- a/src/main/web/src/scenes/Profile/index.tsx
+++ b/src/main/web/src/scenes/Profile/index.tsx
@@ -3,7 +3,7 @@ import DOMPurify from "dompurify";
 import "./index.css";
 import {Header} from "../../organisms/header/Header";
 import {Footer} from "../../organisms/footer/Footer";
-import {getUserId, logout} from "../../services/AuthService";
+import {getUserId, isUserLoggedIn, logout} from "../../services/AuthService";
 import {NavigateFunction, useNavigate} from "react-router-dom";
 import ScrollUpButton from "../../atoms/ScrollUpButton";
 import AdBlockOverlay from "../../organisms/ad-block-overlay/AdBlockOverlay";
@@ -19,6 +19,9 @@ import {
     updateUsername,
     updatePicture,
 } from "../../services/ProfileDataService";
+import {useMediaQuery} from "@mui/system";
+import ModalLoginContainer from "../../organisms/login/ModalLoginContainer";
+import SignUp from "../../organisms/signup/SignUp";
 
 interface UserData {
     username: string;
@@ -130,6 +133,9 @@ export const ProfilePage = () => {
         window.location.reload();
     }
 
+    const matches = useMediaQuery('(max-width: 412px)');
+    const isLoggedIn = isUserLoggedIn();
+
     useEffect((): void => {
         const fetchData = async (): Promise<void> => {
             const id: number | null = getUserId();
@@ -156,6 +162,33 @@ export const ProfilePage = () => {
 
     const disableEmailAndPasswordEdit: boolean = localStorage.getItem("oAuthUser") === "true";
 
+    if (matches) {
+        return (
+            <div className="page">
+                {adBlockDetected && <AdBlockOverlay/>}
+                <Header/>
+
+                <div className="profile-component">
+                    <ModalLoginContainer/>
+                    <SignUp/>
+                </div>
+
+                <Footer/>
+            </div>
+        );
+    }
+
+    if (!isLoggedIn) {
+        return (
+            <div className="page">
+                {adBlockDetected && <AdBlockOverlay/>}
+                <Header/>
+                <h2>You have to be logged in to view your profile</h2>
+                <Footer/>
+            </div>
+        );
+    }
+
     return (
         <div className="page">
             {adBlockDetected && <AdBlockOverlay/>}
@@ -168,12 +201,7 @@ export const ProfilePage = () => {
                         alt="Profile"
                         onClick={() => document.getElementById("fileInput")?.click()}
                     />
-                    <input
-                        id="fileInput"
-                        type="file"
-                        style={{display: "none"}}
-                        onChange={handlePictureChange}
-                    />
+                    <input id="fileInput" type="file" style={{display: "none"}} onChange={handlePictureChange}/>
                 </div>
                 <div className="followers">
                     <button className="followers-btn">{userData.amountFollower} Followers</button>