diff --git a/src/features/IndexPage/components/ServerSelection/GridItem.tsx b/src/features/IndexPage/components/ServerSelection/GridItem.tsx index 5f815f6..8914aba 100644 --- a/src/features/IndexPage/components/ServerSelection/GridItem.tsx +++ b/src/features/IndexPage/components/ServerSelection/GridItem.tsx @@ -5,14 +5,12 @@ import * as NAMESPACES from '@config/namespaces'; import { SERVER_STATUS } from '@config/app'; import { makeStyles } from '@material-ui/core/styles'; -import { useTheme } from '@material-ui/core/styles'; import { Grid, Accordion, Typography, AccordionSummary, AccordionDetails, - useMediaQuery, Tooltip, } from '@material-ui/core'; import { Skeleton } from '@material-ui/lab'; @@ -28,14 +26,11 @@ import { Server } from './types'; export interface Props { server?: Server; t: TFunction; + hideTooltip?: boolean; } -function GridItem({ t, server }: Props) { +function GridItem({ t, server, hideTooltip = true }: Props) { const classes = useStyles(); - const theme = useTheme(); - const isDownSM = useMediaQuery(theme.breakpoints.down('sm')); - const isTouchDevice = useMediaQuery('(hover: none)'); - const hideTooltip = isDownSM || isTouchDevice; const [expanded, setExpanded] = React.useState(false); const accordion = useRef(null); diff --git a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx index a4d8ec1..17fe34f 100644 --- a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx +++ b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx @@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next'; import useServers from './useServers'; import * as NAMESPACES from '@config/namespaces'; -import { Grid, Box } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import { Grid, Box, useMediaQuery } from '@material-ui/core'; import { Skeleton } from '@material-ui/lab'; import Pagination, { Props as PaginationProps, @@ -20,6 +21,10 @@ export default function ServerSelection() { }); const { t } = useTranslation(NAMESPACES.INDEX_PAGE); const { servers, loading, total } = useServers(query.page, PER_PAGE); + const theme = useTheme(); + const isDownSM = useMediaQuery(theme.breakpoints.down('sm')); + const isTouchDevice = useMediaQuery('(hover: none)'); + const hideTooltip = isDownSM || isTouchDevice; const handlePageChange = (_: React.ChangeEvent, page: number) => { setQuery({ page }); @@ -58,7 +63,14 @@ export default function ServerSelection() { return ; }) : servers.map(server => { - return ; + return ( + + ); })} {renderPagination(false)} diff --git a/src/features/ServerPage/features/MapPage/useMarkers.ts b/src/features/ServerPage/features/MapPage/useMarkers.ts index 805b2fd..d1ec4c2 100644 --- a/src/features/ServerPage/features/MapPage/useMarkers.ts +++ b/src/features/ServerPage/features/MapPage/useMarkers.ts @@ -35,10 +35,10 @@ const useMarkers = ( client: ApolloClient, opts: Options ): MarkerBag => { - const [loading, setLoading] = useState(true); const [query, setQuery] = useQueryParams({ [opts.paramName]: withDefault(ArrayParam, []), }); + const [loading, setLoading] = useState(query[opts.paramName].length > 0); const [markers, setMarkers] = useState[]>([]); useEffect(() => { diff --git a/src/features/ServerPage/features/WarStatsPage/useSide.ts b/src/features/ServerPage/features/WarStatsPage/useSide.ts index b0bdf4b..503fad0 100644 --- a/src/features/ServerPage/features/WarStatsPage/useSide.ts +++ b/src/features/ServerPage/features/WarStatsPage/useSide.ts @@ -44,7 +44,6 @@ export type Bag = { }; const useSide = (server: string, opts: Options): Bag => { - const [loading, setLoading] = useState(true); const [players, setPlayers] = useState([]); const [tribes, setTribes] = useState([]); const paramNamePlayer = getParamName('player', opts.paramNamePrefix); @@ -53,6 +52,9 @@ const useSide = (server: string, opts: Options): Bag => { [paramNamePlayer]: withDefault(NumericArrayParam, []), [paramNameTribe]: withDefault(NumericArrayParam, []), }); + const [loading, setLoading] = useState( + query[paramNamePlayer].length > 0 || query[paramNameTribe].length > 0 + ); const client = useApolloClient(); useEffect(() => {