Button Label Does Not Refresh

Ask the community
,
1

Help please, I suspect this is a simple one, but I am unable to find a solution.

The button in the middle of the page (Sign Up) does not change label after login, unless I do a refresh (F5).

This is the page prior to login…

1000×625 186 KB

This is the page immediately after login…

1000×625 187 KB

This is the page after I press F5 and the page reloads…

1000×625 187 KB

All buttons, including My Profile, are governed by the same function (setButtons). But for some reason #profileButton and #textWelcome work without a need for F5, while the two #bookButton only change label after F5.

Here is the code that manages the buttons behaviours.

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

export function setButtons(showButtons) {
if (showButtons) {
$w(“#loginButton”).label = “Logout”;
$w(“#profileButton”).show();
$w(“#textName”).show();
$w(“#textWelcome”).show();
}
else {
$w(“#loginButton”).label = “Login/Signup”;
$w(“#profileButton”).hide();
$w(“#textName”).hide();
$w(“#textWelcome”).hide();
$w(“#bookButton1”).label = “Sign up”;
$w(“#bookButton2”).label = “Sign up”;
}
}

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
setButtons(true);
}
else {
setButtons(false);
}
} );

export function loginButton_click() {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixLocation.to(“/”);
wixUsers.logout()
.then( () => {
// update buttons accordingly
setButtons(true);
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in  
wixUsers.promptLogin( {"mode": "login"} ) 
  .then( (user) => { 
    userId = user.id; 
    return user.getEmail(); 
  } ) 
  .then( (email) => { 
    // check if there is an item for the user in the collection 
    userEmail = email; 
    return wixData.query("Users") 
      .eq("_id", userId) 
      .find(); 
  } ) 
  .then( (results) => { 
    // if an item for the user is not found 
    if (results.items.length === 0) { 
      // create an item 
      const toInsert = { 
        "_id": userId, 
        "email": userEmail 
      }; 
      // add the item to the collection 
      wixData.insert("Users", toInsert) 
        .catch( (err) => { 
          console.log(err); 
        } ); 
    } 
    // update buttons accordingly 
    setButtons(true); 
  } ) 
  .catch( (err) => { 
    console.log(err); 
  } );

}
}

2

Hi,
I noticed that in the if-else statement ( setButtons function ), you haven’t updated all text elements. As a general recommendation, I recommend splitting the login function to multiple functions in order to locate and debug your code. Moreover, I recommend checking out this article for debugging and testing your site. You can also use the Developer tools to debug your code.

Good luck,
Tal,

3

Thank you Tal. I thought it was a really easy one, but I clearly missed the obvious. After adding two lines in the ‘if’ segment of the function, all is working well.
Much appreciated, thank you for the input.
Oberdan