Problems with collapse and expand

Ask the community
, ,
1

Description

When the page are loading the system shall automatically check if the member are currently renting a specific video and if that is the case the dark lamp image shall collapse and the bright lamp image shall expand but that doesn´t occur whatever I do. I have tried and tried with different alternatives but never succede with anything. The “expiryDate1” and “expiryDate2” fields etc. are empty if the member are not renting the videos and they are filled with a date if there is a renting time for the videos. Now you should understand my pretty simple plan.

So my main question is why none of this two pretty “easy” codes work as intended? The dark lamp image doesn´t collapse and the bright lamp doesn´t expand. Extremely frustrating because I can´t understand why it refuse. I have earlier tried with a repeater but that made it even more complicated so now I have connected everything separately.

Alternative 1:

wixData . get ( “Members” , wixUsers . currentUser . id )
return wixData . query ( “Rentingmembers” )
. eq ( ‘expiryDate1’ )
. find ()
. then (( results ) => {
let date = $w ( “#dataset5” ). getCurrentItem (). expiryDate1 ;
if ( results . length === 0 ) {
console . log ( “Not renting” );
} else {
$w ( “#date1” ). text = date . toLocaleDateString ()
$w ( “#image138” ). collapse ();
$w ( ‘#image139’ ). expand ();
console . log ( date )
}
});
});

Alternative 2:

wixData . **get** ( "Members" ,  wixUsers . currentUser . id ) 
    $w ( "#dataset5" ). onReady (() => { 
    **let**  date  =  $w ( "#dataset5" ). getCurrentItem (). expiryDate2 ; 
    **if**  ( date . length  ===  0 ) { 
    console . log ( "Not renting" ); 
    }  **else**  { 
           $w ( "#date2" ). text  =  date . toLocaleDateString () 
           $w ( "#image151" ). collapse (); 
           $w ( '#image140' ). expand ();  
           console . log ( date ); 
}

});

2

Generate something like…

import wixData from 'wix-data';
import { currentMember } from 'wix-members';

//------------USER-INTERFACE---------------------------
const DATABASE = "Members";
//const dbField = "xxxxxxxxxx";
//------------USER-INTERFACE---------------------------

$w.onReady(async function() {console.log("Page ready...");
    let options = {fieldsets: [ 'FULL' ]};
    //------------[ FUNCTION-1 ]--------------
    let currentMemberData = await getCurrentUserData(options);
    console.log("Found MEMBER  -->" + " / "+currentMemberData);
    let userID = currentMemberData[0]._id;
    console.log(userID);
    //------------[ FUNCTION-2 ]--------------
    let items = await getDataFromDB(userID);
    console.log("Found ITEMS  -->" + " / " + items);
});
//------------

function getCurrentUserData(options) {
    currentMember.getMember(options)
    .then((member) => {
        const id = member._id;
        const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
        return member;
    }).catch((error) => {console.error(error);});   
}
//------------

function getDataFromDB(userID) {
    wixData.get(DATABASE, userID)
    return wixData.query("Rentingmembers")
    .eq('expiryDate1')
    .find()
    .then((results) => {
        let date = $w("#dataset5").getCurrentItem().expiryDate1;

        if (results.length === 0) {console.log("Not renting");}
        else {
            $w("#date1").text = date.toLocaleDateString()
            $w("#image138").collapse();
            $w('#image139').expand();
            console.log(date)
        }
    }); 
}
//------------

Do not use the DEPRICATED —> Wix-Users-API ←

3

Thank you Ninja but what do the dbField represent? Is it member ID (_id) or is it the field for expiration date of a rented video? :wink: It may be a stupid question but I wanna know if you already in the beginning of the code are combining the check of current member with checking if the expirydate-field is empty or not?

Another question; I prefer to use nickname instead of firstName and lastName so why can I not write in this way instead? (“nickname” become redmarked). <— hm?

const nickname = ${ member . contactDetails .nickname};

4

As already mentioned, this code was quick-coded. It is surely not complete.
You will have to expand and optimize it for your own needs.

When you take a look at the code you will find this one…

.eq('expiryDate1')

Now on the second look, i recognise that i have some copy % paste errors, also including errors from your provided version, like mentioned here.

If you take a look onto the Wix-Data-API regarding —> .eq(xxx, xxx)-statement → FILTERING EQUALS SOME VALUE IN SOME SPECIFIC DB-FIELD, you will understand that you have an ERROR in your previous provided code.

And my error was to copy & paste it into my version.

So whats wrong in this mentioned CODE-LINE?

.eq('expiryDate1')

Why this is —> WRONG ???

EXACTLY!!! —> Because …after reading this…

You now understand that you have forget to inculde an important part —> THE VALUE !

RIGHT-VERSION…

.eq(dbField, value)

Now your questions comes into place…

Thank you Ninja but what do the dbField represent? Is it member ID (_id) or is it the field for expiration date of a rented video? :wink:
So you already recognised, that something is missing, or seems to be strange.

EXACTLY!!! —> Let’s correct the code…

import wixData from 'wix-data';
import { currentMember } from 'wix-members';

let date;
//------------USER-INTERFACE---------------------------
const DATABASE = "Rentingmembers";
const dbField = "_owner";
//------------USER-INTERFACE---------------------------
let options = {fieldsets: [ 'FULL' ]};


$w.onReady(function() {
    console.log("Page ready...");
    $w('#dataset5').onReady(async()=>{
        let currentItem = $w("#dataset5").getCurrentItem();
        date = currentItem.expiryDate1;
        
        //------------[ FUNCTION-1 ]--------------
       let currentMemberData = await getCurrentUserData(options);
        console.log("Found MEMBER  -->" + " / "+currentMemberData);
        let userID = currentMemberData[0]._id;
        console.log(userID);
        
        //------------[ FUNCTION-2 ]--------------
        let items = await getDataFromDB(userID);
        console.log("Found ITEMS  -->" + " / " + items);    
    });    
});
//------------


function getCurrentUserData(options) {
    currentMember.getMember(options)
    .then((member) => {
        const id = member._id;
        console.log("ID: ", id);
        const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
        console.log("Fullname: ", fullName);
        return member;
    }).catch((error) => {console.error(error);});   
}
//------------


function getDataFromDB(userID) {
    wixData.query(DATABASE)
    .eq(dbField, userID).find()
    .then((results) => {
        if (results.length > 0 ) {
           console.log("Some-Data found!");
           console.log("Got results 4 specific OWNER-ID.");
           console.log(results);
           console.log(results.items);
           console.log(results.items[0]);
           console.log(results.items[0].title);
           console.log(results.items[0].expiryDate1);
           //----------------------
           return results.items;           
        }
        else {console.log("No DATA found!!!");}
    }); 
}
//------------

So as you can see, you again are mixing everything together.
-using Wix-Data together with DATASET (not waiting for DATASET to be → READY <—).
-mixing get and query.
-using old depricated API.

Start to use the —> CONSOLE <— —> to be able to understand your own code.

But i think your code is still not complete. Modify the code by your own further needs.

5

You are a funny and pedagogic teacher but have you taken into consideration that this is about two databases? “Rentingmembers” is the collection where I have the Expiry date fields for each video and “Members” is my custom member collection but it looks like you are trying to check for current logged in member in the “Rentingmembers” collection. I can´t find “Members” anywhere :wink:

And I don´t have the last name of any member so it is meaningless to write both their first and last name. I prefer to use their unique nicknames instead but have not found out how to write that with the new currentMember-system. currentUser is easier to understand so I wonder why they changed to a more complicated version? I guess that it is more optimised in some way but it is not user-friendly.

I have tried to make console.log work with my pages but I never succede because the “js”-page I am told to use doesn´t seem to exist so I finally gave up.

6

You never showed any SCREENSHOTS of your project or at least of your DATABASE-STRUCTURE or DATASET-SETUP.

You know —> THE MORE INPUT —> THE MORE OUTPUT <—

You are not able to work with CONSOLE ?

You have the CONSOLE → DIRECTLY INSIDE OF YOUR WIX-EDITOR <----
If this does not work —> then PUBLISH your → SITE <— and use the —> CONSOLE <— ----> inside your —> BROWSER <----, by pressing —> F12 on your Keyboard (google-chrome/MSI-Explorer), or which ever Browser you use.

Once you are able to work with the → CONSOLE <— you won’t have that much questions anymore. :wink:

And do not forget —> A GOOD CODER ----> NEVER GIVES-UP !!!

P.S.: And the example with the FULL-NAME was already included just right from the VELO-API. All the integrated little example console-logs, should show you the way to your success.

Do you get ERRORS, when running the code?
Do you get RESULTS when running the CODE?
If you don’t get RESULTS, do you get PART-RESULTS?
At which LINE OF CODE, does your CODE —> STOP ???

All these questions you should ask yourself.
The answers will lead you to your wished aim.

7

Thanks! I gave you a “Best answer” for this because I didn´t know that you could press F12 to get a console.log overview in your browser :blush: I agree with that many questions would been unecessary if I knew this already a year ago.

8

Unfortunately this is what I get by pressing F12 when on the editing page and when opening in live view. Frankly - I don´t get any useful information at all :expressionless:

554×573 122 KB

550×749 199 KB

9

This is my code now (according to your suggestion) but it still doesn´t even find what member is renting or not renting a specific video and the flashing lamp is never expanded. Like I earlier wrote this is about two collections - 1. “Members”, and 2. “Rentingmembers”. I have never experienced a harder nut to crack when it comes to coding and one of your colleagues honestly told me that it is hard even for him. It should not be that hard but it obviously is so don´t expect an amateur like me to solve it by my own :smirk:

import { currentMember } from ‘wix-members’ ;
import wixLocation from ‘wix-location’ ;
import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;

const DATABASE = “Members” ;
const dbField = “_id” ;
$w . onReady ( async function () { console . log ( “Page ready…” );
let options = { fieldsets : [ ‘FULL’ ]};
//------------[ FUNCTION-1 ]--------------
let currentMemberData = await getCurrentUserData ( options );
console . log ( “Found MEMBER -->” + " / " + currentMemberData );
let userID = currentMemberData [ 0 ]. _id ;
console . log ( userID );
//------------[ FUNCTION-2 ]--------------
let items = await getDataFromDB ( userID );
console . log ( “Found ITEMS -->” + " / " + items );
});
function getCurrentUserData ( options ) {
currentMember . getMember ( options )
. then (( member ) => {
const id = member . _id ;
const loginEmail = ${ member . contactDetails . emails };
return member ;
}). catch (( error ) => { console . error ( error );});
}
function getDataFromDB ( userID ) {
wixData . get ( DATABASE , userID )
return wixData . query ( “Rentingmembers” )
. eq ( ‘expiryDate1’ )
. find ()
. then (( results ) => {
let date = $w ( “#dataset5” ). getCurrentItem (). expiryDate1 ;

    **if**  ( results . length  ===  0 ) { console . log ( "Not renting" );} 
    **else**  { 
        $w ( "#date1" ). text  =  date . toLocaleDateString () 
        $w ( "#image138" ). collapse (); 
        $w ( '#image139' ). expand (); 
        console . log ( date ) 
   } 
});

}
});

10

Once you have mastered → CONSOLE-LOGGING & DEBUGGING <—
You will be able to code —> EVERYTHING <—.

Ok however, let’s crack the nut!!!

Do it step by step !!!

First you will now make sure, that you get all DATA about the current logged-in-user…let’s code it and debug our FAILURES made in the past…

import { currentMember } from 'wix-members';

$w.onReady(async function() {
    console.log("Page ready...");
    let options = {fieldsets:['FULL']};
    let currentMemberData = await getCurrentUserData(options);
    console.log("Found MEMBER: "+" / "+currentMemberData);
});


function getCurrentUserData(options) {
    return currentMember.getMember(options)
    .then((member) => {console.log("MEMBER: ", member);
        const id = member._id;
        const loginEmail=`${member.contactDetails.emails}`;
        return member;
    }).catch((error) => {console.error(error);});   
}

This one should give you back as result, something like…

1565×310 29.5 KB

First step done, you got all DATA about the current logged-in-user !!!

Continue to debug your old code. Make it work again!

11

Thank you very much! I will check it out later today and try to implement your information in a good way :wink:

12

What do you think about this combination between my two databases “Members” and “Rentingmembers”? I get no red markings but it does not work as intended (the dark lamp is not collapsed and the flashing lamp isn´t expanded). Can you see what is probably wrong? The first part of the code is taken from a working page to relocate a logged in member to his account page but here I have replaced the location with a query to check if the guy is renting a specific video during a time frame (expiryDate1). The combination looks very logical to me but refuses to work like with my earlier codes :disappointed_relieved:

let memberId , memberEmail ;

async function checkIfLoggedIn (){
const thisMember = await currentMember . getMember ();
return thisMember ? true : false ;
}
$w . onReady ( () => {

authentication . onLogin ( **async**  ( member ) => { 
  **const**  loggedInMember  =  **await**  member . getMember ();  
  memberId  =  loggedInMember . _id ; 
  memberEmail  =  loggedInMember . loginEmail ; 
  **return**  wixData . query ( "Members" ) 
  . eq ( "_id" ,  memberId ) 
  . find () 
  . then (( results ) => { 
    **if**  ( results . length  ===  0 ) { 
      console . log ( results . items [ 0 ]); 
    }  **else**  { 
    **return**  wixData . query ( "Rentingmembers" ) 
  . eq ( 'expiryDate1' ) 
  . find () 
  . then (( results ) => { 
    **let**  date  =  $w ( "#dataset5" ). getCurrentItem (). expiryDate1 ; 
    **if** ( results . items . length  >  0 ) { 
      console . log ( results . items [ 0 ]); 
    }  **else**  { 
    $w ( "#date1" ). text  =  date . toLocaleDateString () 
    $w ( "#image138" ). collapse (); 
    $w ( '#image139' ). expand (); 
        console . log ( date ) 
    } 
   }) 
   } 
 }) 
})

})
})