useDoubleClick didn't need to be a hook

components/system/Files/FileEntry/index.tsx

@@ -4,7 +4,7 @@ import useFile from "components/system/Files/FileEntry/useFile";
 import useFileInfo from "components/system/Files/FileEntry/useFileInfo";
 import type { FileActions } from "components/system/Files/FileManager/useFiles";
 import { FileEntryIconSize } from "components/system/Files/Views";
-import useDoubleClick from "components/system/useDoubleClick";
+import { doubleClick } from "utils/functions";
 import { useMenu } from "contexts/menu";
 import { useState } from "react";
 import Button from "styles/common/Button";
@@ -32,7 +32,7 @@ const FileEntry = ({
 
   return (
     <Button
-      onClick={useDoubleClick(() => openFile(pid), singleClick)}
+      onClick={doubleClick(() => openFile(pid), singleClick)}
       onContextMenu={contextMenu(menu)}
     >
       <figure>

components/system/Window/Titlebar/index.tsx

@@ -1,4 +1,4 @@
-import useDoubleClick from "components/system/useDoubleClick";
+import { doubleClick } from "utils/functions";
 import StyledTitlebar from "components/system/Window/Titlebar/StyledTitlebar";
 import useWindowActions from "components/system/Window/Titlebar/useWindowActions";
 import {
@@ -32,19 +32,18 @@ const Titlebar = ({ id }: TitlebarProps): JSX.Element => {
   const isForeground = id === foregroundId;
   const { onClose, onMaximize, onMinimize } = useWindowActions(id);
   const disableMaximize = autoSizing && !lockAspectRatio;
-  const maximizeDoubleClick = useDoubleClick(onMaximize);
 
   return (
     <StyledTitlebar className="handle" foreground={isForeground}>
       <Button
         as="h1"
-        onClick={disableMaximize ? undefined : maximizeDoubleClick}
+        onClick={disableMaximize ? undefined : doubleClick(onMaximize)}
       >
         <figure>
           <Icon
             src={icon}
             alt={title}
-            onClick={useDoubleClick(onClose)}
+            onClick={doubleClick(onClose)}
             imgSize={16}
           />
           <figcaption>{title}</figcaption>

components/system/useDoubleClick.ts

@@ -1,37 +0,0 @@
-import { useRef } from "react";
-import { DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS } from "utils/constants";
-
-type DoubleClick = (
-  handler: React.MouseEventHandler,
-  singleClick?: boolean,
-  timeout?: number
-) => React.MouseEventHandler;
-
-const useDoubleClick: DoubleClick = (
-  handler,
-  singleClick = false,
-  timeout = DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS
-) => {
-  const timer = useRef<NodeJS.Timeout>();
-
-  return (event) => {
-    const runHandler = () => {
-      event.stopPropagation();
-      handler(event);
-    };
-
-    if (singleClick) {
-      runHandler();
-    } else if (!timer.current) {
-      timer.current = setTimeout(() => {
-        timer.current = undefined;
-      }, timeout);
-    } else {
-      clearTimeout(timer.current);
-      runHandler();
-      timer.current = undefined;
-    }
-  };
-};
-
-export default useDoubleClick;

utils/functions.ts

@@ -1,6 +1,9 @@
 import { extname } from "path";
 import { stripUnit } from "polished";
-import { ONE_TIME_PASSIVE_EVENT } from "utils/constants";
+import {
+  DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS,
+  ONE_TIME_PASSIVE_EVENT,
+} from "utils/constants";
 
 export const bufferToBlob = (buffer: Buffer): Blob =>
   new Blob([new Uint8Array(buffer)]);
@@ -60,3 +63,31 @@ export const loadFiles = async (files: string[]): Promise<Event[]> =>
 
 export const pxToNum = (value: string | number = 0): number =>
   Number(stripUnit(value));
+
+export const doubleClick = (
+  handler: React.MouseEventHandler,
+  singleClick = false,
+  timeout = DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS
+): React.MouseEventHandler => {
+  let timer: NodeJS.Timeout | undefined;
+
+  return (event) => {
+    const runHandler = () => {
+      event.stopPropagation();
+      handler(event);
+    };
+    const clearTimer = () => {
+      timer = undefined;
+    };
+
+    if (singleClick) {
+      runHandler();
+    } else if (typeof timer === "undefined") {
+      timer = setTimeout(clearTimer, timeout);
+    } else {
+      clearTimeout(timer);
+      runHandler();
+      clearTimer();
+    }
+  };
+};