refactor: unify repeated tool definitions

src/components/layout/Drawer.tsx

@@ -1,31 +1,19 @@
-import {
+import { Home } from "@mui/icons-material";
-  Code,
-  DataObject,
-  DragHandle,
-  Filter,
-  Fingerprint,
-  Home,
-  Image as ImageIcon,
-  Key,
-  Link,
-  NoteAdd,
-  Numbers,
-  Sort,
-  SyncAlt,
-  TextFields,
-  TextIncrease,
-  Transform,
-} from "@mui/icons-material";
 import { Box, Divider, Drawer, List, Stack } from "@mui/material";
 import { css } from "@mui/material/styles";
-import { memo } from "react";
+import { ComponentPropsWithoutRef, memo } from "react";
 
+import { drawerToolGroups } from "@/data/tools";
 import { pagesPath } from "@/libs/$path";
 
 import DrawerCollapseItem from "./DrawerCollapseItem";
 import DrawerItem from "./DrawerItem";
 import SearchBar from "./SearchBar";
 
+type Props = {
+  toolGroups: ComponentPropsWithoutRef<typeof DrawerCollapseItem>[];
+};
+
 export const drawerWidth = 300;
 
 const drawer = css`
@@ -42,75 +30,7 @@ const divider = css`
   border-color: rgba(0, 0, 0, 0.08);
 `;
 
-const toolGroups = [
+const StyledComponent = ({ toolGroups }: Props) => (
-  {
-    icon: <Transform />,
-    title: "Converters",
-    tools: [
-      {
-        icon: <Transform />,
-        title: "Json <> Yaml",
-        href: pagesPath.converters.json_yaml.$url(),
-        disabled: false,
-      },
-      {
-        icon: <Numbers />,
-        title: "Number Base",
-        href: pagesPath.converters.number_base.$url(),
-        disabled: false,
-      },
-    ],
-  },
-  {
-    icon: <SyncAlt />,
-    title: "Encoders / Decoders",
-    tools: [
-      {
-        icon: <Code />,
-        title: "HTML",
-        href: pagesPath.encoders_decoders.html.$url(),
-        disabled: false,
-      },
-      { icon: <Link />, title: "URL", href: pagesPath.$url(), disabled: true },
-      { icon: <DragHandle />, title: "Base 64", href: pagesPath.$url(), disabled: true },
-      { icon: <Key />, title: "JWT", href: pagesPath.$url(), disabled: true },
-    ],
-  },
-  {
-    icon: <Sort />,
-    title: "Formatters",
-    tools: [{ icon: <DataObject />, title: "Json", href: pagesPath.$url(), disabled: true }],
-  },
-  {
-    icon: <NoteAdd />,
-    title: "Generators",
-    tools: [
-      { icon: <Fingerprint />, title: "Hash", href: pagesPath.$url(), disabled: true },
-      { icon: <Numbers />, title: "UUID", href: pagesPath.$url(), disabled: true },
-    ],
-  },
-  {
-    icon: <TextFields />,
-    title: "Text",
-    tools: [
-      { icon: <TextIncrease />, title: "Regex Tester", href: pagesPath.$url(), disabled: true },
-    ],
-  },
-  {
-    icon: <ImageIcon />,
-    title: "Graphic",
-    tools: [
-      {
-        icon: <Filter />,
-        title: "PNG / JPEG Compressor",
-        href: pagesPath.$url(),
-        disabled: true,
-      },
-    ],
-  },
-];
-
-const StyledComponent = () => (
   <Drawer variant="permanent" css={drawer}>
     <Box paddingLeft={2} paddingRight={2} marginTop="1px">
       <SearchBar />
@@ -131,4 +51,6 @@ const StyledComponent = () => (
 
 export const Component = memo(StyledComponent);
 
-export default Component;
+const Container = () => <Component toolGroups={drawerToolGroups} />;
+
+export default Container;

src/components/pages/home/Content.tsx

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, memo } from "react";
 
 import { Main, ToolCardGrid } from "@/components/common";
-import { allTools } from "@/data/tools";
+import { homeTools } from "@/data/tools";
 
 type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
 
@@ -13,6 +13,6 @@ const StyledComponent = ({ tools }: Props) => (
 
 export const Component = memo(StyledComponent);
 
-const Container = () => <Component tools={allTools} />;
+const Container = () => <Component tools={homeTools} />;
 
 export default Container;

src/components/pages/search/Content.tsx

@@ -5,7 +5,7 @@ import { selector, useRecoilValue } from "recoil";
 
 import { Main, ToolCardGrid } from "@/components/common";
 import { searchTextState } from "@/components/layout/states";
-import { allTools } from "@/data/tools";
+import { homeTools } from "@/data/tools";
 
 type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
 
@@ -23,12 +23,12 @@ const filteredToolsState = selector({
     const searchText = get(searchTextState).trim();
 
     if (searchText === "") {
-      return { filteredTools: allTools };
+      return { filteredTools: homeTools };
     }
 
     const searchWords = searchText.split(" ").map(word => ({ keywords: word }));
 
-    const fuse = new Fuse(allTools, { keys: ["keywords"], threshold: 0.5 });
+    const fuse = new Fuse(homeTools, { keys: ["keywords"], threshold: 0.5 });
     const result = fuse.search({ $and: searchWords });
     const filteredTools = result.map(({ item }) => item);
 

src/data/tools.tsx

@@ -4,19 +4,29 @@ import {
   DragHandle,
   Filter,
   Fingerprint,
+  Image as ImageIcon,
   Key,
   Link,
+  NoteAdd,
   Numbers,
+  Sort,
+  SyncAlt,
+  TextFields,
   TextIncrease,
   Transform,
 } from "@mui/icons-material";
 
 import { pagesPath } from "@/libs/$path";
 
-export const allTools = [
+const toolGroups = [
   {
     icon: <Transform />,
-    title: "Json <> Yaml Converter",
+    title: "Converters",
+    tools: [
+      {
+        icon: <Transform />,
+        shortTitle: "Json <> Yaml",
+        longTitle: "Json <> Yaml Converter",
         description: "Convert Json data to Yaml and vice versa",
         keywords: "json yaml converter",
         href: pagesPath.converters.json_yaml.$url(),
@@ -24,15 +34,23 @@ export const allTools = [
       },
       {
         icon: <Numbers />,
-    title: "Number Base Converter",
+        shortTitle: "Number Base",
+        longTitle: "Number Base Converter",
         description: "Convert numbers from one base to another",
         keywords: "number base converter",
         href: pagesPath.converters.number_base.$url(),
         disabled: false,
       },
+    ],
+  },
+  {
+    icon: <SyncAlt />,
+    title: "Encoders / Decoders",
+    tools: [
       {
         icon: <Code />,
-    title: "HTML Encoder / Decoder",
+        shortTitle: "HTML",
+        longTitle: "HTML Encoder / Decoder",
         description:
           "Encode or decode all the applicable characters to their corresponding HTML entities",
         keywords: "html encoder escaper decocder unescaper",
@@ -41,7 +59,8 @@ export const allTools = [
       },
       {
         icon: <Link />,
-    title: "URL Encoder / Decoder",
+        shortTitle: "URL",
+        longTitle: "URL Encoder / Decoder",
         description:
           "Encode or decode all the applicable characters to their corresponding URL entities",
         keywords: "url encoder escaper decocder unescaper",
@@ -50,7 +69,8 @@ export const allTools = [
       },
       {
         icon: <DragHandle />,
-    title: "Base 64 Encoder / Decoder",
+        shortTitle: "Base 64",
+        longTitle: "Base 64 Encoder / Decoder",
         description: "Encode and decode Base64 data",
         keywords: "base64 encoder decocder",
         href: pagesPath.$url(),
@@ -58,23 +78,38 @@ export const allTools = [
       },
       {
         icon: <Key />,
-    title: "JWT Decoder",
+        shortTitle: "JWT",
+        longTitle: "JWT Decoder",
         description: "Decode a JWT header, payload and signature",
         keywords: "jwt json web token decocder",
         href: pagesPath.$url(),
         disabled: true,
       },
+    ],
+  },
+  {
+    icon: <Sort />,
+    title: "Formatters",
+    tools: [
       {
         icon: <DataObject />,
-    title: "JSON Formatter",
+        shortTitle: "Json",
+        longTitle: "JSON Formatter",
         description: "Indent or minify JSON data",
         keywords: "json formatter",
         href: pagesPath.$url(),
         disabled: true,
       },
+    ],
+  },
+  {
+    icon: <NoteAdd />,
+    title: "Generators",
+    tools: [
       {
         icon: <Fingerprint />,
-    title: "Hash Generator",
+        shortTitle: "Hash",
+        longTitle: "Hash Generator",
         description: "Calculate MD5, SHA1, SHA256 and SHA512 hash from text data",
         keywords: "hash generator md5 sha1 sha256 sha512",
         href: pagesPath.$url(),
@@ -82,26 +117,61 @@ export const allTools = [
       },
       {
         icon: <Numbers />,
-    title: "UUID Generator",
+        shortTitle: "UUID",
+        longTitle: "UUID Generator",
         description: "Generate UUIDs version 1 and 4",
         keywords: "guid uuid1 uuid4 generator",
         href: pagesPath.$url(),
         disabled: true,
       },
+    ],
+  },
+  {
+    icon: <TextFields />,
+    title: "Text",
+    tools: [
       {
         icon: <TextIncrease />,
-    title: "Regex Tester",
+        shortTitle: "Regex Tester",
+        longTitle: "Regex Tester",
         description: "Validate and test regular expressions",
         keywords: "regular expression regex validator tester",
         href: pagesPath.$url(),
         disabled: true,
       },
+    ],
+  },
+  {
+    icon: <ImageIcon />,
+    title: "Graphic",
+    tools: [
       {
         icon: <Filter />,
-    title: "PNG / JPEG Compressor",
+        shortTitle: "PNG / JPEG Compressor",
+        longTitle: "PNG / JPEG Compressor",
         description: "Lossless PNG and JPEG optimizer",
         keywords: "png jpeg compressor optimizer image",
         href: pagesPath.$url(),
         disabled: true,
       },
+    ],
+  },
 ];
+
+export const homeTools = toolGroups.flatMap(({ tools }) =>
+  tools.map(({ shortTitle: _, longTitle, ...rest }) => ({
+    ...rest,
+    title: longTitle,
+  }))
+);
+
+export const drawerToolGroups = toolGroups.map(({ tools, ...rest }) => ({
+  ...rest,
+  tools: tools.map(({ icon, shortTitle, description, href, disabled }) => ({
+    icon,
+    title: shortTitle,
+    description,
+    href,
+    disabled,
+  })),
+}));