/
useSpecFilter.ts
43 lines (35 loc) · 1.31 KB
/
useSpecFilter.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { useSpecStore } from '../store'
import { useMutation, gql } from '@urql/vue'
import { ref, watch } from 'vue'
import { useDebounce } from '@vueuse/core'
import { SpecFilter_SetPreferencesDocument } from '@packages/app/src/generated/graphql'
gql`
mutation SpecFilter_SetPreferences ($value: String!) {
setPreferences (value: $value, type: project) {
...TestingPreferences
...SpecRunner_Preferences
}
}`
export function useSpecFilter (savedFilter?: string) {
const specStore = useSpecStore()
const saveSpecFilter = useMutation(SpecFilter_SetPreferencesDocument)
// prefer a filter from client side store, saved filter in gql can be stale
// and is only used to set the value in the store on first load
const initialFilter = specStore.specFilter ?? savedFilter ?? ''
const specFilterModel = ref(initialFilter)
const debouncedSpecFilterModel = useDebounce(specFilterModel, 200)
function setSpecFilter (specFilter: string) {
if (specStore.specFilter !== specFilter) {
saveSpecFilter.executeMutation({ value: JSON.stringify({ specFilter }) })
}
}
watch(() => debouncedSpecFilterModel?.value, (newVal) => {
setSpecFilter(newVal ?? '')
})
// initialize spec filter in store
setSpecFilter(specFilterModel.value)
return {
specFilterModel,
debouncedSpecFilterModel,
}
}