Created custom hooks

Author: canaleal

CreatingIcons.md

@@ -1,27 +1,41 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+<div align="center">
+  <h1>Devicon UI</h1>
+  <h4>Front end • Open source • UI/UX</h4>
+</div>
+<h1>Contents</h1>
+
+- [Overview](#overview)
+- [Technologies](#technologies)
+- [Installation](#installation)
+- [Contributing](#contributing)
+
+<h1 id="overview">Overview</h1>
+
+A set of icons representing programming languages, designing, and development tools.
+
+<h1>Technologies</h1>
+<div align="center" id="technologies">
+
+<table>
+  <tr> 
+    <td align='center'><img src="https://img.shields.io/badge/react-%23121011.svg?style=for-the-badge&logo=react" alt="React"/></td>
+    <td align='center'><img src="https://img.shields.io/badge/react_query-%23121011.svg?style=for-the-badge&logo=react-query" alt="React Query"/></td>
+    <td align='center'><img src="https://img.shields.io/badge/vite_test-%23121011.svg?style=for-the-badge&logo=vite" alt="Vite Test"/></td>
+    <td align='center'><img src="https://img.shields.io/badge/storybook-%23121011.svg?style=for-the-badge&logo=storybook" alt="Storybook"/></td>
+    <td align='center'><img src="https://img.shields.io/badge/tailwind-%23121011.svg?style=for-the-badge&logo=tailwind-css" alt="Tailwind CSS"/></td>
+    <td align='center'><img src="https://img.shields.io/badge/zustand-%23121011.svg?style=for-the-badge&logo=zustand" alt="Zustand"/></td>
+  </tr>
+ </table>
+</div>
+
+<h1>Installation</h1>
+
+1. Install Node.js on your computer.
+2. Clone this repository to your local machine using `git clone`.
+3. Navigate to the project directory.
+4. Install the required dependencies using `npm install` or `yarn install`.
+
+This command installs the necessary dependencies, including React, React Query, Vite Test, Storybook, Tailwind CSS, and Zustand.
+
+<h1>Contributing</h1>
+At the moment, we are not accepting contributions. However, we appreciate your support and encourage you to stay updated with any future developments.

README.md

@@ -1,15 +1,16 @@
-import { IIconFilter } from "./types";
+import { IIconFilter, IIconFilterGroup } from "./types";
 
 interface FilterListProps {
   title: string;
-  filters: IIconFilter[];
+  filterGroup: IIconFilterGroup;
   iconMap: { [key: string]: string };
-  limit?: number;
-  handleFilter: (category: IIconFilter) => void;
+  isLimited: boolean;
+  handleFilter: (filter: IIconFilter) => void;
+  resetFilters?: () => void;
 }
 
-export const FilterList = ({ title, filters, iconMap, limit, handleFilter }: FilterListProps) => {
-  const selectedFiltersCount = filters.reduce((count, filter) => (filter.isSelected ? count + 1 : count), 0);
+export const FilterList = ({ title, filterGroup, iconMap, isLimited, handleFilter, resetFilters }: FilterListProps) => {
+  const selectedFiltersCount = filterGroup.filters.reduce((count, filter) => (filter.isSelected ? count + 1 : count), 0);
   const isSelectedClass = (filter: IIconFilter) =>
     filter.isSelected
       ? "bg-green-600 hover:bg-green-700 text-white dark:bg-zinc-900 dark:hover:bg-zinc-700 shadow-sm"
@@ -20,11 +21,17 @@ export const FilterList = ({ title, filters, iconMap, limit, handleFilter }: Fil
       <div className="flex flex-row gap-2 mb-2 dark:text-white">
         <p className="font-bold text-md ">{title}</p>
         <p className="text-sm my-auto">
-          ({selectedFiltersCount} / {filters.length})
+          ({selectedFiltersCount} / {filterGroup.filters.length})
         </p>
+
+        {resetFilters && (
+          <button className="ml-auto text-sm text-green-600" onClick={resetFilters}>
+            Reset
+          </button>
+        )}
       </div>
-      <div className={`flex flex-col gap-2 overflow-y-auto ${limit ? 'h-96' : 'h-fit'} pr-2`}>
-        {filters.map((filter, index) => (
+      <div className={`flex flex-col gap-2 overflow-y-auto ${isLimited ? 'h-96' : 'h-fit'} pr-2`}>
+        {filterGroup.filters.map((filter, index) => (
           <button
             key={index}
             className={`${isSelectedClass(filter)} rounded-md flex px-4 py-2 text-sm`}

src/features/dashbord/filters/FilterList.tsx

@@ -1,51 +1,58 @@
 import { IIcon, IconVersion } from "../../../../types";
-import { IIconFilter } from "../types";
+import { FilterType, IIconFilter, IIconFilterGroup } from "../types";
+
+const FilterMapRecord: Record<FilterType, string> = {
+    versions: 'versions.svg',
+    color: 'color',
+    tags: 'tags',
+    alias: 'alias',
+    name: 'name'
+};
+
+const getItemsFromPath = (icons: IIcon, path: string): string[] => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const items = path.split('.').reduce((acc: any, curr: string) => acc[curr], icons);
+    return items;
+}
 
-export const populateIconFilters = (icons: IIcon[], filters: IIconFilter[], attribute: 'versions.svg' | 'tags') => {
-    // Reset filters
-    filters.forEach((filter: IIconFilter) => {
+export const populateIconFilters = (icons: IIcon[], filterGroup: IIconFilterGroup) => {
+    const itemsPath = FilterMapRecord[filterGroup.filterType];
+    filterGroup.filters.forEach(filter => {
         filter.numberOfIcons = 0;
     });
 
-    // Populate filters
-    icons.forEach((icon: IIcon) => {
-        const items: string[] = attribute === 'versions.svg' ? icon.versions.svg : icon.tags;
-        items.forEach((item: string) => {
-            const category = filters.find(category => category.filterName === item);
+    icons.forEach(icon => {
+        const items: string[] = getItemsFromPath(icon, itemsPath);
+        items.forEach(item => {
+            const category = filterGroup.filters.find(category => category.filterName === item);
             if (category) {
                 category.numberOfIcons++;
             } else {
-                filters.push({ filterName: item as IconVersion, numberOfIcons: 1, isSelected: false });
+                filterGroup.filters.push({ filterName: item as IconVersion, numberOfIcons: 1, isSelected: false });
             }
         });
     });
 
-    // Sort filters
-    filters.sort((a, b) => b.numberOfIcons - a.numberOfIcons);
-    
-    return filters;
+    filterGroup.filters.sort((a, b) => b.numberOfIcons - a.numberOfIcons);
+    return filterGroup;
 };
 
+const FilterFunctions: Record<FilterType, (icon: IIcon, criterion: string | IconVersion) => boolean> = {
+    name: (icon, name) => [icon.name, ...(icon.altnames ?? [])].some(n => n.toLowerCase().includes(name as string)),
+    versions: (icon, version) => icon.versions.svg.includes(version as IconVersion),
+    tags: (icon, tag) => icon.tags.includes(tag as string),
+    color: () => true, // Placeholder function, update as required
+    alias: () => true  // Placeholder function, update as required
+};
 
-export const filterIconsByName = (icons: IIcon[], search: string): IIcon[] => {
-    search = search.trim().toLowerCase();
-    return icons.filter(icon => {
-        const names = [icon.name, ...(icon.altnames ?? [])];
-        return names.some(name => name.toLowerCase().includes(search));
-    });
-}
-
-export const filterIconsByVersion = (icons: IIcon[], version: IconVersion): IIcon[] => {
-    return icons.filter(icon => icon.versions.svg.includes(version));
-}
-
-export const filterIconsByTag = (icons: IIcon[], tag: string): IIcon[] => {
-    return icons.filter(icon => icon.tags.includes(tag));
+export const filterIcons = (icons: IIcon[], filterType: FilterType, criterion: string | IconVersion): IIcon[] => {
+    return icons.filter(icon => FilterFunctions[filterType](icon, criterion));
 }
 
-export const updateFilters = (filters: IIconFilter[], filter: IIconFilter) => {
-    const updatedFilters = [...filters];
-    const index = updatedFilters.findIndex((c) => c.filterName === filter.filterName);
-    updatedFilters[index].isSelected = !updatedFilters[index].isSelected;
-    return updatedFilters;
+export const updateFilter = (filterGroup: IIconFilterGroup, filter: IIconFilter) => {
+    const tempFilterGroup = { ...filterGroup };
+    const filterIndex = tempFilterGroup.filters.findIndex(item => item.filterName === filter.filterName);
+    if (filterIndex === -1) return filterGroup;
+    tempFilterGroup.filters[filterIndex].isSelected = !filter.isSelected;
+    return tempFilterGroup;
 }

src/features/dashbord/filters/helpers/iconFilters.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { IIcon, IconVersion } from '../../../../types';
+import { IIconFilterGroup } from '../types';
+import { filterIcons, populateIconFilters } from '../helpers';
+
+const INIT_FILTER_GROUPS: IIconFilterGroup[] = [
+    {
+        groupName: 'Versions',
+        filterType: 'versions',
+        filters: [],
+    },
+    {
+        groupName: 'Tags',
+        filterType: 'tags',
+        filters: [],
+    }
+]
+
+
+export const useFilterGroups = (icons: IIcon[], initialFilterGroups: IIconFilterGroup[] = INIT_FILTER_GROUPS) => {
+    const [filterGroups, setFilterGroups] = useState<IIconFilterGroup[]>(initialFilterGroups);
+
+    useEffect(() => {
+        if (!icons || icons.length === 0) return;
+        setFilterGroups(prevGroups => prevGroups.map(group => populateIconFilters(icons, group)));
+    }, [icons]);
+    return { filterGroups, setFilterGroups };
+};
+
+
+
+export const useFilteredIcons = (icons: IIcon[], filterGroups: IIconFilterGroup[], searchTerm: string) => {
+    const [filteredIcons, setFilteredIcons] = useState<IIcon[]>(icons);
+
+    useEffect(() => {
+        let filtered = searchTerm ? filterIcons(icons, 'name', searchTerm) : icons;
+        filterGroups.forEach(group => {
+            group.filters.forEach(filter => {
+                if (filter.isSelected) {
+                    filtered = filterIcons(filtered, group.filterType, filter.filterName as IconVersion);
+                }
+            });
+        });
+        setFilteredIcons(filtered);
+    }, [icons, filterGroups, searchTerm]);
+
+    return filteredIcons;
+};

src/features/dashbord/filters/hooks/FilterHooks.ts

@@ -0,0 +1 @@
+export * from './FilterHooks'

src/features/dashbord/filters/hooks/index.ts

@@ -1,6 +1,14 @@
 
+export type FilterType = 'versions' | 'color' | 'tags' | 'alias' | 'name'
+
 export interface IIconFilter {
     filterName: string,
     numberOfIcons: number,
     isSelected: boolean
+}
+
+export interface IIconFilterGroup {
+    groupName: string,
+    filterType: FilterType,
+    filters: IIconFilter[]
 }