-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Deliver fully functional matching menu with all animations - Integrate Google Places API - Correct AlertProvidert to handle new format of errors. Refs: 8696pcz16 Signed-off-by: Patryk Kłosiński <[email protected]>
- Loading branch information
Showing
14 changed files
with
437 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 109 additions & 29 deletions
138
frontend/src/Features/Matching/components/Filters/MatchFilters.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,121 @@ | ||
| import {Card, Divider, Grid, ScrollArea, Select, Stack, Title} from "@mantine/core"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Card, | ||
| Divider, | ||
| Grid, | ||
| Group, | ||
| NativeSelect, | ||
| RangeSlider, | ||
| ScrollArea, | ||
| Stack, | ||
| Text, | ||
| Title | ||
| } from "@mantine/core"; | ||
| import {useState} from "react"; | ||
| import {IconEye, IconFriends, IconGenderBigender, IconRulerMeasure} from "@tabler/icons-react"; | ||
| import {distanceOptions, hereForOptions, sexualityOptions, showMeOptions, sliderMarks} from "../../const"; | ||
| import {useForm} from "@mantine/form"; | ||
|
|
||
| export const MatchFilters = () => { | ||
| const [range, setRange] = useState<{ from: string | number, to: string | number }>({from: 16, to: 50}); | ||
| const [isChanged, setIsChanged] = useState(false); | ||
|
|
||
| const showMeOptions = [ | ||
| { | ||
| label: 'Male', | ||
| value: 'male', | ||
| }, | ||
| { | ||
| label: 'Female', | ||
| value: 'female', | ||
| const dummyFiltersData = { | ||
| showMe: 'everyone', | ||
| prefferedAge: [18, 40], | ||
| prefferedDistance: 999, | ||
| prefferedSexuality: 'any', | ||
| hereFor: 'anything', | ||
| } | ||
|
|
||
| const form = useForm({ | ||
| initialValues: { | ||
| showMe: dummyFiltersData.showMe, | ||
| prefferedAge: dummyFiltersData.prefferedAge, | ||
| prefferedDistance: dummyFiltersData.prefferedDistance, | ||
| prefferedSexuality: dummyFiltersData.prefferedSexuality, | ||
| hereFor: dummyFiltersData.hereFor, | ||
| }, | ||
| { | ||
| label: 'Everyone', | ||
| value: 'everyone', | ||
| onValuesChange: () => { | ||
| setIsChanged(true); | ||
| }, | ||
| ] | ||
| }); | ||
|
|
||
| return ( | ||
| <Stack gap={"md"} justify={"center"} py={"lg"} px={"xl"}> | ||
| <Card mah={"90vh"} w={'100%'} withBorder component={ScrollArea}> | ||
| {/* Filters */} | ||
| <Title order={2}>Filters</Title> | ||
|
|
||
| <Divider my={"md"}/> | ||
| <form | ||
| onSubmit={form.onSubmit((values) => console.log(values))} | ||
| onReset={(event) => { | ||
| form.onReset(event); | ||
| setIsChanged(false); | ||
| }} | ||
| > | ||
| <Stack gap={"md"} h={'100%'} align={'center'} justify={"center"} py={"lg"} px={"xl"}> | ||
| <Card mah={"90vh"} w={'100%'} withBorder component={ScrollArea}> | ||
| {/* Filters */} | ||
| <Title order={2}>Filters</Title> | ||
|
|
||
| <Grid gutter={0}> | ||
| <Grid.Col span={12}> | ||
| <Select label={'Show me'} placeholder={'Select'} data={showMeOptions}/> | ||
| </Grid.Col> | ||
| <Grid.Col span={12}> | ||
| <Divider my={"md"}/> | ||
|
|
||
| </Grid.Col> | ||
| </Grid> | ||
| </Card> | ||
| </Stack> | ||
| <Grid gutter={0} grow> | ||
| <Grid.Col span={6} pr={'xs'}> | ||
| <NativeSelect | ||
| label={'Show me'} | ||
| data={showMeOptions} | ||
| leftSection={<IconFriends/>} | ||
| {...form.getInputProps("showMe")} | ||
| /> | ||
| </Grid.Col> | ||
| <Grid.Col pl={'xs'} span={6}> | ||
| <NativeSelect | ||
| label={'Sexuality'} | ||
| data={sexualityOptions} | ||
| leftSection={<IconGenderBigender/>} | ||
| {...form.getInputProps("prefferedSexuality")} | ||
| /> | ||
| </Grid.Col> | ||
| <Grid.Col span={12} mt={"md"}> | ||
| <Box> | ||
| <Text size={"sm"}>Preferred age</Text> | ||
| <RangeSlider | ||
| mt={'xs'} | ||
| marks={sliderMarks} | ||
| max={100} | ||
| min={16} | ||
| minRange={1} | ||
| {...form.getInputProps("prefferedAge")} | ||
| /> | ||
| </Box> | ||
| </Grid.Col> | ||
| <Grid.Col span={12} mt={"lg"}> | ||
| <NativeSelect | ||
| label={'Distance'} | ||
| data={distanceOptions} | ||
| leftSection={<IconRulerMeasure/>} | ||
| {...form.getInputProps("prefferedDistance")} | ||
| /> | ||
| </Grid.Col> | ||
| <Grid.Col span={12} mt={"lg"}> | ||
| <NativeSelect | ||
| label={'Here for'} | ||
| data={hereForOptions} | ||
| leftSection={<IconEye/>} | ||
| {...form.getInputProps("hereFor")} | ||
| /> | ||
| </Grid.Col> | ||
| </Grid> | ||
| </Card> | ||
| {/* Buttons - show them when change is made */} | ||
| {isChanged && ( | ||
| <Group justify={"space-between"}> | ||
| <Button type={"reset"} color="red" radius="lg"> | ||
| Cancel | ||
| </Button> | ||
| <Button type={"submit"} color="green" radius="lg"> | ||
| Apply filters | ||
| </Button> | ||
| </Group> | ||
| )} | ||
| </Stack> | ||
| </form> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.