src/app/App.tsx

@@ -13,14 +13,26 @@ const AddRegionButton: React.FC = () => {
   return <Button onClick={handleClick}>Add Region "Sverige"</Button>;
 };
 
+const ResetFilters: React.FC = () => {
+  const resetFilters = useFilterStore((state) => state.resetFilters);
+
+  const handleClick = () => {
+    resetFilters();
+  };
+
+  return <Button onClick={handleClick}>Reset filters</Button>;
+};
+
 export default function App() {
   const filters = useFilterStore((state) => state.filters);
 
   return (
     <div className="container flex w-full flex-col justify-center">
       <FormCard />
+      <h1 className="text-2xl">Filter state:</h1>
       {JSON.stringify(filters)}
       <AddRegionButton />
+      <ResetFilters />
     </div>
   );
 }

src/app/_components/FilterMenu.tsx

@@ -10,16 +10,19 @@ import {
 import { Input } from "~/components/ui/input";
 import { Slider } from "~/components/ui/slider";
 import { ChangeEvent, useState } from "react";
+import useFilterStore from "../store";
 
 export default function Filtermenu() {
   const [minPrice, setMinPrice] = useState<number>(0);
   const [maxPrice, setMaxPrice] = useState<number>(9999);
   const [sliderValues, setSliderValues] = useState<[number, number]>([0, 9999]);
+  const setStorePrice = useFilterStore((state) => state.setPrice);
 
   const handleMinPriceChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const value = Math.min(Number(e.target.value), maxPrice - 1);
     setMinPrice(value);
     setSliderValues([value, sliderValues[1]]);
+    setStorePrice(minPrice, maxPrice);
   };
 
   const handleMaxPriceChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -32,6 +35,7 @@ export default function Filtermenu() {
     setSliderValues(values);
     setMinPrice(values[0]);
     setMaxPrice(values[1]);
+    setStorePrice(minPrice, maxPrice);
   };
 
   return (