Refactor: optimize filter sorting with useMemo and integrate useFilters in AdvancedFilterBuilder

src/views/Filters/FilterView.jsx

@@ -10,7 +10,7 @@ import {
   Stack,
   Typography,
 } from '@mui/joy'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import {
@@ -565,18 +565,20 @@ const FilterView = () => {
   const [confirmationModel, setConfirmationModel] = useState({})
 
   // Sort filters: pinned first, then by usage count, then by last used
-  const savedFilters = [...filtersData].sort((a, b) => {
-    if (a.isPinned !== b.isPinned) {
-      return a.isPinned ? -1 : 1
-    }
-    if ((b.usageCount || 0) !== (a.usageCount || 0)) {
-      return (b.usageCount || 0) - (a.usageCount || 0)
-    }
-    if (a.lastUsedAt && b.lastUsedAt) {
-      return new Date(b.lastUsedAt) - new Date(a.lastUsedAt)
-    }
-    return new Date(b.createdAt) - new Date(a.createdAt)
-  })
+  const savedFilters = useMemo(() => {
+    return [...filtersData].sort((a, b) => {
+      if (a.isPinned !== b.isPinned) {
+        return a.isPinned ? -1 : 1
+      }
+      if ((b.usageCount || 0) !== (a.usageCount || 0)) {
+        return (b.usageCount || 0) - (a.usageCount || 0)
+      }
+      if (a.lastUsedAt && b.lastUsedAt) {
+        return new Date(b.lastUsedAt) - new Date(a.lastUsedAt)
+      }
+      return new Date(b.createdAt) - new Date(a.createdAt)
+    })
+  }, [filtersData])
 
   // Calculate task counts for each filter
   useEffect(() => {
@@ -613,7 +615,7 @@ const FilterView = () => {
     }
   }, [
     chores,
-    savedFilters,
+    filtersData,
     userProfile?.id,
     labels,
     projects,

src/views/Modals/Inputs/AdvancedFilterBuilder.jsx

@@ -15,9 +15,9 @@ import {
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 import { FILTER_COLORS } from '../../../utils/Colors'
-import { filterNameExists } from '../../../utils/CustomFilterStorage'
 import { applyFilter } from '../../../utils/FilterEngine'
 import Priorities from '../../../utils/Priorities'
+import { useFilters } from '../../Filters/FilterQueries'
 
 const AdvancedFilterBuilder = ({
   isOpen,
@@ -40,10 +40,15 @@ const AdvancedFilterBuilder = ({
     { type: 'assignee', operator: 'is', value: [] },
   ])
   const [error, setError] = useState('')
-  const [existedFilters] = useState(() => {
-    const storedFilters = localStorage.getItem('customFilters')
-    return storedFilters ? JSON.parse(storedFilters) : []
-  })
+  const { data: existedFilters = [] } = useFilters()
+
+  const filterNameExists = (name, excludeId = null) => {
+    return existedFilters.some(
+      filter =>
+        filter.name.toLowerCase() === name.toLowerCase() &&
+        filter.id !== excludeId,
+    )
+  }
 
   // Initialize refs array when conditions change
   useEffect(() => {