Skip to content

Commit

Permalink
Merge pull request #80 from CS196Illinois/thing
Browse files Browse the repository at this point in the history 
in progress getting the matched users
  • Loading branch information
@yangr0
yangr0 authored Dec 8, 2024
2 parents 6a5c4ba + 9ecb0fc commit 6b9609f
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 251 deletions.
2 changes: 1 addition & 1 deletion Project/backend/java-server/app/src/main/java/org/server/MatchingRoutes.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ public ResponseEntity<List<User>> matching(@RequestBody UserPrefs userPrefs) {

@GetMapping(path = "/api/v1/next_user")
public ResponseEntity<UserOutput> nextUser(@RequestBody JsonObject token) {
PostgreSQLController pgController = new PostgreSQLController();
12 PostgreSQLController pgController = new PostgreSQLController();
String sessionToken = token.get("session_token").getAsString();
String discordId = pgController.getDiscordId(sessionToken);
if (pgController.hasUserBeenCreated(discordId)) {
Expand Down
187 changes: 81 additions & 106 deletions Project/frontend/app/matching/components/FilterProfiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,117 +4,92 @@ import React, { useState, useEffect } from 'react';
import SwipeProfiles from './SwipeProfiles';
import { MantineProvider, Container, RangeSlider, MultiSelect, Button, Text } from '@mantine/core';

const FilterProfiles: React.FC = ({ selectedRoles, setSelectedRoles, selectedRanks, setSelectedRanks, ageRange, setAgeRange, filters, setFilters, currentName, setCurrentName, currentImage, setCurrentImage, currentAge, setCurrentAge, currentRank, setCurrentRank, currentRoles, setCurrentRoles, currentBio, setCurrentBio, currentRiotId, setCurrentRiotId, currentDiscordId, setCurrentDiscordId, nextName, setNextName, nextImage, setNextImage, nextAge, setNextAge, nextRank, setNextRank, nextRoles, setNextRoles, nextBio, setNextBio, nextDiscordId, setNextDiscordId, currentPronouns, setCurrentPronouns, nextPronouns, setNextPronouns }) => {
const FilterProfiles: React.FC<FilterProfilesProps> = ({
selectedRoles,
setSelectedRoles,
selectedRanks,
setSelectedRanks,
ageRange,
setAgeRange,
filters,
setFilters,
profilesData // Add this prop
}) => {
const [token, setToken] = useState<string>('');
/*
const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
const [selectedRanks, setSelectedRanks] = useState<string[]>([]);
const [ageRange, setAgeRange] = useState<[number, number]>([18, 99]);
const [filters, setFilters] = useState({ roles: [], rank: '', ageRange: [18, 99] });
const [currentName, setCurrentName] = useState<string>('');
const [currentImage, setCurrentImage] = useState<string>('');
const [currentAge, setCurrentAge] = useState<number>(0);
const [currentRank, setCurrentRank] = useState<string>('');
const [currentRoles, setCurrentRoles] = useState<string[]>('');
const [currentBio, setCurrentBio] = useState<string>('');
const [currentRiotId, setCurrentRiotId] = useState<string>('');
const [currentDiscordId, setCurrentDiscordId] = useState<string>('');
const [nextName, setNextName] = useState<string>('');
const [nextImage, setNextImage] = useState<string>('');
const [nextAge, setNextAge] = useState<number>(0);
const [nextRank, setNextRank] = useState<string>('');
const [nextRoles, setNextRoles] = useState<string[]>('');
const [nextBio, setNextBio] = useState<string>('');
const [nextDiscordId, setNextDiscord] = useState<string>('');
*/

useEffect(() => {
if (typeof window !== 'undefined') {
setToken(localStorage.getItem('sessionToken'));
}
});
if (typeof window !== 'undefined') {
setToken(localStorage.getItem('sessionToken') || '');
}
}, []);

function applyFilter() {
const jsonBody = JSON.stringify({
roles: selectedRoles,
ranks: selectedRanks,
minAge: ageRange[0],
maxAge: ageRange[1],
sessionToken: token
});
fetch('http://10.195.197.251:8080/api/v1/update_prefs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: jsonBody
})
.then((res) => res.json())
.then((data) => {
console.log(jsonBody);
console.log(data);
})
.catch((err) => {
console.error(err);
});
fetch('http://10.195.197.251:8080/api/v1/get_next_user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: token
})
.then((res) => res.json())
.then((data) => {
console.log(data);
setNextName(data.name);
setNextImage(data.image);
setNextAge(data.age);
setNextRank(data.rank);
setNextRoles(data.roles);
setNextBio(data.bio);
setNextRiotId(data.riotId);
setNextPronouns(data.pronouns);
})
.catch((err) => {
console.error(err);
})
}
const applyFilter = () => { // Changed to proper function declaration
const jsonBody = JSON.stringify({
roles: selectedRoles.toLowerCase(),
ranks: selectedRanks.toLowerCase(),
minAge: ageRange[0],
maxAge: ageRange[1],
sessionToken: token
});

fetch('http://10.195.197.251:8080/api/v1/update_prefs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: jsonBody
})
.then((res) => res.json())
.then((data) => {
console.log(jsonBody);
console.log(data);
})
.catch((err) => {
console.error(err);
});
};

