@messenger-box/platform-mobile 10.0.3-alpha.22 → 10.0.3-alpha.23

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.3-alpha.23](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.22...v10.0.3-alpha.23) (2025-04-14)
+
+**Note:** Version bump only for package @messenger-box/platform-mobile
+
 ## [10.0.3-alpha.22](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.21...v10.0.3-alpha.22) (2025-04-14)
 
 **Note:** Version bump only for package @messenger-box/platform-mobile

package/lib/screens/inbox/DialogThreads.js

@@ -1,4 +1,4 @@
-import*as React from'react';import {Spinner,Box}from'@admin-layout/gluestack-ui-mobile';import {ThreadsView}from'./containers/ThreadsView.js';import {useViewChannelDetailQuery,useThreadMessagesQuery}from'common/graphql';import {useFocusEffect}from'@react-navigation/native';import {config}from'./config/config.js';import colors from'tailwindcss/colors';const {
+import*as React from'react';import {Spinner,Box}from'@admin-layout/gluestack-ui-mobile';import {ThreadsView}from'./containers/ThreadsView.js';import {useViewChannelDetailQuery,useThreadMessagesQuery}from'common/graphql';import {useFocusEffect}from'@react-navigation/native';import {config}from'./config/config.js';import colors from'tailwindcss/colors';import {useSafeDialogThreadsMachine}from'./hooks/useSafeDialogThreadsMachine.js';import {Actions,BaseState}from'./workflow/dialog-threads-xstate.js';const {
   MESSAGES_PER_PAGE
 } = config;
 function DialogThreads({
@@ -6,6 +6,16 @@ function DialogThreads({
   postParentId,
   role
 }) {
+  const [state, send] = useSafeDialogThreadsMachine();
+  const {
+    context,
+    value
+  } = state;
+  const {
+    channelsDetail,
+    loading,
+    error
+  } = context;
   const {
     data: channelData,
     loading: channelLoading,
@@ -29,11 +39,47 @@ function DialogThreads({
       repliesLimit2: 5
     }
   });
-  const channelsDetail = React.useMemo(() => {
-    if (!(channelData == null ? void 0 : channelData.viewChannelDetail))
-      return null;
-    return channelData == null ? void 0 : channelData.viewChannelDetail;
+  React.useEffect(() => {
+    send({
+      type: Actions.INITIALIZE,
+      data: {
+        channelId,
+        postParentId,
+        role
+      }
+    });
+  }, [channelId, postParentId, role]);
+  React.useEffect(() => {
+    if (channelData == null ? void 0 : channelData.viewChannelDetail) {
+      send({
+        type: Actions.SET_CHANNEL_DETAIL,
+        data: {
+          channelsDetail: channelData.viewChannelDetail
+        }
+      });
+    }
   }, [channelData]);
+  React.useEffect(() => {
+    var _a;
+    if (threadsData) {
+      send({
+        type: Actions.SET_THREADS,
+        data: {
+          threadData: ((_a = threadsData == null ? void 0 : threadsData.threadMessages) == null ? void 0 : _a.data) || []
+        }
+      });
+    }
+  }, [threadsData]);
+  React.useEffect(() => {
+    if (threadsError) {
+      send({
+        type: Actions.ERROR,
+        data: {
+          error: threadsError
+        }
+      });
+    }
+  }, [threadsError]);
   const refetchChannelDetail = React.useCallback((id) => {
     return channelRefetch({
       id: id == null ? void 0 : id.toString()
@@ -45,11 +91,5 @@ function DialogThreads({
     return () => {
     };
   }, []));
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, channelLoading ? /* @__PURE__ */ React.createElement(Spinner, { color: colors.blue[500] }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      className: "flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500  "
-    },
-    /* @__PURE__ */ React.createElement(ThreadsView, { data: threadsData, loading: threadLoading, refetch: threadsRefetch, subscribeToMore: threadsSubscribeToMore, error: threadsError, channelId, role, channelsDetail, refetchChannelDetail })
-  )));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, state.matches(BaseState.LoadingChannel) || channelLoading ? /* @__PURE__ */ React.createElement(Spinner, { color: colors.blue[500] }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: "flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500" }, /* @__PURE__ */ React.createElement(ThreadsView, { data: threadsData, loading: threadLoading || state.matches(BaseState.LoadingThreads), refetch: threadsRefetch, subscribeToMore: threadsSubscribeToMore, error: error || threadsError, channelId, role, channelsDetail, refetchChannelDetail }))));
 }export{DialogThreads,DialogThreads as default};//# sourceMappingURL=DialogThreads.js.map

package/lib/screens/inbox/DialogThreads.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogThreads.js","sources":["../../../src/screens/inbox/DialogThreads.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useViewChannelDetailQuery, useThreadMessagesQuery } from 'common/graphql';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { useSelector } from 'react-redux';\nimport { config } from './config';\nimport colors from 'tailwindcss/colors';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport function DialogThreads({ channelId, postParentId, role }) {\n    const {\n        data: channelData,\n        loading: channelLoading,\n        refetch: channelRefetch,\n    } = useViewChannelDetailQuery({\n        variables: {\n            id: channelId?.toString(),\n        },\n    });\n\n    const {\n        data: threadsData,\n        loading: threadLoading,\n        error: threadsError,\n        refetch: threadsRefetch,\n        subscribeToMore: threadsSubscribeToMore,\n    } = useThreadMessagesQuery({\n        variables: {\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        },\n        // fetchPolicy: 'cache-and-network',\n    });\n\n    const channelsDetail = React.useMemo(() => {\n        if (!channelData?.viewChannelDetail) return null;\n        return channelData?.viewChannelDetail;\n    }, [channelData]);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return channelRefetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetchChannelDetail(channelId);\n            return () => {};\n        }, []),\n    );\n\n    return (\n        // <Box bg={'white'} flex={1} pt={5}>\n        <>\n            {channelLoading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <>\n                    <Box\n                        // $dark-borderColor=\"$coolGray600\"\n                        // $dark-backgroundColor=\"$trueGray700\"\n                        // $light-backgroundColor=\"$trueGray50\"\n                        className=\"flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500  \"\n                    >\n                        <ThreadsView\n                            data={threadsData}\n                            loading={threadLoading}\n                            refetch={threadsRefetch}\n                            subscribeToMore={threadsSubscribeToMore}\n                            error={threadsError}\n                            channelId={channelId}\n                            role={role}\n                            channelsDetail={channelsDetail}\n                            refetchChannelDetail={refetchChannelDetail}\n                        />\n                    </Box>\n                </>\n            )}\n        </>\n    );\n\n    // return (\n    //     // <Box bg={'white'} flex={1} pt={5}>\n    //     <>\n    //         {channelLoading ? (\n    //             <Spinner />\n    //         ) : (\n    //             <>\n    //                 {postParentId || postParentId == 0 ? (\n    //                     <Box bg={'white'} flex={1}>\n    //                         <ThreadConversationView\n    //                             channelId={channelId}\n    //                             postParentId={postParentId}\n    //                             channelsDetail={channelsDetail}\n    //                             refetchChannelDetail={refetchChannelDetail}\n    //                         />\n    //                     </Box>\n    //                 ) : (\n    //                     <Box\n    //                         flex={1}\n    //                         _dark={{\n    //                             borderColor: 'coolGray.600',\n    //                             backgroundColor: 'gray.700',\n    //                         }}\n    //                         _light={{\n    //                             backgroundColor: 'gray.50',\n    //                         }}\n    //                     >\n    //                         <ThreadsView\n    //                             channelId={channelId}\n    //                             channelsDetail={channelsDetail}\n    //                             refetchChannelDetail={refetchChannelDetail}\n    //                         />\n    //                     </Box>\n    //                 )}\n    //             </>\n    //         )}\n    //     </>\n    // );\n}\n\nexport default DialogThreads;\n"],"names":[],"mappings":"iWASA,MAAM;AAAA,EACJ;AACF,CAAI,GAAA,MAAA;AACG,SAAS,aAAc,CAAA;AAAA,EAC5B,SAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAG,EAAA;AACD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,OAAS,EAAA,cAAA;AAAA,IACT,OAAS,EAAA;AAAA,MACP,yBAA0B,CAAA;AAAA,IAC5B,SAAW,EAAA;AAAA,MACT,IAAI,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,OAAS,EAAA,aAAA;AAAA,IACT,KAAO,EAAA,YAAA;AAAA,IACP,OAAS,EAAA,cAAA;AAAA,IACT,eAAiB,EAAA;AAAA,MACf,sBAAuB,CAAA;AAAA,IACzB,SAAW,EAAA;AAAA,MACT,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA;AAAA,MACtB,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAO,EAAA,iBAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GAED,CAAA;AACD,EAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,OAAA,CAAQ,MAAM;AACzC,IAAA,IAAI,EAAC,WAAa,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,iBAAA,CAAA;AAAmB,MAAO,OAAA,IAAA;AAC5C,IAAA,OAAO,WAAa,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,iBAAA;AAAA,GACtB,EAAG,CAAC,WAAW,CAAC,CAAA;AAChB,EAAA,MAAM,oBAAuB,GAAA,KAAA,CAAM,WAAY,CAAA,CAAC,EAAe,KAAA;AAC7D,IAAA,OAAO,cAAe,CAAA;AAAA,MACpB,IAAI,EAAI,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAA;AAAA,KACT,CAAA;AAAA,GACH,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAe,cAAA,CAAA,KAAA,CAAM,YAAY,MAAM;AAErC,IAAI,IAAA,SAAA;AAAW,MAAA,oBAAA,CAAqB,SAAS,CAAA;AAC7C,IAAA,OAAO,MAAM;AAAA,KAAC;AAAA,GAChB,EAAG,EAAE,CAAC,CAAA;AACN,EAEE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACS,iCAAkB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,MAAO,CAAA,IAAA,CAAK,GAAM,CAAA,EAAA,CAAA,mBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MAIb,SAAU,EAAA;AAAA,KAAA;AAAA,oBACO,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,IAAM,EAAA,WAAA,EAAa,SAAS,aAAe,EAAA,OAAA,EAAS,cAAgB,EAAA,eAAA,EAAiB,wBAAwB,KAAO,EAAA,YAAA,EAAc,SAAsB,EAAA,IAAA,EAAY,gBAAgC,oBAA4C,EAAA;AAAA,GAErQ,CACR,CAAA;AAyCR"}
+{"version":3,"file":"DialogThreads.js","sources":["../../../src/screens/inbox/DialogThreads.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Box, Spinner, Text } from '@admin-layout/gluestack-ui-mobile';\nimport { ThreadConversationView } from './containers/ThreadConversationView';\nimport { ThreadsView } from './containers/ThreadsView';\nimport { useViewChannelDetailQuery, useThreadMessagesQuery } from 'common/graphql';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { useSelector } from 'react-redux';\nimport { config } from './config';\nimport colors from 'tailwindcss/colors';\nimport { useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';\nimport { Actions, BaseState } from './workflow/dialog-threads-xstate';\nconst { MESSAGES_PER_PAGE } = config;\n\nexport function DialogThreads({ channelId, postParentId, role }) {\n    // Use the XState machine for state management\n    const [state, send] = useSafeDialogThreadsMachine();\n    const { context, value } = state;\n    const { channelsDetail, loading, error } = context;\n\n    // Fetch channel details\n    const {\n        data: channelData,\n        loading: channelLoading,\n        refetch: channelRefetch,\n    } = useViewChannelDetailQuery({\n        variables: {\n            id: channelId?.toString(),\n        },\n    });\n\n    // Fetch thread messages\n    const {\n        data: threadsData,\n        loading: threadLoading,\n        error: threadsError,\n        refetch: threadsRefetch,\n        subscribeToMore: threadsSubscribeToMore,\n    } = useThreadMessagesQuery({\n        variables: {\n            channelId: channelId?.toString(),\n            role: role?.toString(),\n            limit: MESSAGES_PER_PAGE,\n            repliesLimit2: 5,\n        },\n    });\n\n    // Initialize the machine with props\n    React.useEffect(() => {\n        send({\n            type: Actions.INITIALIZE,\n            data: { channelId, postParentId, role },\n        });\n    }, [channelId, postParentId, role]);\n\n    // Update channel detail in state when data changes\n    React.useEffect(() => {\n        if (channelData?.viewChannelDetail) {\n            send({\n                type: Actions.SET_CHANNEL_DETAIL,\n                data: { channelsDetail: channelData.viewChannelDetail },\n            });\n        }\n    }, [channelData]);\n\n    // Update thread data in state when data changes\n    React.useEffect(() => {\n        if (threadsData) {\n            send({\n                type: Actions.SET_THREADS,\n                data: { threadData: threadsData?.threadMessages?.data || [] },\n            });\n        }\n    }, [threadsData]);\n\n    // Handle errors\n    React.useEffect(() => {\n        if (threadsError) {\n            send({\n                type: Actions.ERROR,\n                data: { error: threadsError },\n            });\n        }\n    }, [threadsError]);\n\n    const refetchChannelDetail = React.useCallback(\n        (id: string) => {\n            return channelRefetch({ id: id?.toString() });\n        },\n        [channelId],\n    );\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            if (channelId) refetchChannelDetail(channelId);\n            return () => {};\n        }, []),\n    );\n\n    return (\n        <>\n            {state.matches(BaseState.LoadingChannel) || channelLoading ? (\n                <Spinner color={colors.blue[500]} />\n            ) : (\n                <>\n                    <Box className=\"flex-1 bg-gray-200 dark:border-gray-500 dark:bg-gray-500\">\n                        <ThreadsView\n                            data={threadsData}\n                            loading={threadLoading || state.matches(BaseState.LoadingThreads)}\n                            refetch={threadsRefetch}\n                            subscribeToMore={threadsSubscribeToMore}\n                            error={error || threadsError}\n                            channelId={channelId}\n                            role={role}\n                            channelsDetail={channelsDetail}\n                            refetchChannelDetail={refetchChannelDetail}\n                        />\n                    </Box>\n                </>\n            )}\n        </>\n    );\n}\n\nexport default DialogThreads;\n"],"names":[],"mappings":"sfAWA,MAAM;AAAA,EACJ;AACF,CAAI,GAAA,MAAA;AACG,SAAS,aAAc,CAAA;AAAA,EAC5B,SAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAG,EAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,IAAI,CAAA,GAAI,2BAA4B,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACE,GAAA,OAAA;AAGJ,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,OAAS,EAAA,cAAA;AAAA,IACT,OAAS,EAAA;AAAA,MACP,yBAA0B,CAAA;AAAA,IAC5B,SAAW,EAAA;AAAA,MACT,IAAI,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA;AAAA;AACjB,GACD,CAAA;AAGD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,OAAS,EAAA,aAAA;AAAA,IACT,KAAO,EAAA,YAAA;AAAA,IACP,OAAS,EAAA,cAAA;AAAA,IACT,eAAiB,EAAA;AAAA,MACf,sBAAuB,CAAA;AAAA,IACzB,SAAW,EAAA;AAAA,MACT,WAAW,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,QAAA,EAAA;AAAA,MACtB,MAAM,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACZ,KAAO,EAAA,iBAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACD,CAAA;AAGD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAK,IAAA,CAAA;AAAA,MACH,MAAM,OAAQ,CAAA,UAAA;AAAA,MACd,IAAM,EAAA;AAAA,QACJ,SAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AACF,KACD,CAAA;AAAA,GACA,EAAA,CAAC,SAAW,EAAA,YAAA,EAAc,IAAI,CAAC,CAAA;AAGlC,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,2CAAa,iBAAmB,EAAA;AAClC,MAAK,IAAA,CAAA;AAAA,QACH,MAAM,OAAQ,CAAA,kBAAA;AAAA,QACd,IAAM,EAAA;AAAA,UACJ,gBAAgB,WAAY,CAAA;AAAA;AAC9B,OACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,WAAW,CAAC,CAAA;AAGhB,EAAA,KAAA,CAAM,UAAU,MAAM;AAnFxB,IAAA,IAAA,EAAA;AAoFI,IAAA,IAAI,WAAa,EAAA;AACf,MAAK,IAAA,CAAA;AAAA,QACH,MAAM,OAAQ,CAAA,WAAA;AAAA,QACd,IAAM,EAAA;AAAA,UACJ,UAAY,EAAA,CAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,cAAb,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAA6B,SAAQ;AAAC;AACpD,OACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,WAAW,CAAC,CAAA;AAGhB,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAK,IAAA,CAAA;AAAA,QACH,MAAM,OAAQ,CAAA,KAAA;AAAA,QACd,IAAM,EAAA;AAAA,UACJ,KAAO,EAAA;AAAA;AACT,OACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AACjB,EAAA,MAAM,oBAAuB,GAAA,KAAA,CAAM,WAAY,CAAA,CAAC,EAAe,KAAA;AAC7D,IAAA,OAAO,cAAe,CAAA;AAAA,MACpB,IAAI,EAAI,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAA;AAAA,KACT,CAAA;AAAA,GACH,EAAG,CAAC,SAAS,CAAC,CAAA;AACd,EAAe,cAAA,CAAA,KAAA,CAAM,YAAY,MAAM;AAErC,IAAI,IAAA,SAAA;AAAW,MAAA,oBAAA,CAAqB,SAAS,CAAA;AAC7C,IAAA,OAAO,MAAM;AAAA,KAAC;AAAA,GAChB,EAAG,EAAE,CAAC,CAAA;AACN,EAAA,iEACW,KAAM,CAAA,OAAA,CAAQ,UAAU,cAAc,CAAA,IAAK,iCAAkB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,MAAO,CAAA,IAAA,CAAK,MAAM,CAAK,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCAC3F,GAAI,EAAA,EAAA,SAAA,EAAU,8EACV,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,MAAM,WAAa,EAAA,OAAA,EAAS,iBAAiB,KAAM,CAAA,OAAA,CAAQ,UAAU,cAAc,CAAA,EAAG,SAAS,cAAgB,EAAA,eAAA,EAAiB,wBAAwB,KAAO,EAAA,KAAA,IAAS,cAAc,SAAsB,EAAA,IAAA,EAAY,gBAAgC,oBAA4C,EAAA,CACrT,CACJ,CACR,CAAA;AACR"}

package/lib/screens/inbox/components/ThreadsViewItem.js

@@ -1,54 +1,76 @@
-import React__default from'react';import {VStack,HStack,Box,Avatar,AvatarFallbackText,AvatarImage,Text,Button,ButtonText}from'@admin-layout/gluestack-ui-mobile';import {isToday,isYesterday,format}from'date-fns';import {useFocusEffect}from'@react-navigation/native';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';const createdAtText = (value) => {
+import React__default,{useMemo}from'react';import {Pressable,Box,VStack,Text,HStack,Avatar,AvatarFallbackText,AvatarImage,Link,LinkText,Button,ButtonText}from'@admin-layout/gluestack-ui-mobile';import {isToday,format}from'date-fns';import {startCase}from'lodash-es';import colors from'tailwindcss/colors';import {useSelector}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';const timeFormat = (value) => {
   if (!value)
     return "";
   let date = new Date(value);
   if (isToday(date))
-    return "Today";
-  if (isYesterday(date))
-    return "Yesterday";
-  return format(new Date(value), "MMM dd, yyyy");
+    return format(date, "h:mm a").toUpperCase();
+  return format(date, "MMM do").toUpperCase();
 };
-const ThreadViewItemComponent = function DialogsListItem({
-  currentUser,
-  thread,
-  onOpen,
-  role,
-  setData
+const ThreadViewItemComponent = function ThreadViewItem2({
+  id,
+  post,
+  channel,
+  replies,
+  onPress,
+  channelId,
+  channelsDetail
 }) {
-  var _a, _b;
-  useFocusEffect(React__default.useCallback(() => {
-    return () => {
-    };
-  }, []));
-  const threadPostReply = React__default.useMemo(() => {
-    if (!(thread == null ? void 0 : thread.replies))
-      return null;
-    return thread == null ? void 0 : thread.replies;
-  }, [thread]);
-  if (!threadPostReply || (threadPostReply == null ? void 0 : threadPostReply.length) == 0) {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  var _a, _b, _c, _d;
+  const currentUser = useSelector(userSelector);
+  const threadReplies = useMemo(() => {
+    return replies || [];
+  }, [replies]);
+  if (!threadReplies || threadReplies.length === 0) {
+    return null;
   }
-  return /* @__PURE__ */ React__default.createElement(VStack, { space: "sm", className: "flex-1 py-2 px-2 border rounded-md bg-white border-gray-200 dark:border-white dark:bg-white" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "py-2 w-[100%] flex-1 justify-between items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "flex-1 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1" }, (threadPostReply == null ? void 0 : threadPostReply.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (_b = (_a = threadPostReply == null ? void 0 : threadPostReply.slice(0, 2)) == null ? void 0 : _a.reverse()) == null ? void 0 : _b.map((reply, index) => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
-    return /* @__PURE__ */ React__default.createElement(HStack, { key: index, space: "sm", className: "pb-2 pt-1" }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Avatar, { key: "thread-view-key-" + index, size: "md", className: "bg-transparent top-0 right-0 z-[1]" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, " ", startCase((_b2 = (_a2 = reply == null ? void 0 : reply.author) == null ? void 0 : _a2.username) == null ? void 0 : _b2.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: "#fff"
+  const lastReply = threadReplies[0];
+  const totalReplies = threadReplies.length;
+  const primaryUser = ((_a = channel == null ? void 0 : channel.users) == null ? void 0 : _a[0]) || (lastReply == null ? void 0 : lastReply.author);
+  (channel == null ? void 0 : channel.title) || `${(primaryUser == null ? void 0 : primaryUser.givenName) || ""} ${(primaryUser == null ? void 0 : primaryUser.familyName) || ""}`;
+  (_b = channel == null ? void 0 : channel.users) == null ? void 0 : _b.some((user) => user.id === (currentUser == null ? void 0 : currentUser.id));
+  return /* @__PURE__ */ React__default.createElement(Pressable, { onPress: () => onPress(channel == null ? void 0 : channel.id, "Thread", post == null ? void 0 : post.id), style: {
+    marginVertical: 5,
+    backgroundColor: "white",
+    borderRadius: 10,
+    paddingVertical: 5,
+    elevation: 1,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2
+  } }, /* @__PURE__ */ React__default.createElement(Box, { className: "mb-3" }, /* @__PURE__ */ React__default.createElement(VStack, { space: "md" }, /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm font-medium text-gray-600 px-4 pt-2" }, (_d = (_c = channel == null ? void 0 : channel.users) == null ? void 0 : _c.map((user) => (user == null ? void 0 : user.givenName) || (user == null ? void 0 : user.username))) == null ? void 0 : _d.join(", ")), threadReplies.slice(0, 3).map((reply, index) => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const previousReply = index > 0 ? threadReplies.slice(0, 3)[index - 1] : null;
+    const isConsecutiveReply = previousReply && ((_a2 = previousReply.author) == null ? void 0 : _a2.id) === ((_b2 = reply.author) == null ? void 0 : _b2.id);
+    return /* @__PURE__ */ React__default.createElement(HStack, { key: reply.id || index, space: "md", className: "px-4 py-1" }, !isConsecutiveReply ? /* @__PURE__ */ React__default.createElement(Avatar, { size: "md", style: {
+      width: 40,
+      height: 40,
+      backgroundColor: ((_c2 = reply == null ? void 0 : reply.author) == null ? void 0 : _c2.id) === (currentUser == null ? void 0 : currentUser.id) ? "#2EB67D" : "#E8A54A"
+    } }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase(((_e = (_d2 = reply == null ? void 0 : reply.author) == null ? void 0 : _d2.username) == null ? void 0 : _e.charAt(0)) || "U")), ((_f = reply == null ? void 0 : reply.author) == null ? void 0 : _f.picture) && /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: ((_g = reply == null ? void 0 : reply.author) == null ? void 0 : _g.username) || "User", source: {
+      uri: (_h = reply == null ? void 0 : reply.author) == null ? void 0 : _h.picture
+    } })) : /* @__PURE__ */ React__default.createElement(Box, { style: {
+      width: 40
+    } }), /* @__PURE__ */ React__default.createElement(VStack, { space: "xs", className: "flex-1" }, !isConsecutiveReply && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold text-gray-900" }, ((_i = reply == null ? void 0 : reply.author) == null ? void 0 : _i.givenName) || ((_j = reply == null ? void 0 : reply.author) == null ? void 0 : _j.username) || "User"), /* @__PURE__ */ React__default.createElement(Text, { className: "text-xs text-gray-500" }, timeFormat(reply == null ? void 0 : reply.createdAt))), (reply == null ? void 0 : reply.message) && /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[700], numberOfLines: 2, className: "text-base" }, reply == null ? void 0 : reply.message, (reply == null ? void 0 : reply.edited) && /* @__PURE__ */ React__default.createElement(Text, { className: "text-xs text-gray-500" }, " (edited)")), reply.email && /* @__PURE__ */ React__default.createElement(Text, { className: "text-blue-500" }, reply.email), ((_l = (_k = reply == null ? void 0 : reply.files) == null ? void 0 : _k.data) == null ? void 0 : _l.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "my-1" }, (_n = (_m = reply == null ? void 0 : reply.files) == null ? void 0 : _m.data) == null ? void 0 : _n.map((file, fileIndex) => /* @__PURE__ */ React__default.createElement(Box, { key: fileIndex, className: "overflow-hidden", style: {
+      width: 80,
+      height: 80
+    } }, /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "attachment", className: "rounded-none border-none", style: {
+      width: "100%",
+      height: "100%"
     }, source: {
-      uri: (_c = reply == null ? void 0 : reply.author) == null ? void 0 : _c.picture
-    } }))), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(HStack, { space: "md" }, /* @__PURE__ */ React__default.createElement(Text, null, (_f = (_e = (_d = reply == null ? void 0 : reply.author) == null ? void 0 : _d.givenName) != null ? _e : "") != null ? _f : "", " ", (_i = (_h = (_g = reply == null ? void 0 : reply.author) == null ? void 0 : _g.familyName) != null ? _h : "") != null ? _i : ""), /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[500] }, (reply == null ? void 0 : reply.createdAt) ? createdAtText(reply == null ? void 0 : reply.createdAt) : "")), /* @__PURE__ */ React__default.createElement(VStack, { space: "sm" }, (reply == null ? void 0 : reply.message) && /* @__PURE__ */ React__default.createElement(Text, { color: colors.gray[600], numberOfLines: 2 }, (reply == null ? void 0 : reply.message.length) < 70 ? `${reply == null ? void 0 : reply.message}` : `${reply == null ? void 0 : reply.message.substring(0, 68)}....`), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_k = (_j = reply == null ? void 0 : reply.files) == null ? void 0 : _j.data) == null ? void 0 : _k.length) > 0 && ((_m = (_l = reply == null ? void 0 : reply.files) == null ? void 0 : _l.data) == null ? void 0 : _m.map((f, index2) => /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Avatar, { key: "thread-view-other-key-" + index2, className: "bg-transparent", size: "md" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, " I"), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: "#fff"
-    }, source: {
-      uri: f == null ? void 0 : f.url
-    } }))))))), ((threadPostReply == null ? void 0 : threadPostReply.length) == 1 || index !== 0) && /* @__PURE__ */ React__default.createElement(Button, { size: "xs", className: "w-[150]", variant: "outline", onPress: () => {
-      var _a3, _b3, _c2;
-      return onOpen((_a3 = thread == null ? void 0 : thread.channel) == null ? void 0 : _a3.id, (_b3 = thread == null ? void 0 : thread.channel) == null ? void 0 : _b3.title, (_c2 = thread == null ? void 0 : thread.post) == null ? void 0 : _c2.id);
-    } }, /* @__PURE__ */ React__default.createElement(ButtonText, { style: {
-      fontSize: 12,
-      color: "#000"
-    } }, "Reply"))));
-  })))))));
+      uri: file == null ? void 0 : file.url
+    } }))))));
+  }), totalReplies > 3 && /* @__PURE__ */ React__default.createElement(HStack, { className: "px-4 items-center", space: "sm" }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+    width: 40
+  } }), /* @__PURE__ */ React__default.createElement(Link, { onPress: () => onPress(channel == null ? void 0 : channel.id, "Thread", post == null ? void 0 : post.id) }, /* @__PURE__ */ React__default.createElement(LinkText, { className: "text-blue-600 mt-1" }, totalReplies - 3, " more ", totalReplies - 3 === 1 ? "reply" : "replies"))), /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 pb-2" }, /* @__PURE__ */ React__default.createElement(Button, { size: "sm", className: "self-start rounded-full", variant: "outline", style: {
+    borderColor: "#E2E8F0",
+    paddingHorizontal: 16,
+    paddingVertical: 6
+  }, onPress: () => onPress(channel == null ? void 0 : channel.id, "Thread", post == null ? void 0 : post.id) }, /* @__PURE__ */ React__default.createElement(ButtonText, { style: {
+    fontSize: 14,
+    color: colors.gray[800]
+  } }, "Reply"))))));
 };
 const ThreadViewItem = React__default.memo(ThreadViewItemComponent);export{ThreadViewItem,ThreadViewItemComponent};//# sourceMappingURL=ThreadsViewItem.js.map

