chore: clean up for unused deps and replacements for deps

un · Sep 1, 2024 · 1ad3d1d · 1ad3d1d
1 parent 41c7c86
commit 1ad3d1d
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 90 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -54,7 +54,6 @@
     "@u22n/realtime": "workspace:^",
     "@u22n/tiptap": "workspace:^",
     "@u22n/utils": "workspace:^",
-    "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -80,8 +79,8 @@
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "tunnel-rat": "^0.1.2",
     "use-debounce": "^10.0.3",
+    "use-long-press": "^3.2.0",
     "vaul": "^0.9.1",
     "zod": "^3.23.8",
     "zustand": "^4.5.5"

diff --git a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx
@@ -28,12 +28,11 @@ import { type RouterOutputs, platform } from '@/src/lib/trpc';
 import { createExtensionSet } from '@u22n/tiptap/extensions';
 import { useOrgShortcode } from '@/src/hooks/use-params';
 import { type formatParticipantData } from '../../utils';
-import { useCopyToClipboard } from '@uidotdev/usehooks';
 import { useTimeAgo } from '@/src/hooks/use-time-ago';
+import { cn, copyToClipboard } from '@/src/lib/utils';
 import { Avatar } from '@/src/components/avatar';
 import { type TypeId } from '@u22n/utils/typeid';
 import { cva } from 'class-variance-authority';
-import { cn } from '@/src/lib/utils';
 import { ms } from '@u22n/utils/ms';
 import { useAtom } from 'jotai';
 import { toast } from 'sonner';
@@ -235,7 +234,6 @@ const MessageItem = memo(
       [formattedParticipants, message.author.publicId]
     );
     const [replyTo, setReplyTo] = useAtom(replyToMessageAtom);
-    const [, copyToClipboard] = useCopyToClipboard();
     const [viewingOriginalMessage, setViewingOriginalMessage] = useState(false);
 
     // if the message timestamp is less than a day ago, show the date instead of the time

diff --git a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx
@@ -34,9 +34,9 @@ import { Button } from '@/src/components/shadcn-ui/button';
 import { useIsMobile } from '@/src/hooks/use-is-mobile';
 import { emptyTiptapEditorContent } from '@u22n/tiptap';
 import { useDraft } from '@/src/stores/draft-store';
+import { useDebouncedCallback } from 'use-debounce';
 import { Editor } from '@/src/components/editor';
 import { type TypeId } from '@u22n/utils/typeid';
-import { useDebounce } from '@uidotdev/usehooks';
 import { platform } from '@/src/lib/trpc';
 import { cn } from '@/src/lib/utils';
 import { ms } from '@u22n/utils/ms';
