Visual bugfixes, refactor of code, hooks

frontend/src/components/ActiveFilters.tsx

@@ -3,11 +3,11 @@ import { Filter } from "react-feather";
 import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 
 export default function ActiveFilters() {
-  const { filteredDepartments, currentSearch, filteredYears } =
+  const { filteredDepartments, searchFilter, filteredYears } =
     useFilteredConsultants();
   const filterTextComponents: string[] = [];
 
-  if (currentSearch != "") filterTextComponents.push(` "${currentSearch}"`);
+  if (searchFilter != "") filterTextComponents.push(` "${searchFilter}"`);
 
   if (filteredDepartments.length > 0)
     filterTextComponents.push(

frontend/src/components/NavBar/NavBarDropdown.tsx

@@ -1,14 +1,21 @@
 "use client";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { signOut } from "next-auth/react";
-import { LogOut, User } from "react-feather";
+import { LogOut } from "react-feather";
+import { useOutsideClick } from "@/hooks/useOutsideClick";
 
 export default function NavBarDropdown(props: { initials: string }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const menuRef = useRef(null);
+
+  useOutsideClick(menuRef, () => {
+    if (isOpen) setIsOpen(false);
+  });
+
   return (
     <>
-      <div className="relative">
+      <div className="relative" ref={menuRef}>
         <button
           className={`flex rounded-full border border-white h-9 min-w-[36px] justify-center items-center ${
             props.initials.length > 3 && "px-1"

frontend/src/components/StaffingSidebar.tsx

@@ -9,7 +9,7 @@ export default function StaffingSidebar() {
   const [isSidebarHidden, setIsSidebarHidden] = useState(true);
 
   return (
-    <div className="min-h-screen max-[720px]:fixed">
+    <div className="min-h-screen max-[720px]:fixed z-10">
       <div
         className={`bg-primary_l4 py-6 px-4 h-full min-h-screen w-[300px]  ${
           isSidebarHidden

frontend/src/hooks/useFilteredConsultants.ts

@@ -6,30 +6,48 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { FilteredContext } from "@/components/FilteredConsultantProvider";
 import { yearRanges } from "@/components/ExperienceFilter";
 
+interface UpdateFilterParams {
+  search?: string;
+  departments?: string;
+  years?: string;
+}
+
 export function useFilteredConsultants() {
   const { departments, consultants } = useContext(FilteredContext);
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const currentSearch = searchParams.get("search") || "";
+
+  const searchFilter = searchParams.get("search") || "";
+  const departmentFilter = searchParams.get("depFilter") || "";
+  const yearFilter = searchParams.get("yearFilter") || "";
 
   const [activeNameSearch, setActiveNameSearch] =
-    useState<string>(currentSearch);
+    useState<string>(searchFilter);
   const [lastSearchKeyStrokeTime, setLastSearchKeyStrokeTime] =
     useState<number>();
 
+  const updateRoute = useCallback(
+    (updateParams: UpdateFilterParams) => {
+      // If not defined, defaults to current value:
+      const { search = searchFilter } = updateParams;
+      const { departments = departmentFilter } = updateParams;
+      const { years = yearFilter } = updateParams;
+
+      router.push(
+        `${pathname}?search=${search}&depFilter=${departments}&yearFilter=${years}`,
+      );
+    },
+    [departmentFilter, pathname, router, searchFilter, yearFilter],
+  );
+
   useEffect(() => {
     let nameSearchDebounceTimer = setTimeout(() => {
       if (
         lastSearchKeyStrokeTime &&
         Date.now() - lastSearchKeyStrokeTime > 250
       ) {
-        const currentDepartmentFilter = searchParams.get("depFilter") || "";
-        const currentYearFilter = searchParams.get("yearFilter") || "";
-
-        router.push(
-          `${pathname}?search=${activeNameSearch}&depFilter=${currentDepartmentFilter}&yearFilter=${currentYearFilter}`,
-        );
+        updateRoute({ search: activeNameSearch });
       }
     }, 250);
 
@@ -39,30 +57,21 @@ export function useFilteredConsultants() {
     return () => {
       clearTimeout(nameSearchDebounceTimer);
     };
-  }, [
-    lastSearchKeyStrokeTime,
-    activeNameSearch,
-    searchParams,
-    router,
-    pathname,
-  ]);
-
-  const currentDepartmentFilter = searchParams.get("depFilter") || "";
-  const currentYearFilter = searchParams.get("yearFilter") || "";
-
-  const filteredDepartments = currentDepartmentFilter
+  }, [activeNameSearch, lastSearchKeyStrokeTime, updateRoute]);
+
+  const filteredDepartments = departmentFilter
     .split(",")
     .map((id) => departments.find((d) => d.id === id))
     .filter((dept) => dept !== undefined) as Department[];
 
-  const filteredYears = currentYearFilter
+  const filteredYears = yearFilter
     .split(",")
     .map((urlString) => yearRanges.find((y) => y.urlString === urlString))
     .filter((year) => year !== undefined) as YearRange[];
 
   const filteredConsultants = filterConsultants(
-    currentSearch,
-    currentDepartmentFilter,
+    searchFilter,
+    departmentFilter,
     filteredYears,
     consultants,
   );
@@ -74,61 +83,20 @@ export function useFilteredConsultants() {
 
   const toggleDepartmentFilter = useCallback(
     (d: Department) => {
-      const currentSearch = searchParams.get("search") || "";
-      const currentFilter = searchParams.get("depFilter") || "";
-      const currentYearFilter = searchParams.get("yearFilter") || "";
-      const filters = currentFilter.split(",");
-      const filterIndex = filters.indexOf(d.id);
-      const newFilters = [...filters];
-      if (filterIndex === -1) {
-        newFilters.push(d.id);
-      } else {
-        newFilters.splice(filterIndex, 1);
-      }
-      const newFilterString = newFilters.join(",").replace(/^,/, "");
-      router.push(
-        `${pathname}?search=${currentSearch}&depFilter=${newFilterString}&yearFilter=${currentYearFilter}`,
-      );
+      const newDepartmentFilter = toggleValueFromFilter(departmentFilter, d.id);
+      updateRoute({ departments: newDepartmentFilter });
     },
-    [searchParams, router, pathname],
+    [departmentFilter, updateRoute],
   );
 
-  const clearDepartmentFilter = useCallback(() => {
-    const currentSearch = searchParams.get("search") || "";
-    const currentYearFilter = searchParams.get("yearFilter") || "";
-
-    router.push(
-      `${pathname}?search=${currentSearch}&depFilter=&yearFilter=${currentYearFilter}`,
-    );
-  }, [pathname, router, searchParams]);
-
   const toggleYearFilter = useCallback(
     (y: YearRange) => {
-      const currentSearch = searchParams.get("search") || "";
-      const currentDepartmentFilter = searchParams.get("depFilter") || "";
-      const currentYearFilter = searchParams.get("yearFilter") || "";
-
-      const filters = currentYearFilter.split(",");
-      const filterIndex = filters.indexOf(y.urlString);
-      const newFilters = [...filters];
-      if (filterIndex === -1) {
-        newFilters.push(y.urlString);
-      } else {
-        newFilters.splice(filterIndex, 1);
-      }
-      const newFilterString = newFilters.join(",").replace(/^,/, "");
-
-      router.push(
-        `${pathname}?search=${currentSearch}&depFilter=${currentDepartmentFilter}&yearFilter=${newFilterString}`,
-      );
+      const newYearFilter = toggleValueFromFilter(yearFilter, y.urlString);
+      updateRoute({ years: newYearFilter });
     },
-    [pathname, router, searchParams],
+    [updateRoute, yearFilter],
   );
 
-  const clearAll = useCallback(() => {
-    router.push(`${pathname}?search=&depFilter=&yearFilter=`);
-  }, [pathname, router]);
-
   useEffect(() => {
     function handleDepartmentHotkey(keyCode: string) {
       departments
@@ -146,7 +114,7 @@ export function useFilteredConsultants() {
         handleDepartmentHotkey(e.code);
       }
       if (e.code.includes("0")) {
-        clearDepartmentFilter();
+        updateRoute({ departments: "" });
       }
     }
     document.addEventListener("keydown", keyDownHandler);
@@ -155,7 +123,7 @@ export function useFilteredConsultants() {
     return () => {
       document.removeEventListener("keydown", keyDownHandler);
     };
-  }, [clearAll, clearDepartmentFilter, departments, toggleDepartmentFilter]);
+  }, [updateRoute, departments, toggleDepartmentFilter]);
 
   return {
     consultants,
@@ -164,15 +132,51 @@ export function useFilteredConsultants() {
     filteredDepartments,
     filteredYears,
     currentNameSearch: activeNameSearch,
-    currentSearch,
+    searchFilter,
     setNameSearch,
     toggleDepartmentFilter,
     toggleYearFilter,
-    clearDepartmentFilter,
-    clearAll,
   };
 }
 
+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(/^,/, "");
+  }
+}
+
+function toggleValueFromFilter(stringFilters: string, value: string) {
+  const filter = new UrlStringFilter(stringFilters, value);
+
+  return filter.valueAlreadyExist
+    ? filter.removeFromFilter()
+    : filter.addToFilter();
+}
+
 function filterConsultants(
   search: string,
   departmentFilter: string,

frontend/src/hooks/useOutsideClick.ts

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect, RefObject } from "react";
+
+export function useOutsideClick(
+  ref: RefObject<HTMLElement>,
+  callback: () => void,
+) {
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        callback();
+      }
+    }
+
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, [ref, callback]);
+}

frontend/src/screens.config.ts

@@ -0,0 +1,15 @@
+export const windowWidth = {
+  xs: 640,
+  sm: 768,
+  md: 1024,
+  lg: 1280,
+  xl: 1400,
+};
+
+export const screens = {
+  xs: `${windowWidth.xs}px`,
+  sm: `${windowWidth.sm}px`,
+  md: `${windowWidth.md}px`,
+  lg: `${windowWidth.lg}px`,
+  xl: `${windowWidth.xl}px`,
+};

frontend/tailwind.config.js → frontend/tailwind.config.ts

@@ -1,5 +1,7 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import type { Config } from "tailwindcss";
+import { screens } from "./src/screens.config";
+
+export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     colors: {
@@ -15,16 +17,10 @@ module.exports = {
       transparent: "transparent",
     },
     extend: {},
-    screens: {
-      xs: "640px",
-      sm: "768px",
-      md: "1024px",
-      lg: "1280px",
-      xl: "1400px",
-    },
+    screens,
     boxShadow: {
       md: "0 4px 4px 0 rgba(66, 61, 137, 0.10)",
     },
   },
   plugins: [],
-};
+} satisfies Config;