package/lib/screens/inbox/components/ThreadsViewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadsViewItem.js","sources":["../../../../src/screens/inbox/components/ThreadsViewItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n    VStack,\n    Text,\n    Image,\n    Pressable,\n    HStack,\n    Box,\n    AvatarGroup,\n    Avatar,\n    AvatarFallbackText,\n    AvatarImage,\n    AvatarBadge,\n    View,\n    Button,\n    ButtonText,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { format, isToday, isYesterday } from 'date-fns';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { IChannel, IUserAccount } from 'common';\nimport {\n    useThreadMessagesQuery,\n    useMessagesQuery,\n    useUserAccountQuery,\n    useOnThreadChatMessageAddedSubscription,\n    useOnThreadCreatedUpdatedSubscription,\n} from 'common/graphql';\nimport { startCase } from 'lodash-es';\nimport colors from 'tailwindcss/colors';\n\nconst createdAtText = (value: string) => {\n    if (!value) return '';\n    let date = new Date(value);\n    if (isToday(date)) return 'Today';\n    if (isYesterday(date)) return 'Yesterday';\n    return format(new Date(value), 'MMM dd, yyyy');\n};\n\nexport interface IDialogListChannel extends IChannel {\n    users: IUserAccount[];\n}\n\nexport interface IDialogListItemProps {\n    currentUser?: any;\n    users?: any;\n    thread?: any;\n    onOpen: (id: any, title: any, postParentId?: any) => void;\n    role?: any;\n    setData?: any;\n}\n\n/**\n * TODO:\n * - Get Reservation info: reservation date, status\n * - Add ability to get property information: name, logo\n */\nexport const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({\n    currentUser,\n    // users,\n    thread,\n    onOpen,\n    role,\n    setData,\n}) {\n    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({\n    //     variables: {\n    //         channelId: thread?.channel?.id?.toString(),\n    //         postParentId: thread?.post?.id?.toString(),\n    //     },\n    // });\n\n    useFocusEffect(\n        React.useCallback(() => {\n            // Do something when the screen is focused\n            return () => {\n                // Do something when the screen is unfocused\n                // Useful for cleanup functions\n            };\n        }, []),\n    );\n\n    const threadPostReply = React.useMemo(() => {\n        if (!thread?.replies) return null;\n        return thread?.replies;\n    }, [thread]);\n\n    // React.useEffect(() => {\n    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);\n    // }, [threadCreatedUpdated?.threadCreatedUpdated]);\n\n    // const threadPostReply = React.useMemo(() => {\n    //     if (!thread?.replies) return null;\n    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {\n    //         return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;\n    //     } else return thread?.replies;\n    // }, [thread, threadCreatedUpdated]);\n\n    // const lastMessage = useMemo(() => {\n    //     if (!threadPost) {\n    //         return null;\n    //     }\n    //     const replies = threadPost?.replies?.filter((p: any) => p?.message !== '') ?? [];\n    //     if (replies?.length) {\n    //         return replies[0];\n    //         // return replies[replies.length - 1];\n    //     } else {\n    //         const post = threadPost?.post ?? null;\n    //         return post ? post?.post : null;\n    //     }\n    // }, [threadPost]);\n\n    // const participants: any = React.useMemo(() => {\n    //     if (!thread?.participants?.length) return null;\n    //     return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];\n    // }, [thread]);\n\n    // const allParticipantsNames: any = React.useMemo(() => {\n    //     if (!participants?.length) return null;\n    //     return (\n    //         participants\n    //             ?.map((p: any) => {\n    //                 return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';\n    //             })\n    //             ?.join(', ') ?? ''\n    //     );\n    // }, [participants]);\n\n    if (!threadPostReply || threadPostReply?.length == 0) {\n        return <></>;\n    }\n\n    return (\n        <VStack\n            space={'sm'}\n            className=\"flex-1 py-2 px-2 border rounded-md bg-white border-gray-200 dark:border-white dark:bg-white\"\n        >\n            <HStack space={'sm'} className=\"py-2 w-[100%] flex-1 justify-between items-center\">\n                <Box className=\"flex-1\">\n                    {/* <HStack flex={1} space={5} py={2} alignItems={'baseline'}>\n                        <Box>\n                            <Avatar.Badge size={4} left={0} zIndex={1} bg=\"green.800\" />\n                        </Box>\n                        <Box>\n                            <Text color=\"gray.600\" fontSize=\"lg\" flexWrap={'wrap'} fontWeight=\"semibold\">\n                                {allParticipantsNames || ''}\n                            </Text>\n                        </Box>\n                    </HStack> */}\n                    <HStack space={'sm'} className=\"flex-1 justify-center items-center\">\n                        <Box className=\"flex-1\">\n                            {/* <HStack space={2} py={2}>\n                                <Box>\n                                    <Avatar\n                                        bg={'transparent'}\n                                        size={8}\n                                        _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}\n                                        source={{\n                                            uri: thread?.post?.author?.picture,\n                                        }}\n                                    >\n                                        {startCase(thread?.post?.author?.username?.charAt(0))}\n                                    </Avatar>\n                                </Box>\n                                <Box>\n                                    <HStack space={4}>\n                                        <Text>\n                                            {thread?.post?.author?.givenName + ' ' + thread?.post?.author?.familyName ??\n                                                ''}\n                                        </Text>\n                                        <Text color=\"gray.500\">\n                                            {thread?.post ? createdAtText(thread?.post?.createdAt) : ''}\n                                        </Text>\n                                    </HStack>\n                                    <Text color=\"gray.600\" noOfLines={2}>\n                                        {thread?.post?.message ?? ''}\n                                    </Text>\n                                    {!thread?.replies?.length && (\n                                        <Button\n                                            size={'xs'}\n                                            w={150}\n                                            variant={'outline'}\n                                            _text={{ fontSize: 12, color: '#000' }}\n                                            onPress={() =>\n                                                onOpen(thread?.channel?.id, thread?.channel?.title, thread?.post?.id)\n                                            }\n                                        >\n                                            Reply\n                                        </Button>\n                                    )}\n                                </Box>\n                            </HStack> */}\n                            {threadPostReply?.length > 0 && (\n                                <>\n                                    {threadPostReply\n                                        ?.slice(0, 2)\n                                        ?.reverse()\n                                        ?.map((reply: any, index: any) => (\n                                            <HStack key={index} space={'sm'} className=\"pb-2 pt-1\">\n                                                <Box>\n                                                    <Avatar\n                                                        key={'thread-view-key-' + index}\n                                                        size={'md'}\n                                                        className=\"bg-transparent top-0 right-0 z-[1]\"\n                                                    >\n                                                        <AvatarFallbackText>\n                                                            {' '}\n                                                            {startCase(reply?.author?.username?.charAt(0))}\n                                                        </AvatarFallbackText>\n                                                        <AvatarImage\n                                                            alt=\"image\"\n                                                            style={{\n                                                                borderRadius: 6,\n                                                                borderWidth: 2,\n                                                                borderColor: '#fff',\n                                                            }}\n                                                            source={{\n                                                                uri: reply?.author?.picture,\n                                                            }}\n                                                        />\n                                                    </Avatar>\n                                                </Box>\n                                                <Box>\n                                                    <HStack space={'md'}>\n                                                        <Text>\n                                                            {reply?.author?.givenName ?? '' ?? ''}{' '}\n                                                            {reply?.author?.familyName ?? '' ?? ''}\n                                                            {/* {lastMessage?.author?.givenName +\n                                                    ' ' +\n                                                    lastMessage?.author?.familyName ?? ''} */}\n                                                        </Text>\n                                                        <Text color={colors.gray[500]}>\n                                                            {reply?.createdAt ? createdAtText(reply?.createdAt) : ''}\n                                                            {/* {lastMessage ? createdAtText(lastMessage?.createdAt) : ''} */}\n                                                        </Text>\n                                                    </HStack>\n                                                    <VStack space={'sm'}>\n                                                        {reply?.message && (\n                                                            <Text color={colors.gray[600]} numberOfLines={2}>\n                                                                {reply?.message.length < 70\n                                                                    ? `${reply?.message}`\n                                                                    : `${reply?.message.substring(0, 68)}....`}\n                                                            </Text>\n                                                        )}\n                                                        {/* <Text color=\"gray.600\" noOfLines={2}>\n                                                            {reply?.message\n                                                                ? reply?.message.length < 70\n                                                                    ? `${reply?.message}`\n                                                                    : `${reply?.message.substring(0, 68)}....`\n                                                                : ''}\n                                                        </Text> */}\n\n                                                        <>\n                                                            {reply?.files?.data?.length > 0 &&\n                                                                reply?.files?.data?.map((f: any, index: any) => (\n                                                                    <Box>\n                                                                        <Avatar\n                                                                            key={'thread-view-other-key-' + index}\n                                                                            className=\"bg-transparent\"\n                                                                            size={'md'}\n                                                                        >\n                                                                            <AvatarFallbackText> I</AvatarFallbackText>\n                                                                            <AvatarImage\n                                                                                alt=\"image\"\n                                                                                style={{\n                                                                                    borderRadius: 6,\n                                                                                    borderWidth: 2,\n                                                                                    borderColor: '#fff',\n                                                                                }}\n                                                                                source={{\n                                                                                    uri: f?.url,\n                                                                                }}\n                                                                            />\n                                                                        </Avatar>\n                                                                    </Box>\n                                                                ))}\n                                                        </>\n                                                    </VStack>\n\n                                                    {(threadPostReply?.length == 1 || index !== 0) && (\n                                                        <Button\n                                                            size={'xs'}\n                                                            className=\"w-[150]\"\n                                                            variant={'outline'}\n                                                            onPress={() =>\n                                                                onOpen(\n                                                                    thread?.channel?.id,\n                                                                    thread?.channel?.title,\n                                                                    thread?.post?.id,\n                                                                )\n                                                            }\n                                                        >\n                                                            <ButtonText style={{ fontSize: 12, color: '#000' }}>\n                                                                Reply\n                                                            </ButtonText>\n                                                        </Button>\n                                                    )}\n                                                </Box>\n                                            </HStack>\n                                        ))}\n                                </>\n                            )}\n                        </Box>\n                    </HStack>\n                </Box>\n            </HStack>\n            {/* <HStack>\n                <Box flex={0.06} alignItems={'flex-start'}></Box>\n                <Button\n                    size={'xs'}\n                    variant={'outline'}\n                    _text={{ fontSize: 12, color: '#000' }}\n                    onPress={() => onOpen(thread?.channel?.id, thread?.channel?.title, postParentId)}\n                >\n                    Reply\n                </Button>\n            </HStack> */}\n        </VStack>\n    );\n};\n\nexport const ThreadViewItem = React.memo(ThreadViewItemComponent);\n"],"names":["React","_a","_b","index","_c"],"mappings":"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"}
+{"version":3,"file":"ThreadsViewItem.js","sources":["../../../../src/screens/inbox/components/ThreadsViewItem.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n    VStack,\n    Text,\n    Pressable,\n    HStack,\n    Box,\n    Avatar,\n    AvatarFallbackText,\n    AvatarImage,\n    Button,\n    ButtonText,\n    Icon,\n    Badge,\n    BadgeText,\n    Link,\n    LinkText,\n} from '@admin-layout/gluestack-ui-mobile';\nimport { format, isToday, isYesterday } from 'date-fns';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { IChannel, IUserAccount } from 'common';\nimport { startCase } from 'lodash-es';\nimport colors from 'tailwindcss/colors';\nimport { useSelector } from 'react-redux';\nimport { userSelector } from '@adminide-stack/user-auth0-client';\n\nconst timeFormat = (value: string) => {\n    if (!value) return '';\n    let date = new Date(value);\n    if (isToday(date)) return format(date, 'h:mm a').toUpperCase();\n    return format(date, 'MMM do').toUpperCase();\n};\n\nexport interface IDialogListChannel extends IChannel {\n    users: IUserAccount[];\n}\n\nexport interface ThreadViewItemProps {\n    id: string;\n    post: any;\n    channel: any;\n    replies: any[];\n    onPress: (id: any, title: any, postParentId?: any) => void;\n    channelId?: string;\n    channelsDetail?: any;\n}\n\n/**\n * TODO:\n * - Get Reservation info: reservation date, status\n * - Add ability to get property information: name, logo\n */\nexport const ThreadViewItemComponent: React.FC<ThreadViewItemProps> = function ThreadViewItem({\n    id,\n    post,\n    channel,\n    replies,\n    onPress,\n    channelId,\n    channelsDetail,\n}) {\n    const currentUser = useSelector(userSelector);\n\n    // Prepare thread replies for display\n    const threadReplies = useMemo(() => {\n        return replies || [];\n    }, [replies]);\n\n    if (!threadReplies || threadReplies.length === 0) {\n        return null;\n    }\n\n    // Get the last reply for the thread preview\n    const lastReply = threadReplies[0]; // Most recent reply should be first in the array\n    // Get total number of replies\n    const totalReplies = threadReplies.length;\n\n    // Get the first user in the thread as the primary user\n    const primaryUser = channel?.users?.[0] || lastReply?.author;\n    const channelName = channel?.title || `${primaryUser?.givenName || ''} ${primaryUser?.familyName || ''}`;\n\n    // Determine if the current user is in the thread\n    const userIsInThread = channel?.users?.some((user: any) => user.id === currentUser?.id);\n\n    return (\n        <Pressable\n            onPress={() => onPress(channel?.id, 'Thread', post?.id)}\n            style={{\n                marginVertical: 5,\n                backgroundColor: 'white',\n                borderRadius: 10,\n                paddingVertical: 5,\n                elevation: 1,\n                shadowColor: '#000',\n                shadowOffset: { width: 0, height: 1 },\n                shadowOpacity: 0.1,\n                shadowRadius: 2,\n            }}\n        >\n            <Box className=\"mb-3\">\n                <VStack space=\"md\">\n                    {/* Thread header with green dot and users */}\n                    {/* <HStack space=\"sm\" className=\"px-4 items-center\">\n                        <Box \n                            className=\"bg-green-500 rounded-full\" \n                            style={{ width: 8, height: 8 }}\n                        />\n                        <Text className=\"text-base text-gray-900\">{channelName}</Text>\n                    </HStack> */}\n\n                    {/* Thread members */}\n                    <Text className=\"text-sm font-medium text-gray-600 px-4 pt-2\">\n                        {channel?.users?.map((user: any) => user?.givenName || user?.username)?.join(', ')}\n                    </Text>\n\n                    {/* Thread messages preview - show up to 3 most recent messages */}\n                    {threadReplies.slice(0, 3).map((reply: any, index: number) => {\n                        // Group consecutive messages from the same user\n                        const previousReply = index > 0 ? threadReplies.slice(0, 3)[index - 1] : null;\n                        const isConsecutiveReply = previousReply && previousReply.author?.id === reply.author?.id;\n\n                        return (\n                            <HStack key={reply.id || index} space=\"md\" className=\"px-4 py-1\">\n                                {!isConsecutiveReply ? (\n                                    <Avatar\n                                        size=\"md\"\n                                        style={{\n                                            width: 40,\n                                            height: 40,\n                                            backgroundColor:\n                                                reply?.author?.id === currentUser?.id ? '#2EB67D' : '#E8A54A',\n                                        }}\n                                    >\n                                        <AvatarFallbackText>\n                                            {startCase(reply?.author?.username?.charAt(0) || 'U')}\n                                        </AvatarFallbackText>\n                                        {reply?.author?.picture && (\n                                            <AvatarImage\n                                                alt={reply?.author?.username || 'User'}\n                                                source={{\n                                                    uri: reply?.author?.picture,\n                                                }}\n                                            />\n                                        )}\n                                    </Avatar>\n                                ) : (\n                                    <Box style={{ width: 40 }} />\n                                )}\n\n                                <VStack space=\"xs\" className=\"flex-1\">\n                                    {!isConsecutiveReply && (\n                                        <HStack space=\"sm\" className=\"items-center\">\n                                            <Text className=\"font-bold text-gray-900\">\n                                                {reply?.author?.givenName || reply?.author?.username || 'User'}\n                                            </Text>\n                                            <Text className=\"text-xs text-gray-500\">\n                                                {timeFormat(reply?.createdAt)}\n                                            </Text>\n                                        </HStack>\n                                    )}\n\n                                    {reply?.message && (\n                                        <Text color={colors.gray[700]} numberOfLines={2} className=\"text-base\">\n                                            {reply?.message}\n                                            {reply?.edited && <Text className=\"text-xs text-gray-500\"> (edited)</Text>}\n                                        </Text>\n                                    )}\n\n                                    {reply.email && <Text className=\"text-blue-500\">{reply.email}</Text>}\n\n                                    {reply?.files?.data?.length > 0 && (\n                                        <HStack space=\"sm\" className=\"my-1\">\n                                            {reply?.files?.data?.map((file: any, fileIndex: number) => (\n                                                <Box\n                                                    key={fileIndex}\n                                                    className=\"overflow-hidden\"\n                                                    style={{ width: 80, height: 80 }}\n                                                >\n                                                    <AvatarImage\n                                                        alt=\"attachment\"\n                                                        className=\"rounded-none border-none\"\n                                                        style={{\n                                                            width: '100%',\n                                                            height: '100%',\n                                                        }}\n                                                        source={{\n                                                            uri: file?.url,\n                                                        }}\n                                                    />\n                                                </Box>\n                                            ))}\n                                        </HStack>\n                                    )}\n                                </VStack>\n                            </HStack>\n                        );\n                    })}\n\n                    {/* Show more replies indicator */}\n                    {totalReplies > 3 && (\n                        <HStack className=\"px-4 items-center\" space=\"sm\">\n                            <Box style={{ width: 40 }} />\n                            <Link onPress={() => onPress(channel?.id, 'Thread', post?.id)}>\n                                <LinkText className=\"text-blue-600 mt-1\">\n                                    {totalReplies - 3} more {totalReplies - 3 === 1 ? 'reply' : 'replies'}\n                                </LinkText>\n                            </Link>\n                        </HStack>\n                    )}\n\n                    {/* Reply button */}\n                    <Box className=\"px-4 pb-2\">\n                        <Button\n                            size=\"sm\"\n                            className=\"self-start rounded-full\"\n                            variant=\"outline\"\n                            style={{\n                                borderColor: '#E2E8F0',\n                                paddingHorizontal: 16,\n                                paddingVertical: 6,\n                            }}\n                            onPress={() => onPress(channel?.id, 'Thread', post?.id)}\n                        >\n                            <ButtonText style={{ fontSize: 14, color: colors.gray[800] }}>Reply</ButtonText>\n                        </Button>\n                    </Box>\n                </VStack>\n            </Box>\n        </Pressable>\n    );\n};\n\nexport const ThreadViewItem = React.memo(ThreadViewItemComponent);\n"],"names":["ThreadViewItem","React","_a","_b","_c","_d"],"mappings":"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"}

package/lib/screens/inbox/containers/ConversationView.js

@@ -236,7 +236,7 @@ const ConversationViewComponent = (_a) => {
     "role",
     "isShowThreadMessage"
   ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const [channelToTop, setChannelToTop] = useState(0);
   const isMountedRef = useRef(true);
   const [state, send] = useSafeMachine();
@@ -895,20 +895,12 @@ const ConversationViewComponent = (_a) => {
     };
   }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
   const messageList = useMemo(() => {
-    var _a3, _b3, _c2, _d2, _e2, _f2;
+    var _a3;
     console.log("\u{1F504} CALCULATING MESSAGE LIST - Optimized version");
     if (!((_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.channelMessages) || state.context.channelMessages.length === 0) {
       console.log("No messages to process");
       return [];
     }
-    if (state.context.channelMessages[0]) {
-      const sampleMsg = state.context.channelMessages[0];
-      console.log("\u{1F4F7} Sample message files:", JSON.stringify({
-        hasFiles: !!sampleMsg.files,
-        fileCount: ((_c2 = (_b3 = sampleMsg.files) == null ? void 0 : _b3.data) == null ? void 0 : _c2.length) || 0,
-        fileUrl: ((_f2 = (_e2 = (_d2 = sampleMsg.files) == null ? void 0 : _d2.data) == null ? void 0 : _e2[0]) == null ? void 0 : _f2.url) || "none"
-      }));
-    }
     const filteredMessages = uniqBy(state.context.channelMessages, ({
       id
     }) => id);
@@ -916,14 +908,13 @@ const ConversationViewComponent = (_a) => {
       return [];
     }
     return orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
-      var _a4, _b4, _c3, _d3, _e3, _f3;
+      var _a4, _b3, _c2, _d2, _e2, _f2;
       const date = new Date(msg.createdAt);
       let imageUrl = null;
       if (((_a4 = msg.files) == null ? void 0 : _a4.data) && msg.files.data.length > 0) {
         const fileData = msg.files.data[0];
         if (fileData && fileData.url) {
           imageUrl = fileData.url;
-          console.log("\u{1F4F7} Found image URL for message", msg.id, ":", imageUrl);
         }
       }
       return {
@@ -931,22 +922,22 @@ const ConversationViewComponent = (_a) => {
         text: msg.message,
         createdAt: date,
         user: {
-          _id: ((_b4 = msg.author) == null ? void 0 : _b4.id) || "",
-          name: `${((_c3 = msg.author) == null ? void 0 : _c3.givenName) || ""} ${((_d3 = msg.author) == null ? void 0 : _d3.familyName) || ""}`,
-          avatar: ((_e3 = msg.author) == null ? void 0 : _e3.picture) || ""
+          _id: ((_b3 = msg.author) == null ? void 0 : _b3.id) || "",
+          name: `${((_c2 = msg.author) == null ? void 0 : _c2.givenName) || ""} ${((_d2 = msg.author) == null ? void 0 : _d2.familyName) || ""}`,
+          avatar: ((_e2 = msg.author) == null ? void 0 : _e2.picture) || ""
         },
         image: imageUrl,
         sent: msg == null ? void 0 : msg.isDelivered,
         received: msg == null ? void 0 : msg.isRead,
         type: msg == null ? void 0 : msg.type,
         propsConfiguration: msg == null ? void 0 : msg.propsConfiguration,
-        replies: (_f3 = msg == null ? void 0 : msg.replies) != null ? _f3 : [],
+        replies: (_f2 = msg == null ? void 0 : msg.replies) != null ? _f2 : [],
         isShowThreadMessage
       };
     });
-  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, isShowThreadMessage]);
+  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, isShowThreadMessage]);
   const renderMessageText = useCallback((props) => {
-    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
+    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
     const {
       currentMessage
     } = props;
@@ -966,7 +957,7 @@ const ConversationViewComponent = (_a) => {
           param = ((_m2 = route == null ? void 0 : route.guest) == null ? void 0 : _m2.params) ? (_o2 = (_n2 = route == null ? void 0 : route.guest) == null ? void 0 : _n2.params) != null ? _o2 : null : null;
         } else if (role && role == PreDefinedRole.Owner) {
           path = ((_p2 = route == null ? void 0 : route.host) == null ? void 0 : _p2.name) ? (_r2 = (_q2 = route == null ? void 0 : route.host) == null ? void 0 : _q2.name) != null ? _r2 : null : null;
-          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t2 = route == null ? void 0 : route.host) == null ? void 0 : _t2.params) != null ? _u : null : null;
+          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t = route == null ? void 0 : route.host) == null ? void 0 : _t.params) != null ? _u : null : null;
         } else {
           path = ((_v = route == null ? void 0 : route.host) == null ? void 0 : _v.name) ? (_x = (_w = route == null ? void 0 : route.host) == null ? void 0 : _w.name) != null ? _x : null : null;
           param = ((_y = route == null ? void 0 : route.host) == null ? void 0 : _y.params) ? (_A = (_z = route == null ? void 0 : route.host) == null ? void 0 : _z.params) != null ? _A : null : null;
@@ -1052,7 +1043,7 @@ const ConversationViewComponent = (_a) => {
         fontSize: 12
       }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
-  }, [navigation, (_k = state == null ? void 0 : state.context) == null ? void 0 : _k.channelId, role]);
+  }, [navigation, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, role]);
   const renderActions = (props) => {
     return /* @__PURE__ */ React__default.createElement(
       Actions$1,
@@ -1133,7 +1124,7 @@ const ConversationViewComponent = (_a) => {
       color: "white",
       fontWeight: "bold"
     } }, "X"))));
