remove fixed filters (#2257)

* remove fixed filters * fix: remove blank `console.log` --------- Co-authored-by: jake <77554505+brxken128@users.noreply.github.com>
spacedriveapp · Mar 28, 2024 · 1959226 · 1959226
1 parent 99ed900
commit 1959226
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 199 deletions.
diff --git a/interface/app/$libraryId/favorites.tsx b/interface/app/$libraryId/favorites.tsx
@@ -25,27 +25,18 @@ export function Component() {
 
 	const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
 
-	const fixedFilters = useMemo<SearchFilterArgs[]>(
-		() => [
-			// { object: { favorite: true } },
-			...(explorerSettingsSnapshot.layoutMode === 'media'
-				? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
-				: [])
-		],
-		[explorerSettingsSnapshot.layoutMode]
-	);
-
-	const search = useSearch({
-		fixedFilters
-	});
+	const search = useSearch();
 
 	const objects = useObjectsExplorerQuery({
 		arg: {
 			take: 100,
 			filters: [
 				...search.allFilters,
 				// TODO: Add filter to search options
-				{ object: { favorite: true } }
+				{ object: { favorite: true } },
+				...(explorerSettingsSnapshot.layoutMode === 'media'
+					? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
+					: [])
 			]
 		},
 		order: explorerSettings.useSettingsSnapshot().order

diff --git a/interface/app/$libraryId/labels.tsx b/interface/app/$libraryId/labels.tsx
@@ -27,7 +27,7 @@ export function Component() {
 
 	// const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
 
-	// const fixedFilters = useMemo<SearchFilterArgs[]>(
+	// const filters = useMemo<SearchFilterArgs[]>(
 	// 	() => [
 	// 		...(explorerSettingsSnapshot.layoutMode === 'media'
 	// 			? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
@@ -36,7 +36,7 @@ export function Component() {
 	// 	[explorerSettingsSnapshot.layoutMode]
 	// );
 
-	const search = useSearch({});
+	const search = useSearch();
 
 	// const objects = useObjectsExplorerQuery({
 	// 	arg: {

diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
@@ -71,7 +71,9 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 	const { layoutMode, mediaViewWithDescendants, showHiddenFiles } =
 		explorerSettings.useSettingsSnapshot();
 
-	const search = useLocationSearch(explorerSettings, location);
+	const search = useLocationSearch(location);
+
+	const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
 
 	const paths = usePathsExplorerQuery({
 		arg: {
@@ -84,12 +86,15 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 							path: path ?? '',
 							include_descendants:
 								search.search !== '' ||
-								search.dynamicFilters.length > 0 ||
+								search.filters.length > 0 ||
 								(layoutMode === 'media' && mediaViewWithDescendants)
 						}
 					}
 				},
-				!showHiddenFiles && { filePath: { hidden: false } }
+				!showHiddenFiles && { filePath: { hidden: false } },
+				explorerSettingsSnapshot.layoutMode === 'media' && [
+					{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }
+				]
 			].filter(Boolean) as any,
 			take
 		},
@@ -268,47 +273,32 @@ function useLocationExplorerSettings(location: Location) {
 	};
 }
 
-function useLocationSearch(
-	explorerSettings: UseExplorerSettings<FilePathOrder>,
-	location: Location
-) {
+function useLocationSearch(location: Location) {
 	const [searchParams, setSearchParams] = useRawSearchParams();
-	const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
-
-	const fixedFilters = useMemo(
-		() => [
-			{ filePath: { locations: { in: [location.id] } } },
-			...(explorerSettingsSnapshot.layoutMode === 'media'
-				? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
-				: [])
-		],
-		[location.id, explorerSettingsSnapshot.layoutMode]
-	);
 
 	const filtersParam = searchParams.get('filters');
-	const dynamicFilters = useMemo(() => JSON.parse(filtersParam ?? '[]'), [filtersParam]);
+	const filters = useMemo(() => JSON.parse(filtersParam ?? '[]'), [filtersParam]);
 
 	const searchQueryParam = searchParams.get('search');
 
 	const search = useSearch({
-		open: !!searchQueryParam || dynamicFilters.length > 0 || undefined,
+		open: !!searchQueryParam || filters.length > 0 || undefined,
 		search: searchParams.get('search') ?? undefined,
-		fixedFilters,
-		dynamicFilters
+		defaultFilters: [{ filePath: { locations: { in: [location.id] } } }],
+		filters: filters
 	});
 
 	useEffect(() => {
 		setSearchParams(
 			(p) => {
-				if (search.dynamicFilters.length > 0)
-					p.set('filters', JSON.stringify(search.dynamicFilters));
+				if (search.filters.length > 0) p.set('filters', JSON.stringify(search.filters));
 				else p.delete('filters');
 
 				return p;
 			},
 			{ replace: true }
 		);
-	}, [search.dynamicFilters, setSearchParams]);
+	}, [search.filters, setSearchParams]);
 
 	const searchQuery = search.search;
 

diff --git a/interface/app/$libraryId/recents.tsx b/interface/app/$libraryId/recents.tsx
@@ -25,27 +25,18 @@ export function Component() {
 
 	const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
 
-	const fixedFilters = useMemo<SearchFilterArgs[]>(
-		() => [
-			// { object: { dateAccessed: { from: new Date(0).toISOString() } } },
-			...(explorerSettingsSnapshot.layoutMode === 'media'
-				? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
-				: [])
-		],
-		[explorerSettingsSnapshot.layoutMode]
-	);
-
-	const search = useSearch({
-		fixedFilters
-	});
+	const search = useSearch();
 
 	const objects = useObjectsExplorerQuery({
 		arg: {
 			take: 100,
 			filters: [
 				...search.allFilters,
 				// TODO: Add fil ter to search options
-				{ object: { dateAccessed: { from: new Date(0).toISOString() } } }
+				{ object: { dateAccessed: { from: new Date(0).toISOString() } } },
+				...(explorerSettingsSnapshot.layoutMode === 'media'
+					? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
+					: [])
 			]
 		},
 		order: explorerSettings.useSettingsSnapshot().order

diff --git a/interface/app/$libraryId/saved-search/$id.tsx b/interface/app/$libraryId/saved-search/$id.tsx
@@ -46,14 +46,14 @@ export const Component = () => {
 
 	const rawFilters = savedSearch.data?.filters;
 
-	const dynamicFilters = useMemo(() => {
+	const filters = useMemo(() => {
 		if (rawFilters) return JSON.parse(rawFilters) as SearchFilterArgs[];
 	}, [rawFilters]);
 
 	const search = useSearch({
 		open: true,
 		search: savedSearch.data?.search ?? undefined,
-		dynamicFilters
+		filters: filters
 	});
 
 	const paths = usePathsExplorerQuery({
@@ -85,7 +85,7 @@ export const Component = () => {
 				>
 					<hr className="w-full border-t border-sidebar-divider bg-sidebar-divider" />
 					<SearchOptions>
-						{(search.dynamicFilters !== dynamicFilters ||
+						{(search.filters !== filters ||
 							search.search !== savedSearch.data?.search) && (
 							<SaveButton searchId={id} />
 						)}
@@ -123,7 +123,7 @@ function SaveButton({ searchId }: { searchId: number }) {
 				updateSavedSearch.mutate([
 					searchId,
 					{
-						filters: JSON.stringify(search.dynamicFilters),
+						filters: JSON.stringify(search.filters),
 						search: search.search
 					}
 				]);

diff --git a/interface/app/$libraryId/search/AppliedFilters.tsx b/interface/app/$libraryId/search/AppliedFilters.tsx
@@ -55,13 +55,11 @@ export const AppliedFilters = ({ allowRemove = true }: { allowRemove?: boolean }
 									onDelete={
 										removalIndex !== null && allowRemove
 											? () => {
-													search.updateDynamicFilters(
-														(dyanmicFilters) => {
-															dyanmicFilters.splice(removalIndex, 1);
+													search.updateFilters((dyanmicFilters) => {
+														dyanmicFilters.splice(removalIndex, 1);
 
-															return dyanmicFilters;
-														}
-													);
+														return dyanmicFilters;
+													});
 												}
 											: undefined
 									}

diff --git a/interface/app/$libraryId/search/Filters.tsx b/interface/app/$libraryId/search/Filters.tsx
@@ -71,28 +71,25 @@ export function useToggleOptionSelected({ search }: { search: UseSearch }) {
 		option: FilterOption;
 		select: boolean;
 	}) => {
-		search.updateDynamicFilters((dynamicFilters) => {
-			const key = getKey({ ...option, type: filter.name });
-			if (search.fixedFiltersKeys?.has(key)) return dynamicFilters;
-
-			const rawArg = dynamicFilters.find((arg) => filter.extract(arg));
+		search.updateFilters((filters) => {
+			const rawArg = filters.find((arg) => filter.extract(arg));
 
 			if (!rawArg) {
 				const arg = filter.create(option.value);
-				dynamicFilters.push(arg);
+				filters.push(arg);
 			} else {
-				const rawArgIndex = dynamicFilters.findIndex((arg) => filter.extract(arg))!;
+				const rawArgIndex = filters.findIndex((arg) => filter.extract(arg))!;
 
 				const arg = filter.extract(rawArg)!;
 
 				if (select) {
 					if (rawArg) filter.applyAdd(arg, option);
 				} else {
-					if (!filter.applyRemove(arg, option)) dynamicFilters.splice(rawArgIndex, 1);
+					if (!filter.applyRemove(arg, option)) filters.splice(rawArgIndex, 1);
 				}
 			}
 
-			return dynamicFilters;
+			return filters;
 		});
 	};
 }
@@ -159,14 +156,14 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
 				className="flex gap-1.5"
 				onSubmit={(e) => {
 					e.preventDefault();
-					search.updateDynamicFilters((dynamicFilters) => {
-						if (allFiltersKeys.has(key)) return dynamicFilters;
+					search.updateFilters((filters) => {
+						if (allFiltersKeys.has(key)) return filters;
 
 						const arg = filter.create(value);
-						dynamicFilters.push(arg);
+						filters.push(arg);
 						setValue('');
 
-						return dynamicFilters;
+						return filters;
 					});
 				}}
 			>
@@ -191,7 +188,7 @@ const FilterOptionBoolean = ({
 	filter: SearchFilterCRUD;
 	search: UseSearch;
 }) => {
-	const { fixedFiltersKeys, allFiltersKeys } = search;
+	const { allFiltersKeys } = search;
 
 	const key = getKey({
 		type: filter.name,
@@ -204,19 +201,17 @@ const FilterOptionBoolean = ({
 			icon={filter.icon}
 			selected={allFiltersKeys?.has(key)}
 			setSelected={() => {
-				search.updateDynamicFilters((dynamicFilters) => {
-					if (fixedFiltersKeys?.has(key)) return dynamicFilters;
-
-					const index = dynamicFilters.findIndex((f) => filter.extract(f) !== undefined);
+				search.updateFilters((filters) => {
+					const index = filters.findIndex((f) => filter.extract(f) !== undefined);
 
 					if (index !== -1) {
-						dynamicFilters.splice(index, 1);
+						filters.splice(index, 1);
 					} else {
 						const arg = filter.create(true);
-						dynamicFilters.push(arg);
+						filters.push(arg);
 					}
 
-					return dynamicFilters;
+					return filters;
 				});
 			}}
 		>

diff --git a/interface/app/$libraryId/search/SearchBar.tsx b/interface/app/$libraryId/search/SearchBar.tsx
@@ -81,6 +81,7 @@ export default ({ redirectToSearch }: Props) => {
 
 	function clearValue() {
 		search.setSearch('');
+		search.setFilters([]);
 	}
 
 	return (
@@ -99,7 +100,10 @@ export default ({ redirectToSearch }: Props) => {
 					search.setSearchBarFocused(false);
 				}
 			}}
-			onFocus={() => search.setSearchBarFocused(true)}
+			onFocus={() => {
+				search.setSearchBarFocused(true);
+				if (search.defaultFilters) search.setFilters(search.defaultFilters);
+			}}
 			right={
 				<div className="pointer-events-none flex h-7 items-center space-x-1 opacity-70 group-focus-within:hidden">
 					{

diff --git a/interface/app/$libraryId/search/SearchOptions.tsx b/interface/app/$libraryId/search/SearchOptions.tsx
@@ -124,9 +124,7 @@ export const SearchOptions = ({
 
 			{children ?? (
 				<>
-					{(search.dynamicFilters.length > 0 || search.search !== '') && (
-						<SaveSearchButton />
-					)}
+					{(search.filters.length > 0 || search.search !== '') && <SaveSearchButton />}
 
 					<EscapeButton />
 				</>