From 876816675e84d4175072950f36af5e19d412ce9b Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 3 May 2024 14:18:01 -0700
Subject: [Clipclops] Refactor message list (#3832)

* rework the list for accessibility

* Reverse reverse

* progress

* good to start testing

* memo `MessageItem`

* small hack

* use our custom `List` impl

* use `ScrollProvider` for `onScroll` event

* remove use of `runOnJS`

* actually, let's keep it

* add some comments

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/components/dms/MessageItem.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/components/dms/MessageItem.tsx')

diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index a8393c742..ba90dd149 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -10,7 +10,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {Text} from '#/components/Typography'
 
-export function MessageItem({
+export let MessageItem = ({
   item,
   next,
   pending,
@@ -21,7 +21,7 @@ export function MessageItem({
     | ChatBskyConvoDefs.DeletedMessageView
     | null
   pending?: boolean
-}) {
+}): React.ReactNode => {
   const t = useTheme()
   const {currentAccount} = useSession()
 
@@ -97,7 +97,9 @@ export function MessageItem({
   )
 }
 
-export function MessageItemMetadata({
+MessageItem = React.memo(MessageItem)
+
+let MessageItemMetadata = ({
   message,
   isLastInGroup,
   style,
@@ -105,7 +107,7 @@ export function MessageItemMetadata({
   message: ChatBskyConvoDefs.MessageView
   isLastInGroup: boolean
   style: StyleProp<TextStyle>
-}) {
+}): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
 
@@ -174,6 +176,8 @@ export function MessageItemMetadata({
   )
 }
 
+MessageItemMetadata = React.memo(MessageItemMetadata)
+
 function localDateString(date: Date) {
   // can't use toISOString because it should be in local time
   const mm = date.getMonth()
-- 
cgit 1.4.1

