# Profile

## Backend

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

{% hint style="warning" %}
N.B. Under "methods" we must understand the methods that can be found in the service file.
{% endhint %}

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:

<figure><img src="/files/vTU8EpBTeO0QHbDkLfdf" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/1CJSjc1CMQEYdwhMyKql" alt=""><figcaption></figcaption></figure>

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](https://www.framer.com/motion/) of it.

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

```javascript
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 ](https://ant.design/components/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.&#x20;

{% hint style="warning" %}
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.
{% endhint %}

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

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

Inside that container you will find button with onClick handler.

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

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

```javascript
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.&#x20;

More details in the block about AWS.&#x20;

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

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.

{% hint style="warning" %}
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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://intercode.gitbook.io/intercode-saas-kit/pages/profile.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.