From a40c777a56f82d4e2d330c95ca7de0ed0ba48e79 Mon Sep 17 00:00:00 2001
From: Vova Puchkov <85283124+tellmywife@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:54:35 +0200
Subject: [PATCH] feat(bundle): reduce size (WH-1098) (#204)

* feat(bundle): reduce size (WH-1098)

* feat(utils): add capitalize and debounce functions (WH-1098)

* feat: use alias (WH-1098)

* feat: use alias (WH-1098)
---
 lib/components/Table/hooks/usePageSize.ts     |  4 ++--
 .../TextViewerLite/hooks/useScrolledX.ts      |  4 ++--
 .../ToasterDialog/ToasterDialog.tsx           |  5 ++---
 lib/utils.tsx                                 | 20 +++++++++++++++++++
 package.json                                  |  1 -
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/lib/components/Table/hooks/usePageSize.ts b/lib/components/Table/hooks/usePageSize.ts
index 57c36b61..1ea66a35 100644
--- a/lib/components/Table/hooks/usePageSize.ts
+++ b/lib/components/Table/hooks/usePageSize.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
+import Utils from 'utils'
 import { ExtendedTable } from '../types'
 import { ROWS_PER_PAGE_RATIO, ROW_HEIGHT } from '../tableConsts'
-import _ from 'lodash'
 
 function usePageSize<Data>({
   table,
@@ -27,7 +27,7 @@ function usePageSize<Data>({
       return
     }
 
-    const calcNumberOfRows = _.debounce(() => {
+    const calcNumberOfRows = Utils.debounce(() => {
       const tableHeight = tableRef.current?.clientHeight
       if (tableHeight) {
         table.setPageSize(tableHeight / (ROW_HEIGHT / ROWS_PER_PAGE_RATIO))
diff --git a/lib/components/TextEditor/components/TextViewerLite/hooks/useScrolledX.ts b/lib/components/TextEditor/components/TextViewerLite/hooks/useScrolledX.ts
index cf14d583..13dad7ae 100644
--- a/lib/components/TextEditor/components/TextViewerLite/hooks/useScrolledX.ts
+++ b/lib/components/TextEditor/components/TextViewerLite/hooks/useScrolledX.ts
@@ -1,11 +1,11 @@
-import { debounce } from 'lodash'
 import { useEffect, useState } from 'react'
+import Utils from 'utils'
 
 function useScrolledX({ element }: { element: HTMLDivElement | null }) {
   const [isScrolledX, setScrolledX] = useState<boolean>(false)
 
   useEffect(() => {
-    const handleScroll = debounce(() => {
+    const handleScroll = Utils.debounce(() => {
       if (element && element.scrollLeft > 0) {
         setScrolledX(true)
       } else {
diff --git a/lib/components/ToasterDialog/ToasterDialog.tsx b/lib/components/ToasterDialog/ToasterDialog.tsx
index e4a43253..b820c131 100644
--- a/lib/components/ToasterDialog/ToasterDialog.tsx
+++ b/lib/components/ToasterDialog/ToasterDialog.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react'
 import clsx from 'clsx'
-import { capitalize } from 'lodash'
 import { DIALOG_STATUSES, TOASTER_DIALOG } from 'consts'
-import { useDialog } from '../../context'
+import { useDialog } from 'context'
 import Utils from 'utils'
 import { Approve, Warning } from 'svgs'
 
@@ -40,7 +39,7 @@ function ToasterDialog() {
             })}
           >
             {status === DIALOG_STATUSES.SUCCESS ? <Approve /> : <Warning />}
-            {capitalize(status)}
+            {Utils.capitalize(status)}
           </div>
         ),
         body: message,
diff --git a/lib/utils.tsx b/lib/utils.tsx
index 9e84069a..697cb98e 100644
--- a/lib/utils.tsx
+++ b/lib/utils.tsx
@@ -389,6 +389,26 @@ const utils = {
       }
     })
     return isPast ? `${stringToShow} ago` : `in ${stringToShow}`
+  },
+
+  capitalize: (str: string) => {
+    const separator = ', '
+
+    return str
+      .split(separator)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(separator)
+  },
+
+  debounce: (callback: any, wait = 0) => {
+    let timer: ReturnType<typeof setTimeout> | -1 = -1
+
+    return (...args) => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        callback.apply(this, args)
+      }, wait)
+    }
   }
 }
 
diff --git a/package.json b/package.json
index 17425e14..71382c62 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "check-password-strength": "^2.0.7",
     "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.3",
-    "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "react-ace": "^12.0.0",
     "react-router-dom": "^6.25.0",