MapPage - don't set loading on true when query[opts.paramName].length === 0, WarStatsPage - don't set loading on true when query[paramNamePlayer].length === 0 || query[paramNameTribe].length === 0
This commit is contained in:
parent
1ffc960ff9
commit
160b20b121
|
@ -5,14 +5,12 @@ import * as NAMESPACES from '@config/namespaces';
|
||||||
import { SERVER_STATUS } from '@config/app';
|
import { SERVER_STATUS } from '@config/app';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import { useTheme } from '@material-ui/core/styles';
|
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
Accordion,
|
Accordion,
|
||||||
Typography,
|
Typography,
|
||||||
AccordionSummary,
|
AccordionSummary,
|
||||||
AccordionDetails,
|
AccordionDetails,
|
||||||
useMediaQuery,
|
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { Skeleton } from '@material-ui/lab';
|
import { Skeleton } from '@material-ui/lab';
|
||||||
|
@ -28,14 +26,11 @@ import { Server } from './types';
|
||||||
export interface Props {
|
export interface Props {
|
||||||
server?: Server;
|
server?: Server;
|
||||||
t: TFunction;
|
t: TFunction;
|
||||||
|
hideTooltip?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function GridItem({ t, server }: Props) {
|
function GridItem({ t, server, hideTooltip = true }: Props) {
|
||||||
const classes = useStyles();
|
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<boolean>(false);
|
const [expanded, setExpanded] = React.useState<boolean>(false);
|
||||||
const accordion = useRef<HTMLDivElement | null>(null);
|
const accordion = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
|
||||||
import useServers from './useServers';
|
import useServers from './useServers';
|
||||||
import * as NAMESPACES from '@config/namespaces';
|
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 { Skeleton } from '@material-ui/lab';
|
||||||
import Pagination, {
|
import Pagination, {
|
||||||
Props as PaginationProps,
|
Props as PaginationProps,
|
||||||
|
@ -20,6 +21,10 @@ export default function ServerSelection() {
|
||||||
});
|
});
|
||||||
const { t } = useTranslation(NAMESPACES.INDEX_PAGE);
|
const { t } = useTranslation(NAMESPACES.INDEX_PAGE);
|
||||||
const { servers, loading, total } = useServers(query.page, PER_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<unknown>, page: number) => {
|
const handlePageChange = (_: React.ChangeEvent<unknown>, page: number) => {
|
||||||
setQuery({ page });
|
setQuery({ page });
|
||||||
|
@ -58,7 +63,14 @@ export default function ServerSelection() {
|
||||||
return <GridItem t={t} key={index} />;
|
return <GridItem t={t} key={index} />;
|
||||||
})
|
})
|
||||||
: servers.map(server => {
|
: servers.map(server => {
|
||||||
return <GridItem t={t} key={server.key} server={server} />;
|
return (
|
||||||
|
<GridItem
|
||||||
|
t={t}
|
||||||
|
key={server.key}
|
||||||
|
server={server}
|
||||||
|
hideTooltip={hideTooltip}
|
||||||
|
/>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</Grid>
|
</Grid>
|
||||||
{renderPagination(false)}
|
{renderPagination(false)}
|
||||||
|
|
|
@ -35,10 +35,10 @@ const useMarkers = <T extends HasID, VariablesT>(
|
||||||
client: ApolloClient<object>,
|
client: ApolloClient<object>,
|
||||||
opts: Options<VariablesT>
|
opts: Options<VariablesT>
|
||||||
): MarkerBag<T> => {
|
): MarkerBag<T> => {
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [query, setQuery] = useQueryParams({
|
const [query, setQuery] = useQueryParams({
|
||||||
[opts.paramName]: withDefault(ArrayParam, []),
|
[opts.paramName]: withDefault(ArrayParam, []),
|
||||||
});
|
});
|
||||||
|
const [loading, setLoading] = useState(query[opts.paramName].length > 0);
|
||||||
const [markers, setMarkers] = useState<Marker<T>[]>([]);
|
const [markers, setMarkers] = useState<Marker<T>[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -44,7 +44,6 @@ export type Bag = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const useSide = (server: string, opts: Options): Bag => {
|
const useSide = (server: string, opts: Options): Bag => {
|
||||||
const [loading, setLoading] = useState<boolean>(true);
|
|
||||||
const [players, setPlayers] = useState<Player[]>([]);
|
const [players, setPlayers] = useState<Player[]>([]);
|
||||||
const [tribes, setTribes] = useState<Tribe[]>([]);
|
const [tribes, setTribes] = useState<Tribe[]>([]);
|
||||||
const paramNamePlayer = getParamName('player', opts.paramNamePrefix);
|
const paramNamePlayer = getParamName('player', opts.paramNamePrefix);
|
||||||
|
@ -53,6 +52,9 @@ const useSide = (server: string, opts: Options): Bag => {
|
||||||
[paramNamePlayer]: withDefault(NumericArrayParam, []),
|
[paramNamePlayer]: withDefault(NumericArrayParam, []),
|
||||||
[paramNameTribe]: withDefault(NumericArrayParam, []),
|
[paramNameTribe]: withDefault(NumericArrayParam, []),
|
||||||
});
|
});
|
||||||
|
const [loading, setLoading] = useState<boolean>(
|
||||||
|
query[paramNamePlayer].length > 0 || query[paramNameTribe].length > 0
|
||||||
|
);
|
||||||
const client = useApolloClient();
|
const client = useApolloClient();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
Reference in New Issue
Block a user