From 0944cdfc62d33ff68f59da9f6cd02787c6f4d84a Mon Sep 17 00:00:00 2001
From: lauchaves <lauchavesmendez@gmail.comA>
Date: Wed, 24 Jul 2024 23:37:55 -0600
Subject: [PATCH] #249: Long posts should have the see more feature

---
 JoyboyCommunity/src/modules/Post/index.tsx | 21 +++++++++++++++++++--
 JoyboyCommunity/src/modules/Post/styles.ts |  5 +++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/JoyboyCommunity/src/modules/Post/index.tsx b/JoyboyCommunity/src/modules/Post/index.tsx
index dfff4ae4..819b1756 100644
--- a/JoyboyCommunity/src/modules/Post/index.tsx
+++ b/JoyboyCommunity/src/modules/Post/index.tsx
@@ -27,7 +27,7 @@ export type PostProps = {
   event?: NDKEvent;
 };
 
-export const Post: React.FC<PostProps> = ({asComment, event}) => {
+export const Post: React.FC<PostProps> = ({ asComment, event }) => {
   const repostedEvent = undefined;
 
   const {theme} = useTheme();
@@ -45,6 +45,12 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
   const queryClient = useQueryClient();
 
   const [menuOpen, setMenuOpen] = useState(false);
+  const [isContentExpanded, setIsContentExpanded] = useState(false);
+
+  const toggleExpandedContent  = () => {
+    setIsContentExpanded((prev) => !prev);
+  };
+
 
   const scale = useSharedValue(1);
 
@@ -107,6 +113,9 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
     );
   };
 
+  const content = event?.content || '';
+  const truncatedContent = content.length > 200 ? `${content.slice(0, 200)}...` : content;
+
   return (
     <View style={styles.container}>
       {repostedEvent && (
@@ -188,9 +197,17 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
       <View style={styles.content}>
         <Pressable onPress={handleNavigateToPostDetails}>
           <Text color="textStrong" fontSize={13} lineHeight={20}>
-            {event?.content}
+            {isContentExpanded ? content : truncatedContent}
           </Text>
 
+          {content.length > 200 && (
+            <Pressable onPress={toggleExpandedContent }>
+              <Text style={styles.seeMore}>
+                {isContentExpanded ? 'See less' : 'See more...'}
+              </Text>
+            </Pressable>
+          )}
+
           {postSource && (
             <Image
               source={postSource}
diff --git a/JoyboyCommunity/src/modules/Post/styles.ts b/JoyboyCommunity/src/modules/Post/styles.ts
index d69981be..3a0ee775 100644
--- a/JoyboyCommunity/src/modules/Post/styles.ts
+++ b/JoyboyCommunity/src/modules/Post/styles.ts
@@ -66,4 +66,9 @@ export default ThemedStyleSheet((theme) => ({
     alignItems: 'center',
     gap: Spacing.xxxsmall,
   },
+  seeMore: {
+    color: theme.colors.primary,
+    fontSize: 13,
+    marginTop: Spacing.xsmall,
+  },
 }));