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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 11x 11x 11x 12x 12x 11x 11x 11x 11x 11x 11x 11x 8x 8x 11x 11x 11x 8x 8x 8x 11x 9x 11x 8x 8x 11x 8x 2x 2x 2x | import type { GetServerSideProps, NextPage } from "next"
import { GamesRepository } from "./api/lib/repositories/games.repository"
import { useRepository } from "./api/lib/repositories/useRepository"
import React, { useEffect, useRef, useState } from "react"
import Error from "../components/Error"
import Loader from "../components/Loader"
import { RootState, useAppDispatch } from "../redux/store"
import { useSelector } from "react-redux"
import GameList from "../components/GameList"
import InputSearch from "../components/InputSearch"
import { saveScrolledGames } from "../redux/scrolledGamesSlice"
import { IGame } from "./api/lib/interfaces/IGame"
import { InfiniteData } from "@tanstack/query-core"
import HeadContent from "../components/HeadContent"
import Logo from "../components/Logo"
import UpArrowIcon from "../components/icons/UpArrowIcon"
import { IRepository } from "./api/lib/interfaces/IRepository"
const Lobby: NextPage<{
search: string
gamesRepository: IRepository<IGame>
}> = ({ search, gamesRepository = new GamesRepository() }) => {
const inputRef = useRef<HTMLInputElement>(null)
const loadMoreBtnRef = useRef<HTMLButtonElement>(null)
const gameListRef = useRef<HTMLDivElement>(null)
const selectedGame = useSelector((state: RootState) => state.game)
const scrolledGames = useSelector((state: RootState) => state.scrolledGames)
const [inputSearchState, setInputSearchState] = useState(search)
const { useSearchPaginated } = useRepository(gamesRepository)
const dispatch = useAppDispatch()
const [gameListScroll, setGameListScroll] = useState(0)
const getInitialData = () =>
scrolledGames?.pages?.length > 0 ? scrolledGames : undefined
const scrollIntoViewport = (selectedGame: IGame): void => {
const selectedGameDiv = document.getElementById(
selectedGame.id
) as HTMLDivElement
selectedGameDiv?.scrollIntoView()
}
const onClickUpArrowIcon = () => {
gameListRef.current?.scrollTo(0, 0)
window.scrollTo(0, 0)
}
const {
data: gameList,
isError,
error,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
isFetching,
} = useSearchPaginated(inputSearchState, getInitialData())
useEffect(() => {
if (inputRef.current) {
inputRef.current.value = search
setInputSearchState(search)
}
}, [search])
useEffect(() => {
dispatch(saveScrolledGames(gameList as InfiniteData<IGame[]>))
}, [gameList])
useEffect(() => {
scrollIntoViewport(selectedGame)
if (!hasNextPage) return
const observer = new IntersectionObserver(
(entries) =>
entries.forEach((entry) => entry.isIntersecting && fetchNextPage()),
{
root: null,
}
)
const loadMoreBtnElement = loadMoreBtnRef.current
Iif (!loadMoreBtnElement) return
observer.observe(loadMoreBtnElement)
return () => {
observer.disconnect()
}
}, [hasNextPage, fetchNextPage])
gameListRef.current?.addEventListener("scroll", () => {
setGameListScroll(gameListRef.current?.scrollTop || 0)
})
return (
<>
<div className="bg-black-200 h-[100vh]">
<HeadContent />
<Logo classes="flex justify-center md:w-[1190px] md:mx-auto md:block" />
<InputSearch
ref={inputRef}
inputSearchState={inputSearchState}
setInputSearchState={setInputSearchState}
gameListRef={gameListRef}
classes="flex justify-center md:w-[1190px] md:mx-auto md:block"
/>
{isError && <Error error={error} />}
{isFetching && <Loader />}
<GameList
ref={gameListRef}
gameList={gameList}
inputSearchState={inputSearchState}
loadMoreBtnRef={loadMoreBtnRef}
hasNextPage={hasNextPage}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
classes="fade-in grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8
md:gap-[40px] md:w-[1190px] h-[771px] overflow-y-auto
overflow-x-hidden m-auto mt-[56px]"
/>
</div>
{gameListScroll > 10 && (
<div
className="fav-btn"
title="Scroll to top"
onClick={onClickUpArrowIcon}
>
<UpArrowIcon />
</div>
)}
</>
)
}
export default Lobby
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
// Get "search" parameter from browser query string"
// And pass it to page component as prop
const { search } = query
return {
props: { search: !search ? "" : search },
}
}
|