feat: Add deep linking and auto-scrolling to the existing games section on the game list page.
This commit is contained in:
parent
186193c450
commit
4565cff38b
@ -8,7 +8,7 @@ import {
|
|||||||
AddOpinionRequest,
|
AddOpinionRequest,
|
||||||
RemoveOpinionRequest,
|
RemoveOpinionRequest,
|
||||||
} from "../items";
|
} from "../items";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useLocation } from "react-router-dom";
|
||||||
import { apiFetch, get_auth_status } from "./api";
|
import { apiFetch, get_auth_status } from "./api";
|
||||||
import { GameImage } from "./GameImage";
|
import { GameImage } from "./GameImage";
|
||||||
|
|
||||||
@ -54,6 +54,17 @@ export function GameList() {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Scroll to Existing Games section if hash is present
|
||||||
|
const location = useLocation();
|
||||||
|
useEffect(() => {
|
||||||
|
if (location.hash === "#existing-games") {
|
||||||
|
const el = document.getElementById("existing-games");
|
||||||
|
if (el) {
|
||||||
|
el.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [location]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchGames();
|
fetchGames();
|
||||||
}, []);
|
}, []);
|
||||||
@ -455,7 +466,7 @@ export function GameList() {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div style={{ marginTop: "3rem" }}>
|
<div style={{ marginTop: "3rem" }}>
|
||||||
<h3>Existing Games</h3>
|
<h3 id="existing-games">Existing Games</h3>
|
||||||
<ul className="grid-container">
|
<ul className="grid-container">
|
||||||
{games.map((game) => {
|
{games.map((game) => {
|
||||||
const opinion = opinions.find((op) => op.title === game.title);
|
const opinion = opinions.find((op) => op.title === game.title);
|
||||||
|
|||||||
@ -31,7 +31,7 @@ export const PersonList = ({ people }: Props) => {
|
|||||||
if (person.name == current_user) {
|
if (person.name == current_user) {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
to={`/games`}
|
to={`/games#existing-games`}
|
||||||
key={index}
|
key={index}
|
||||||
className="list-item"
|
className="list-item"
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user