feat: [FC-15] preview link

src/chat/GalleryScreen.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  // FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+// import FastImage from 'react-native-fast-image';
+import { FirestoreServices } from '../services/firebase';
+// import { MessageTypes, type MediaFile } from '../interfaces';
+// import ThumbnailVideoPlayer from '../chat_obs/components/ThumbnailVideoPlayer';
+// import SelectedViewModal from '../chat_obs/components/SelectedViewModal';
+import { Links, SectionData } from './components/links/Links';
+import { transformLinksDataForSectionList } from '../utilities/misc';
+// type MediaItem = {
+//   item: MediaFile;
+//   index: number;
+// };
+
+const { width } = Dimensions.get('window');
+
+interface GalleryModalProps {
+  renderCustomHeader?: () => JSX.Element;
+  // renderCustomMedia?: ({ item, index }: MediaItem) => JSX.Element | null;
+  renderCustomFile?: () => JSX.Element;
+  renderCustomLink?: () => JSX.Element;
+}
+
+export const GalleryScreen: React.FC<GalleryModalProps> = ({
+  renderCustomHeader,
+  // renderCustomMedia,
+  renderCustomFile,
+  renderCustomLink,
+}) => {
+  const [activeTab, setActiveTab] = useState('Media');
+  // const [media, setMedia] = useState<MediaFile[]>([]);
+  const [links, setLinks] = useState<SectionData[]>([]);
+  const firebaseInstance = useRef(FirestoreServices.getInstance()).current;
+  // const [mediaSelected, setMediaSelected] = useState<MediaFile>();
+
+  useEffect(() => {
+    switch (activeTab) {
+      case 'Media':
+        // {
+        //   const loadImages = async () => {
+        //     const urls = await firebaseInstance.getMediaFilesByConversationId();
+        //     setMedia(urls);
+        //   };
+        //   loadImages();
+        // }
+        break;
+      case 'File':
+        break;
+      case 'Link':
+        const loadLinks = async () => {
+          const getLinks = transformLinksDataForSectionList(
+            await firebaseInstance.getUserLinks()
+          );
+          setLinks(getLinks);
+        };
+        loadLinks();
+        break;
+    }
+  }, [activeTab, firebaseInstance]);
+
+  // const renderImage = ({ item, index }: MediaItem) => {
+  //   if (renderCustomMedia) return renderCustomMedia({ item, index });
+  //   return (
+  //     <TouchableOpacity onPress={() => setMediaSelected(item)}>
+  //       {item.type === MessageTypes.video ? (
+  //         <ThumbnailVideoPlayer videoUrl={item.path} />
+  //       ) : (
+  //         <FastImage source={{ uri: item.path }} style={styles.image} />
+  //       )}
+  //     </TouchableOpacity>
+  //   );
+  // };
+
+  const renderHeader = (): JSX.Element => {
+    if (renderCustomHeader) return renderCustomHeader();
+    return (
+      <View style={styles.tabContainer}>
+        {['Media', 'File', 'Link'].map((tab) => (
+          <TouchableOpacity
+            key={tab}
+            style={[styles.tab, activeTab === tab && styles.activeTab]}
+            onPress={() => setActiveTab(tab)}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                activeTab === tab && styles.activeTabText,
+              ]}
+            >
+              {tab.toUpperCase()}
+            </Text>
+            {activeTab === tab && <View style={styles.tabIndicator} />}
+          </TouchableOpacity>
+        ))}
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'Media':
+        return (
+          <View>
+            {/* <FlatList
+              data={media}
+              renderItem={renderImage}
+              keyExtractor={(item) => item.id}
+              numColumns={3}
+            />
+            <SelectedViewModal
+              url={mediaSelected?.path}
+              type={mediaSelected?.type}
+              onClose={() => setMediaSelected(undefined)}
+            /> */}
+          </View>
+        );
+      case 'File':
+        if (renderCustomFile) return renderCustomFile();
+        return (
+          <View style={styles.centeredView}>
+            <Text>No Files Available</Text>
+          </View>
+        );
+      case 'Link':
+        if (renderCustomLink) return renderCustomLink();
+        return <Links links={links} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {renderHeader()}
+      {renderContent()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 10,
+    position: 'relative',
+  },
+  tabText: {
+    color: '#8888',
+    fontSize: 16,
+  },
+  activeTabText: {
+    color: 'black',
+  },
+  activeTab: {},
+  tabIndicator: {
+    position: 'absolute',
+    bottom: -1,
+    height: 2,
+    width: '100%',
+    backgroundColor: 'gray',
+  },
+  image: {
+    width: width / 3,
+    height: width / 3,
+    margin: 1,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

src/chat/components/links/Links.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, StyleSheet, SectionList } from 'react-native';
+import { PreviewLink } from './PreviewLink';
+
+export type LinksType = {
+  [date: string]: string[];
+};
+
+export type SectionData = {
+  title: string;
+  data: readonly string[];
+};
+
+interface LinkProps {
+  renderCustomLink?: () => JSX.Element;
+  links: SectionData[];
+}
+
+export const Links: React.FC<LinkProps> = ({ renderCustomLink, links }) => {
+  const renderItemLink = ({ item, index }: { item: string; index: number }) => (
+    <View key={index} style={styles.itemContainer}>
+      <PreviewLink link={item} />
+    </View>
+  );
+  if (!links) return null;
+
+  if (renderCustomLink) return renderCustomLink();
+  return (
+    <SectionList
+      sections={links}
+      keyExtractor={(item, index) => `${index}-${item[index]}`}
+      renderItem={renderItemLink}
+      renderSectionHeader={({ section: { title } }) => (
+        <Text style={styles.header}>{title}</Text>
+      )}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    fontSize: 16,
+    color: 'black',
+    fontWeight: 'bold',
+    marginLeft: 10,
+  },
+  itemContainer: {
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+});

src/chat/components/links/PreviewLink.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { MessageText } from 'react-native-gifted-chat';
+import type { MessageProps } from '../../../interfaces';
+import { LinkPreview } from '@flyerhq/react-native-link-preview';
+
+type PreviewLinkProps = {
+  link?: string;
+  currentMessage?: MessageProps;
+  customPreviewLink?: (link: string) => JSX.Element;
+  iconDefault?: string;
+};
+
+export const PreviewLink: React.FC<PreviewLinkProps> = (props) => {
+  const { currentMessage, link, customPreviewLink } = props;
+  const urls = currentMessage?.text.match(/(https?:\/\/[^\s]+)/g);
+
+  const renderPreview = (url: string, index: number = 0) => {
+    return (
+      <LinkPreview
+        key={index}
+        enableAnimation
+        text={url}
+        renderImage={(image) => {
+          return (
+            <View style={styles.renderImage}>
+              <Image style={styles.imageStyle} source={{ uri: image.url }} />
+            </View>
+          );
+        }}
+        renderTitle={(title) => (
+          <View style={styles.viewTitle}>
+            <Text style={styles.title}>{title}</Text>
+          </View>
+        )}
+        renderText={(text) => (
+          <View style={styles.viewTitle}>
+            <Text style={styles.textPreview}>{text}</Text>
+          </View>
+        )}
+        renderDescription={(description) => (
+          <View style={styles.viewDetail}>
+            <Text style={styles.textDetails}>{description}</Text>
+          </View>
+        )}
+      />
+    );
+  };
+
+  if (customPreviewLink) {
+    if (link) return customPreviewLink(link);
+  }
+
+  if (link) {
+    return renderPreview(link);
+  }
+
+  if (urls) {
+    return (
+      <View style={styles.containerPreview}>
+        <Text>{currentMessage?.text}</Text>
+        {urls.map((item, index) => (
+          <LinkPreview
+            key={index}
+            containerStyle={styles.previewContainer}
+            enableAnimation
+            text={item}
+            renderText={(text) => (
+              <Text style={styles.textPreview}>{text}</Text>
+            )}
+          />
+        ))}
+      </View>
+    );
+  }
+  return <MessageText {...props} />;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  containerPreview: {
+    padding: 10,
+  },
+  previewContainer: {
+    backgroundColor: 'white',
+    borderRadius: 20,
+    marginTop: 16,
+  },
+  textPreview: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+
+  renderImage: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'green',
+    position: 'absolute',
+    left: 8,
+    top: 20,
+  },
+  imageStyle: {
+    width: 100,
+    height: 100,
+    resizeMode: 'stretch',
+  },
+  viewTitle: {
+    marginLeft: 100,
+  },
+  title: {
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  viewDetail: {
+    marginLeft: 100,
+    marginTop: 10,
+  },
+  textDetails: {
+    color: 'black',
+  },
+});

src/chat/index.ts

@@ -1,3 +1,4 @@
 export * from './ChatProvider';
 export * from './ChatScreen';
 export * from './ListConversationScreen';
+export * from './GalleryScreen';