Profile

In this part of the documentation you will understand how profile page built and work.

Backend

There is no separate part of profile page on backend, but we can find different methods that lays in different modules.

N.B. Under "methods" we must understand the methods that can be found in the service file.

One, that changes the users information, we can find in User Admin module.

your_profile/api/src/users-admin/

Other methods we can find in Teams module and Team Memberships module.

your_profile/api/src/teams your_profile/api/src/team-memberships

What methods do we use from there?

All methods that related with team membership and how to leave and delete team, accept and decline invitation.

Methods:

• updateUserProfile (one that from users admin module)

• leaveTeam (this and next few from Teams module)

• deleteTeam

• acceptInvitation

• declineInvitation

• getUserMemberships (this on from Team memberships)

Frontend

You can access to profile by typing this address

http://your-website/profile

or from UserIconDropdown:

There you will find all main personal information and table with the teams where you are a member.

Personal Info

Interesting thing that you can find there is how we can edit our info.

By hovering on the elements of the personal info you will notice that the edit icon will pop up. Click on it and you will be able to edit related info.

How is this done?

Component that responsible for this is EditContainer, with using of the Motion Framer library. This component adapted to mobile devises.

How Motion Framer works read please related block of module and official documentation of it.

Handlers that control how this icon button works on mobile and desktop devices:

onMouseEnter={() => {
    if (!isSmallDevice) {
        setIsHovered(true);
        handleShow('editButton');
    }
}}
onMouseLeave={() => {
    if (!isSmallDevice) {
        setIsHovered(false);
        handleShow('editButton');
    }
}}
onTouchStart={() => {
    setIsHovered(prev => !prev);
    handleShow('editButton');
}}

Go there and take look how this component was built.

There are several such components wrapped in AntD Form component with submit handler. Submit handler called on each element when we just click somewhere on the empty space, if we do it from the desktop, or if we click on the edit icon again.

N.B. On mobile devices, the editing icon will appear if we click on a specific field with information. In general, it changes to a cross when we are in edit mode.

In each EditContainer component in params you will find submit function.

submit={() => form.submit()}

Inside that container you will find button with onClick handler.

onClick={() => {
    handleShow('editForm');
    if (show.editForm) {
        submit();
    }
}}

As you understand this is classic submit function but with some own specifics.

const fullName = values.fullName || '';
const [firstName, lastName] = fullName.split(' ');

const valuesToSend = {
    firstName: firstName || currentUser.firstName, // If the user doesn't provide a first name, keep the current one. same for last name
    lastName: lastName || currentUser.lastName,
    ...values,
};
// We cannot delete first or last name. Form simply won't allow us.

delete valuesToSend.photo;
delete valuesToSend.fullName;

if (compareObjectValues(valuesToSend, currentUser)) {
    return;
}

All manipulations with fullName are made to exclude "undefined" errors. Deleting photo value therefore, the photo is changed using AWS and Minio and there is also its own feature.

More details in the block about AWS.

Deleting fullName is done because the database has these fields separated and we do not need to send an integer to the server.

This is followed by a comparison of the data that we change. If the new data does not differ from the old ones, the request will not be sent.

Teams Table

In table with your teams you can control your membership in them. Accepting and declining the invitation to the new teams.

This table is more simpler version of table that we can find in Leads or Businesses pages and there is no unique features.

N.B. When you will try to leave the team we will be asked to hand over control of the team to another team member, whom you choose yourself in the form that pops up on the right side.