Add filter params to url query params

Author: MartinBraquet

app/api/profiles/route.ts

@@ -14,7 +14,7 @@ export async function GET(request: Request) {
   const coreValues = url.searchParams.get("coreValues")?.split(",").filter(Boolean) || [];
   const causeAreas = url.searchParams.get("causeAreas")?.split(",").filter(Boolean) || [];
   const connections = url.searchParams.get("connections")?.split(",").filter(Boolean) || [];
-  const searchQuery = url.searchParams.get("search") || "";
+  const searchQuery = url.searchParams.get("searchQuery") || "";
 
   const profilesPerPage = 100;
   const offset = (page - 1) * profilesPerPage;
@@ -147,6 +147,7 @@ export async function GET(request: Request) {
 
   if (searchQuery) {
     where.OR = [
+      ...(where.OR ?? []),
       {name: {contains: searchQuery, mode: 'insensitive'}},
       // {email: {contains: searchQuery, mode: 'insensitive'}},
       {

app/profiles/ProfileFilters.tsx

@@ -4,9 +4,8 @@ import React, {useEffect, useRef, useState} from 'react';
 import {Gender} from "@prisma/client";
 import Dropdown from "@/app/components/dropdown";
 import Slider from '@mui/material/Slider';
-import {DropdownKey, RangeKey} from "@/lib/client/schema";
+import {DropdownKey, Item, RangeKey} from "@/lib/client/schema";
 import {capitalize} from "@/lib/format";
-import {Item} from "@/lib/client/schema";
 import {fetchFeatures} from "@/lib/client/fetching";
 
 interface FilterProps {
@@ -71,9 +70,47 @@ export function ProfileFilters({filters, onFilterChange, onShowFilters, onToggle
 
 
   useEffect(() => {
-    fetchFeatures(setOptionsDropdownId)
+    fetchFeatures(setOptionsDropdownId);
   }, []);
 
+  useEffect(() => {
+    console.log('selectedDropdown changed:', selectedDropdown);
+  }, [selectedDropdown]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    console.log('optionsDropdown changed:', optionsDropdown, params);
+
+    for (const [key, value] of params.entries()) {
+      let v: any = value
+      if (key === 'minAge') {
+        setMinRange({...minRange, age: v});
+      } else if (key === 'maxAge') {
+        setMaxRange({...maxRange, age: v});
+      } else if (key === 'minIntroversion') {
+        setMinRange({...minRange, introversion: v});
+      } else if (key === 'maxIntroversion') {
+        setMaxRange({...maxRange, introversion: v});
+      } else if (['interests', 'coreValues', 'causeAreas', 'connections'].includes(key)) {
+        v = v.split(",").filter(Boolean) || []
+        console.log(v)
+        for (const n of v) {
+          const option = optionsDropdown[key].find(i => i.name === n);
+          if (option) {
+            console.log(option);
+            setSelectedDropdown(prev => {
+              const newSet = new Set(prev[key]);
+              newSet.add(option.id);
+              return {...prev, [key]: newSet};
+            });
+          }
+
+        }
+      }
+    }
+  }, [optionsDropdown]);
+
   useEffect(() => {
     // Close dropdown when clicking outside
     const handleClickOutside = (event: MouseEvent) => {
@@ -104,6 +141,7 @@ export function ProfileFilters({filters, onFilterChange, onShowFilters, onToggle
       } else {
         newSet.add(optionId);
       }
+      // console.log(newSet);
       return {...prev, [id]: newSet};
     });
   };

app/profiles/page.tsx

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import React, {useCallback, useEffect, useState} from "react";
-import LoadingSpinner from "@/lib/client/LoadingSpinner";
 import {DropdownKey, ProfileData} from "@/lib/client/schema";
 import {dropdownConfig, ProfileFilters} from "./ProfileFilters";
 import Image from "next/image";
@@ -26,19 +25,68 @@ const initialState = {
   forceRun: false,
 };
 
+type ProfileFilters = {
+  gender: string;
+  minAge: number | null;
+  maxAge: number | null;
+  minIntroversion: number | null;
+  maxIntroversion: number | null;
+  interests: string[];
+  coreValues: string[];
+  causeAreas: string[];
+  connections: string[];
+  searchQuery: string;
+  forceRun: boolean;
+};
+
 
 export default function ProfilePage() {
   const [profiles, setProfiles] = useState<ProfileData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [_, setShowFilters] = useState(true);
-  const [images, setImages] = useState<string[]>([])
+  const [images, setImages] = useState<string[]>([]);
+
+  const [text, setText] = useState<string>('');
+
   const [filters, setFilters] = useState(initialState);
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const newFilters = {...initialState};
+
+    for (const [key, value] of params.entries()) {
+      // Type guard to check if the key is a valid filter key
+      if (key in newFilters) {
+        const filterKey = key as keyof ProfileFilters;
+
+        if (key === 'searchQuery') {
+          setText(value);
+          newFilters[filterKey] = value as never;
+        }
+        else if (['interests', 'coreValues', 'causeAreas', 'connections'].includes(key)) {
+          const arrayKey = filterKey as 'interests' | 'coreValues' | 'causeAreas' | 'connections';
+          newFilters[arrayKey] = [...newFilters[arrayKey], value];
+        }
+      }
+    }
+
+    console.log(newFilters);
+
+    setFilters(newFilters);
+  }, []);
+
+  const [isStart, setIsStart] = useState(true);
+
   const fetchProfiles = useCallback(async () => {
     try {
       setLoading(true);
-      const params = new URLSearchParams();
+      let params = new URLSearchParams();
+      if (isStart) {
+        params = new URLSearchParams(window.location.search);
+        setIsStart(false);
+      }
+      console.log('fetchProfiles', params);
 
       if (filters.gender) params.append('gender', filters.gender);
       if (filters.minAge) params.append('minAge', filters.minAge.toString());
@@ -54,9 +102,12 @@ export default function ProfilePage() {
         }
       }
 
-      if (filters.searchQuery) params.append('search', filters.searchQuery);
+      if (filters.searchQuery) params.append('searchQuery', filters.searchQuery);
+
+      let s = params.toString();
+      window.history.pushState({}, '', `?${s}`);
 
-      const response = await fetch(`/api/profiles?${params.toString()}`);
+      const response = await fetch(`/api/profiles?${s}`);
       const data = await response.json();
       if (!response.ok) {
         console.log(response);
@@ -124,10 +175,9 @@ export default function ProfilePage() {
   const resetFilters = () => {
     setFilters(initialState);
     setText('');
+    // window.history.pushState({}, '', '');
   };
 
-  const [text, setText] = useState<string>('');
-
   const onFilterChange = handleFilterChange
 
   return (
@@ -205,9 +255,10 @@ export default function ProfilePage() {
           <div className="flex-1">
             {loading ? (
               <div className="flex justify-center py-8">
-                  <div className="flex justify-center min-h-screen py-8">
-                  <div data-testid="spinner" className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-                  </div>
+                <div className="flex justify-center min-h-screen py-8">
+                  <div data-testid="spinner"
+                       className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+                </div>
               </div>
             ) : error ? (
               <div className="flex justify-center py-2">