@@ -126,24 +126,16 @@ export function ReplyBox({
     canUpload
   } = useAttachmentUploader(draft.attachments);
 
-  // Autosave draft
-  const debouncedEditorText = useDebounce(editorText, 500);
-  useEffect(() => {
-    if (emptyEditorChecker(debouncedEditorText) && attachments.length === 0) {
+  const saveDraft = useDebouncedCallback(() => {
+    if (emptyEditorChecker(editorText) && attachments.length === 0) {
       resetDraft();
     } else {
       setDraft({
-        content: debouncedEditorText,
+        content: editorText,
         attachments
       });
     }
-  }, [
-    debouncedEditorText,
-    setDraft,
-    attachments,
-    emptyEditorChecker,
-    resetDraft
-  ]);
+  }, 500);
 
   const handleReply = useCallback(
     async (type: 'comment' | 'message') => {
@@ -231,6 +223,7 @@ export function ReplyBox({
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         event.preventDefault();
+        event.stopPropagation();
         void handleSendMessage();
       }
     };
@@ -264,7 +257,10 @@ export function ReplyBox({
         )}
         <Editor
           initialValue={editorText}
-          onChange={setEditorText}
+          onChange={(value) => {
+            setEditorText(value);
+            saveDraft();
+          }}
           canUpload={canUpload}
           ref={editorRef}
         />

diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
@@ -13,20 +13,19 @@ import {
   useDeleteConvo$Cache
 } from '../utils';
 import { useOrgShortcode, useSpaceShortcode } from '@/src/hooks/use-params';
+import { LongPressEventType, useLongPress } from 'use-long-press';
 import { Checkbox } from '@/src/components/shadcn-ui/checkbox';
 import { AvatarPlus } from '@/src/components/avatar-plus';
+import { usePathname, useRouter } from 'next/navigation';
 import { useIsMobile } from '@/src/hooks/use-is-mobile';
 import { Trash } from '@phosphor-icons/react/dist/ssr';
 import { useTimeAgo } from '@/src/hooks/use-time-ago';
-import { useLongPress } from '@uidotdev/usehooks';
 import { type TypeId } from '@u22n/utils/typeid';
-import { usePathname } from 'next/navigation';
 import { convoListSelecting } from '../atoms';
 import { platform } from '@/src/lib/trpc';
 import { memo, useMemo } from 'react';
 import { cn } from '@/src/lib/utils';
 import { useAtomValue } from 'jotai';
-import Link from 'next/link';
 
 export const ConvoItem = memo(function ConvoItem({
   convo,
@@ -45,6 +44,7 @@ export const ConvoItem = memo(function ConvoItem({
   const spaceShortcode = useSpaceShortcode(false);
   const selecting = useAtomValue(convoListSelecting);
   const isMobile = useIsMobile();
+  const router = useRouter();
 
   const deleteConvoFromCache = useDeleteConvo$Cache();
   const { mutate: deleteConvo } = platform.convos.deleteConvo.useMutation({
@@ -96,20 +96,20 @@ export const ConvoItem = memo(function ConvoItem({
   const isActive = currentPath === `${linkBase}/${convo.publicId}`;
 
   const longPressHandlers = useLongPress(
-    (e) => {
-      if (selecting) return;
-      e.preventDefault();
-      e.stopPropagation();
-      onSelect(false);
+    () => {
+      if (!selecting) onSelect(false);
     },
     {
-      threshold: 750
+      threshold: 750,
+      detect: LongPressEventType.Touch,
+      cancelOnMovement: 15
     }
   );
 
   return (
     <ContextMenu>
       <ContextMenuTrigger
+        asChild
         onContextMenu={
           isMobile
             ? (e) => {
@@ -118,17 +118,17 @@ export const ConvoItem = memo(function ConvoItem({
               }
             : undefined
         }>
-        <Link
-          href={`${linkBase}/${convo.publicId}`}
+        <div
+          onClick={() => router.push(`${linkBase}/${convo.publicId}`)}
           className={cn(
-            'flex h-full flex-row gap-2 overflow-visible rounded-xl border-2 px-2 py-3',
+            'flex h-full cursor-pointer flex-row gap-2 overflow-visible rounded-xl border-2 px-2 py-3',
             isActive
               ? 'border-accent-8'
               : 'hover:border-base-6 border-transparent',
             selected && 'bg-accent-3',
             !selecting && 'group'
           )}
-          {...(isMobile ? longPressHandlers : {})}>
+          {...longPressHandlers()}>
           {selecting ? (
             <Checkbox
               className="size-6 rounded-lg"
@@ -179,7 +179,7 @@ export const ConvoItem = memo(function ConvoItem({
               </span>
             </div>
           </div>
-        </Link>
+        </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuGroup>

diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx
@@ -68,11 +68,10 @@ import { Badge } from '@/src/components/shadcn-ui/badge';
 import { useIsMobile } from '@/src/hooks/use-is-mobile';
 import { emptyTiptapEditorContent } from '@u22n/tiptap';
 import { useMutation } from '@tanstack/react-query';
+import { useDebouncedCallback } from 'use-debounce';
 import { useAddSingleConvo$Cache } from '../utils';
 import { Editor } from '@/src/components/editor';
 import { type TypeId } from '@u22n/utils/typeid';
-import { useDebounce } from '@uidotdev/usehooks';
-import { usePrevious } from '@uidotdev/usehooks';
 import { showNewConvoPanel } from '../atoms';
 import { platform } from '@/src/lib/trpc';
 import { cn } from '@/src/lib/utils';
@@ -133,7 +132,6 @@ export default function CreateConvoForm({
   const orgShortcode = useOrgShortcode();
   const { scopedNavigate } = useOrgScopedRouter();
   const spaceShortcode = useSpaceShortcode(false);
-  const lastOrg = usePrevious(orgShortcode);
   const { draft, setDraft, resetDraft } = useComposingDraft();
   const isMobile = useIsMobile();
 
@@ -395,27 +393,15 @@ export default function CreateConvoForm({
   const [editorText, setEditorText] = useState(draft.content);
   const editorRef = useRef<EditorFunctions>(null);
 
-  // Autosave draft
-  const debouncedEditorText = useDebounce(editorText, 500);
-  useEffect(() => {
-    if (lastOrg && lastOrg !== orgShortcode) return; // Don't autosave if org changes
+  const saveDraft = useDebouncedCallback(() => {
     setDraft({
-      content: debouncedEditorText,
+      content: editorText,
       attachments,
       participants: selectedParticipants,
       topic: topic,
       from: selectedEmailIdentity ?? null
     });
-  }, [
-    debouncedEditorText,
-    setDraft,
-    attachments,
-    selectedParticipants,
-    topic,
-    selectedEmailIdentity,
-    lastOrg,
-    orgShortcode
-  ]);
+  }, 500);
 
   const emptyEditorChecker = useCallback((editorText: JSONContent) => {
     const contentArray = editorText?.content;
@@ -558,6 +544,7 @@ export default function CreateConvoForm({
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         event.preventDefault();
+        event.stopPropagation();
         handleSendMessage();
       }
     };
@@ -616,7 +603,10 @@ export default function CreateConvoForm({
 
         <Editor
           initialValue={editorText}
-          onChange={setEditorText}
+          onChange={(value) => {
+            setEditorText(value);
+            saveDraft();
+          }}
           canUpload={canUpload}
           ref={editorRef}
         />

diff --git a/apps/web/src/app/[orgShortcode]/layout.tsx b/apps/web/src/app/[orgShortcode]/layout.tsx
@@ -15,7 +15,6 @@ import { Button } from '@/src/components/shadcn-ui/button';
 import { useIsMobile } from '@/src/hooks/use-is-mobile';
 import { BottomNav } from './_components/bottom-nav';
 import { SpinnerGap } from '@phosphor-icons/react';
-import { usePrevious } from '@uidotdev/usehooks';
 import { memo, useEffect, useMemo } from 'react';
 import Sidebar from './_components/sidebar';
 import { platform } from '@/src/lib/trpc';
@@ -112,7 +111,6 @@ const RealtimeHandlers = memo(function RealtimeHandler() {
       staleTime: ms('1 hour')
     }
   );
-  const previousSpaces = usePrevious(spacesData?.spaces);
 
   // Root subscribers
   useEffect(() => {
@@ -160,7 +158,7 @@ const RealtimeHandlers = memo(function RealtimeHandler() {
     client,
     deleteConvo,
     getConvoSpaceWorkflows,
-    previousSpaces,
+
     spacesData?.spaces,
     updateConvoMessageList
   ]);

diff --git a/apps/web/src/app/[orgShortcode]/settings/user/security/_components/password-modals.tsx b/apps/web/src/app/[orgShortcode]/settings/user/security/_components/password-modals.tsx
@@ -17,7 +17,7 @@ import {
 import { PasswordInput } from '@/src/components/password-input';
 import { Button } from '@/src/components/shadcn-ui/button';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useDebounce } from '@uidotdev/usehooks';
+import { useDebounce } from 'use-debounce';
 import { useForm } from 'react-hook-form';
 import { platform } from '@/src/lib/trpc';
 import { useEffect } from 'react';
@@ -137,7 +137,7 @@ export function EnableOrChangePasswordModal({
   const confirmPassword = form.watch('confirmPassword');
   const validated = form.watch('validated');
 
-  const debouncedPassword = useDebounce(password, 1000);
+  const [debouncedPassword] = useDebounce(password, 1000);
 
   // zod validation when length < 8
   useEffect(() => {

diff --git a/apps/web/src/app/[orgShortcode]/tunnels.ts b/apps/web/src/app/[orgShortcode]/tunnels.ts
diff --git a/apps/web/src/app/join/org/_components/create-org.tsx b/apps/web/src/app/join/org/_components/create-org.tsx
@@ -10,8 +10,8 @@ import { Button } from '@/src/components/shadcn-ui/button';
 import { IdentificationCard } from '@phosphor-icons/react';
 import { Input } from '@/src/components/shadcn-ui/input';
 import { useEffect, useMemo, useState } from 'react';
-import { useDebounce } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
+import { useDebounce } from 'use-debounce';
 import { platform } from '@/src/lib/trpc';
 import { cn } from '@/src/lib/utils';
 import { env } from '@/src/env';
@@ -23,7 +23,7 @@ export function CreateOrg() {
   const [orgShortcode, setOrgShortcode] = useState('');
   const [customShortcode, setCustomShortcode] = useState(false);
   const router = useRouter();
-  const debouncedOrgName = useDebounce(orgName, 750);
+  const [debouncedOrgName] = useDebounce(orgName, 750);
 
   const [shortcodeValid, shortcodeError] = useMemo(() => {
     const { success, error } = z

diff --git a/apps/web/src/app/join/page.tsx b/apps/web/src/app/join/page.tsx
@@ -8,9 +8,9 @@ import { Label } from '@/src/components/shadcn-ui/label';
 import { useEffect, useMemo, useState } from 'react';
 import { zodSchemas } from '@u22n/utils/zodSchemas';
 import { useCookies } from 'next-client-cookies';
-import { useDebounce } from '@uidotdev/usehooks';
 import Stepper from './_components/stepper';
 import { useRouter } from 'next/navigation';
+import { useDebounce } from 'use-debounce';
 import { platform } from '@/src/lib/trpc';
 import { datePlus } from '@u22n/utils/ms';
 import Image from 'next/image';
@@ -19,7 +19,7 @@ export default function Page() {
   const [username, setUsername] = useState<string>('');
   const [agree, setAgree] = useState(false);
   const router = useRouter();
-  const debouncedUsername = useDebounce(username, 1000);
+  const [debouncedUsername] = useDebounce(username, 1000);
   const cookies = useCookies();
 
   const [validUsername, usernameError] = useMemo(() => {

diff --git a/apps/web/src/app/join/secure/_components/secure-cards.tsx b/apps/web/src/app/join/secure/_components/secure-cards.tsx
@@ -8,7 +8,7 @@ import { StrengthMeter } from '@/src/components/shared/strength-meter';
 import { Fingerprint, Lock, Password } from '@phosphor-icons/react';
 import { PasswordInput } from '@/src/components/password-input';
 import { type UseFormReturn } from 'react-hook-form';
-import { useDebounce } from '@uidotdev/usehooks';
+import { useDebounce } from 'use-debounce';
 import { platform } from '@/src/lib/trpc';
 import { cn } from '@/src/lib/utils';
 import { useEffect } from 'react';
@@ -79,7 +79,7 @@ export function PasswordCard({
   const active = selected === 'password';
   const password = form.watch('password');
   const confirmPassword = form.watch('confirmPassword');
-  const debouncedPassword = useDebounce(password, 1000);
+  const [debouncedPassword] = useDebounce(password, 1000);
   const passwordMatch =
     password.length >= 8 && confirmPassword.length >= 8
       ? password === confirmPassword

diff --git a/apps/web/src/app/recovery/reset-password/reset/page.tsx b/apps/web/src/app/recovery/reset-password/reset/page.tsx
@@ -11,8 +11,8 @@ import { PasswordInput } from '@/src/components/password-input';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Button } from '@/src/components/shadcn-ui/button';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useDebounce } from '@uidotdev/usehooks';
 import { Lock } from '@phosphor-icons/react';
+import { useDebounce } from 'use-debounce';
 import { useForm } from 'react-hook-form';
 import { platform } from '@/src/lib/trpc';
 import { useEffect } from 'react';
@@ -60,7 +60,7 @@ export default function ResetPasswordPage() {
 
   const password = form.watch('password');
   const confirmPassword = form.watch('confirmPassword');
-  const debouncedPassword = useDebounce(password, 1000);
+  const [debouncedPassword] = useDebounce(password, 1000);
   const passwordMatch =
     password.length >= 8 && confirmPassword.length >= 8
       ? password === confirmPassword