From 320466af802f74705f003518f46adc9217cf648c 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 | 16 +++++++++++++++-
 JoyboyCommunity/src/modules/Post/styles.ts |  5 +++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/JoyboyCommunity/src/modules/Post/index.tsx b/JoyboyCommunity/src/modules/Post/index.tsx
index dfff4ae4..27898797 100644
--- a/JoyboyCommunity/src/modules/Post/index.tsx
+++ b/JoyboyCommunity/src/modules/Post/index.tsx
@@ -45,6 +45,11 @@ 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 +112,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 +196,15 @@ 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,
+  },
 }));