Refactor ContentView (Memmy-App#195)

* refactor content view * fix
mxmvncnt · Jun 28, 2023 · d4d6fa4 · d4d6fa4
1 parent e58cbf9
commit d4d6fa4
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 87 deletions.
diff --git a/Stack.tsx b/Stack.tsx
@@ -424,7 +424,7 @@ function Stack() {
     colors: {
       ...DarkTheme.colors,
       primary: theme.colors.app.accent,
-      background: theme.colors.app.navBarBg,
+      background: theme.colors.app.bg,
       card: theme.colors.app.navBarBg,
       text: theme.colors.app.textSecondary,
       border: theme.colors.app.border,

diff --git a/components/ui/ContentView.tsx b/components/ui/ContentView.tsx
@@ -1,25 +1,62 @@
-import React, { useMemo, useState } from "react";
 import { PostView } from "lemmy-js-client";
-import {
-  Container,
-  Pressable,
-  Text,
-  useTheme,
-  VStack,
-  View,
-  Box,
-} from "native-base";
-import { Dimensions, StyleSheet } from "react-native";
+import { Pressable, Text, VStack, useTheme } from "native-base";
+import React, { useMemo, useState } from "react";
+import { Dimensions } from "react-native";
 // eslint-disable-next-line import/no-extraneous-dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { ExtensionType, getLinkInfo } from "../../helpers/LinkHelper";
 import { truncatePost } from "../../helpers/TextHelper";
-import LinkButton from "./buttons/LinkButton";
-import RenderMarkdown from "./markdown/RenderMarkdown";
-import { useAppSelector } from "../../store";
 import { selectSettings } from "../../slices/settings/settingsSlice";
+import { useAppSelector } from "../../store";
+import LinkButton from "./buttons/LinkButton";
 import ImageModal from "./image/ImageModal";
 import MemoizedFastImage from "./image/MemoizedFastImage";
+import RenderMarkdown from "./markdown/RenderMarkdown";
+
+function Content({
+  postTitle,
+  isRead,
+  isPreview,
+  children,
+  isImage,
+}: {
+  postTitle: string;
+  isRead: boolean;
+  isPreview: boolean;
+  children: JSX.Element;
+  isImage?: boolean;
+}) {
+  const theme = useTheme();
+
+  const title = (
+    <Text
+      fontSize={isPreview ? "md" : "lg"}
+      color={
+        isRead && isPreview
+          ? theme.colors.app.textSecondary
+          : theme.colors.app.textPrimary
+      }
+    >
+      {postTitle}
+    </Text>
+  );
+
+  if (isImage && !isPreview) {
+    return (
+      <VStack space={1}>
+        {children}
+        {title}
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack space={2}>
+      {title}
+      {children}
+    </VStack>
+  );
+}
 
 interface ContentViewProps {
   post: PostView;
@@ -42,21 +79,19 @@ function ContentView({ post, isPreview = false, recycled }: ContentViewProps) {
 
   const onImageLongPress = () => {};
 
-  return useMemo(
-    () => (
-      <Box mt={isPreview ? 0 : 3}>
-        {linkInfo.extType === ExtensionType.IMAGE && (
-          <VStack mb={3}>
-            {post.post.nsfw && blurNsfw ? (
-              <Pressable onPress={onImagePress} onLongPress={onImageLongPress}>
-                <MemoizedFastImage
-                  postId={post.post.id}
-                  source={post.post.url}
-                  recycled={recycled}
-                  nsfw
-                />
-              </Pressable>
-            ) : (
+  const isImage = linkInfo.extType === ExtensionType.IMAGE;
+
+  const renderContent = () => {
+    if (isImage) {
+      return (
+        <>
+          <Content
+            postTitle={post.post.name}
+            isPreview={isPreview}
+            isRead={post.read}
+            isImage
+          >
+            <>
               <Pressable
                 onPress={onImagePress}
                 onLongPress={onImageLongPress}
@@ -67,36 +102,32 @@ function ContentView({ post, isPreview = false, recycled }: ContentViewProps) {
                   postId={post.post.id}
                   source={post.post.url}
                   recycled={recycled}
+                  nsfw={post.post.nsfw && blurNsfw}
                 />
               </Pressable>
-            )}
-            <ImageModal
-              source={post.post.url}
-              width={Dimensions.get("screen").width}
-              height={Dimensions.get("screen").height}
-              isOpen={imageViewOpen}
-              onRequestClose={() => {
-                setImageViewOpen(false);
-              }}
-            />
-          </VStack>
-        )}
-
-        <Text
-          fontSize={isPreview ? "md" : "lg"}
-          mx={4}
-          mb={3}
-          color={
-            post.read && isPreview
-              ? theme.colors.app.textSecondary
-              : theme.colors.app.textPrimary
-          }
-        >
-          {post.post.name}
-        </Text>
+              <ImageModal
+                source={post.post.url}
+                width={Dimensions.get("screen").width}
+                height={Dimensions.get("screen").height}
+                isOpen={imageViewOpen}
+                onRequestClose={() => {
+                  setImageViewOpen(false);
+                }}
+              />
+            </>
+          </Content>
+        </>
+      );
+    }
 
-        {linkInfo.extType === ExtensionType.NONE && (
-          <VStack px={4}>
+    if (linkInfo.extType === ExtensionType.NONE) {
+      return (
+        <>
+          <Content
+            postTitle={post.post.name}
+            isPreview={isPreview}
+            isRead={post.read}
+          >
             {isPreview ? (
               <Text color={theme.colors.app.textSecondary}>{body}</Text>
             ) : (
@@ -106,18 +137,37 @@ function ContentView({ post, isPreview = false, recycled }: ContentViewProps) {
                 truncate={false}
               />
             )}
-          </VStack>
-        )}
-        {linkInfo.extType === ExtensionType.VIDEO ||
-          // eslint-disable-next-line prettier/prettier
-          linkInfo.extType === ExtensionType.GENERIC && (
-            <LinkButton
-              link={linkInfo.link}
-              thumbnail={post.post.thumbnail_url}
-            />
-            // eslint-disable-next-line prettier/prettier
-          )}
-      </Box>
+          </Content>
+        </>
+      );
+    }
+
+    if (
+      linkInfo.extType === ExtensionType.VIDEO ||
+      linkInfo.extType === ExtensionType.GENERIC
+    ) {
+      return (
+        <Content
+          postTitle={post.post.name}
+          isPreview={isPreview}
+          isRead={post.read}
+        >
+          <LinkButton
+            link={linkInfo.link}
+            thumbnail={post.post.thumbnail_url}
+          />
+        </Content>
+      );
+    }
+
+    return null;
+  };
+
+  return useMemo(
+    () => (
+      <VStack mt={isPreview || isImage ? 0 : 3} mx={4} mb={1}>
+        {renderContent()}
+      </VStack>
     ),
     [post.post.id, imageViewOpen]
   );

diff --git a/components/ui/Feed/FeedItem.tsx b/components/ui/Feed/FeedItem.tsx
@@ -142,21 +142,6 @@ function FeedItem({ post, setPosts, recycled }: FeedItemProps) {
 
                 <ContentView post={post} recycled={recycled} isPreview />
 
-                {post.post.url && (
-                  <HStack>
-                    <Text
-                      fontSize="sm"
-                      fontStyle="italic"
-                      mx={4}
-                      mt={-1}
-                      color={theme.colors.app.textSecondary}
-                      alignSelf="flex-end"
-                    >
-                      {getBaseUrl(post.post.url)}
-                    </Text>
-                  </HStack>
-                )}
-
                 <HStack mx={4} alignItems="center" mb={3} mt={1}>
                   <HStack flex={1} space={1}>
                     <HStack alignItems="center">

diff --git a/components/ui/buttons/LinkButton.tsx b/components/ui/buttons/LinkButton.tsx
@@ -32,8 +32,6 @@ function LinkButton({ link, thumbnail }: LinkButtonProps) {
     <Pressable onPress={onPress}>
       <VStack
         borderRadius={5}
-        mx={5}
-        mb={2}
         backgroundColor={theme.colors.app.bg}
         justifyContent="flex-start"
       >

diff --git a/components/ui/image/ImageModal.tsx b/components/ui/image/ImageModal.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { Share, useWindowDimensions } from "react-native";
-import { Modal, useToast, View } from "native-base";
+import { Modal, Text, useTheme, useToast, View } from "native-base";
 import Animated, {
   FadeIn,
   FadeOut,
@@ -16,6 +16,7 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import FastImage from "react-native-fast-image";
 import ImageViewFooter from "./ImageViewFooter";
 import downloadAndSaveImage from "../../../helpers/ImageHelper";
+import { getBaseUrl } from "../../../helpers/LinkHelper";
 
 function ImageModal({
   source,
@@ -30,6 +31,7 @@ function ImageModal({
   isOpen: boolean;
   onRequestClose?: () => void;
 }) {
+  const theme = useTheme();
   const toast = useToast();
   const onSave = () => {
     toast.show({