Split up useFilteredConsultants to smaller hooks

frontend/src/components/ActiveFilters.tsx

@@ -1,12 +1,16 @@
 "use client";
 import { Filter } from "react-feather";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
+import { useUrlRouteFilter } from "@/hooks/staffing/useUrlRouteFilter";
+import { useDepartmentFilter } from "@/hooks/staffing/useDepartmentFilter";
+import { useYearsXpFilter } from "@/hooks/staffing/useYearsXpFilter";
 
 export default function ActiveFilters() {
-  const { filteredDepartments, searchFilter, filteredYears } =
-    useFilteredConsultants();
   const filterTextComponents: string[] = [];
 
+  const { searchFilter } = useUrlRouteFilter();
+  const { filteredDepartments } = useDepartmentFilter();
+  const { filteredYears } = useYearsXpFilter();
+
   if (searchFilter != "") filterTextComponents.push(` "${searchFilter}"`);
 
   if (filteredDepartments.length > 0)

frontend/src/components/AvailabilityFilter.tsx

@@ -1,17 +1,17 @@
 "use client";
+import { useAvailabilityFilter } from "@/hooks/staffing/useAvailabilityFilter";
 import FilterButton from "./FilterButton";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 
 export default function AvailabilityFilter() {
   const { availabilityFilterOn, toggleAvailabilityFilter } =
-    useFilteredConsultants();
+    useAvailabilityFilter();
 
   return (
     <div className="flex flex-col gap-2">
       <p className="body-small">Status</p>
       <FilterButton
         label={"Ledig tid"}
-        onClick={() => toggleAvailabilityFilter(!availabilityFilterOn)}
+        onClick={() => toggleAvailabilityFilter()}
         checked={availabilityFilterOn}
       />
     </div>

frontend/src/components/DepartmentFilter.tsx

@@ -1,10 +1,10 @@
 "use client";
+import { useDepartmentFilter } from "@/hooks/staffing/useDepartmentFilter";
 import FilterButton from "./FilterButton";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 
 export default function DepartmentFilter() {
   const { departments, filteredDepartments, toggleDepartmentFilter } =
-    useFilteredConsultants();
+    useDepartmentFilter();
 
   if (departments.length > 0) {
     departments.sort((a, b) => {

frontend/src/components/ExperienceFilter.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { YearRange } from "@/types";
 import FilterButton from "./FilterButton";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
+import { useYearsXpFilter } from "@/hooks/staffing/useYearsXpFilter";
 
 export const yearRanges: YearRange[] = [
   { label: "0-2", urlString: "0-2", start: 0, end: 2 },
@@ -12,7 +12,7 @@ export const yearRanges: YearRange[] = [
 ];
 
 export default function ExperienceFilter() {
-  const { filteredYears, toggleYearFilter } = useFilteredConsultants();
+  const { toggleYearFilter, filteredYears } = useYearsXpFilter();
 
   if (yearRanges.length > 0) {
     return (

frontend/src/components/FilteredConsultantsList.tsx

@@ -1,17 +1,12 @@
 "use client";
 import ConsultantRows from "./ConsultantRow";
 import ActiveFilters from "./ActiveFilters";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 import WeekSelection from "@/components/WeekSelection";
-import { DateTime } from "luxon";
+import { isCurrentWeek } from "@/hooks/staffing/dateTools";
+import { useConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
 
 export default function FilteredConsultantList() {
-  const { filteredConsultants: consultants } = useFilteredConsultants();
-
-  function isCurrentWeek(weekNumber: number, year: number) {
-    const today = DateTime.now();
-    return today.weekNumber == weekNumber && today.year == year;
-  }
+  const { filteredConsultants } = useConsultantsFilter();
 
   return (
     <div className="flex flex-col gap-8">
@@ -23,7 +18,7 @@ export default function FilteredConsultantList() {
         <colgroup>
           <col span={1} className="w-14" />
           <col span={1} className="w-[190px]" />
-          {consultants
+          {filteredConsultants
             .at(0)
             ?.bookings?.map((booking, index) => <col key={index} span={1} />)}
         </colgroup>
@@ -33,11 +28,11 @@ export default function FilteredConsultantList() {
               <div className="flex flex-row gap-3 pb-4 items-center">
                 <p className="body-large-bold ">Konsulenter</p>
                 <p className="text-primary_default body-small-bold rounded-full bg-primary_l3 px-2 py-1">
-                  {consultants?.length}
+                  {filteredConsultants?.length}
                 </p>
               </div>
             </th>
-            {consultants.at(0)?.bookings?.map((booking) => (
+            {filteredConsultants.at(0)?.bookings?.map((booking) => (
               <th
                 key={booking.weekNumber}
                 className="m-2 px-2 py-1 gap-1 justify-items-end"
@@ -59,7 +54,7 @@ export default function FilteredConsultantList() {
           </tr>
         </thead>
         <tbody>
-          {consultants?.map((consultant) => (
+          {filteredConsultants?.map((consultant) => (
             <ConsultantRows key={consultant.id} consultant={consultant} />
           ))}
         </tbody>

frontend/src/components/SearchBarComponent.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import { Search } from "react-feather";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
+import { useNameSearch } from "@/hooks/staffing/useNameSearch";
 
 export default function SearchBarComponent({
   hidden = false,
 }: {
   hidden?: boolean;
 }) {
-  const { currentNameSearch, setNameSearch } = useFilteredConsultants();
+  const { setNameSearch, activeNameSearch } = useNameSearch();
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchIsActive, setIsSearchActive] = useState(false);
 
@@ -24,7 +24,7 @@ export default function SearchBarComponent({
       if (e.code.includes("Escape")) {
         setNameSearch("");
       }
-      if (e.code.startsWith("Digit")) {
+      if (e.code.startsWith("Digit") || e.code.includes("Period")) {
         inputRef.current?.blur();
       }
     }
@@ -45,7 +45,7 @@ export default function SearchBarComponent({
           className="input invisible-input"
           onChange={(e) => setNameSearch(e.target.value)}
           ref={inputRef}
-          value={currentNameSearch}
+          value={activeNameSearch}
           onFocus={() => console.log("F")}
         />
       ) : (
@@ -65,7 +65,7 @@ export default function SearchBarComponent({
               className="input w-[131px] focus:outline-none body-small"
               onChange={(e) => setNameSearch(e.target.value)}
               ref={inputRef}
-              value={currentNameSearch}
+              value={activeNameSearch}
               onFocus={() => setIsSearchActive(true)}
               onBlur={() => setIsSearchActive(false)}
             />

frontend/src/components/WeekSelection.tsx

@@ -1,20 +1,22 @@
 "use client";
-import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 import SecondaryButton from "@/components/SecondaryButton";
 import { ArrowLeft, ArrowRight } from "react-feather";
 import IconSecondaryButton from "./IconSecondaryButton";
+import { useSelectedWeek } from "@/hooks/staffing/useSelectedWeek";
 import DropDown from "./DropDown";
-
-const weekSpanOptions = ["8 uker", "12 uker", "26 uker"];
+import { useUrlRouteFilter } from "@/hooks/staffing/useUrlRouteFilter";
 
 export default function WeekSelection() {
+  const weekSpanOptions = ["8 uker", "12 uker", "26 uker"];
+
+  const { weekSpan } = useUrlRouteFilter();
+
   const {
+    decrementSelectedWeek,
     incrementSelectedWeek,
     resetSelectedWeek,
-    decrementSelectedWeek,
     setWeekSpan,
-    weekSpan,
-  } = useFilteredConsultants();
+  } = useSelectedWeek();
 
   return (
     <div className="flex flex-row gap-1">

frontend/src/hooks/staffing/UrlStringFilter.ts

@@ -0,0 +1,37 @@
+export class UrlStringFilter {
+  stringFilter: string;
+  arrayFilter: string[];
+  index: number;
+  valueAlreadyExist: boolean;
+  value: string;
+
+  constructor(stringFilter: string, value: string) {
+    this.stringFilter = stringFilter;
+    this.arrayFilter = this.stringFilter.split(",");
+    this.index = this.arrayFilter.indexOf(value);
+    this.valueAlreadyExist = this.index !== -1;
+    this.value = value;
+  }
+
+  removeFromFilter() {
+    this.arrayFilter.splice(this.index, 1);
+    return this.asJoinToString();
+  }
+
+  addToFilter() {
+    this.arrayFilter.push(this.value);
+    return this.asJoinToString();
+  }
+
+  asJoinToString() {
+    return this.arrayFilter.join(",").replace(/^,/, "");
+  }
+}
+
+export function toggleValueFromFilter(stringFilters: string, value: string) {
+  const filter = new UrlStringFilter(stringFilters, value);
+
+  return filter.valueAlreadyExist
+    ? filter.removeFromFilter()
+    : filter.addToFilter();
+}

frontend/src/hooks/staffing/dateTools.ts

@@ -0,0 +1,7 @@
+"use client";
+import { DateTime } from "luxon";
+
+export function isCurrentWeek(weekNumber: number, year: number) {
+  const today = DateTime.now();
+  return today.weekNumber == weekNumber && today.year == year;
+}

frontend/src/hooks/staffing/useAvailabilityFilter.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useUrlRouteFilter } from "./useUrlRouteFilter";
+
+export function useAvailabilityFilter() {
+  const { updateRoute } = useUrlRouteFilter();
+  const { availabilityFilter } = useUrlRouteFilter();
+  const availabilityFilterOn = availabilityFilter === "true";
+
+  const setAvailabilityFilter = useCallback(
+    (availabelFilterOn: Boolean) => {
+      updateRoute({ availability: availabelFilterOn });
+    },
+    [updateRoute],
+  );
+
+  const toggleAvailabilityFilter = useCallback(
+    () => setAvailabilityFilter(!availabilityFilterOn),
+    [availabilityFilterOn, setAvailabilityFilter],
+  );
+
+  useEffect(() => {
+    function keyDownHandler(e: { code: string }) {
+      if (e.code.includes("Period")) {
+        toggleAvailabilityFilter();
+      }
+    }
+    document.addEventListener("keydown", keyDownHandler);
+
+    // clean up
+    return () => {
+      document.removeEventListener("keydown", keyDownHandler);
+    };
+  }, [toggleAvailabilityFilter]);
+
+  return {
+    availabilityFilterOn,
+    toggleAvailabilityFilter,
+    updateRoute,
+  };
+}

frontend/src/hooks/staffing/useConsultantsFilter.ts

@@ -0,0 +1,71 @@
+import { YearRange, Consultant } from "@/types";
+import { useUrlRouteFilter } from "./useUrlRouteFilter";
+import { FilteredContext } from "@/components/FilteredConsultantProvider";
+import { useContext } from "react";
+import { useYearsXpFilter } from "./useYearsXpFilter";
+import { useAvailabilityFilter } from "./useAvailabilityFilter";
+
+export function useConsultantsFilter() {
+  const { consultants } = useContext(FilteredContext);
+
+  const { departmentFilter, searchFilter } = useUrlRouteFilter();
+
+  const { filteredYears } = useYearsXpFilter();
+  const { availabilityFilterOn } = useAvailabilityFilter();
+
+  const filteredConsultants = filterConsultants(
+    searchFilter,
+    departmentFilter,
+    filteredYears,
+    consultants,
+    availabilityFilterOn,
+  );
+
+  return {
+    filteredConsultants,
+  };
+}
+
+function filterConsultants(
+  search: string,
+  departmentFilter: string,
+  yearFilter: YearRange[],
+  consultants: Consultant[],
+  availabilityFilterOn: Boolean,
+) {
+  let newFilteredConsultants = consultants;
+  if (search && search.length > 0) {
+    newFilteredConsultants = newFilteredConsultants?.filter((consultant) =>
+      consultant.name.match(new RegExp(`(?<!\\p{L})${search}.*\\b`, "giu")),
+    );
+  }
+  if (departmentFilter && departmentFilter.length > 0) {
+    newFilteredConsultants = newFilteredConsultants?.filter((consultant) =>
+      departmentFilter
+        .toLowerCase()
+        .includes(consultant.department.toLowerCase()),
+    );
+  }
+  if (yearFilter.length > 0) {
+    newFilteredConsultants = newFilteredConsultants.filter((consultant) =>
+      inYearRanges(consultant, yearFilter),
+    );
+  }
+  if (availabilityFilterOn) {
+    newFilteredConsultants = newFilteredConsultants.filter(
+      (consultant) => !consultant.isOccupied,
+    );
+  }
+  return newFilteredConsultants;
+}
+
+function inYearRanges(consultant: Consultant, yearRanges: YearRange[]) {
+  for (const range of yearRanges) {
+    if (
+      consultant.yearsOfExperience >= range.start &&
+      (!range.end || consultant.yearsOfExperience <= range.end)
+    )
+      return true;
+  }
+  return false;
+}