From 1ad3d1d6d6a0f4ce7705d512837ec2f3362da377 Mon Sep 17 00:00:00 2001 From: BlankParticle Date: Sun, 1 Sep 2024 12:20:43 +0530 Subject: [PATCH] chore: clean up for unused deps and replacements for deps --- apps/web/package.json | 3 +- .../[convoId]/_components/messages-panel.tsx | 4 +-- .../convo/[convoId]/_components/reply-box.tsx | 24 +++++++-------- .../convo/_components/convo-list-item.tsx | 28 ++++++++--------- .../convo/_components/create-convo-form.tsx | 28 ++++++----------- apps/web/src/app/[orgShortcode]/layout.tsx | 4 +-- .../security/_components/password-modals.tsx | 4 +-- apps/web/src/app/[orgShortcode]/tunnels.ts | 2 -- .../app/join/org/_components/create-org.tsx | 4 +-- apps/web/src/app/join/page.tsx | 4 +-- .../join/secure/_components/secure-cards.tsx | 4 +-- .../recovery/reset-password/reset/page.tsx | 4 +-- apps/web/src/components/copy-button.tsx | 12 ++++---- apps/web/src/lib/utils.ts | 3 ++ pnpm-lock.yaml | 30 ++++++++----------- 15 files changed, 68 insertions(+), 90 deletions(-) delete mode 100644 apps/web/src/app/[orgShortcode]/tunnels.ts diff --git a/apps/web/package.json b/apps/web/package.json index 4a3ce691..f9e784cf 100644 --- 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 index 85635966..cbb8342a 100644 --- 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 index b567da6f..09c36e45 100644 --- 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({ )} { + 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 index 557bfcb2..95c28b15 100644 --- 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 ( { @@ -118,17 +118,17 @@ export const ConvoItem = memo(function ConvoItem({ } : undefined }> - 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 ? ( - + 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 index 320ccc85..eaf29596 100644 --- 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(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({ { + 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 index 8885f8ed..3f3a9aaf 100644 --- 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 index 35b29cdb..9a636e2f 100644 --- 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 deleted file mode 100644 index 37fcb58f..00000000 --- a/apps/web/src/app/[orgShortcode]/tunnels.ts +++ /dev/null @@ -1,2 +0,0 @@ -import tunnel from 'tunnel-rat'; -export const settingsSidebarTunnel = tunnel(); diff --git a/apps/web/src/app/join/org/_components/create-org.tsx b/apps/web/src/app/join/org/_components/create-org.tsx index c8370743..05b2ca5b 100644 --- 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 index 316a31d8..f82ca0eb 100644 --- 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(''); 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 index 6145bef4..93e88dd9 100644 --- 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 index b4885fbc..01be7635 100644 --- 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 diff --git a/apps/web/src/components/copy-button.tsx b/apps/web/src/components/copy-button.tsx index 339678e0..62fd3727 100644 --- a/apps/web/src/components/copy-button.tsx +++ b/apps/web/src/components/copy-button.tsx @@ -2,9 +2,9 @@ import { Button, type ButtonProps } from '@/src/components/shadcn-ui/button'; import { type ElementRef, forwardRef, useState } from 'react'; -import { useCopyToClipboard } from '@uidotdev/usehooks'; import { Check, Copy } from '@phosphor-icons/react'; -import { cn } from '../lib/utils'; +import { cn, copyToClipboard } from '../lib/utils'; +import { toast } from 'sonner'; export const CopyButton = forwardRef< ElementRef<'button'>, @@ -15,7 +15,6 @@ export const CopyButton = forwardRef< } >(({ text, onCopy, iconSize = 15, ...props }, ref) => { const [hasCopied, setHasCopied] = useState(false); - const [, copyToClipboard] = useCopyToClipboard(); return (