github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

only search filter used

Browse Source
This commit is contained in:
dan13ram
2021-06-30 16:48:24 +05:30
committed by Alec LaLonde
parent ea88f1e8a3
commit 11286feb44
2 changed files with 75 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
packages/web/components/Player/PlayerFilter.tsx
View File

@@ -121,7 +121,7 @@ export const PlayerFilter: React.FC<Props> = ({
}
};
const { filtersUsed } = useFiltersUsed(queryVariables);
const { filtersUsed, onlySearchFilterUsed } = useFiltersUsed(queryVariables);
const [isElementSticky, setIsSticky] = useState<boolean>(false);
const ref = useRef<HTMLDivElement>(null);
@@ -300,56 +300,60 @@ export const PlayerFilter: React.FC<Props> = ({
{filtersUsed && (
<Flex w="100%" maxW="79rem" justify="space-between">
<Wrap flex="1">
<WrapItem>
<Flex w="100%" h="100%" justify="center" align="center">
<Text> {`Selected Filters: `}</Text>
</Flex>
</WrapItem>
{playerTypes.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newPlayerTypes = playerTypes.slice();
newPlayerTypes.splice(index, 1);
setPlayerTypes(newPlayerTypes);
}}
/>
</WrapItem>
))}
{skills.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newSkills = skills.slice();
newSkills.splice(index, 1);
setSkills(newSkills);
}}
/>
</WrapItem>
))}
{timezones.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newTimezones = timezones.slice();
newTimezones.splice(index, 1);
setTimezones(newTimezones);
}}
/>
</WrapItem>
))}
{availability && (
<WrapItem>
<FilterTag
label={`Available >${availability.value} h/week`}
onRemove={() => {
setAvailability(null);
}}
/>
</WrapItem>
{!onlySearchFilterUsed && (
<>
<WrapItem>
<Flex w="100%" h="100%" justify="center" align="center">
<Text> {`Selected Filters: `}</Text>
</Flex>
</WrapItem>
{playerTypes.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newPlayerTypes = playerTypes.slice();
newPlayerTypes.splice(index, 1);
setPlayerTypes(newPlayerTypes);
}}
/>
</WrapItem>
))}
{skills.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newSkills = skills.slice();
newSkills.splice(index, 1);
setSkills(newSkills);
}}
/>
</WrapItem>
))}
{timezones.map(({ value, label }, index) => (
<WrapItem key={value}>
<FilterTag
label={label}
onRemove={() => {
const newTimezones = timezones.slice();
newTimezones.splice(index, 1);
setTimezones(newTimezones);
}}
/>
</WrapItem>
))}
{availability && (
<WrapItem>
<FilterTag
label={`Available >${availability.value} h/week`}
onRemove={() => {
setAvailability(null);
}}
/>
</WrapItem>
)}
</>
)}
</Wrap>
<Button

21
packages/web/lib/hooks/players.ts
View File

@@ -114,7 +114,7 @@ export const usePlayerFilter = (): PlayerFilter => {
export const useFiltersUsed = (
queryVariables: GetPlayersQueryVariables,
): { filtersUsed: boolean } => {
): { filtersUsed: boolean; onlySearchFilterUsed: boolean } => {
const playerTypesFilterUsed = useMemo(
() => (queryVariables.playerTypeIds as number[])?.length > 0,
[queryVariables.playerTypeIds],
@@ -150,8 +150,27 @@ export const useFiltersUsed = (
timezonesFilterUsed,
],
);
const onlySearchFilterUsed = useMemo(
() =>
searchFilterUsed &&
!(
playerTypesFilterUsed ||
availabilityFilterUsed ||
skillIdsFilterUsed ||
timezonesFilterUsed
),
[
playerTypesFilterUsed,
searchFilterUsed,
availabilityFilterUsed,
skillIdsFilterUsed,
timezonesFilterUsed,
],
);
return {
filtersUsed,
onlySearchFilterUsed,
};
};