return (
<>
<MantineProvider>
<Container style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'start', width: '30%', transform: 'translateY(-6rem)' }}>
<Text size="sm" mt="xl">Age range</Text>
<RangeSlider
minRange={1}
min={18}
max={99}
step={1}
value={ageRange}
onChangeEnd={setAgeRange}
style={{ width: '100%'}}
/>
<MultiSelect
label="Selected Roles"
placeholder="Enter your roles"
value={selectedRoles}
onChange={setSelectedRoles}
data={['Top', 'Jungle', 'Mid', 'ADC', 'Support']}
style={{ width: '100%' }}
/>
<MultiSelect
label="Selected Ranks"
placeholder="Enter your ranks"
value={selectedRanks}
onChange={setSelectedRanks}
data={['Iron', 'Bronze', 'Silver', 'Gold', 'Platinum', 'Emerald', 'Diamond', 'Master', 'Grandmaster', 'Challenger']}
style={{ marginBottom: '1rem', width: '100%' }}
/>
<Button onClick={applyFilter()} style={{ width: '100%' }}>Apply Filter</Button>
</Container>
</MantineProvider>
<SwipeProfiles profiles={profilesData} filters={filters} />
return (
<>
<MantineProvider>
<Container style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'start',
width: '30%',
transform: 'translateY(-6rem)'
}}>
<Text size="sm" mt="xl">Age range</Text>
<RangeSlider
minRange={1}
min={18}
max={99}
step={1}
value={ageRange}
onChangeEnd={setAgeRange}
style={{ width: '100%'}}
/>
<MultiSelect
label="Selected Roles"
placeholder="Enter your roles"
value={selectedRoles}
onChange={setSelectedRoles}
data={['Top', 'Jungle', 'Mid', 'ADC', 'Support']}
style={{ width: '100%' }}
/>
<MultiSelect
label="Selected Ranks"
placeholder="Enter your ranks"
value={selectedRanks}
onChange={setSelectedRanks}
data={['Iron', 'Bronze', 'Silver', 'Gold', 'Platinum', 'Emerald', 'Diamond', 'Master', 'Grandmaster', 'Challenger']}
style={{ marginBottom: '1rem', width: '100%' }}
/>
<Button onClick={applyFilter} style={{ width: '100%' }}>Apply Filter</Button>
</Container>
</MantineProvider>
<SwipeProfiles profiles={profilesData} filters={filters} />
</>
);
};
Expand Down
7 changes: 2 additions & 5 deletions Project/frontend/app/matching/components/ProfileCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,12 @@ interface ProfileCardProps {
age: number;
image: string;
bio: string;
pronouns: string;
pronouns: string[];
riotId: string;
discordId: string;
description: string;
roles: string[]; // Array of image URLs
rank: {
title: string; // Rank as a string
image: string; // Rank image URL
};
rank: string;
}

