Skip to content

Commit

Permalink
Merge pull request #99 from Valik3201/issue-9-codeReductionAndFixingP…
Browse files Browse the repository at this point in the history 
…roblem

Issue 9 code reduction and fixing problem
  • Loading branch information
@Valik3201
Valik3201 committed Jan 6, 2024
2 parents 6c4b2f4 + 95ee6d3 commit fdfe1c1
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 104 deletions.
25 changes: 9 additions & 16 deletions src/js/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@ import { onAuthStateChangedListener } from './auth/authStateListener.js';
const signUpModal = document.querySelector('.sign-up-modal');
const signInModal = document.querySelector('.sign-in-modal');

const signUpModalMobile = document.querySelector('.sign-up-button-mobile-menu');

export const signUpButton = document.querySelector('.sign-up-button');
export const logOutButton = document.querySelector('#log-out');

const logOutMobileMenuButton = document.querySelector('#mobile-log-out-button');
const logOutMobileButton = document.querySelector('#mobile-log-out-button');

const switchToSignInButtons = document.querySelectorAll('[data-switch="sign-in"]');
const switchToSignUpButtons = document.querySelectorAll('[data-switch="sign-up"]');
Expand Down Expand Up @@ -41,11 +39,6 @@ signUpButton.addEventListener('click', function () {
showForm(currentForm);
});

signUpModalMobile.addEventListener('click', function () {
currentForm = 'sign-up';
showForm(currentForm);
});

