@developer_tribe/react-native-comnyx 0.3.1 → 0.3.3

package/src/components/ChatList.tsx

@@ -1,24 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { useAppStore } from '../store';
 import {
-  FlatList,
+  SectionList,
   View,
   useWindowDimensions,
   ActivityIndicator,
   Image,
   TouchableOpacity,
-  Keyboard,
-  Pressable,
 } from 'react-native';
-import { getCustomerConversation } from '../api';
+import { getCustomerConversation, sendCustomerMessage } from '../api';
 import type { AppConversationMessage } from '../types/Conversation';
-import { StyleSheet } from 'react-native';
 import { MessageItem } from './MessageItem';
 import { MessageInput } from './MessageInput';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
 import { InitFailed } from './InitFailed';
 import { EmptyList } from './EmptyList';
+import CustomPopup from './CustomAlert';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { ScaledSheet } from './ScaledSheet';
+import { formatDate } from '../utils/formatDate';
+import { viewabilityConfig } from '../viewabilityConfig';
+
+const headphonesIcon = require('../assets/headphones-01.png');
+const closeIcon = require('../assets/x-close.png');
 
 function LoadingItem() {
   const themeColors = useThemeColors();
@@ -31,7 +36,7 @@ function LoadingItem() {
   );
 }
 
-export function ChatList() {
+export function ChatList({ onBack }: { onBack?: () => void }) {
   const themeColors = useThemeColors();
   const { height: windowHeight } = useWindowDimensions();
   const MESSAGE_MIN_HEIGHT = 60;
@@ -45,13 +50,124 @@ export function ChatList() {
     data: s.data,
     setData: s.setData,
   }));
-  const ref = useRef<FlatList<AppConversationMessage>>(null);
+  const ref = useRef<SectionList<AppConversationMessage>>(null);
   const [page, setPage] = useState(1);
   const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
   const [nexPageFailed, setNexPageFailed] = useState(false);
   const [initFailed, setInitFailed] = useState(false);
   const [isScrollingUp, setIsScrollingUp] = useState(false);
   const listChangedRef = useRef(false);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [selectedMessage, setSelectedMessage] = useState<string>('');