-  }, [(_l = state == null ? void 0 : state.context) == null ? void 0 : _l.selectedImage, safeSend]);
+  }, [(_k = state == null ? void 0 : state.context) == null ? void 0 : _k.selectedImage, safeSend]);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
@@ -1302,7 +1293,7 @@ const ConversationViewComponent = (_a) => {
             return prev;
           }
           lastProcessedMessageRef.current = newMessage.id;
-          setTimeout(() => {
+          queueMicrotask(() => {
             var _a6;
             safeSend({
               type: Actions.SET_CHANNEL_MESSAGES,
@@ -1313,7 +1304,7 @@ const ConversationViewComponent = (_a) => {
                 totalCount: (((_a6 = prev == null ? void 0 : prev.messages) == null ? void 0 : _a6.totalCount) || 0) + 1
               }
             });
-          }, 0);
+          });
           return __spreadProps(__spreadValues({}, prev), {
             messages: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.messages), {
               data: [...currentMessages, newMessage],
@@ -1323,7 +1314,7 @@ const ConversationViewComponent = (_a) => {
         }
       });
     } }));
-  }, [isShowImageViewer, modalContent, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelId, (_n = state == null ? void 0 : state.context) == null ? void 0 : _n.channelMessages, subscribeToMore, safeSend]);
+  }, [isShowImageViewer, modalContent, (_l = state == null ? void 0 : state.context) == null ? void 0 : _l.channelId, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelMessages, subscribeToMore, safeSend]);
   const lastProcessedMessageRef = useRef(null);
   const listViewProps = useMemo(() => ({
     onEndReached,
@@ -1331,8 +1322,10 @@ const ConversationViewComponent = (_a) => {
     onMomentumScrollBegin,
     removeClippedSubviews: true,
     initialNumToRender: 10,
-    maxToRenderPerBatch: 10,
-    windowSize: 10
+    maxToRenderPerBatch: 7,
+    windowSize: 7,
+    updateCellsBatchingPeriod: 50,
+    keyExtractor: (item) => item._id
   }), [onEndReached, onMomentumScrollBegin]);
   const renderLoadEarlier = useCallback(() => {
     var _a3;
@@ -1342,7 +1335,7 @@ const ConversationViewComponent = (_a) => {
       borderRadius: 10,
       marginTop: 10
     } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: "#3b82f6" })) : null;
