feat: adding button to clear selected filters

src/main/events/download-sources/put-download-source.ts

@@ -5,9 +5,13 @@ const putDownloadSource = async (
   _event: Electron.IpcMainInvokeEvent,
   objectIds: string[]
 ) => {
-  return HydraApi.put<{ fingerprint: string }>("/download-sources", {
-    objectIds,
-  });
+  return HydraApi.put<{ fingerprint: string }>(
+    "/download-sources",
+    {
+      objectIds,
+    },
+    { needsAuth: false }
+  );
 };
 
 registerEvent("putDownloadSource", putDownloadSource);

src/renderer/src/pages/catalogue/catalogue.tsx

@@ -305,6 +305,7 @@ export default function Catalogue() {
           <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
             <FilterSection
               title="Genres"
+              onClear={() => dispatch(setSearch({ genres: [] }))}
               color={filterCategoryColors.genres}
               onSelect={(value) => {
                 if (filters.genres.includes(value)) {
@@ -359,6 +360,7 @@ export default function Catalogue() {
             <FilterSection
               title="User tags"
               color={filterCategoryColors.tags}
+              onClear={() => dispatch(setSearch({ tags: [] }))}
               onSelect={(value) => {
                 if (filters.tags.includes(value)) {
                   dispatch(
@@ -382,6 +384,9 @@ export default function Catalogue() {
             <FilterSection
               title="Download sources"
               color={filterCategoryColors.downloadSourceFingerprints}
+              onClear={() =>
+                dispatch(setSearch({ downloadSourceFingerprints: [] }))
+              }
               onSelect={(value) => {
                 if (filters.downloadSourceFingerprints.includes(value)) {
                   dispatch(
@@ -415,6 +420,7 @@ export default function Catalogue() {
             <FilterSection
               title="Developers"
               color={filterCategoryColors.developers}
+              onClear={() => dispatch(setSearch({ developers: [] }))}
               onSelect={(value) => {
                 if (filters.developers.includes(value)) {
                   dispatch(
@@ -440,6 +446,7 @@ export default function Catalogue() {
             <FilterSection
               title="Publishers"
               color={filterCategoryColors.publishers}
+              onClear={() => dispatch(setSearch({ publishers: [] }))}
               onSelect={(value) => {
                 if (filters.publishers.includes(value)) {
                   dispatch(

src/renderer/src/pages/catalogue/filter-section.tsx

@@ -13,6 +13,7 @@ export interface FilterSectionProps<T extends string | number> {
   }[];
   onSelect: (value: T) => void;
   color: string;
+  onClear: () => void;
 }
 
 export function FilterSection<T extends string | number>({
@@ -20,6 +21,7 @@ export function FilterSection<T extends string | number>({
   items,
   color,
   onSelect,
+  onClear,
 }: FilterSectionProps<T>) {
   const [search, setSearch] = useState("");
 
@@ -33,6 +35,10 @@ export function FilterSection<T extends string | number>({
     return items;
   }, [items, search]);
 
+  const selectedItemsCount = useMemo(() => {
+    return items.filter((item) => item.checked).length;
+  }, [items]);
+
   const onSearch = useCallback((value: string) => {
     setSearch(value);
   }, []);
@@ -61,9 +67,26 @@ export function FilterSection<T extends string | number>({
         </h3>
       </div>
 
-      <span style={{ fontSize: 12, marginBottom: 12, display: "block" }}>
-        {formatNumber(items.length)} disponíveis
-      </span>
+      {selectedItemsCount > 0 ? (
+        <button
+          type="button"
+          style={{
+            fontSize: 12,
+            marginBottom: 12,
+            display: "block",
+            color: "#fff",
+            cursor: "pointer",
+            textDecoration: "underline",
+          }}
+          onClick={onClear}
+        >
+          Limpar {formatNumber(selectedItemsCount)} selecionados
+        </button>
+      ) : (
+        <span style={{ fontSize: 12, marginBottom: 12, display: "block" }}>
+          {formatNumber(items.length)} disponíveis
+        </span>
+      )}
 
       <TextField
         placeholder="Search..."