# useApplication

useApplication is a helper hook that will return your application context from Dashboard which contain:

| Name           | Description                                                                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| id             | Your Application uniq-id.                                                                                                                                                            |
| confirm        | confirm object with function keys: add/remove to handle Application confirms.                                                                                                        |
| config         | Your Application config from Applications Settings.                                                                                                                                  |
| store          | Your plugin redux-store, regarding if it's a shared one or not.                                                                                                                      |
| applicationRef | Your Application Node ref object.                                                                                                                                                    |
| status         | Dashboard status payload, if your plugin have any requirements                                                                                                                       |
| confirmOnLeave | Function to indicate that your Application can't be un-mounted atm, so Dashboard will display a confirm dialog for the user before leaving your Application, more info at the bottom |

## How to use

```jsx
import { Plugin } from '@root'

const MyCustomComponent = () => {
    const {
        id,
        confirm,
        confirmOnLeave,
        config,
        store,
        applicationRef,
        status,
    } = Plugin.useApplication()
}

export default MyCustomComponent
```

## Application Confirm

### Add

You can display you application confirm in two ways:

#### **Callback object**

| name        | type     | default                | description                                  |
| ----------- | -------- | ---------------------- | -------------------------------------------- |
| headline    | String   | 'Confirm'              | Your confirm box headline                    |
| message     | String   | null                   | Your confirm box message                     |
| buttonTexts | Array    | \['Cancel', 'Confirm'] | Your confirm box button labels               |
| onConfirm   | Function | null                   | Callback when user click on `Confirm` button |
| onCancel    | Function | null                   | Callback when user click on `Cancel` button  |

```jsx
import { Plugin } from '@root'

const App = props => {
    const { confirm } = Plugin.useApplication()
    
    const handleOnDelete () => {
        const confirmPayload = {
            onCancel: () => {},
            onConfirm: () => {},
            message: `Do you want to save your cahnges before you close?`
            headline: 'Confirm',
            buttonTexts: ['Discard', 'save']

        }
        
        confirm.add(confirmPayload)
    }
    
    return (
        <button onClick={handleOnDelete}>
            {'Delete'}
        </button>
    )
}
```

![](https://2209870672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbTKPOIEi2LNGOi0-yz%2F-MS3avkkq3AhDUGMLsEG%2F-MS3bITpeuM6O7TfXDFK%2FScreenshot%202021-01-27%20at%2017.09.37.png?alt=media\&token=d63a62a3-e339-403c-bfec-016d3ab5687c)

> Dashboard will close the confirm automatically when user click on `Cancel` button if there is no`onCancel` callback

#### **Custom-Component object**

| name      | type            | default | Description                   |
| --------- | --------------- | ------- | ----------------------------- |
| component | React Component | null    | Your custom confirm component |

```jsx
const MyCustomConfirm = props  => {
    const {
        onConfirm,
        headline,
        message,
        cancelLabel,
        confirmLabel,
        applicationId,
        closeConfirm
    } = props
    
    return (
        <Wrapper>
            <Headline text={headline}/>
            <Message text={message}/>
            <ButtonsWrapper>
                <Button text={cancelLabel} onClick={closeConfirm}/>
                <Button text={confirmLabel} onClick={() => {
                    onConfirm()
                    closeConfirm()
                }}/>
            </ButtonsWrapper>
        </Wrapper>
    )
}

const MyCustomComponent = () => {
    const { confirm } = Plugin.useApplication()
    
    const handleConfirm = () => {
        const confirmPayload = {
        	component: (
            	<MyCustomConfirm
                    cancelLabel={'Cancel'}
                    confirmLabel={'Delete'}
                    onConfirm={() => {}}
                    closeConfirm={confirm.close}
                    message={'This action will efect....'}
                    headline={'Are you sure you want to delete ....?'}
            	/>
            )
        }
    
        confirm.add(confirmPayload)
    }
    
    return (
        <div>
            <button onClick={handleConfirm}>Confirm</button>
        </div>
    )
}
```

As long as you are using a custom component to display your confirm message Dashboard does not know when to unmount the confirm box so you should close the confirm manually

### Remove

simply by calling `confirm.remove()` from Plugin.useApplication() hook

## Confirm on leave

Before Dashboard 4.1, applications where using the scoped method `seeksAttentionOnWorkspaceLeave()`&#x20;

And this method was limited only by extending the Application component in the main component

With the new `confirmOnLeave` method, it can be accessible from any where in your React tree, from useApplication() context

Call confirmOnLeave() to prompt the user when the user tries to change workspace/profile if your plugin needs the user attention or it's doing some processing that should not be canceled

The user always have the ability to ignore the prompt!

To tell Dashboard that your application does need attention, call confirmOnLeave() with passing true as an argument

```jsx
confirmOnLeave(true)
```

```jsx
import {
    useState,
    useEffect
} from 'react'

import { Plugin } from '@root'

const MyApplication = () => {
    const [loading, setLoading] = useState(true)
    
    const { confirmOnLeave } = useApplication()
    
    useEffect(() => {
        confirmOnLeave(loading)
        
        return () => confirmOnLeave(false)
    }, [loading])
}
```

![](https://2209870672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbTKPOIEi2LNGOi0-yz%2F-MSC_fiBz0h9c6mGNkQR%2F-MSCbUQSF_QdQExxw7QU%2FScreenshot%202021-01-29%20at%2010.53.08.png?alt=media\&token=e4f0db64-ffc3-4a74-a5e5-43f12c1ef97e)

The prompt dialog will cover the Dashboard intairly, and the message will be the same all the time without the ability to change it or change the buttons label

confirmOnLeave() should only be called when the application needs to prompt the user.\
Therefore call it and pass false when the application do not need to prompt the user anymore.

```jsx
confirmOnLeave(false)
```

{% hint style="warning" %}
*An application that always seeks attention can be seen as annoying by the user.*
{% endhint %}