Skip to content

Commit

Permalink
feature: Create matching menu
Browse files Browse the repository at this point in the history 
- Redo whole match component

Refs: 8696pcz16
Signed-off-by: Jimmy <[email protected]>
  • Loading branch information
@JimTheCat
JimTheCat committed Dec 31, 2024
1 parent e4cd921 commit 115889c
Show file tree
Hide file tree
Showing 9 changed files with 510 additions and 177 deletions.
6 changes: 2 additions & 4 deletions frontend/src/Features/Matching/Matching.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {AppShell, Stack} from "@mantine/core";
import {AppShell} from "@mantine/core";
import {Aside} from "./components/Aside";
import React from "react";
import {Main} from "./components/Main";
Expand All @@ -19,9 +19,7 @@ export const Matching = (props: MatchingProps) => {
<Aside/>
</AppShell.Aside>
<AppShell.Main p={0}>
<Stack mih={"inherit"} p={'lg'} align={'center'} justify={'center'} gap={0}>
{props.component ? props.component : <Main/>}
</Stack>
{props.component ? props.component : <Main/>}
</AppShell.Main>
</AppShell>
);
Expand Down
39 changes: 37 additions & 2 deletions frontend/src/Features/Matching/components/Filters/MatchFilters.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,41 @@
import {Card, Divider, Grid, ScrollArea, Select, Stack, Title} from "@mantine/core";
import {useState} from "react";

export const MatchFilters = () => {
const [range, setRange] = useState<{ from: string | number, to: string | number }>({from: 16, to: 50});

const showMeOptions = [
{
label: 'Male',
value: 'male',
},
{
label: 'Female',
value: 'female',
},
{
label: 'Everyone',
value: 'everyone',
},
]

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"}/>

<Grid gutter={0}>
<Grid.Col span={12}>
<Select label={'Show me'} placeholder={'Select'} data={showMeOptions}/>
</Grid.Col>
<Grid.Col span={12}>

</Grid.Col>
</Grid>
</Card>
</Stack>
);
}
272 changes: 108 additions & 164 deletions frontend/src/Features/Matching/components/Main/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,179 +1,123 @@
import {Badge, Box, Button, Card, Group, ScrollArea, Stack, Text} from "@mantine/core";
import {Carousel} from "@mantine/carousel";
import {IconCheck, IconX} from "@tabler/icons-react";
import classes from './carousel.module.css';
import {useState} from "react";
import {Grid} from "@mantine/core";
import {ProfileCard} from "./components";
import {useEffect, useState} from "react";

type ProfileDummy = {
name: string;
age: number;
location: string;
bio: string;
photos: { index: string; url: string }[];
};

export const Main = () => {
const [isSwiping, setIsSwiping] = useState(false); // Kontroluje animację swipowania
const [swipeDirection, setSwipeDirection] = useState(""); // Kierunek animacji
const [profiles, setProfiles] = useState<ProfileDummy[]>([]);
const [currentIndex, setCurrentIndex] = useState(0);
const [swipeDirection, setSwipeDirection] = useState("");
const [isAnimating, setIsAnimating] = useState(false);

useEffect(() => {
// Symulacja pobierania profili
const newProfiles = [
{
name: "Iza",
age: 23,
location: "London",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/1/800/600"},
{index: "2", url: "https://picsum.photos/seed/2/800/600"},
],
},
{
name: "John",
age: 29,
location: "New York",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/3/800/600"},
{index: "2", url: "https://picsum.photos/seed/4/800/600"},
],
},
{
name: "Alice",
age: 25,
location: "Berlin",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/5/800/600"},
{index: "2", url: "https://picsum.photos/seed/6/800/600"},
],
},
{
name: "Iza",
age: 23,
location: "London",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/1/800/600"},
{index: "2", url: "https://picsum.photos/seed/2/800/600"},
],
},
{
name: "John",
age: 29,
location: "New York",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/3/800/600"},
{index: "2", url: "https://picsum.photos/seed/4/800/600"},
],
},
{
name: "Alice",
age: 25,
location: "Berlin",
bio: "Lorem ipsum dolor sit amet.",
photos: [
{index: "1", url: "https://picsum.photos/seed/5/800/600"},
{index: "2", url: "https://picsum.photos/seed/6/800/600"},
],
},
] as ProfileDummy[];
setProfiles(newProfiles);
}, []);

