#249: Long posts should have the see more feature (#290)

Co-authored-by: lauchaves <lauchavesmendez@gmail.comA>
keep-starknet-strange · Jul 25, 2024 · 83edcf5 · 83edcf5
1 parent 63b9ef2
commit 83edcf5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git 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
@@ -66,4 +66,9 @@ export default ThemedStyleSheet((theme) => ({
     alignItems: 'center',
     gap: Spacing.xxxsmall,
   },
+  seeMore: {
+    color: theme.colors.primary,
+    fontSize: 13,
+    marginTop: Spacing.xsmall,
+  },
 }));