mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-04-11 01:59:14 -04:00
Add basic filters
This commit is contained in:
MartinBraquet
@@ -1,22 +1,84 @@
|
||||
import { prisma }from "@/lib/server/prisma";
|
||||
import { prisma } from "@/lib/server/prisma";
|
||||
import { NextResponse } from "next/server";
|
||||
import {getSession} from "@/lib/server/auth";
|
||||
import { getSession } from "@/lib/server/auth";
|
||||
|
||||
type FilterParams = {
|
||||
gender?: string;
|
||||
interests?: string[];
|
||||
causeAreas?: string[];
|
||||
searchQuery?: string;
|
||||
};
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const url = new URL(request.url);
|
||||
const page = parseInt(url.searchParams.get("page") || "1");
|
||||
const gender = url.searchParams.get("gender");
|
||||
const interests = url.searchParams.get("interests")?.split(",").filter(Boolean) || [];
|
||||
const causeAreas = url.searchParams.get("causeAreas")?.split(",").filter(Boolean) || [];
|
||||
const searchQuery = url.searchParams.get("search") || "";
|
||||
|
||||
const profilesPerPage = 20;
|
||||
const offset = (page - 1) * profilesPerPage;
|
||||
|
||||
const session = await getSession();
|
||||
console.log(`Session: ${session?.user?.name}`);
|
||||
|
||||
// Fetch paginated posts
|
||||
// Build the where clause based on filters
|
||||
const where: any = {
|
||||
id: { not: session?.user?.id },
|
||||
};
|
||||
|
||||
if (gender) {
|
||||
where.profile = {
|
||||
...where.profile,
|
||||
gender: gender,
|
||||
};
|
||||
}
|
||||
|
||||
if (interests.length > 0) {
|
||||
where.profile = {
|
||||
...where.profile,
|
||||
intellectualInterests: {
|
||||
some: {
|
||||
interest: {
|
||||
name: { in: interests },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (causeAreas.length > 0) {
|
||||
where.profile = {
|
||||
...where.profile,
|
||||
causeAreas: {
|
||||
some: {
|
||||
causeArea: {
|
||||
name: { in: causeAreas },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (searchQuery) {
|
||||
where.OR = [
|
||||
{ name: { contains: searchQuery, mode: 'insensitive' } },
|
||||
{ email: { contains: searchQuery, mode: 'insensitive' } },
|
||||
{
|
||||
profile: {
|
||||
description: { contains: searchQuery, mode: 'insensitive' },
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// Fetch paginated and filtered profiles
|
||||
const profiles = await prisma.user.findMany({
|
||||
skip: offset,
|
||||
take: profilesPerPage,
|
||||
orderBy: { createdAt: "desc" },
|
||||
where: { id: {not: session?.user?.id} },
|
||||
where,
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
@@ -31,27 +93,6 @@ export async function GET(request: Request) {
|
||||
},
|
||||
},
|
||||
},
|
||||
// where: {
|
||||
// id: {
|
||||
// not: session?.user?.id, // Exclude the logged-in user
|
||||
// gender: 'FEMALE',
|
||||
// intellectualInterests: {
|
||||
// some: {
|
||||
// interest: { name: 'Philosophy' }
|
||||
// }
|
||||
// },
|
||||
// causeAreas: {
|
||||
// some: {
|
||||
// causeArea: { name: 'AI Safety' }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// include: {
|
||||
// user: true,
|
||||
// intellectualInterests: { include: { interest: true } },
|
||||
// causeAreas: { include: { causeArea: true } }
|
||||
// }
|
||||
// },
|
||||
});
|
||||
|
||||
const totalProfiles = await prisma.user.count();
|
||||
|
||||
147
app/profiles/ProfileFilters.tsx
Normal file
147
app/profiles/ProfileFilters.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
// Mock data for filter options
|
||||
const GENDER_OPTIONS = [
|
||||
{ value: 'Male', label: 'Male' },
|
||||
{ value: 'Female', label: 'Female' },
|
||||
{ value: 'NonBinary', label: 'Non-binary' },
|
||||
{ value: 'Other', label: 'Prefer not to say' },
|
||||
];
|
||||
|
||||
// These would ideally come from your database
|
||||
const INTEREST_OPTIONS = [
|
||||
'AI Safety',
|
||||
'Philosophy',
|
||||
'Effective Altruism',
|
||||
'Rationality',
|
||||
'Technology',
|
||||
'Science',
|
||||
'Policy',
|
||||
];
|
||||
|
||||
const CAUSE_AREA_OPTIONS = [
|
||||
'AI Safety',
|
||||
'Global Health',
|
||||
'Animal Welfare',
|
||||
'Biosecurity',
|
||||
'Climate Change',
|
||||
'Global Poverty',
|
||||
];
|
||||
|
||||
interface FilterProps {
|
||||
filters: {
|
||||
gender: string;
|
||||
interests: string[];
|
||||
causeAreas: string[];
|
||||
searchQuery: string;
|
||||
};
|
||||
onFilterChange: (key: string, value: any) => void;
|
||||
onToggleFilter: (key: 'interests' | 'causeAreas', value: string) => void;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export function ProfileFilters({ filters, onFilterChange, onToggleFilter, onReset }: FilterProps) {
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full mb-8">
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-4">
|
||||
<div className="relative flex-grow">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name, email, or description..."
|
||||
className="w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
value={filters.searchQuery}
|
||||
onChange={(e) => onFilterChange('searchQuery', e.target.value)}
|
||||
/>
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 flex items-center gap-2 whitespace-nowrap"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
{showFilters ? 'Hide Filters' : 'Show Filters'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showFilters && (
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Gender</label>
|
||||
<select
|
||||
className="w-full p-2 border rounded-lg"
|
||||
value={filters.gender}
|
||||
onChange={(e) => onFilterChange('gender', e.target.value)}
|
||||
>
|
||||
<option value="">Any Gender</option>
|
||||
{GENDER_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Interests</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{INTEREST_OPTIONS.map((interest) => (
|
||||
<button
|
||||
key={interest}
|
||||
onClick={() => onToggleFilter('interests', interest)}
|
||||
className={`px-3 py-1 text-sm rounded-full ${
|
||||
filters.interests.includes(interest)
|
||||
? 'bg-blue-100 text-blue-800 border border-blue-200'
|
||||
: 'bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{interest}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Cause Areas</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CAUSE_AREA_OPTIONS.map((cause) => (
|
||||
<button
|
||||
key={cause}
|
||||
onClick={() => onToggleFilter('causeAreas', cause)}
|
||||
className={`px-3 py-1 text-sm rounded-full ${
|
||||
filters.causeAreas.includes(cause)
|
||||
? 'bg-green-100 text-green-800 border border-green-200'
|
||||
: 'bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{cause}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +1,177 @@
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import {useEffect, useState} from "react";
|
||||
import {useCallback, useEffect, useState} from "react";
|
||||
import {useDebounce} from "use-debounce";
|
||||
import LoadingSpinner from "@/lib/client/LoadingSpinner";
|
||||
import {ProfileData} from "@/lib/client/schema";
|
||||
|
||||
import {ProfileFilters} from "./ProfileFilters";
|
||||
|
||||
// Disable static generation
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
|
||||
export default function ProfilePage() {
|
||||
|
||||
const [profiles, setProfiles] = useState<ProfileData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filters, setFilters] = useState({
|
||||
gender: '',
|
||||
interests: [] as string[],
|
||||
causeAreas: [] as string[],
|
||||
searchQuery: '',
|
||||
});
|
||||
const [debouncedFilters] = useDebounce(filters, 500);
|
||||
|
||||
const fetchProfiles = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (filters.gender) params.append('gender', filters.gender);
|
||||
if (filters.interests.length > 0) params.append('interests', filters.interests.join(','));
|
||||
if (filters.causeAreas.length > 0) params.append('causeAreas', filters.causeAreas.join(','));
|
||||
if (filters.searchQuery) params.append('search', filters.searchQuery);
|
||||
|
||||
const response = await fetch(`/api/profiles?${params.toString()}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(data.error || 'Failed to fetch profiles');
|
||||
return;
|
||||
}
|
||||
|
||||
setProfiles(data.profiles || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching profiles:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/profiles');
|
||||
console.log(response)
|
||||
fetchProfiles();
|
||||
}, [fetchProfiles]);
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data)
|
||||
const handleFilterChange = (key: string, value: any) => {
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}));
|
||||
};
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(data.error || 'Failure');
|
||||
}
|
||||
const toggleFilter = (key: 'interests' | 'causeAreas', value: string) => {
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
[key]: prev[key].includes(value)
|
||||
? prev[key].filter((item: string) => item !== value)
|
||||
: [...prev[key], value]
|
||||
}));
|
||||
};
|
||||
|
||||
const p = data['profiles'];
|
||||
setProfiles(p);
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
if (!profiles) return <LoadingSpinner />;
|
||||
const resetFilters = () => {
|
||||
setFilters({
|
||||
gender: '',
|
||||
interests: [],
|
||||
causeAreas: [],
|
||||
searchQuery: '',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col items-center py-24 px-8">
|
||||
<h1 className="text-5xl font-extrabold mb-12 text-[#333333]">Profiles</h1>
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-1 w-full max-w-6xl mb-8">
|
||||
{profiles.length > 0 ?
|
||||
(profiles.map((user) => (
|
||||
<Link key={user.id} href={`/profiles/${user.id}`} className="group">
|
||||
<div className="border rounded-lg shadow-md bg-white p-6 hover:shadow-lg transition-shadow duration-300">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 group-hover:underline mb-2">{user.name}</h2>
|
||||
{user?.profile?.description && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-4">{user.profile.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))) : (
|
||||
<div className="flex items-center justify-center">
|
||||
There are no profiles for this search. Relax the filters or come back later.
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-6xl">
|
||||
<h1 className="text-4xl sm:text-5xl font-extrabold mb-8 text-gray-900">Profiles</h1>
|
||||
|
||||
<ProfileFilters
|
||||
filters={filters}
|
||||
onFilterChange={handleFilterChange}
|
||||
onToggleFilter={toggleFilter}
|
||||
onReset={resetFilters}
|
||||
/>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center my-12">
|
||||
<LoadingSpinner/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
) : (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 w-full">
|
||||
{profiles.length > 0 ? (
|
||||
profiles.map((user) => (
|
||||
<Link key={user.id} href={`/profiles/${user.id}`} className="group">
|
||||
<div
|
||||
className="border rounded-lg shadow-sm bg-white p-6 hover:shadow-md transition-shadow duration-300 h-full">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-semibold text-gray-900 group-hover:underline mb-1">
|
||||
{user.name}
|
||||
</h2>
|
||||
{user?.profile?.description && (
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{user.profile.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{user.profile?.intellectualInterests && user.profile.intellectualInterests.length > 0 && (
|
||||
<div>
|
||||
{user.profile.intellectualInterests.slice(0, 3).map(({interest}) => (
|
||||
<span key={interest?.id}
|
||||
className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">
|
||||
{interest?.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{user.profile?.causeAreas && user.profile.causeAreas.length > 0 && (
|
||||
<div>
|
||||
{user.profile.causeAreas.slice(0, 3).map(({causeArea}) => (
|
||||
<span key={causeArea?.id}
|
||||
className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">
|
||||
{causeArea?.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center py-12">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-gray-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
vectorEffect="non-scaling-stroke"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No profiles found</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Try adjusting your search or filter to find what you're looking for.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetFilters}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,9 +9,9 @@ export interface ProfileData {
|
||||
conflictStyle: string;
|
||||
description: string;
|
||||
contactInfo: string;
|
||||
intellectualInterests: { interest?: { name?: string } }[];
|
||||
causeAreas: { causeArea?: { name?: string } }[];
|
||||
desiredConnections: { connection?: { name?: string } }[];
|
||||
promptAnswers: { prompt?: string; answer?: string }[];
|
||||
intellectualInterests: { interest?: { name?: string, id?: string } }[];
|
||||
causeAreas: { causeArea?: { name?: string, id?: string } }[];
|
||||
desiredConnections: { connection?: { name?: string, id?: string } }[];
|
||||
promptAnswers: { prompt?: string; answer?: string, id?: string }[];
|
||||
};
|
||||
}
|
||||
12
package-lock.json
generated
12
package-lock.json
generated
@@ -27,6 +27,7 @@
|
||||
"react-dom": "^19.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"resend": "^4.7.0",
|
||||
"use-debounce": "^10.0.5",
|
||||
"uuid": "^11.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -9308,6 +9309,17 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-debounce": {
|
||||
"version": "10.0.5",
|
||||
"resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.5.tgz",
|
||||
"integrity": "sha512-Q76E3lnIV+4YT9AHcrHEHYmAd9LKwUAbPXDm7FlqVGDHiSOhX3RDjT8dm0AxbJup6WgOb1YEcKyCr11kBJR5KQ==",
|
||||
"engines": {
|
||||
"node": ">= 16.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
"react-dom": "^19.0.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"resend": "^4.7.0",
|
||||
"use-debounce": "^10.0.5",
|
||||
"uuid": "^11.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user