Displaying owner's username, profile picture, and comment

Is there any code in wix wherein I can have like a facebook feature? Any members can post and other members can see the name of the owner (username) who have posted a content, the owner’s profile picture and his comment or post. I kept on finding solution for this, but I haven’t find one.

Hope someone could help me with this problem. :sweat:

Hello aero, yes i think it is possible exept the idea with the profile-pic.
In this case i am unsure.

Example-Situation: (little Brainstorming —> how2 get what we need?)
I am a user on your site, and use a form to leave a comment. I will surely to have press aBUTTON to submit, to here we have already our event which will be the door to get what you want.

By pressing a button we can start a function:

function xxx () {   } // you can name the function as you want, i am a lazy person, i just name it "xxx"

And now we wanna get our username of the current user who has created this new COMMENT (in this case its me) :grin:
So where to find this information of the user? Of course in the “PrivateMemberData”. So let’s do it…

We have now several options how to get what we want, for example by quering the database of our choice (“PrivateMemberData”) …

import wixData from 'wix-data';

wixData.query("PrivateMemberData")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0]; 
    } else {
    
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );

Now you should have all the Information of “PrivateMemberData”

When you use CONSOLE.LOG, you can visualize all the data of this data-query.

console.log (results.items.title[0])
console.log (results.items.name[0])
console.log (results.items.firstName[0])
console.log (results.items.lastName[0])

//do not know exactly if this works .....
console.log (results.items.picture[0].url)
//...or....
console.log (results.items.picture[0].link)
//..to get the url of the Profile-Pic....

The last thing is to get this function be started by a klick on a button.

export function button1_click(event) {xxx()}

And now you can look at the results in the CONSOLE.

I did not test this CODE, so i hope it will run without any errors.

Hi russian-dima! Thank you very much for your reply! May I know what will I put after the “function xxx” that you have said? Sorry I’m not good at coding… And also which part of the code should I put the console?

Ok i have to correct myself.
My suggstion will not work 100%, because “PrivateMembersData” will not give any informations, when quering it. This DATABASE is closed for all member (no access-permissions).

There are two different “bypass”-ways to solve this.

  1. You have to create your own CUSTOM-REGISTRATION-FORM and connect an additional CUSTOM MEMBER-DATABASE, which will collect USER-DATA in a separated DATA-BASE. Then you will be able to READ-OUT this USER-INFOS from your own CUSTOM MEMBER-DATABASE.

  2. You can work with User-ID or email-address, but this is just a pseudo-solution.

Your biggest problem to realize your project will be to get the informations out of the “PrivateMembersData”.

Informations about Registrations / LogIn-mechanisthe LogIn-System and it’s issues, you can find in some of this examples here…

https://russian-dima.wixsite.com/meinewebsite/user-infos
https://russian-dima.wixsite.com/meinewebsite/blank-9
https://russian-dima.wixsite.com/meinewebsite/automatic-registration

You can also do a search in forum and you will find a lot of stuff to read about this topic.

And in addition to all this, i have prepared a little example, for you.
It still do not show the USER of the COMMENT, but it already works.

I will do the rest later…:grin:

https://russian-dima.wixsite.com/meinewebsite/comments

Oh okay… by the way, I forgot to tell you that I didn’t use the “PrivateMembersData” collection, but instead I made a new database which I just called it “Member”. All of the member’s username, email, profile picture, phone number will be stored there.

Then you shouldn’t have any problems. But i think Ahmad will also give some good infos about it, in few minutes…

Hi :raised_hand_with_fingers_splayed:

You can use the getUser( ) function on the Backend to return any details about the user by passing its ID.

Backend Code
Create a function on the Backend to return user details to the Frontend :

export function getMemberDetails(userId) {
	return wixUsersBackend.getUser(userId)
}	

Fronend Code
Import and call the function to retrieve the user details from the Backend:

