[WarStatsPage] change the separator between tribe tags and player names in the Results component, don't show duplicated player names/tribe tags, improve Ennnoblements query performance
This commit is contained in:
parent
0f4d77841c
commit
0f1e18b51d
|
@ -64,10 +64,10 @@ function WarStatsPage() {
|
|||
handleChangePlayers: sideTwoHandleChangePlayers,
|
||||
handleChangeTribes: sideTwoHandleChangeTribes,
|
||||
} = useSide(server.key, { paramNamePrefix: 'sideTwo' });
|
||||
const selectedPlayersIDs = useMemo(() => {
|
||||
const selectedPlayerIDs = useMemo(() => {
|
||||
return [...sideOnePlayers.map(p => p.id), ...sideTwoPlayers.map(p => p.id)];
|
||||
}, [sideOnePlayers, sideTwoPlayers]);
|
||||
const selectedTribesIDs = useMemo(() => {
|
||||
const selectedTribeIDs = useMemo(() => {
|
||||
return [...sideOneTribes.map(p => p.id), ...sideTwoTribes.map(p => p.id)];
|
||||
}, [sideOneTribes, sideTwoTribes]);
|
||||
const loading = sideTwoLoading || sideOneLoading;
|
||||
|
@ -279,8 +279,8 @@ function WarStatsPage() {
|
|||
onChangePlayers={sideOneHandleChangePlayers}
|
||||
onChangeTribes={sideOneHandleChangeTribes}
|
||||
server={server.key}
|
||||
tribeIDNEQ={selectedTribesIDs}
|
||||
playerIDNEQ={selectedPlayersIDs}
|
||||
selectedTribeIDs={selectedTribeIDs}
|
||||
selectedPlayerIDs={selectedPlayerIDs}
|
||||
className={classes.formGroup}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
@ -293,8 +293,8 @@ function WarStatsPage() {
|
|||
onChangePlayers={sideTwoHandleChangePlayers}
|
||||
onChangeTribes={sideTwoHandleChangeTribes}
|
||||
server={server.key}
|
||||
tribeIDNEQ={selectedTribesIDs}
|
||||
playerIDNEQ={selectedPlayersIDs}
|
||||
selectedTribeIDs={selectedTribeIDs}
|
||||
selectedPlayerIDs={selectedPlayerIDs}
|
||||
className={classes.formGroup}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
|
|
@ -28,8 +28,8 @@ export interface Props {
|
|||
) => void;
|
||||
onChangeTribes: (_e: React.ChangeEvent<{}>, tribes: Tribe[] | null) => void;
|
||||
server: string;
|
||||
playerIDNEQ: number[];
|
||||
tribeIDNEQ: number[];
|
||||
selectedPlayerIDs: number[];
|
||||
selectedTribeIDs: number[];
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
@ -41,8 +41,8 @@ function OneSide({
|
|||
onChangePlayers,
|
||||
onChangeTribes,
|
||||
server,
|
||||
tribeIDNEQ,
|
||||
playerIDNEQ,
|
||||
selectedTribeIDs,
|
||||
selectedPlayerIDs,
|
||||
className,
|
||||
disabled,
|
||||
}: Props) {
|
||||
|
@ -96,7 +96,7 @@ function OneSide({
|
|||
filter: {
|
||||
exists: true,
|
||||
nameIEQ: searchValue + '%',
|
||||
idNEQ: playerIDNEQ,
|
||||
idNEQ: selectedPlayerIDs,
|
||||
},
|
||||
server,
|
||||
offset: 0,
|
||||
|
@ -124,7 +124,7 @@ function OneSide({
|
|||
filter: {
|
||||
exists: true,
|
||||
tagIEQ: searchValue + '%',
|
||||
idNEQ: tribeIDNEQ,
|
||||
idNEQ: selectedTribeIDs,
|
||||
},
|
||||
server,
|
||||
offset: 0,
|
||||
|
@ -145,7 +145,7 @@ function OneSide({
|
|||
return v1 && v2 ? v1.id === v2.id : false;
|
||||
};
|
||||
|
||||
const isDisabled = (id: number, blacklist: number[]) => {
|
||||
const isSelected = (id: number, blacklist: number[]) => {
|
||||
return blacklist.some(id2 => id === id2);
|
||||
};
|
||||
|
||||
|
@ -169,12 +169,17 @@ function OneSide({
|
|||
<Autocomplete
|
||||
{...autocompleteProps}
|
||||
value={players}
|
||||
options={[...playerSuggestions, ...players]}
|
||||
options={[
|
||||
...playerSuggestions.filter(
|
||||
s => !isSelected(s.id, selectedPlayerIDs)
|
||||
),
|
||||
...players,
|
||||
]}
|
||||
getOptionLabel={opt => {
|
||||
return opt ? opt.name : '';
|
||||
}}
|
||||
disabled={disabled}
|
||||
getOptionDisabled={opt => isDisabled(opt.id, playerIDNEQ)}
|
||||
getOptionDisabled={opt => isSelected(opt.id, selectedPlayerIDs)}
|
||||
onChange={handleChangePlayers}
|
||||
renderInput={params => (
|
||||
<TextField
|
||||
|
@ -194,8 +199,13 @@ function OneSide({
|
|||
<Autocomplete
|
||||
{...autocompleteProps}
|
||||
value={tribes}
|
||||
options={[...tribeSuggestions, ...tribes]}
|
||||
getOptionDisabled={opt => isDisabled(opt.id, tribeIDNEQ)}
|
||||
options={[
|
||||
...tribeSuggestions.filter(
|
||||
s => !isSelected(s.id, selectedTribeIDs)
|
||||
),
|
||||
...tribes,
|
||||
]}
|
||||
getOptionDisabled={opt => isSelected(opt.id, selectedTribeIDs)}
|
||||
getOptionLabel={opt => {
|
||||
return opt ? opt.tag : '';
|
||||
}}
|
||||
|
|
|
@ -23,28 +23,32 @@ function OneSideResult({ data, t, server, title }: Props) {
|
|||
{data.players.length > 0 && (
|
||||
<Typography>
|
||||
{t('players')}:{' '}
|
||||
{data.players.map(player => (
|
||||
<Link
|
||||
key={player.id}
|
||||
to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
|
||||
params={{ id: player.id, key: server }}
|
||||
>
|
||||
{player.name}{' '}
|
||||
</Link>
|
||||
{data.players.map((player, index) => (
|
||||
<span key={player.id}>
|
||||
<Link
|
||||
to={ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE}
|
||||
params={{ id: player.id, key: server }}
|
||||
>
|
||||
{player.name}
|
||||
</Link>
|
||||
{index !== data.players.length - 1 ? ', ' : ''}
|
||||
</span>
|
||||
))}
|
||||
</Typography>
|
||||
)}
|
||||
{data.tribes.length > 0 && (
|
||||
<Typography>
|
||||
{t('tribes')}:{' '}
|
||||
{data.tribes.map(tribe => (
|
||||
<Link
|
||||
key={tribe.id}
|
||||
to={ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
|
||||
params={{ id: tribe.id, key: server }}
|
||||
>
|
||||
{tribe.tag}{' '}
|
||||
</Link>
|
||||
{data.tribes.map((tribe, index) => (
|
||||
<span key={tribe.id}>
|
||||
<Link
|
||||
to={ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE}
|
||||
params={{ id: tribe.id, key: server }}
|
||||
>
|
||||
{tribe.tag}
|
||||
</Link>
|
||||
{index !== data.tribes.length - 1 ? ', ' : ''}
|
||||
</span>
|
||||
))}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
|
@ -65,45 +65,57 @@ export const ENNOBLEMENTS = gql`
|
|||
sideOneTotalGained: ennoblements(
|
||||
server: $server
|
||||
filter: $sideOneTotalGainedFilter
|
||||
limit: 1
|
||||
) {
|
||||
total
|
||||
}
|
||||
sideOneTotalLost: ennoblements(
|
||||
server: $server
|
||||
filter: $sideOneTotalLostFilter
|
||||
limit: 1
|
||||
) {
|
||||
total
|
||||
}
|
||||
sideOnePlayers: ennoblements(
|
||||
server: $server
|
||||
filter: $sideOnePlayersFilter
|
||||
limit: 1
|
||||
) @skip(if: $skipSideOnePlayers) {
|
||||
total
|
||||
}
|
||||
sideOneTribes: ennoblements(server: $server, filter: $sideOneTribesFilter)
|
||||
@skip(if: $skipSideOneTribes) {
|
||||
sideOneTribes: ennoblements(
|
||||
server: $server
|
||||
filter: $sideOneTribesFilter
|
||||
limit: 1
|
||||
) @skip(if: $skipSideOneTribes) {
|
||||
total
|
||||
}
|
||||
sideTwoTotalGained: ennoblements(
|
||||
server: $server
|
||||
filter: $sideTwoTotalGainedFilter
|
||||
limit: 1
|
||||
) {
|
||||
total
|
||||
}
|
||||
sideTwoTotalLost: ennoblements(
|
||||
server: $server
|
||||
filter: $sideTwoTotalLostFilter
|
||||
limit: 1
|
||||
) {
|
||||
total
|
||||
}
|
||||
sideTwoPlayers: ennoblements(
|
||||
server: $server
|
||||
filter: $sideTwoPlayersFilter
|
||||
limit: 1
|
||||
) @skip(if: $skipSideTwoPlayers) {
|
||||
total
|
||||
}
|
||||
sideTwoTribes: ennoblements(server: $server, filter: $sideTwoTribesFilter)
|
||||
@skip(if: $skipSideTwoTribes) {
|
||||
sideTwoTribes: ennoblements(
|
||||
server: $server
|
||||
filter: $sideTwoTribesFilter
|
||||
limit: 1
|
||||
) @skip(if: $skipSideTwoTribes) {
|
||||
total
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue
Block a user