+  const [currentSection, setCurrentSection] = useState<string>('');
+
+  const sections = useMemo(() => {
+    if (!data || data.length === 0) return [];
+
+    const messagesByDate: Record<string, AppConversationMessage[]> = {};
+
+    data.forEach((message: AppConversationMessage) => {
+      const dateKey = formatDate(message.created_at);
+      if (!messagesByDate[dateKey]) {
+        messagesByDate[dateKey] = [];
+      }
+      // @ts-ignore
+      messagesByDate[dateKey].push(message);
+    });
+
+    return Object.entries(messagesByDate).map(([title, messages]) => ({
+      title,
+      data: messages.sort(
+        (a, b) => b.created_at.getTime() - a.created_at.getTime()
+      ),
+    }));
+  }, [data]);
+
+  const resendMessage = useCallback(() => {
+    if (selectedMessage && customer?.external_id) {
+      const currentMessage = useAppStore.getState().data || [];
+      const messageIndex = currentMessage.findIndex(
+        (msg) => msg.content === selectedMessage
+      );
+
+      if (messageIndex === -1) {
+        return;
+      }
+
+      const updatedValue = [...currentMessage];
+      const existingValue = updatedValue[messageIndex];
+
+      if (existingValue) {
+        updatedValue[messageIndex] = {
+          ...existingValue,
+          approved: false,
+          error: false,
+        };
+
+        useAppStore.setState({
+          data: updatedValue,
+        });
+
+        sendCustomerMessage(customer.external_id, selectedMessage, {
+          fake: useAppStore.getState().fake,
+        })
+          .then((res: any) => {
+            const currentData = useAppStore.getState().data || [];
+            const dataIndex = currentData.findIndex(
+              (msg) => msg.content === selectedMessage
+            );
+
+            if (dataIndex !== -1) {
+              const updatedData = [...currentData];
+              const existingMessage = updatedData[dataIndex];
+
+              if (existingMessage) {
+                updatedData[dataIndex] = {
+                  ...existingMessage,
+                  id: res.message.id,
+                  content: res.message.content,
+                  user: res.message.user || existingMessage.user,
+                  approved: true,
+                  error: false,
+                  created_at: new Date(res.message.created_at),
+                };
+
+                useAppStore.setState({
+                  data: updatedData,
+                });
+              }
+            }
+
+            setSelectedMessage('');
+          })
+          .catch((error) => {
+            const currentData = useAppStore.getState().data || [];
+            const dataIndex = currentData.findIndex(
+              (msg) => msg.content === selectedMessage
+            );
+
+            if (dataIndex !== -1) {
+              const updatedMessage = [...currentData];
+              const existingData = updatedMessage[dataIndex];
+
+              if (existingData) {
+                updatedMessage[dataIndex] = {
+                  ...existingData,
+                  error: true,
+                };
+
+                useAppStore.setState({
+                  data: updatedMessage,
+                });
+              }
+            }
+
+            console.error('Mesajı yeniden gönderme hatası:', error);
+            setSelectedMessage('');
+          });
+      }
+    }
+  }, [selectedMessage, customer]);
 
   const nextPage = useCallback(() => {
     if (nextPageStatus.current) {
@@ -105,34 +221,121 @@ export function ChatList() {
   }, [MESSAGES_PER_PAGE, customer?.external_id, page, setData]);
 
   const renderItem = useCallback(
-    ({ item }: { item: AppConversationMessage }) => <MessageItem item={item} />,
+    ({ item }: { item: AppConversationMessage }) => {
+      return (
+        <MessageItem
+          item={item}
+          onShowPopup={() => {
+            setSelectedMessage(item.content);
+            setPopupVisible(true);
+          }}
+        />
+      );
+    },
     []
   );
 
+  const handleViewabilityChange = useCallback(
+    (info: { viewableItems: any[] }) => {
+      if (info.viewableItems && info.viewableItems.length > 0) {
+        // Find the first viewable item with a section
+        for (const viewableItem of info.viewableItems) {
+          if (viewableItem.section && viewableItem.section.title) {
+            const title = viewableItem.section.title;
+            if (title !== currentSection) {
+              setCurrentSection(title);
+              break;
+            }
+          }
+        }
+      }
+    },
+    [currentSection]
+  );
+
+  const viewabilityConfigCallbackPairs = useRef([
+    {
+      viewabilityConfig,
+      onViewableItemsChanged: handleViewabilityChange,
+    },
+  ]);
+
+  // We'll use onScroll instead of onMomentumScrollEnd for more responsive updates
   const handleScroll = useCallback(
     (event: any) => {
       const currentScrollY = event.nativeEvent.contentOffset.y;
       const contentHeight = event.nativeEvent.contentSize.height;
       const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
+
       setIsScrollingUp(currentScrollY > 100);
 
+      // Only proceed if we have sections and the list is scrolled enough
+      if (sections && sections.length > 0 && currentScrollY > 0) {
+        // Create visibility info for each section
+        let visibleSectionIndex = -1;
+        let maxVisibility = 0;
+
+        // For inverted lists, we need to iterate through sections to find which one is most visible
+        for (let i = 0; i < sections.length; i++) {
+          const section = sections[i];
+          if (!section || !section.data) continue;
+
+          const sectionStartPercent = i / sections.length;
+          const sectionEndPercent = (i + 1) / sections.length;
+
+          // Convert percentages to scroll positions
+          const sectionStartPosition = contentHeight * sectionStartPercent;
+          const sectionEndPosition = contentHeight * sectionEndPercent;
+
+          // Calculate how much of this section is visible
+          const visibleTop = Math.max(currentScrollY, sectionStartPosition);
+          const visibleBottom = Math.min(
+            currentScrollY + scrollViewHeight,
+            sectionEndPosition
+          );
+          const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+
+          // Track which section has the most visibility
+          if (visibleHeight > maxVisibility) {
+            maxVisibility = visibleHeight;
+            visibleSectionIndex = i;
+          }
+        }
+
+        // If we found a visible section, update the header
+        if (visibleSectionIndex >= 0 && visibleSectionIndex < sections.length) {
+          const visibleSection = sections[visibleSectionIndex];
+          if (
+            visibleSection?.title &&
+            visibleSection.title !== currentSection
+          ) {
+            console.log(
+              `Most visible section: ${visibleSection.title} (index ${visibleSectionIndex})`
+            );
+            setCurrentSection(visibleSection.title);
+          }
+        }
+      }
+
+      // Check if we need to load more data
       if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
         nextPage();
       }
     },
-    [nextPage]
+    [nextPage, sections, currentSection]
   );
 
   const scrollToBottom = useCallback(
     (animated: boolean) => {
-      if (ref.current && data?.length) {
-        ref.current.scrollToOffset({
-          offset: 0,
+      if (ref.current && sections.length) {
+        ref.current.scrollToLocation({
+          sectionIndex: 0,
+          itemIndex: 0,
           animated,
         });
       }
     },
-    [data]
+    [sections]
   );
 
   useEffect(() => {
@@ -145,18 +348,18 @@ export function ChatList() {
           setData((prevData) => {
             const newMessages = newData?.page?.data ?? [];
             const existingIds = new Set(prevData?.map((msg) => msg.id));
-            const uniqueNewMessages = newMessages.filter(
-              (msg) => !existingIds.has(msg.id)
+            const uniqueNewMessages = newMessages?.filter(
+              (msg) => !existingIds?.has(msg.id)
             );
-            const processedMessages = uniqueNewMessages.map((u) => ({
+            const processedMessages = uniqueNewMessages?.map((u) => ({
               ...u,
               created_at: new Date(u.created_at),
               approved: true,
             }));
             useAppStore.setState({
-              firstMessage: processedMessages[0],
+              firstMessage: processedMessages?.[0],
             });
-            if (processedMessages.length === 0) {
+            if (processedMessages?.length === 0) {
               setLoading(false);
             }
             return processedMessages;
@@ -165,10 +368,20 @@ export function ChatList() {
         .catch((e) => {
           setInitFailed(true);
           console.error(e);
+        })
+        .finally(() => {
+          setLoading(false);
         });
     }
   }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
 
+  // Initialize the current section when sections are loaded
+  useEffect(() => {
+    if (sections.length > 0 && sections[0]?.title) {
+      setCurrentSection(sections[0].title);
+    }
+  }, [sections]);
+
   if (nexPageFailed) {
     return (
       <View
@@ -197,38 +410,92 @@ export function ChatList() {
   if (initFailed) {
     return <InitFailed setInitFailed={setInitFailed} />;
   }
+
   return (
-    <Pressable
+    <View
       style={[styles.container, { backgroundColor: themeColors.background }]}
-      onPress={Keyboard.dismiss}
     >
-      <FlatList
-        ref={ref}
-        data={data}
-        inverted
-        renderItem={renderItem}
-        contentContainerStyle={[
-          styles.contentContainer,
-          { backgroundColor: themeColors.background },
+      <TouchableOpacity style={[styles.iconContainer]} onPress={onBack}>
+        <Image
+          source={closeIcon}
+          style={[styles.closeIcon, { tintColor: themeColors.text }]}
+        />
+      </TouchableOpacity>
+      <View
+        style={[
+          styles.headerContainer,
+          {
+            backgroundColor: themeColors.background,
+            borderBottomColor: themeColors.lavender,
+          },
         ]}
-        style={styles.list}
-        ListEmptyComponent={
-          !loading && (!data || data.length === 0) ? <EmptyList /> : null
-        }
-        ListFooterComponent={loading ? <LoadingItem /> : null}
-        keyExtractor={(item) => item.id + '-' + item.created_at}
-        removeClippedSubviews={true}
-        maxToRenderPerBatch={10}
-        windowSize={21}
-        initialNumToRender={MESSAGES_PER_PAGE}
-        getItemLayout={(_, index) => ({
-          length: MESSAGE_MIN_HEIGHT + 10,
-          offset: (MESSAGE_MIN_HEIGHT + 10) * index,
-          index,
-        })}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-      />
+      >
+        <AppText
+          localization="chat.empty"
+          style={[styles.header, { color: themeColors.text }]}
+        />
+        <View
+          style={[
+            styles.headerText,
+            { backgroundColor: themeColors.background },
+          ]}
+        >
+          <Image
+            source={headphonesIcon}
+            style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
+          />
+          <AppText
+            localization="chat.empty"
+            style={[styles.liveChat, { color: themeColors.text }]}
+          />
+          <View style={[styles.dot, { backgroundColor: themeColors.green }]} />
+        </View>
+      </View>
+
+      <View style={styles.listContainer}>
+        <AppText
+          style={[
+            styles.fixedDateText,
+            { color: themeColors.slate, backgroundColor: themeColors.ghost },
+          ]}
+        >
+          {currentSection}
+        </AppText>
+
+        <SectionList
+          ref={ref}
+          sections={sections}
+          inverted
+          renderItem={renderItem}
+          contentContainerStyle={[
+            styles.contentContainer,
+            { backgroundColor: themeColors.background },
+          ]}
+          style={styles.list}
+          ListEmptyComponent={
+            !loading && (!data || data.length === 0) ? <EmptyList /> : null
+          }
+          ListFooterComponent={loading ? <LoadingItem /> : null}
+          keyExtractor={(item: AppConversationMessage) =>
+            item.id + '-' + item.created_at
+          }
+          removeClippedSubviews={true}
+          maxToRenderPerBatch={10}
+          windowSize={21}
+          initialNumToRender={MESSAGES_PER_PAGE}
+          getItemLayout={(_: any, index: number) => ({
+            length: MESSAGE_MIN_HEIGHT + 10,
+            offset: (MESSAGE_MIN_HEIGHT + 10) * index,
+            index,
+          })}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          viewabilityConfigCallbackPairs={
+            viewabilityConfigCallbackPairs.current
+          }
+          stickySectionHeadersEnabled={false}
+        />
+      </View>
       {isScrollingUp && (
         <TouchableOpacity
           style={[
@@ -243,21 +510,41 @@ export function ChatList() {
           />
         </TouchableOpacity>
       )}
-      <MessageInput scrollToBottom={scrollToBottom} />
-    </Pressable>
+      <MessageInput
+        scrollToBottom={scrollToBottom}
+        selectedMessage={selectedMessage}
+      />
+      <CustomPopup
+        isVisible={popupVisible}
+        onClose={() => setPopupVisible(false)}
+        title={'chat.list-failed-message.title'}
+        description={'chat.list-failed-message.description'}
+        onCancelButton={() => {
+          setPopupVisible(false);
+        }}
+        onResendButton={() => {
+          resendMessage();
+          setPopupVisible(false);
+        }}
+        buttonText={'chat.list-cancel' as keyof LocalizationKeys}
+      />
+    </View>
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
     flex: 1,
+    paddingVertical: '20@vs',
+    position: 'relative',
   },
   list: {
     flex: 1,
   },
   contentContainer: {
-    paddingVertical: 10,
-    paddingHorizontal: 10,
+    paddingHorizontal: '10@s',
+    paddingVertical: '10@vs',
+    flexGrow: 1,
   },
   loadingItem: {
     height: 200,
@@ -266,10 +553,11 @@ const styles = StyleSheet.create({
   },
   scrollDownButton: {
     position: 'absolute',
-    right: 20,
+    right: '20@s',
     bottom: '15%',
-    borderRadius: 25,
-    padding: 10,
+    borderRadius: '25@s',
+    paddingHorizontal: '10@s',
+    paddingVertical: '10@vs',
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -280,23 +568,88 @@ const styles = StyleSheet.create({
     elevation: 5,
   },
   scrollUpIcon: {
-    width: 24,
-    height: 24,
+    width: '24@s',
+    height: '24@vs',
   },
   retryContainer: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 20,
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
   },
   retryButton: {
     padding: 15,
-    borderRadius: 8,
+    borderRadius: '8@s',
     alignItems: 'center',
     justifyContent: 'center',
   },
   retryText: {
-    fontSize: 16,
+    fontSize: '16@vs',
     fontWeight: '500',
   },
+  headphonesIcon: {
+    width: '24@s',
+    height: '24@vs',
+  },
+  header: {
+    fontSize: '16@vs',
+    textAlign: 'center',
+    fontWeight: 600,
+  },
+  liveChat: {
+    fontSize: '16@vs',
+    textAlign: 'center',
+    fontWeight: 400,
+  },
+  headerContainer: {
+    alignItems: 'center',
+    gap: 16,
+    borderBottomWidth: 1,
+    paddingBottom: '16@vs',
+  },
+  iconContainer: {
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
+    position: 'absolute',
+    zIndex: 9999,
+  },
+  closeIcon: {
+    width: '24@s',
+    height: '24@vs',
+  },
+  dot: {
+    width: '10@s',
+    height: '10@vs',
+    borderRadius: '8@s',
+  },
+  headerText: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  sectionHeader: {
+    fontSize: '14@vs',
+    fontWeight: '400',
+    borderRadius: '8@s',
+    paddingHorizontal: '8@s',
+    paddingVertical: '4@vs',
+    alignSelf: 'center',
+    marginVertical: '8@vs',
+  },
+  fixedDateText: {
+    fontSize: '14@vs',
+    fontWeight: '500',
+    borderRadius: '8@s',
+    paddingHorizontal: '10@s',
+    paddingVertical: '4@s',
+    position: 'absolute',
+    top: '10@vs',
+    zIndex: 10,
+    alignSelf: 'center',
+  },
+  listContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  sectionHeaderContainer: {
+    alignItems: 'center',
+    marginVertical: '8@vs',
+  },
 });