Skip to content

Commit

Permalink
fix(docs): useIdleTimeout - fix JS errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@LouisMazel
LouisMazel committed Oct 11, 2024
1 parent 28dbec3 commit e3c49ec
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 124 deletions.
269 changes: 153 additions & 116 deletions packages/docs/docs/composables/use-idle-timeout.md
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,183 @@
---
title: useIdleTimeout
description: Plugin to track user activity and manage it
description: A Vue 3 composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
---

# {{ $frontmatter.title }}

{{ $frontmatter.description }}

::: tip
::: info
A plugin to know the amount of time a user has spent on your website
:::

## Demo

<br />

<div class="flex items-start gap-05 items-center flex-wrap">
<MazBtn @click="idle.start()" color="info">
Start
</MazBtn>
<MazBtn @click="idle.pause()" color="warning">
Pause
</MazBtn>
<MazBtn @click="idle.resume()">
Resume
</MazBtn>
<MazBtn @click="idle.reset()" color="secondary">
Reset
</MazBtn>
<MazBtn @click="idle.destroy()" color="danger">
Destroy
</MazBtn>
</div>

<br />

<MazCard overflow-hidden style="width: 100%;">
<div style="display: flex;">
<div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
<ComponentDemo>
<div class="flex items-start gap-05 items-center flex-wrap">
<MazBtn @click="idleTimeout.start()" color="info">
Start
</MazBtn>
<MazBtn @click="idleTimeout.pause()" color="warning">
Pause
</MazBtn>
<MazBtn @click="idleTimeout.resume()">
Resume
</MazBtn>
<MazBtn @click="idleTimeout.reset()" color="secondary">
Reset
</MazBtn>
<MazBtn @click="idleTimeout.destroy()" color="danger">
Destroy
</MazBtn>
</div>
</MazCard>

**Wait 3 seconds without any actions to see the idle change to true**

## How to use it?

```vue
<template>
<MazBtn @click="idle.start()" color="info">
Start
</MazBtn>
<MazBtn @click="idle.pause()" color="warning">
Pause
</MazBtn>
<MazBtn @click="idle.resume()">
Resume
</MazBtn>
<MazBtn @click="idle.reset()" color="secondary">
Reset
</MazBtn>
<MazBtn @click="idle.destroy()" color="danger">
Destroy
</MazBtn>
<MazCard overflow-hidden style="width: 100%;">

<br />

<MazCard block>
<div style="display: flex;">
<div style="flex: 1;">
isIdle: {{event.isIdle}}
</div>
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
eventType: {{event.eventType}}
</div>
<div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
</div>
</MazCard>
</template>

<script lang="ts" setup>
import MazBtn from 'maz-ui/components/MazBtn'
import MazCard from 'maz-ui/components/MazCard'
<br />
<br />

<p class="maz-text-warning">Wait 5 seconds without any actions to see the dialog popup</p>

<template #code>

```vue
<template>
<MazBtn @click="idle.start()" color="info">
Start
</MazBtn>
<MazBtn @click="idle.pause()" color="warning">
Pause
</MazBtn>
<MazBtn @click="idle.resume()">
Resume
</MazBtn>
<MazBtn @click="idle.reset()" color="secondary">
Reset
</MazBtn>
<MazBtn @click="idle.destroy()" color="danger">
Destroy
</MazBtn>
<MazCard block>
<div style="display: flex;">
<div style="flex: 1;">
isIdle: {{event.isIdle}}
</div>
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
eventType: {{event.eventType}}
</div>
</div>
</MazCard>
</template>
<script lang="ts" setup>
import MazBtn from 'maz-ui/components/MazBtn'
import MazCard from 'maz-ui/components/MazCard'
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useIdleTimeout, useDialog } from 'maz-ui'
const dialog = useDialog()
const event = ref({})
const timeout = 5000
const idleTimeout = useIdleTimeout({
callback,
options: {
timeout,
immediate: false,
once: false,
},
})
async function callback({ isIdle, eventType, instance }) {
console.log({ isIdle, eventType })
event.value = { isIdle, eventType }
if (isIdle) {
try {
instance.destroy()
await dialog.open({
title: 'Are you still here?',
message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
cancelText: 'No',
confirmText: 'Yes',
}).promise
instance.start()
} catch (e) {
// do something like logout the user
}
}
}
onMounted(() => {
// should be executed on client side
idleTimeout.start()
})
onBeforeUnmount(() => {
// Destroy the instance when the component is destroyed to avoid memory leaks
idleTimeout.destroy()
})
</script>
```

</template>
</ComponentDemo>

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'

import { useIdleTimeout } from 'maz-ui'
import { useIdleTimeout, useDialog } from 'maz-ui'

const idleTimeout = useIdleTimeout({
callback,
options,
})
const dialog = useDialog()

const event = ref({})

const callback = ({ isIdle, eventType }) => {
console.log({ isIdle, eventType })
event.value = { isIdle, eventType }
}
const options = {
timeout: 3000,
immediate: false,
once: false,
}
// should be executed on client
const callback = ({ isIdle, event }) => {
console.log({ isIdle, event })
event.value = { isIdle, event }
}
onMounted(() => {
idleTimeout.start()
})
const timeout = 5000

onBeforeUnmount(() => {
idleTimeout.destroy()
const idleTimeout = useIdleTimeout({
callback,
options: {
timeout,
immediate: false,
once: false,
},
})
</script>
```

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'

