User Settings

At this section you will find all personal settings. Some of them are standalone features, you can navigate to them through link bellow.

Settings link

• Two-step Authentication

• Impersonation

• App Tour

Page

User settings have their own page. You can access it from this menu.

or by typing

http://your_website/user-settings

Go there and look at what setting do you have. Simple settings with switchers but all the mechanics you can learn from separate blocks.

Switcher handler

What can be mentioned is the function that handles the request based on what switcher we switch.

    const handleSwitchChange = async (value, type) => {
        setLoading(prev => ({ ...prev, [type]: true }));

        try {
            switch (type) {
                case 'impersonationAllowed':
                    await updateProfile({ impersonationAllowed: value });
                    break;
                case 'tourCompleted':
                    await updateUserTourStatus();
                    fetchUser();
                    break;
                default:
                    break;
            }

            setOptions(prevState => ({
                ...prevState,
                [type]: value,
            }));

            globalNotification.open({
                type: notificationType.SUCCESS,
                message: t('notification.save-success.message'),
                description: t('notification.save-success.description'),
                placement: 'top',
            });
        } catch (err) {
            const errorCode = err.response.data?.code;

            globalNotification.open({
                type: notificationType.ERROR,
                message: t(`apiResponses:${errorCode}.message`),
                description: t(`apiResponses:${errorCode}.description`),
                placement: 'top',
            });
        } finally {
            setLoading(prev => ({ ...prev, [type]: false }));
        }
    };

The handleSwitchChangeis universal function that manages the behavior when a switch toggle is changed, updating settings and notifying the user accordingly. You can apply it every new switcher but edit the switch logic inside.

Here’s a breakdown of how it works:

1. Set Loading State: It first sets a loading state specific to the type (e.g., 'impersonationAllowed' or 'tourCompleted'), so the UI can show loading feedback for the action in progress.

2. Process Switch Type: The function checks the type to determine which action to perform:

   • If the type is impersonationAllowed, it calls updateProfile to update the user's profile with the new value.

   • If the type is tourCompleted, it calls updateUserTourStatus to update the tour status and then fetches the updated user data by calling fetchUser().

3. Update Options: After successfully executing the action, it updates the options state by setting the value of the corresponding type in the options object.

4. Show Success Notification: Upon successful completion, it displays a global success notification, retrieving translated message and description strings via t.

5. Handle Errors: If an error occurs:

   • It captures the error code from the response (err.response.data?.code).

   • It displays a global error notification with a message and description based on the error code.

6. Unset Loading State: Finally, it resets the loading state for the type to false in the finally block, ensuring that loading stops regardless of success or error.