-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.ts
81 lines (75 loc) · 2.49 KB
/
index.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { createUseFunnel } from '@use-funnel/core';
import { useEffect, useMemo, useState } from 'react';
export * from '@use-funnel/core';
export const useFunnel = createUseFunnel(({ id, initialState }) => {
const [location, setLocation] = useState(() => ({
search: window.location.search,
}));
const [state, setState] = useState(() => ({
...window.history.state,
}));
useEffect(() => {
function handlePopState(event: PopStateEvent) {
setLocation(window.location);
setState(event.state);
}
window.addEventListener('popstate', handlePopState);
return () => {
window.removeEventListener('popstate', handlePopState);
};
}, []);
const currentStep = new URLSearchParams(location.search).get(`${id}.step`);
const currentContext = state?.[`${id}.context`];
const currentState = useMemo(() => {
return currentStep != null && currentContext != null
? ({
step: currentStep,
context: currentContext,
} as typeof initialState)
: initialState;
}, [currentStep, currentContext, initialState]);
const history: (typeof initialState)[] = useMemo(
() => state?.[`${id}.histories`] ?? [currentState],
[state, currentState],
);
const currentIndex = history.length - 1;
return useMemo(
() => ({
history,
currentIndex,
currentState,
push(newState) {
const searchParams = new URLSearchParams(location.search);
searchParams.set(`${id}.step`, newState.step);
const newHistoryState = {
...state,
[`${id}.context`]: newState.context,
[`${id}.histories`]: [...(history ?? []), newState],
};
window.history.pushState(newHistoryState, '', `?${searchParams.toString()}`);
setLocation({
search: window.location.search,
});
setState(newHistoryState);
},
replace(newState) {
const searchParams = new URLSearchParams(location.search);
searchParams.set(`${id}.step`, newState.step);
const newHistoryState = {
...state,
[`${id}.context`]: newState.context,
[`${id}.histories`]: [...(history ?? []), newState],
};
window.history.replaceState(newHistoryState, '', `?${searchParams.toString()}`);
setLocation({
search: window.location.search,
});
setState(newHistoryState);
},
go: (index) => {
window.history.go(index);
},
}),
[history, currentIndex, currentState],
);
});