From ad8b6a26b99a6b1c93f3e2ceb25db5d4b4c7fb8e Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Wed, 30 Mar 2022 09:19:22 +0900
Subject: [PATCH] refactor: unify repeated tool definitions

---
 src/components/layout/Drawer.tsx        | 100 ++---------
 src/components/pages/home/Content.tsx   |   4 +-
 src/components/pages/search/Content.tsx |   6 +-
 src/data/tools.tsx                      | 226 ++++++++++++++++--------
 4 files changed, 164 insertions(+), 172 deletions(-)

diff --git a/src/components/layout/Drawer.tsx b/src/components/layout/Drawer.tsx
index 6166254..ed7173b 100644
--- a/src/components/layout/Drawer.tsx
+++ b/src/components/layout/Drawer.tsx
@@ -1,31 +1,19 @@
-import {
-  Code,
-  DataObject,
-  DragHandle,
-  Filter,
-  Fingerprint,
-  Home,
-  Image as ImageIcon,
-  Key,
-  Link,
-  NoteAdd,
-  Numbers,
-  Sort,
-  SyncAlt,
-  TextFields,
-  TextIncrease,
-  Transform,
-} from "@mui/icons-material";
+import { Home } 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 = [
-  {
-    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 = () => (
+const StyledComponent = ({ toolGroups }: Props) => (
   <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;
diff --git a/src/components/pages/home/Content.tsx b/src/components/pages/home/Content.tsx
index 48fe721..1da48ff 100644
--- a/src/components/pages/home/Content.tsx
+++ b/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;
diff --git a/src/components/pages/search/Content.tsx b/src/components/pages/search/Content.tsx
index 22d438f..6e49e89 100644
--- a/src/components/pages/search/Content.tsx
+++ b/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);
 
diff --git a/src/data/tools.tsx b/src/data/tools.tsx
index a963bb6..7c08a17 100644
--- a/src/data/tools.tsx
+++ b/src/data/tools.tsx
@@ -4,104 +4,174 @@ 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",
-    description: "Convert Json data to Yaml and vice versa",
-    keywords: "json yaml converter",
-    href: pagesPath.converters.json_yaml.$url(),
-    disabled: false,
+    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(),
+        disabled: false,
+      },
+      {
+        icon: <Numbers />,
+        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: <Numbers />,
-    title: "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 />,
+        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",
+        href: pagesPath.encoders_decoders.html.$url(),
+        disabled: false,
+      },
+      {
+        icon: <Link />,
+        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",
+        href: pagesPath.$url(),
+        disabled: true,
+      },
+      {
+        icon: <DragHandle />,
+        shortTitle: "Base 64",
+        longTitle: "Base 64 Encoder / Decoder",
+        description: "Encode and decode Base64 data",
+        keywords: "base64 encoder decocder",
+        href: pagesPath.$url(),
+        disabled: true,
+      },
+      {
+        icon: <Key />,
+        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: <Code />,
-    title: "HTML Encoder / Decoder",
-    description:
-      "Encode or decode all the applicable characters to their corresponding HTML entities",
-    keywords: "html encoder escaper decocder unescaper",
-    href: pagesPath.encoders_decoders.html.$url(),
-    disabled: false,
+    icon: <Sort />,
+    title: "Formatters",
+    tools: [
+      {
+        icon: <DataObject />,
+        shortTitle: "Json",
+        longTitle: "JSON Formatter",
+        description: "Indent or minify JSON data",
+        keywords: "json formatter",
+        href: pagesPath.$url(),
+        disabled: true,
+      },
+    ],
   },
   {
-    icon: <Link />,
-    title: "URL Encoder / Decoder",
-    description:
-      "Encode or decode all the applicable characters to their corresponding URL entities",
-    keywords: "url encoder escaper decocder unescaper",
-    href: pagesPath.$url(),
-    disabled: true,
+    icon: <NoteAdd />,
+    title: "Generators",
+    tools: [
+      {
+        icon: <Fingerprint />,
+        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(),
+        disabled: true,
+      },
+      {
+        icon: <Numbers />,
+        shortTitle: "UUID",
+        longTitle: "UUID Generator",
+        description: "Generate UUIDs version 1 and 4",
+        keywords: "guid uuid1 uuid4 generator",
+        href: pagesPath.$url(),
+        disabled: true,
+      },
+    ],
   },
   {
-    icon: <DragHandle />,
-    title: "Base 64 Encoder / Decoder",
-    description: "Encode and decode Base64 data",
-    keywords: "base64 encoder decocder",
-    href: pagesPath.$url(),
-    disabled: true,
+    icon: <TextFields />,
+    title: "Text",
+    tools: [
+      {
+        icon: <TextIncrease />,
+        shortTitle: "Regex Tester",
+        longTitle: "Regex Tester",
+        description: "Validate and test regular expressions",
+        keywords: "regular expression regex validator tester",
+        href: pagesPath.$url(),
+        disabled: true,
+      },
+    ],
   },
   {
-    icon: <Key />,
-    title: "JWT Decoder",
-    description: "Decode a JWT header, payload and signature",
-    keywords: "jwt json web token decocder",
-    href: pagesPath.$url(),
-    disabled: true,
-  },
-  {
-    icon: <DataObject />,
-    title: "JSON Formatter",
-    description: "Indent or minify JSON data",
-    keywords: "json formatter",
-    href: pagesPath.$url(),
-    disabled: true,
-  },
-  {
-    icon: <Fingerprint />,
-    title: "Hash Generator",
-    description: "Calculate MD5, SHA1, SHA256 and SHA512 hash from text data",
-    keywords: "hash generator md5 sha1 sha256 sha512",
-    href: pagesPath.$url(),
-    disabled: true,
-  },
-  {
-    icon: <Numbers />,
-    title: "UUID Generator",
-    description: "Generate UUIDs version 1 and 4",
-    keywords: "guid uuid1 uuid4 generator",
-    href: pagesPath.$url(),
-    disabled: true,
-  },
-  {
-    icon: <TextIncrease />,
-    title: "Regex Tester",
-    description: "Validate and test regular expressions",
-    keywords: "regular expression regex validator tester",
-    href: pagesPath.$url(),
-    disabled: true,
-  },
-  {
-    icon: <Filter />,
-    title: "PNG / JPEG Compressor",
-    description: "Lossless PNG and JPEG optimizer",
-    keywords: "png jpeg compressor optimizer image",
-    href: pagesPath.$url(),
-    disabled: true,
+    icon: <ImageIcon />,
+    title: "Graphic",
+    tools: [
+      {
+        icon: <Filter />,
+        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,
+  })),
+}));