import { getMemberDetails } from 'backend/getMember.jsw';
import wixUsers from 'wix-users';

let userDetails = await getMemberDetails()

Make sure to call the function after the page is ready to avoid any possible errors.

Hope this helps~!
Ahmad

Nice, i have to check this out! THX Ahmad!

You can use the get( ) function from wix-data module to retrieve user details by passing its ID and the collection name to the function as its parameters.

let userId = // The ID of the current user
wixData.get("Member", userId)

NOTE: The provided ID must be the ‘_id’ field in that collection, otherwise the function will return null or the promise might be rejected.

If you don’t prefer the get( ) function, you can still use the query( ) function to retrieve the user details.

You’re welcome :blush: I hope this helps

Damn, have no luck with Back-End-Coding xD.

Got this one…

Cannot find module 'Backend/getMember.jsw' in 'public/pages/m9gne.js'

My Front-End…

import wixData from 'wix-data' 
import wixUsers from 'wix-users';
import {getMemberDetails} from 'Backend/getMember.jsw';

$w.onReady(async function () {let userDetails = await getMemberDetails()
    });

My Back-End… (jsw-file-name = “getMemberDetails.jsw”

import wixUsersBackend from 'wix-users-backend';
export function getMemberDetails(userId) {return wixUsersBackend.getUser(userId)}

What do i wrong?
Sorry first time Back-End-Coding :grin:

Thank you very much for your reply Ahmad! I’ll try check if it works for me. :blush:

@russian-dima - getMemberDetails is a function on the Backend, not the Backend module name, and if it happens to have the same name for the module and the function, you need to update the module directory when importing it.

If your module name is getMember , and the function is getMemberDetails , then import the module like this:

import { functionName } from module directory
import { getMemberDetails } from 'Backend/getMember.jsw';

@Eyeglasses You’re welcome :blush:

yeah me too… first time using backend. not even expert in coding :sweat_smile:

There will always be a first time for anything :+1:

getMemberDetails is a function on the Backend
Ok this part i understand .

export function getMemberDetails(userId) {return wixUsersBackend.getUser(userId)}

A (export) function called “getMemberDetails”, which gets the User-ID and returns it, right?

Here you can see the existing module called —> “getMember.jws”


With your suggested code in it…

import wixUsersBackend from 'wix-users-backend';

export function getMemberDetails(userId) {return wixUsersBackend.getUser(userId)}

I deleted the whole back-End-module and created a new one “getMember.jws”.
Also no effect. :persevere:

One more time my Front-end

import wixData from 'wix-data' 
import wixUsers from 'wix-users';
import {getMemberDetails} from 'Backend/getMember.jsw';

$w.onReady(function () {
 //let userDetails = await getMemberDetails()
 //console.log(userDetails)
 //get_UserData()  
    });

Turned off all other actions, to be sure it is not caused by something else, but still…

I hate Back-End xD

Still do not understand what goes wrong?

  1. Module exists —> CHECKED!
  2. Module-name = “getMember” —> CHECKED!
  3. The right import-procedure —> CHECKED!
import { getMemberDetails } from 'Backend/getMember.jsw';

Disabled all unessascary functions… (CHECKED!)

$w.onReady(function () {
 //let userDetails = await getMemberDetails()
 //console.log(userDetails)
 //get_UserData()  
    });

What else?

Oh I’m really sorry :joy::joy:

I wrote this answer here without proofing, the backend word in the import statement needs to start with small letter.

import { getMemberDetails } from 'backend/getMember.jsw';

Try it out and tell me if it worked.

:laughing:damn xDDDDDDDD
I’ve already started to doubt my skills xD
Yeah sure, i will try it out.
But this was a good first swimming in the cold water of BACK-END xD

Comme le français voudrait dire, ET VOILA !
It works! xD

Now back to the shitty “PrivateMembersData” which makes me very often headaches!

This cold water will make you remember the Backend to the rest of your life :sweat_smile::sweat_smile: