Skip to content
This repository has been archived by the owner on Sep 29, 2024. It is now read-only.

Deleted unused logs #958

Merged
merged 1 commit into from
Jun 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/main/web/src/organisms/header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
112 changes: 61 additions & 51 deletions src/main/web/src/organisms/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ 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[]>([]);
const [showNotifications, setShowNotifications] = useState(false);
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);
Expand Down Expand Up @@ -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>
);
};
2 changes: 1 addition & 1 deletion src/main/web/src/organisms/login/ModalLoginContainer.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
}

@media (max-width: 412px) {
.log-in-wrapper {
.profile-home {
visibility: hidden;
width: 0;
height: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/main/web/src/organisms/signup/SignUp.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
}

@media (max-width: 412px) {
.signup-wrapper {
.profile-home {
visibility: hidden;
width: 0;
height: 0;
Expand Down
22 changes: 17 additions & 5 deletions src/main/web/src/scenes/Home/components/post/Post.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -142,6 +151,9 @@
right: 30px;
margin-top: -10px;
}
.footer {
margin-left: 20px;
}
}

@media (max-width: 375px) {
Expand Down
42 changes: 35 additions & 7 deletions src/main/web/src/scenes/Profile/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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/>}
Expand All @@ -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>
Expand Down
Loading