Combination of useRange and useRefinementList

[kamami]

Hi all,

I am currently working on a filter for charging sessions. I am using useRange hook to refine the results for a time span (e.g. 01.02.2025 - 05.02.2025). Beside that I have a refinementList with charging stations. My Problem is as follows: When I select a charging station which does not have any results, the start and range attribute of useRange changes as well. I can not select any days anymore, because useRange seems to dynamically return only facets with hits. Is there anyway to "decouple" the two filters? Here are my two filter components:

DatePicker

"use client";

import React, { useEffect, useState } from "react";
import { de } from "date-fns/locale";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { DateTime } from "luxon";
import { CalendarArrowDownIcon, CalendarArrowUp } from "lucide-react";
import { useRange } from "react-instantsearch";

export default function DatePickerWith() {
  const [open, setOpen] = useState(false);

  const { start, refine, canRefine, range } = useRange({
    attribute: "searchDate",
  });
  const { min, max } = range;

  const [value, setValue] = useState(undefined);
  const [hasUserSelected, setHasUserSelected] = useState(false);

  const from = Math.max(min, Number.isFinite(start[0]) ? start[0] : min);
  const to = Math.min(max, Number.isFinite(start[1]) ? start[1] : max);

  useEffect(() => {
    if (!hasUserSelected) {
      if (start[0] === -Infinity && start[1] === Infinity) {
        setValue(undefined);
      } else {
        setValue({
          from: new Date(from * 1000),
          to: new Date(to * 1000),
        });
      }
    }
  }, [from, to, start, hasUserSelected]);

  useEffect(() => {
    console.log(value);
    if (open) return;
    if (!value) {
      refine();

      return;
    }
    if (!value.to || !value.from) {
      setValue(undefined);
      return;
    }
    if (value.to && value.from) {
      const startTimestamp = Math.floor(value.from.getTime() / 1000);
      const endTimestamp = Math.floor(value.to.getTime() / 1000);
      refine([startTimestamp, endTimestamp]);
    }
  }, [open]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          className={cn(
            "w-full justify-start text-left font-normal",
            !value && "text-muted-foreground"
          )}
        >
          {open ? <CalendarArrowUp /> : <CalendarArrowDownIcon />}
          {value?.from ? (
            value.to ? (
              <>
                {DateTime.fromJSDate(value.from)
                  .setLocale("de")
                  .toLocaleString({
                    ...DateTime.DATE_MED,
                    day: "2-digit",
                    year: "2-digit",
                  })}{" "}
                -{" "}
                {DateTime.fromJSDate(value.to)
                  .setLocale("de")
                  .toLocaleString({
                    ...DateTime.DATE_MED,
                    day: "2-digit",
                    year: "2-digit",
                  })}
              </>
            ) : (
              DateTime.fromJSDate(value.from)
                .setLocale("de")
                .toLocaleString({
                  ...DateTime.DATE_MED,
                  day: "2-digit",
                })
            )
          ) : (
            <span>Wähle einen Zeitraum</span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="range"
          numberOfMonths={2}
          selected={value}
          onSelect={(newValue) => {
            setHasUserSelected(true); // Markiere, dass der Nutzer etwas ausgewählt hat
            setValue(newValue);
          }}
          initialFocus
          fromDate={new Date(min * 1000)}
          toDate={new Date(max * 1000)}
          locale={de}
        />
      </PopoverContent>
    </Popover>
  );
}

ChargerFilter

import { cn } from "@/lib/utils";
import { useRefinementList, useCurrentRefinements } from "react-instantsearch";
import { Checkbox } from "@/components/ui/checkbox";
import { useState, useCallback, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown } from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  collection,
  getDoc,
  query,
  getFirestore,
  orderBy,
  where,
  doc,
  getDocs,
} from "firebase/firestore";

import firebase_app from "@/config/firebase-app";
import { useSelector } from "react-redux";
// Definieren Sie alle möglichen Status

export default function ChargerFilter() {
  const storedCompany = useSelector((state) => state.company);

  const [open, setOpen] = useState(false);
  const db = getFirestore(firebase_app);
  const [charger, setCharger] = useState([]);
  const { refine } = useRefinementList({
    attribute: "charger.id",
    operator: "or", // Ermöglicht mehrere ausgewählte Filter
    // limit: 2, // Anzahl der Status
  });

  const { items: currentRefinements } = useCurrentRefinements({
    includedAttributes: ["charger.id"],
  });

  const activeStatusRefinements = currentRefinements.flatMap((refinement) =>
    refinement.refinements.map((item) => item.value)
  );

  const fetchCharger = useCallback(async () => {
    const chargersSnapshot = await getDocs(
      query(
        collection(db, "cps"),
        where("membership.company.id", "==", storedCompany.company.id),
        where("membership.location.id", "==", storedCompany.selectedBranch.id)
      )
    );
    const vehicles = chargersSnapshot.docs.map((doc) => {
      return { ...doc.data(), id: doc.id };
    });
    setCharger(vehicles);
  }, [db, storedCompany]);

  useEffect(() => {
    fetchCharger();
  }, [fetchCharger]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          className={cn("justify-between w-full", "text-muted-foreground")}
        >
          <span className="flex-1 text-left">
            {" "}
            {activeStatusRefinements.length == 0
              ? "Ladestationen wählen"
              : `${activeStatusRefinements.length} Ladestationen`}
          </span>

          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className=" p-0 w-full">
        <Command>
          <CommandInput
            placeholder="Suchen..."
            //   onValueChange={(e) => handleOnSearchChange(e)}
          />
          <CommandList>
            <CommandEmpty className="p-6 text-center text-sm">
              Keine Ladestationen gefunden
            </CommandEmpty>
            <CommandGroup>
              {charger.map((item) => (
                <CommandItem
                  value={item.fullName}
                  key={item.id}
                  onSelect={() => refine(item.id)}
                  className="gap-x-2"
                >
                  {item.fullName}

                  <Check
                    className={cn(
                      "ml-auto h-4 w-4",
                      activeStatusRefinements.includes(item.id)
                        ? "opacity-100"
                        : "opacity-0"
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

[Haroenv]

You can use a manual start and end if you don't want to use the range of the actual hits