Refactor filters to use ToolsProvider and update data fetching for tools

mre · mre · commit 61c1615814d2 · 2026-02-19T00:49:56.000+01:00
page

Benefits

1. No more API calls for filtering/pagination on the tools page
2. Faster page loads (all data is pre-rendered at build time)
3. Better SEO since page is fully static with ISR
4. Simpler architecture because filtering happens client-side with
   static data
5. Can now remove old API routes and React Query for tool
diff --git a/components/elements/Dropdown/Dropdown.tsx b/components/elements/Dropdown/Dropdown.tsx
@@ -1,6 +1,6 @@
 import { Card } from '@components/layout';
 import classNames from 'classnames';
-import { useSearchState } from 'context/SearchProvider';
+import { useSearchState } from 'context/ToolsProvider';
 import { FC, useEffect, useState } from 'react';
 import styles from './Dropdown.module.css';
 
diff --git a/components/elements/TagList/TagList.tsx b/components/elements/TagList/TagList.tsx
@@ -2,12 +2,13 @@ import { FC, useState } from 'react';
 import Image from 'next/image';
 import cn from 'classnames';
 import styles from './TagList.module.css';
-import { TagTypes, useSearchState } from 'context/SearchProvider';
-import { objectToQueryString } from 'utils/query';
-import { useRouterPush } from 'hooks';
+import { useTools } from 'context/ToolsProvider';
 import classNames from 'classnames';
 import { tagIconPath } from 'utils/icons';
 
