Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 19x 19x 19x | import { ReactElement, useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { AngleBrackect } from "components/icons";
interface HistoryState {
key: string;
}
export default function RouterButtons(): ReactElement {
const router = useRouter();
const [disableForwardButton, setDisableForwardButton] = useState(true);
const [disableBackButton, setDisableBackButton] = useState(true);
const userPosition = useRef(0);
useEffect(() => {
sessionStorage.setItem("history", JSON.stringify([]));
userPosition.current = 0;
}, []);
useEffect(() => {
const historyValue = (history.state as HistoryState).key;
const historyFromSessionStorage = sessionStorage.getItem("history");
const prevValue = historyFromSessionStorage
? (JSON.parse(historyFromSessionStorage) as string[])
: [];
Iif (
userPosition.current !== 0 &&
prevValue.at(userPosition.current - 1) &&
historyValue === prevValue.at(userPosition.current - 1)
) {
userPosition.current--;
setDisableForwardButton(false);
setDisableBackButton(userPosition.current === 0);
return;
}
const newValue = [...prevValue, historyValue];
Iif (newValue.length > 1) {
setDisableBackButton(false);
}
setDisableForwardButton(prevValue[userPosition.current + 2] === undefined);
Iif (
prevValue.length > 1 &&
prevValue[userPosition.current + 1] === historyValue
) {
userPosition.current++;
return;
}
sessionStorage.setItem("history", JSON.stringify(newValue));
Iif (newValue.length === 1) return;
userPosition.current++;
Iif (
newValue.length - 1 > userPosition.current &&
historyValue !== newValue.at(userPosition.current)
) {
setDisableForwardButton(true);
const slicedPrevValue = prevValue.slice(0, userPosition.current);
sessionStorage.setItem(
"history",
JSON.stringify([...slicedPrevValue, historyValue])
);
}
}, [router.asPath]);
return (
<div>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
window.history.back();
}}
disabled={disableBackButton}
className="back"
aria-label="Go back"
>
<AngleBrackect angle="less" />
</button>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
window.history.forward();
}}
disabled={disableForwardButton}
className="forward"
aria-label="Go forward"
>
<AngleBrackect angle="greater" />
</button>
<style jsx>{`
div {
display: flex;
}
button {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
color: #fff;
height: 32px;
justify-content: center;
position: relative;
width: 32px;
margin-right: 16px;
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
`}</style>
</div>
);
}
|