diff --git a/src/components/KindFilter/index.tsx b/src/components/KindFilter/index.tsx index 507bea4..b950fc1 100644 --- a/src/components/KindFilter/index.tsx +++ b/src/components/KindFilter/index.tsx @@ -9,7 +9,7 @@ import { useKindFilter } from '@/providers/KindFilterProvider' import { useScreenSize } from '@/providers/ScreenSizeProvider' import { ListFilter } from 'lucide-react' import { kinds } from 'nostr-tools' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' const KIND_FILTER_OPTIONS = [ @@ -32,10 +32,19 @@ export default function KindFilter({ }) { const { t } = useTranslation() const { isSmallScreen } = useScreenSize() + const { showKinds: savedShowKinds } = useKindFilter() const [open, setOpen] = useState(false) const { updateShowKinds } = useKindFilter() const [temporaryShowKinds, setTemporaryShowKinds] = useState(showKinds) const [isPersistent, setIsPersistent] = useState(false) + const isDifferentFromSaved = useMemo( + () => !isSameKindFilter(showKinds, savedShowKinds), + [showKinds, savedShowKinds] + ) + const isTemporaryDifferentFromSaved = useMemo( + () => !isSameKindFilter(temporaryShowKinds, savedShowKinds), + [temporaryShowKinds, savedShowKinds] + ) useEffect(() => { setTemporaryShowKinds(showKinds) @@ -49,10 +58,7 @@ export default function KindFilter({ } const newShowKinds = [...temporaryShowKinds].sort() - if ( - newShowKinds.length !== showKinds.length || - newShowKinds.some((k, i) => k !== showKinds[i]) - ) { + if (!isSameKindFilter(newShowKinds, showKinds)) { onShowKindsChange(newShowKinds) } @@ -68,6 +74,7 @@ export default function KindFilter({ ) @@ -108,13 +118,12 @@ export default function KindFilter({ })} -
+
@@ -123,10 +132,16 @@ export default function KindFilter({ onClick={() => { setTemporaryShowKinds([]) }} - className="flex-1" > {t('Clear All')} +