# Utility

## Available utilities

| name               | description                                                                                                             |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| SuggestSearch      | a custom component to do suggestions search towards OC                                                                  |
| ArticlePublishFlow | a custom component to handle article publish transitions                                                                |
| DateFNS            | custom methods from 'date-fns' lib to handle date and time objects                                                      |
| ArrayMove          | instance of ['array-move'](https://www.npmjs.com/package/array-move) lib                                                |
| ReactSortableHOC   | instance of ['react-sortable-hoc'](https://www.npmjs.com/package/react-sortable-hoc) lib                                |
| ReactBeautifulDND  | instance of ['react-beautiful-dnd'](https://www.npmjs.com/package/react-beautiful-dnd) lib                              |
| Polished           | instance of ['polished'](https://www.npmjs.com/package/polished) lib, to give your styled-components some extra love 😉 |

## How to use

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

import {
    GUI,
    Utility
} from '@root'

/*
    OR you can import from the modules import name
    import { Utility } from 'Dashboard/modules'
*/

const {
    DateFNS
} = Utility

const App = () => {
    const [dateValue, setDateValue] = useState(new Date())
    
    const handleNextDay = () => {
        const updatedDate = DateFNS.addDays(dateValue, 1)
        setDateValue(updatedDate)
    }
    
    const handlePreviousDay = () => {
        const updatedDate = DateFNS.subDays(dateValue, 1)
        setDateValue(updatedDate)
    }
    
    return (
        <div>
            <GUI.Button onClick={handleNextDay}>
                {'Next day'}
            </GUI.Button>

            <p>{DateFNS.format(dateValue)}</p>
            
            <GUI.Button onClick={handlePreviousDay}>
                {'Previous day'}
            </GUI.Button>
        </div>
    )
}

export default App
```

{% hint style="info" %}
With Dashboard-Plugin base from version 2.0.0, we export Utility from '@root' so you can import API methods and Utility from the same import name
{% endhint %}