switchToSignInButtons.forEach(button => {
button.addEventListener('click', function () {
currentForm = 'sign-in';
Expand Down Expand Up @@ -127,21 +120,21 @@ logOutButton.addEventListener('click', async function () {
}
});

export const handleLogout = async () => {
logOutMobileButton.addEventListener('click', async function () {
try {
await signOut(auth);
await signOutUser();
} catch (error) {
console.error('Error during logout:', error);
console.error('Logout error:', error);
}
};
});

logOutMobileMenuButton.addEventListener('click', async function () {
export const handleLogout = async () => {
try {
await signOutUser();
await signOut(auth);
} catch (error) {
console.error('Logout error:', error);
console.error('Error during logout:', error);
}
});
};

const toggleDropdownMenu = () => {
const dropdownMenu = document.getElementById('user-dropdown-menu');
Expand Down
3 changes: 0 additions & 3 deletions src/js/auth/authStateListener.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ export const onAuthStateChangedListener = userNameDisplay => {
if (user) {
const displayName = user.displayName;

const userNameDisplayMobile = document.querySelector('#user-name-display-mobile');

userNameDisplay.textContent = displayName;
userNameDisplayMobile.textContent = displayName;
userProfile.classList.remove('hidden');
userButton.classList.remove('hidden');
signUpButton.classList.add('hidden');
Expand Down
39 changes: 8 additions & 31 deletions src/js/mobileMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,30 @@ import { auth } from './auth/firebase';

const openMenuButton = document.querySelector('.open-mobile-menu');
const closeMenuButton = document.querySelector('#close-sing-up-mobile-menu');
const closeUserMenuButton = document.querySelector('#close-user-mobile-menu');
const windowSize = window.matchMedia('(min-width: 768px)');

const mobileMenuSingIn = document.querySelector('#sing-in-mobile-menu');
const mobileMenuSingUp = document.querySelector('#sing-up-mobile-menu');

const openMenu = () => {
onAuthStateChanged(auth, user => {
if (user) {
mobileMenuSingIn.style.display = 'block';
setTimeout(() => {
mobileMenuSingIn.style.transform = 'translateX(0)';
}, 1);
} else {
mobileMenuSingUp.style.display = 'block';
setTimeout(() => {
mobileMenuSingUp.style.transform = 'translateX(0)';
}, 1);
}
});
mobileMenuSingUp.style.display = 'block';
setTimeout(() => {
mobileMenuSingUp.style.transform = 'translateX(0)';
}, 1);
};

const closeMenu = () => {
onAuthStateChanged(auth, user => {
if (user) {
mobileMenuSingIn.style.transform = 'translateX(-100%)';
setTimeout(() => {
mobileMenuSingIn.style.display = 'none';
}, 500);
} else {
mobileMenuSingIn.style.transform = 'translateX(-100%)';
setTimeout(() => {
mobileMenuSingUp.style.transform = 'translateX(-100%)';
}, 500);
}
});
mobileMenuSingUp.style.transform = 'translateX(-100%)';
setTimeout(() => {
mobileMenuSingUp.style.transform = 'translateX(-100%)';
}, 500);
};

//closing mobile menu function if window size is bigger than 768px
function mobileMenuClose(event) {
if (event.matches) {
mobileMenuSingIn.style.display = 'none';
mobileMenuSingUp.style.display = 'none';
}
}

openMenuButton.addEventListener('click', openMenu);
closeMenuButton.addEventListener('click', closeMenu);
closeUserMenuButton.addEventListener('click', closeMenu);
windowSize.addEventListener('change', mobileMenuClose);
65 changes: 11 additions & 54 deletions src/partials/home/home-header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
</a>
<div class="switch-button-div-mobile">
<label for="t-switch-mobile-menu" class="switch">
<input type="checkbox" class="theme-switch" id="t-switch-mobile-menu" checked />
<input type="checkbox" class="theme-switch" id="t-switch-mobile-menu" checked />
<span class="slider"></span>
</label>
<button class="close-button" id="close-sing-up-mobile-menu">
Expand All @@ -64,56 +64,16 @@
</div>
</div>
<div class="mobile-menu-body">
<button
id="mobile-sing-up-button"
type="button"
class="sign-up-button-mobile-menu sign-up-modal-open"
>
<span class="sign-up-text">Sign up</span
><svg class="arrow-right-icon" width="20px" height="20px">
<use href="/src/images/icons.svg#icon-arrow-right"></use>
</svg>
</button>
<div class="background-cover-container">
<img src="/src/images/mobile-background-img.png" alt="pictur of books covers" />
</div>
</div>
</div>
<!--user mobile menu-->
<div class="mobile-menu-field" id="sing-in-mobile-menu">
<div class="mobile-header-items">
<a href="/src/index.html" class="logo-header mobile-logo-header">
<svg class="logo-icon" width="24px" height="24px">
<use href="/src/images/icons.svg#icon-logo"></use>
</svg>
<p>Bookshelf</p>
</a>
<div class="switch-button-div-mobile">
<label for="t-switch-user-mobile-menu" class="switch">
<input type="checkbox" class="theme-switch" id="t-switch-user-mobile-menu" checked />
<span class="slider"></span>
</label>
<button class="close-button" id="close-user-mobile-menu">
<svg class="close-button-icon" width="14px" height="14px">
<use href="/src/images/icons.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="mobile-menu-body">
<div class="position-of-mobile-body">
<div class="user-mobile-profile">
<div>
<svg class="user-icon-mobile" width="12" height="16" fill="#4F2EE8">
<use href="/src/images/icons.svg#icon-user"></use>
</svg>
<include src="./partials/authorization/auth.html"></include>
</div>
<div id="user-name-display-mobile"></div>
</div>
<div class="nav-mobile-position">
<ul class="nav-mobile-list">
<div class="nav-mobile-position">
<ul class="nav-mobile-list">
<li>
<a href="/src/index.html" class="nav-list__link nav-list__link--active home-link home-text">HOME</a>
<a
href="/src/index.html"
class="nav-list__link nav-list__link--active home-link home-text"
>HOME</a
>
</li>
<li>
<div class="nav-list__link shopping-link">
Expand All @@ -126,11 +86,8 @@
</li>
</ul>
</div>
<button
id="mobile-log-out-button"
type="button"
class="log-out-button-mobile-menu"
>
<div>
<button id="mobile-log-out-button" type="button" class="log-out-button-mobile-menu">
<span class="sign-up-text">Log out</span
><svg class="arrow-right-icon" width="20px" height="20px">
<use href="/src/images/icons.svg#icon-arrow-right"></use>
Expand Down

0 comments on commit fdfe1c1

Please sign in to comment.