const ProfileCard: React.FC<ProfileCardProps> = ({
Expand Down
81 changes: 43 additions & 38 deletions Project/frontend/app/matching/components/SwipeProfiles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
import ProfileCard from './ProfileCard'; // Import the ProfileCard component
import ProfileCard from './ProfileCard';
import classes from './profiles.module.css';

interface Filter {
Expand All @@ -13,16 +13,12 @@ interface SwipeProfilesProps {
name: string;
image: string;
bio: string;
pronouns: string;
pronouns: string[];
riotId: string;
discordId: string;
description: string;
roles: string[]; // Array of image URLs
rank: {
title: string; // Rank as a string
image: string; // Rank image URL
};
age: number; // Add age property
roles: string[];
rank: string;
age: number;
}[];
filters: Filter;
}
Expand All @@ -35,25 +31,15 @@ const SwipeProfiles: React.FC<SwipeProfilesProps> = ({ profiles, filters }) => {
const [startPosition, setStartPosition] = useState<number | null>(null);
const [dragDistance, setDragDistance] = useState(0);

useEffect(() => {
const { roles, rank, ageRange } = filters;
const filtered = profiles.filter(profile => {
const roleMatch = roles.length ? roles.some(role => profile.roles.includes(role)) : true;
const rankMatch = rank ? profile.rank.title === rank : true;
const ageMatch = profile.age >= ageRange[0] && profile.age <= ageRange[1];
return roleMatch && rankMatch && ageMatch;
});
setFilteredProfiles(filtered);
}, [filters, profiles]);

// Define swipe functions first
const swipeLeft = useCallback(() => {
if (currentIndex < filteredProfiles.length) {
setSwipeDirection('left');
setTimeout(() => {
setCurrentIndex((prevIndex) => prevIndex + 1);
setSwipeDirection(null);
setDragDistance(0);
}, 300); // Match with CSS transition duration
}, 300);
}
}, [currentIndex, filteredProfiles.length]);

Expand All @@ -64,23 +50,24 @@ const SwipeProfiles: React.FC<SwipeProfilesProps> = ({ profiles, filters }) => {
setCurrentIndex((prevIndex) => prevIndex + 1);
setSwipeDirection(null);
setDragDistance(0);
}, 300); // Match with CSS transition duration
}, 300);
}
}, [currentIndex, filteredProfiles.length]);

const handleMouseDown = (e: React.MouseEvent) => {
// Then define mouse handling functions
const handleMouseDown = useCallback((e: React.MouseEvent) => {
setDragging(true);
setStartPosition(e.clientX);
};
}, []);

const handleMouseMove = (e: MouseEvent) => {
const handleMouseMove = useCallback((e: MouseEvent) => {
if (dragging && startPosition !== null) {
const distance = e.clientX - startPosition;
setDragDistance(distance);
}
};
}, [dragging, startPosition]);

const handleMouseUp = () => {
const handleMouseUp = useCallback(() => {
if (dragging) {
setDragging(false);

Expand All @@ -94,23 +81,34 @@ const SwipeProfiles: React.FC<SwipeProfilesProps> = ({ profiles, filters }) => {

setStartPosition(null);
}
};
}, [dragging, dragDistance, swipeLeft, swipeRight]);

// Filter effect
useEffect(() => {
const { roles, rank, ageRange } = filters;
const filtered = profiles.filter(profile => {
const roleMatch = roles.length === 0 || roles.some(role => profile.roles.includes(role));
const rankMatch = !rank || profile.rank === rank;
const ageMatch = profile.age >= ageRange[0] && profile.age <= ageRange[1];
return roleMatch && rankMatch && ageMatch;
});
setFilteredProfiles(filtered);
}, [filters, profiles]);

// Mouse event listeners
useEffect(() => {
if (dragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
} else {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}

return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
};
}, [dragging, handleMouseMove, handleMouseUp]);

// Keyboard event listeners
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'ArrowRight') {
Expand All @@ -120,9 +118,9 @@ const SwipeProfiles: React.FC<SwipeProfilesProps> = ({ profiles, filters }) => {
}
};

document.addEventListener('keydown', handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [swipeLeft, swipeRight]);

Expand Down Expand Up @@ -153,7 +151,14 @@ const SwipeProfiles: React.FC<SwipeProfilesProps> = ({ profiles, filters }) => {
}}
onMouseDown={handleMouseDown}
>
<ProfileCard {...profile} />
<ProfileCard
{...profile}
rank={{
title: profile.rank,
image: ''
}}
description=""
/>
</div>
);
})
Expand Down
Loading

0 comments on commit 6b9609f

Please sign in to comment.