From b0418f45282cbc487f024fc565d57a076d468047 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 25 Nov 2023 13:38:19 +0100
Subject: [PATCH] fix(time filter): wrong ref

---
 src/components/time-filter/time-filter.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/time-filter/time-filter.tsx b/src/components/time-filter/time-filter.tsx
index d97d1145..73e17898 100644
--- a/src/components/time-filter/time-filter.tsx
+++ b/src/components/time-filter/time-filter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './time-filter.module.css';
 
 const filters = [
@@ -15,32 +15,28 @@ const TimeFilter = () => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const dropChoicesClass = isDropdownOpen ? styles.dropChoicesVisible : styles.dropChoicesHidden;
 
-  const toggleClick = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
+  const handleClickOutside = useCallback((event: MouseEvent) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
       setIsDropdownOpen(false);
     }
-  };
+  }, []);  
 
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [handleClickOutside]);
 
   return (
     <div className={styles.content}>
       <span className={styles.dropdownTitle}>
         links from:{' '}
       </span>
-      <div className={styles.dropdown} onClick={toggleClick}>
+      <div className={styles.dropdown} onClick={() => {setIsDropdownOpen(!isDropdownOpen)}} ref={dropdownRef}>
         <span className={styles.selected}>past month</span>
       </div>
-      <div className={`${styles.dropChoices} ${dropChoicesClass}`} ref={dropdownRef}>
+      <div className={`${styles.dropChoices} ${dropChoicesClass}`}>
         {filters.map((filter: string, index: number) => (
           <div key={index} className={styles.filter} onClick={() => setIsDropdownOpen(false)}>
             {filter}