From 513960b6a262f039f44315b59e9aa7ae50a4ad87 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Mon, 7 Aug 2023 03:33:20 +0800
Subject: [PATCH] chore: optimize useBreakpoint hook

---
 src/components/MessageItem.tsx   |  2 +-
 src/components/MessageList.tsx   |  5 ++++-
 src/components/ui/ScrollArea.tsx |  4 +++-
 src/constants/index.ts           | 10 +++++-----
 src/hooks/useBreakpoint.ts       | 21 ++++++++++-----------
 src/views/Footer/index.tsx       |  2 +-
 src/views/Header/index.tsx       |  2 +-
 7 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
index 886b8ff..afef9a8 100644
--- a/src/components/MessageItem.tsx
+++ b/src/components/MessageItem.tsx
@@ -28,7 +28,7 @@ const MessageItem: FC<MessageItemProps> = ({ data }) => {
   }
 
   return (
-    <div className="grid grid-cols-[auto_1fr] gap-x-2">
+    <div className="grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
       <Avatar>
         <AvatarImage src={formatData.avatar} />
         <AvatarFallback>{formatData.username}</AvatarFallback>
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
index 8ceae09..1bcaf05 100644
--- a/src/components/MessageList.tsx
+++ b/src/components/MessageList.tsx
@@ -1,12 +1,15 @@
 import { type ReactElement, type FC } from 'react'
 
 import { type MessageItemProps } from './MessageItem'
+import { ScrollArea } from '@/components/ui/ScrollArea'
 
 export interface MessageListProps {
   children?: Array<ReactElement<MessageItemProps>>
 }
 const MessageList: FC<MessageListProps> = ({ children }) => {
-  return <div className="grid content-start overflow-y-auto p-4">{children}</div>
+  return <ScrollArea>{children}</ScrollArea>
 }
 
+MessageList.displayName = 'MessageList'
+
 export default MessageList
diff --git a/src/components/ui/ScrollArea.tsx b/src/components/ui/ScrollArea.tsx
index b025114..202f3db 100644
--- a/src/components/ui/ScrollArea.tsx
+++ b/src/components/ui/ScrollArea.tsx
@@ -8,7 +8,9 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full overscroll-none rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 6a8096b..5eadcb6 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,18 +1,18 @@
 // https://night-tailwindcss.vercel.app/docs/breakpoints
 export const BREAKPOINTS = {
-  sm: '640px',
+  sm: 640,
   // => @media (min-width: 640px) { ... }
 
-  md: '768px',
+  md: 768,
   // => @media (min-width: 768px) { ... }
 
-  lg: '1024px',
+  lg: 1024,
   // => @media (min-width: 1024px) { ... }
 
-  xl: '1280px',
+  xl: 1280,
   // => @media (min-width: 1280px) { ... }
 
-  '2xl': '1536px'
+  '2xl': 1536
   // => @media (min-width: 1536px) { ... }
 } as const
 
diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
index 7e83500..4bd2395 100644
--- a/src/hooks/useBreakpoint.ts
+++ b/src/hooks/useBreakpoint.ts
@@ -1,18 +1,17 @@
-import { useMedia } from 'react-use'
+import { createBreakpoint } from 'react-use'
 import { BREAKPOINTS } from '@/constants'
 
+const _useBreakpoint = createBreakpoint(BREAKPOINTS)
+
 const useBreakpoint = () => {
-  const isSM = useMedia(`(min-width: ${BREAKPOINTS.sm})`)
-  const isMD = useMedia(`(min-width: ${BREAKPOINTS.md})`)
-  const isLG = useMedia(`(min-width: ${BREAKPOINTS.lg})`)
-  const isXL = useMedia(`(min-width: ${BREAKPOINTS.xl})`)
-  const is2XL = useMedia(`(min-width: ${BREAKPOINTS['2xl']})`)
+  const breakpoint = _useBreakpoint() as keyof typeof BREAKPOINTS
+
   return {
-    isSM,
-    isMD,
-    isLG,
-    isXL,
-    is2XL
+    isSM: breakpoint === 'sm',
+    isMD: breakpoint === 'md',
+    isLG: breakpoint === 'lg',
+    isXL: breakpoint === 'xl',
+    is2XL: breakpoint === '2xl'
   }
 }
 
diff --git a/src/views/Footer/index.tsx b/src/views/Footer/index.tsx
index 345f9d8..90ec981 100644
--- a/src/views/Footer/index.tsx
+++ b/src/views/Footer/index.tsx
@@ -36,7 +36,7 @@ const Footer: FC = () => {
   }
 
   return (
-    <div className="grid gap-y-2 p-4">
+    <div className="grid gap-y-2 px-4 pb-4">
       <MessageInput
         value={text}
         preview={isPreview}
diff --git a/src/views/Header/index.tsx b/src/views/Header/index.tsx
index 5f67536..5071ecc 100644
--- a/src/views/Header/index.tsx
+++ b/src/views/Header/index.tsx
@@ -7,7 +7,7 @@ const Header: FC = () => {
   const websiteInfo = getWebSiteInfo()
 
   return (
-    <div className="shadow-xs grid h-12 grid-cols-[auto_1fr_auto] items-center bg-white px-4 backdrop-blur-lg 2xl:h-14">
+    <div className="shadow-xs z-10 grid h-12 grid-cols-[auto_1fr_auto] items-center bg-white px-4 backdrop-blur-lg 2xl:h-14">
       <img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
       <HoverCard>
         <HoverCardTrigger asChild>