+// Tag type for filtering
+type TagTypes = 'languages' | 'others';
+
 const NUM_TAGS = 8;
 
 export interface TagListProps {
@@ -17,8 +18,7 @@ export interface TagListProps {
 }
 
 const TagList: FC<TagListProps> = ({ languageTags, otherTags, className }) => {
-    const routerPush = useRouterPush();
-    const { search, setSearch } = useSearchState();
+    const { toggleFilter, isSelected } = useTools();
     const [showAllTags, setShowAllTags] = useState(false);
 
     const toggleShowAllTags = () => {
@@ -31,28 +31,11 @@ const TagList: FC<TagListProps> = ({ languageTags, otherTags, className }) => {
     ) => {
         const target = event?.target as HTMLElement;
         const tag = target.innerText;
+        toggleFilter(tagType, tag);
+    };
 
-        let currValue = search[tagType] || [];
-        if (!Array.isArray(currValue)) {
-            currValue = [currValue];
-        }
-        if (currValue.length) {
-            const index = currValue.indexOf(tag);
-            if (index > -1) {
-                currValue.splice(index, 1);
-            } else {
-                currValue.push(tag);
-            }
-        } else {
-            currValue.push(tag);
-        }
-
-        const newState = { ...search, [tagType]: currValue };
-        setSearch(newState);
-        // Update query params in router
-        routerPush(`/tools?${objectToQueryString(newState)}`, undefined, {
-            shallow: true,
-        });
+    const isTagSelected = (tag: string, type: TagTypes): boolean => {
+        return isSelected(type, tag);
     };
 
     const combinedTags = [
@@ -75,7 +58,7 @@ const TagList: FC<TagListProps> = ({ languageTags, otherTags, className }) => {
             {tagsToRender.map(({ tag, type }, index) => (
                 <li
                     className={classNames(styles.tag, {
-                        [`${styles.highlight}`]: search[type]?.includes(tag),
+                        [`${styles.highlight}`]: isTagSelected(tag, type),
                     })}
                     key={`${tag}-${index}`}>
                     <a onClick={(e) => handleClick(e, type)}>
diff --git a/components/tools/listPage/ListPageComponent/ListPageComponent.module.css b/components/tools/listPage/ListPageComponent/ListPageComponent.module.css
@@ -1,3 +1,15 @@
 .clearButton {
     width: 140px;
 }
+
+.resultsCount {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary, #666);
+    margin-right: auto;
+}
+
+.loadMoreContainer {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}
diff --git a/components/tools/listPage/MobileFilters/MobileFilter/MobileFilter.tsx b/components/tools/listPage/MobileFilters/MobileFilter/MobileFilter.tsx
@@ -3,7 +3,7 @@ import styles from './MobileFilter.module.css';
 import Select, { MultiValue } from 'react-select';
 import { Button, PanelHeader } from '@components/elements';
 import classNames from 'classnames';
-import { SearchState, SearchFilter } from 'context/SearchProvider';
+import { SearchState, SearchFilter } from 'context/ToolsProvider';
 
 interface Option {
     value: string;
diff --git a/components/tools/listPage/MobileFilters/MobileFilters.tsx b/components/tools/listPage/MobileFilters/MobileFilters.tsx
@@ -2,8 +2,7 @@ import { FC, useState } from 'react';
 import classNames from 'classnames';
 import { Button, PanelHeader } from '@components/elements';
 import styles from './MobileFilters.module.css';
-import { useLanguagesQuery } from '@components/tools/queries';
-import { useSearchState } from 'context/SearchProvider';
+import { useTools, type SearchState } from 'context/ToolsProvider';
 import MobileFilter from './MobileFilter/MobileFilter';
 
 import {
@@ -13,20 +12,22 @@ import {
     LICENSE_OPTIONS,
     PRICING_OPTIONS,
 } from '@appdata/filters';
-import { useOthersQuery } from '@components/tools/queries/others';
+import { LanguageFilterOption } from '../ToolsSidebar/FilterCard/LanguageFilterCard';
+import { FilterOption } from '../ToolsSidebar/FilterCard/FilterCard';
 
-const MobileFilters: FC = () => {
-    const { search, setSearch } = useSearchState();
+export interface MobileFiltersProps {
+    languages?: LanguageFilterOption[];
+    others?: FilterOption[];
+}
 
-    const [modelOpen, setModelOpen] = useState(false);
-    const [state, setState] = useState(search);
-
-    const { data: otherResult } = useOthersQuery();
-    const { data: languageResult } = useLanguagesQuery();
+const MobileFilters: FC<MobileFiltersProps> = ({
+    languages = [],
+    others = [],
+}) => {
+    const { search, setSearch } = useTools();
 
-    const others = otherResult?.data || [];
-    // Filter duplicates on tag
-    const languages = languageResult?.data || [];
+    const [modelOpen, setModelOpen] = useState(false);
+    const [state, setState] = useState<SearchState>(search);
 
     const submit = () => {
         setSearch(state);
@@ -39,6 +40,8 @@ const MobileFilters: FC = () => {
     };
 
     const openModal = () => {
+        // Sync state with current search when opening
+        setState(search);
         // Add modal-open class to body
         document.body.classList.add('modal-open');
         setModelOpen(true);
@@ -87,7 +90,7 @@ const MobileFilters: FC = () => {
                         <MobileFilter
                             id="languages"
                             label="Languages"
-                            options={languages || []}
+                            options={languages}
                             placeholder="Choose Language"
                             state={state}
                             setState={setState}
@@ -132,7 +135,7 @@ const MobileFilters: FC = () => {
                         <MobileFilter
                             id="others"
                             label="Other Tags"
-                            options={others || []}
+                            options={others}
                             placeholder="Other Tags"
                             state={state}
                             setState={setState}
diff --git a/components/tools/listPage/ToolsSidebar/FilterCard/FilterCard.tsx b/components/tools/listPage/ToolsSidebar/FilterCard/FilterCard.tsx
@@ -4,9 +4,7 @@ import { Card } from '@components/layout';
 import { Heading } from '@components/typography';
 
 import styles from './FilterCard.module.css';
-import { SearchFilter, useSearchState } from 'context/SearchProvider';
-import { isChecked, isSelectedFilter, sortByChecked } from './utils';
-import { changeQuery } from 'utils/query';
+import { useTools, type SearchFilter } from 'context/ToolsProvider';
 import classNames from 'classnames';
 
 export interface FilterOption {
@@ -25,8 +23,6 @@ export interface FilterCardProps {
     className?: string;
 }
 
-// TODO: Add Toggle Deprecated (default off)
-// TODO: Add click functionality and debounce
 const FilterCard: FC<FilterCardProps> = ({
     showAllCheckbox = true,
     heading,
@@ -35,10 +31,11 @@ const FilterCard: FC<FilterCardProps> = ({
     limit = 10,
     className,
 }) => {
-    const { search, setSearch } = useSearchState();
+    const { search, toggleFilter, updateFilter, isSelected } = useTools();
 
     const shouldShowToggle = options.length > limit;
     const [listLimit, setLimit] = useState(limit);
+
     const toggleAll = () => {
         if (listLimit === 999) {
             setLimit(limit);
@@ -49,15 +46,33 @@ const FilterCard: FC<FilterCardProps> = ({
 
     const resetFilter = () => {
         const searchFilter = filter as SearchFilter;
-        if (search[searchFilter]) {
-            delete search[searchFilter];
-        }
-        setSearch({ ...search });
+        updateFilter(searchFilter, []);
+    };
+
+    const handleCheckboxChange = (value: string) => {
+        const searchFilter = filter as SearchFilter;
+        toggleFilter(searchFilter, value);
+    };
+
+    const isChecked = (value: string): boolean => {
+        const searchFilter = filter as SearchFilter;
+        return isSelected(searchFilter, value);
+    };
+
+    const isFilterActive = (): boolean => {
+        const searchFilter = filter as SearchFilter;
+        const values = search[searchFilter];
+        return values !== undefined && values.length > 0;
     };
 
-    if (options.length > limit) {
-        options.sort(sortByChecked(filter, search));
-    }
+    // Sort options: checked items first
+    const sortedOptions = [...options].sort((a, b) => {
+        const aChecked = isChecked(a.value);
+        const bChecked = isChecked(b.value);
+        if (aChecked && !bChecked) return -1;
+        if (!aChecked && bChecked) return 1;
+        return 0;
+    });
 
     return (
         <Card className={classNames(className)}>
@@ -70,36 +85,32 @@ const FilterCard: FC<FilterCardProps> = ({
                     <li>
                         <Input
                             type="checkbox"
-                            id="checkbox_all"
+                            id={`checkbox_all_${filter}`}
                             data-filter={filter}
-                            checked={!isSelectedFilter(filter, search)}
+                            checked={!isFilterActive()}
                             onChange={resetFilter}
                         />
                         <label
                             className={styles.checkboxLabel}
-                            htmlFor="checkbox_all"
+                            htmlFor={`checkbox_all_${filter}`}
                             onClick={resetFilter}>
                             All
                         </label>
                     </li>
                 )}
-                {options.slice(0, listLimit).map((option, index) => (
+                {sortedOptions.slice(0, listLimit).map((option, index) => (
                     <li key={index}>
                         <Input
                             type="checkbox"
-                            id={`checkbox_${option.value}`}
+                            id={`checkbox_${filter}_${option.value}`}
                             value={option.value}
                             data-filter={filter}
-                            checked={isChecked(filter, option.value, search)}
-                            onChange={changeQuery(
-                                option.value,
-                                search,
-                                setSearch,
-                            )}
+                            checked={isChecked(option.value)}
+                            onChange={() => handleCheckboxChange(option.value)}
                         />
                         <label
                             className={styles.checkboxLabel}
-                            htmlFor={`checkbox_${option.value}`}>
+                            htmlFor={`checkbox_${filter}_${option.value}`}>
                             {option.name}
                         </label>
 
diff --git a/components/tools/listPage/ToolsSidebar/FilterCard/LanguageFilterCard.tsx b/components/tools/listPage/ToolsSidebar/FilterCard/LanguageFilterCard.tsx
diff --git a/components/tools/listPage/index.ts b/components/tools/listPage/index.ts
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
