Skip to content

Commit

Permalink
Merge pull request #958 from SE-TINF22B6/frontend
Browse files Browse the repository at this point in the history 
Deleted unused logs
  • Loading branch information
@maxschwinghammer
maxschwinghammer committed Jun 13, 2024
2 parents 7ff6cc1 + 3713931 commit 46b286e
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 67 deletions.
10 changes: 8 additions & 2 deletions src/main/web/src/organisms/header/Header.css
View file
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
View file
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
View file
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
View file
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
View file
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
View file
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

0 comments on commit 46b286e

Please sign in to comment.