# useMaintenance

A reactive interval function for checking and responding to the maintenance mode.
The composable can be combined with the component [fitx-maintenance](?path=/docs/components-maintenance--docs).

## Usage

### Import and Initialize

```ts
import { useMaintenance } from '@fitx/customer-components';
const {
  startMaintenanceObserver, // init Interval
  reCheck, // manual Trigger getMaintenanceStatus function
  isInMaintenanceMode, // readonly reactive Result from getMaintenanceStatus,
} = useMaintenance({
  interval: 600000, // optional in ms, default 600000 (10 minutes)
  // boolean | Promise<boolean> | (() => boolean) | (() => Promise<boolean>)
  getMaintenanceStatus: async () => mayBeGetStudioMaintenanceMode(),
});

startMaintenanceObserver();
```

### Properties and Methods

#### Options
- `interval?: MaybeRefOrGetter<number>`: Optional. Specifies the interval (in milliseconds) at which to check for maintenance mode. Default is 10 minutes (600000 ms).
- `getMaintenanceStatus: boolean | Promise<boolean> | (() => boolean) | (() => Promise<boolean>)`: Required. Function that returns a boolean indicating maintenance mode status.

#### Return Values
- **startMaintenanceObserver**: A method to start the maintenance mode observer.
- **reCheck**: A method to manually recheck the maintenance mode status.
- **isInMaintenanceMode**: A readonly ref that indicates whether the application is currently in maintenance mode.

### Example
```ts
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMaintenance } from '@fitx/customer-components';
import { getStudioMaintenanceMode } from '@/api/maintenance';

const SUCCESS_ROUTE = 'home';
const MAINTENANCE_ROUTE = 'maintenance';
const router = useRouter();
const route = useRoute();

/**
 * handle navigation
 */
const goTo = (isActive: boolean) => {
  if (isActive) {
    router.push({ name: MAINTENANCE_ROUTE });
  } else if (route.name === MAINTENANCE_ROUTE) {
    router.push({ name: SUCCESS_ROUTE, replace: true });
  }
};

const {
  startMaintenanceObserver,
  isInMaintenanceMode,
} = useMaintenance({
  interval: 600000, // 600000 = 10 minute
  getMaintenanceStatus: async () => getStudioMaintenanceMode(2046),
});

startMaintenanceObserver();

watch([isInMaintenanceMode, () => route.name], ([isInMaintenance, routeName]) => {
  // so we make sure vue router is ready
  if (routeName) {
    goTo(isInMaintenance);
  }
}, {
  immediate: true,
});
```