import { useIdleTimeout } from 'maz-ui'

const event = ref({})

const callback = ({ isIdle, eventType }) => {
async function callback({ isIdle, eventType, instance }) {
console.log({ isIdle, eventType })
event.value = { isIdle, eventType }
}

const options = {
timeout: 3000,
immediate: false,
once: false,
if (isIdle) {
try {
instance.destroy()
await dialog.open({
title: 'Are you still here?',
message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
data: {
cancelText: 'No',
confirmText: 'Yes',
}
}).promise
instance.start()
} catch (e) {
instance.destroy()
}
}
}

const idleTimeout = useIdleTimeout({
callback,
options,
})

onMounted(() => {
// should be executed on client
idleTimeout.start()
Expand Down Expand Up @@ -182,37 +219,37 @@ interface IdleTimeoutStrictOption {
Start tracking user - needed for SSR when `immediate` option is set to false (execute it on client side)

```ts
idle.start()
idleTimeout.start()
```

### Pause

Will pause the timeout and events
Will pause the timeout and events, can't be executed when the timeout has expired

```ts
idle.pause()
idleTimeout.pause()
```

### Resume

Resume the instance will reinit the timeout

```ts
idle.resume()
idleTimeout.resume()
```

### Reset

Reset the timeout of the instance like a restart

```ts
idle.reset()
idleTimeout.reset()
```

### Destroy

Will destroy the instance and stop tracking

```ts
idle.destroy()
idleTimeout.destroy()
```
12 changes: 6 additions & 6 deletions packages/lib/modules/helpers/idle-timeout/idle-timeout-handler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export class IdleTimeout {
this.resetTimeout()

if (this.options.immediate) {
this.callback({ isIdle: false })
this.callback({ isIdle: false, instance: this })
}
}

Expand All @@ -87,7 +87,7 @@ export class IdleTimeout {
}

this.resetTimeout()
this.callback({ isIdle: this.isIdle })
this.callback({ isIdle: this.isIdle, instance: this })
this.remainingTime = 0
}

Expand All @@ -96,7 +96,7 @@ export class IdleTimeout {
this.isIdle = false
this.remainingTime = 0
this.resetTimeout()
this.callback({ isIdle: this.isIdle })
this.callback({ isIdle: this.isIdle, instance: this })
}

public destroy(): void {
Expand Down Expand Up @@ -153,7 +153,7 @@ export class IdleTimeout {

this.resetTimeout()

this.callback({ isIdle: this.isIdle, eventType: event.type })
this.callback({ isIdle: this.isIdle, eventType: event.type, instance: this })
}
catch (error) {
throw new Error(`[IdleTimeout](handleEvent) ${error}`)
Expand All @@ -162,7 +162,7 @@ export class IdleTimeout {

private handleTimeout(): void {
this.isIdle = true
this.callback({ isIdle: this.isIdle })
this.callback({ isIdle: this.isIdle, instance: this })

if (this.options.once) {
this.destroy()
Expand Down Expand Up @@ -193,6 +193,6 @@ export class IdleTimeout {
this.reset()
}

this.callback({ isIdle: this.isIdle })
this.callback({ isIdle: this.isIdle, instance: this })
}
}
Loading

0 comments on commit e3c49ec

Please sign in to comment.