const handleSwipe = (direction: string) => {
setSwipeDirection(direction); // Ustaw kierunek animacji
setIsSwiping(true);
if (isAnimating) return;
setSwipeDirection(direction);
setIsAnimating(true);

// Resetuj stan po zakończeniu animacji
setTimeout(() => {
setIsSwiping(false);
setCurrentIndex((prev) => prev + 1);
setSwipeDirection("");
}, 500); // Długość animacji w ms
setIsAnimating(false);
}, 500); // Czas animacji
};

return (
<Box
<Grid
pos={"relative"}
w={"100%"}
h={"100vh"}
style={{
// position: "relative",
width: "50%",
height: "100%",
background: isSwiping ? "rgba(0, 0, 0, 0.3)" : "transparent", // Wyszarzenie podczas swipe
transition: "background 0.3s ease",
overflow: "hidden",
}}
>
<Card
radius={"md"}
style={{
position: "relative",
"--card-padding": "0",
transform: isSwiping
? swipeDirection === "left"
? "translateX(-100%)"
: "translateX(100%)"
: "translateX(0)", // Animacja swipowania
transition: "transform 0.5s ease",
boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.2)",
}}
mih={'90dvh'}
>
{/* Obszar przewijania obejmujący cały Card */}
<ScrollArea type={"auto"} style={{maxHeight: "calc(90dvh - 80px)"}}>

{/* Sekcja zdjęcia jako karuzela */}
<Card.Section style={{backgroundColor: "#454545"}}>
<Carousel
withIndicators
loop
classNames={classes}
>
<Carousel.Slide>
<Box
style={{
height: "300px",
backgroundColor: "#5A5A5A",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Text ta="center" style={{color: "#FFF"}}>
Photo 1
</Text>
</Box>
</Carousel.Slide>
<Carousel.Slide>
<Box
style={{
height: "300px",
backgroundColor: "#6A6A6A",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Text ta="center" style={{color: "#FFF"}}>
Photo 2
</Text>
</Box>
</Carousel.Slide>
<Carousel.Slide>
<Box
style={{
height: "300px",
backgroundColor: "#7A7A7A",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Text ta="center" style={{color: "#FFF"}}>
Photo 3
</Text>
</Box>
</Carousel.Slide>
</Carousel>
</Card.Section>

{/* Informacje o użytkowniku */}
<Stack gap="xs" p="md">
<Group justify="apart">
<Text size="xl" fw={700}>
Imie
</Text>
<Badge color="orange" size="lg" radius="xl">
P
</Badge>
</Group>
<Text size="sm" c="gray">
London, 21
</Text>
<Group justify="apart">
<Text size="xl" fw={700}>
Imie
</Text>
<Badge color="orange" size="lg" radius="xl">
P
</Badge>
</Group>
<Text size="sm" c="gray">
London, 21
</Text>
<Group justify="apart">
<Text size="xl" fw={700}>
Imie
</Text>
<Badge color="orange" size="lg" radius="xl">
P
</Badge>
</Group>
<Text size="sm" c="gray">
London, 21
</Text>
</Stack>
</ScrollArea>

<Group
justify="space-evenly"
style={{
position: "absolute",
bottom: "1rem",
left: "50%",
transform: "translateX(-50%)",
width: "100%",
}}
>
<Button
color="red"
radius="xl"
size="lg"
style={{
boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.3)", // Cień przycisku
}}
onClick={() => handleSwipe("left")} // Swipe w lewo
>
<IconX/>
</Button>
<Button
color="green"
radius="xl"
size="lg"
style={{
boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.3)", // Cień przycisku
}}
onClick={() => handleSwipe("right")} // Swipe w prawo
>
<IconCheck/>
</Button>
</Group>
</Card>
</Box>
{profiles
.slice(currentIndex, currentIndex + 2) // Tylko bieżąca karta i następna
.map((profile, index) => {
return (
<ProfileCard
key={currentIndex + index}
profile={profile}
isActive={index === 0}
isNext={index === 1}
swipeDirection={index === 0 ? swipeDirection : ""}
handleSwipe={handleSwipe}
/>
);
})}
</Grid>
);
};
Loading

0 comments on commit 115889c

Please sign in to comment.