48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import { useProcesses } from "contexts/process";
|
||
|
|
import { useCallback, useEffect, useState } from "react";
|
||
|
|
|
||
|
|
type History = {
|
||
|
|
canGoBack: boolean;
|
||
|
|
canGoForward: boolean;
|
||
|
|
currentUrl: string;
|
||
|
|
history: string[];
|
||
|
|
moveHistory: (step: number) => void;
|
||
|
|
position: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
const useHistory = (url: string, id: string): History => {
|
||
|
|
const { url: changeUrl } = useProcesses();
|
||
|
|
const [currentUrl, setCurrentUrl] = useState(url);
|
||
|
|
const [history, setHistory] = useState<string[]>(() => [url]);
|
||
|
|
const [position, setPosition] = useState<number>(0);
|
||
|
|
const moveHistory = useCallback(
|
||
|
|
(step: number): void => {
|
||
|
|
const newPosition = position + step;
|
||
|
|
|
||
|
|
setPosition(newPosition);
|
||
|
|
setCurrentUrl(history[newPosition]);
|
||
|
|
changeUrl(id, history[newPosition]);
|
||
|
|
},
|
||
|
|
[changeUrl, history, id, position]
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (url !== currentUrl) {
|
||
|
|
setPosition(position + 1);
|
||
|
|
setCurrentUrl(url);
|
||
|
|
setHistory([...history.slice(0, position + 1), url]);
|
||
|
|
}
|
||
|
|
}, [currentUrl, history, position, url]);
|
||
|
|
|
||
|
|
return {
|
||
|
|
canGoBack: position > 0,
|
||
|
|
canGoForward: position < history.length - 1,
|
||
|
|
currentUrl,
|
||
|
|
history,
|
||
|
|
moveHistory,
|
||
|
|
position,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export default useHistory;
|