-  }, [(_o = state == null ? void 0 : state.context) == null ? void 0 : _o.loadingOldMessages]);
+  }, [(_n = state == null ? void 0 : state.context) == null ? void 0 : _n.loadingOldMessages]);
   const renderInputToolbar = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
       backgroundColor: "white",
@@ -1381,7 +1374,7 @@ const ConversationViewComponent = (_a) => {
           messageText: text
         }
       }),
-      renderFooter: () => safeContextProperty("loading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : "",
+      renderFooter: () => safeContextProperty("loading") || safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
@@ -1393,12 +1386,12 @@ const ConversationViewComponent = (_a) => {
       renderInputToolbar,
       minInputToolbarHeight: 50,
       renderActions: safeContextProperty("channelId") && renderActions,
-      renderAccessory: !!((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.selectedImage) ? renderAccessory : void 0,
+      renderAccessory: !!((_o = state == null ? void 0 : state.context) == null ? void 0 : _o.selectedImage) ? renderAccessory : void 0,
       renderMessage,
       renderChatFooter,
       renderLoadEarlier,
-      loadEarlier: ((_q = state == null ? void 0 : state.context) == null ? void 0 : _q.totalCount) > ((_s = (_r = state == null ? void 0 : state.context) == null ? void 0 : _r.channelMessages) == null ? void 0 : _s.length),
-      isLoadingEarlier: (_t = state == null ? void 0 : state.context) == null ? void 0 : _t.loadingOldMessages,
+      loadEarlier: ((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.totalCount) > ((_r = (_q = state == null ? void 0 : state.context) == null ? void 0 : _q.channelMessages) == null ? void 0 : _r.length),
+      isLoadingEarlier: (_s = state == null ? void 0 : state.context) == null ? void 0 : _s.loadingOldMessages,
       bottomOffset: Platform.OS === "ios" ? 10 : 0,
       textInputProps: {
         style: {
@@ -1441,7 +1434,16 @@ const SubscriptionHandler = ({
   subscribeToNewMessages,
   channelId
 }) => {
-  useEffect(() => subscribeToNewMessages(), [channelId]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  const channelIdRef = useRef(channelId);
+  useEffect(() => {
+    if (channelId && channelId !== channelIdRef.current) {
+      channelIdRef.current = channelId;
+      console.log("Setting up subscription for channel:", channelId);
+      return subscribeToNewMessages();
+    }
+  }, [channelId, subscribeToNewMessages]);
+  return null;
 };
-const ConversationView = React__default.memo(ConversationViewComponent);export{ConversationView};//# sourceMappingURL=ConversationView.js.map
+const ConversationView = React__default.memo(ConversationViewComponent, (prevProps, nextProps) => {
+  return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage;
+});export{ConversationView};//# sourceMappingURL=ConversationView.js.map