fix: easier to click snaps

bambu-group-03 · Dec 6, 2023 · 0a96444 · 0a96444
1 parent 73c866c
commit 0a96444
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 44 deletions.
diff --git a/src/screens/feed/card.tsx b/src/screens/feed/card.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import type { Snap } from '@/api';
 import { client } from '@/api/common';
 import { getUserState } from '@/core';
-import { Pressable, View } from '@/ui';
+import { Pressable, TouchableOpacity, View } from '@/ui';
 
 import CardContent from './components/card/card-content';
 import CardFooter from './components/card/card-footer';
@@ -82,13 +82,17 @@ export const Card = ({
       ? 'bg-gray-100 border-transparent rounded-lg shadow-sm border border-gray-100 ml-4 mr-2'
       : '';
   return (
-    <Pressable
+    <TouchableOpacity
       className={`flex shrink-0 p-4 pb-0 ${cardHeaderClass}`}
       onPress={onPress}
     >
       <CardHeader snap={snap} formattedDate={formattedDate} />
+
       <View className="pl-16">
         <CardContent snap={snap} />
+      </View>
+
+      <View className="pl-16">
         <CardFooter
           snap={snap}
           isLiked={isLiked}
@@ -100,7 +104,7 @@ export const Card = ({
           onFavBookmark={handleFavBookmark}
         />
       </View>
-    </Pressable>
+    </TouchableOpacity>
   );
 };
 

diff --git a/src/screens/feed/components/card/card-content.tsx b/src/screens/feed/components/card/card-content.tsx
@@ -2,40 +2,20 @@ import { useNavigation } from '@react-navigation/native';
 import React, { memo, useEffect, useState } from 'react';
 
 import { client, type Snap } from '@/api';
-import { Pressable, Text } from '@/ui';
+import { Pressable, Text, TouchableOpacity } from '@/ui';
 
 const CardContent = memo(({ snap }: { snap: Snap }) => {
   const { navigate } = useNavigation();
-  const [parentSnap, setParentSnap] = useState<Snap | null>(null);
-
-  useEffect(() => {
-    const fetchParentSnap = async () => {
-      if (snap.parent_id) {
-        try {
-          const { data: snapResponse } = await client.content.get<Snap>(
-            `/api/feed/snap/${snap.parent_id}?user_id=${snap.author}`
-          );
-          setParentSnap(snapResponse);
-        } catch (error) {
-          console.error('Error fetching parent snap:', error);
-        }
-      }
-    };
-
-    fetchParentSnap();
-  }, [snap.parent_id, snap.author]);
-
-  const snapNavigate = parentSnap || snap;
 
   return (
-    <Pressable
+    <TouchableOpacity
       className="flex flex-col items-start justify-start"
-      onPress={() => navigate('Snap', { snap: snapNavigate })}
+      onPress={() => navigate('Snap', { snap: snap })}
     >
       <Text className="width-auto shrink text-base font-medium text-black">
         {snap.content}
       </Text>
-    </Pressable>
+    </TouchableOpacity>
   );
 });
 

diff --git a/src/screens/feed/components/card/card-header.tsx b/src/screens/feed/components/card/card-header.tsx
@@ -5,7 +5,8 @@ import { memo } from 'react';
 import { client } from '@/api/common/client';
 import type { Snap } from '@/api/snaps/types';
 import type { UserType } from '@/core/auth/utils';
-import { Image, Pressable, Text, View } from '@/ui';
+import { Image, Pressable, TouchableOpacity, Text, View } from '@/ui';
+import { useEffect, useState } from 'react';
 
 import CardSharedInfo from './card-shared-info';
 
@@ -19,28 +20,56 @@ const CardHeader = memo(
 
       navigate.navigate('UserProfile', { user });
     };
+
+    const [parentSnap, setParentSnap] = useState<Snap | null>(null);
+
+    useEffect(() => {
+      const fetchParentSnap = async () => {
+        if (snap.parent_id) {
+          try {
+            const { data: snapResponse } = await client.content.get<Snap>(
+              `/api/feed/snap/${snap.parent_id}?user_id=${snap.author}`
+            );
+            setParentSnap(snapResponse);
+          } catch (error) {
+            console.error('Error fetching parent snap:', error);
+          }
+        }
+      };
+
+      fetchParentSnap();
+    }, [snap.parent_id, snap.author]);
+
+    const snapNavigate = parentSnap || snap;
     return (
       <View className="group block shrink-0">
-        <CardSharedInfo snap={snap} />
-        <Pressable onPress={handlePress}>
-          <View className="flex flex-row items-center">
+        <TouchableOpacity
+          className="mx-3"
+          onPress={() => navigate.navigate('Snap', { snap: snapNavigate })}
+        >
+          <CardSharedInfo snap={snap} />
+        </TouchableOpacity>
+
+        <View className="flex flex-row items-center">
+          <TouchableOpacity onPress={handlePress}>
             <Image
               className="inline-block h-10 w-10 rounded-full"
               source={{
                 uri: snap.profile_photo_url,
               }}
             />
-            <View className="mx-3">
-              <Text className="text-base leading-6 text-black">
-                {snap.fullname}
-                <Text className="text-sm leading-5 text-gray-400">
-                  {' '}
-                  @{snap.username ? snap.username : 'default'} - {formattedDate}
-                </Text>
+          </TouchableOpacity>
+
+          <View className="mx-3">
+            <Text className="text-base leading-6 text-black">
+              {snap.fullname}
+              <Text className="text-sm leading-5 text-gray-400">
+                {' '}
+                @{snap.username ? snap.username : 'default'} - {formattedDate}
               </Text>
-            </View>
+            </Text>
           </View>
-        </Pressable>
+        </View>
       </View>
     );
   }

diff --git a/src/screens/feed/list.tsx b/src/screens/feed/list.tsx
@@ -9,11 +9,10 @@ import { EmptyList, FocusAwareStatusBar } from '@/ui';
 
 import Card from './card';
 import { CardSkeleton } from './components/card/card-skeleton';
+import { useNavigation } from '@react-navigation/native';
 
 const LIMIT = 15; // Number of items to fetch per page
 
-const renderItem = ({ item }: { item: SnapType }) => <Card snap={item} />;
-
 const Feed = React.memo(() => {
   const currentUser = getUserState();
   const {
@@ -26,6 +25,12 @@ const Feed = React.memo(() => {
     refetch,
   } = useSnaps({ userId: currentUser?.id, limit: LIMIT, offset: 0 });
 
+  const { navigate } = useNavigation();
+
+  const renderItem = ({ item }: { item: SnapType }) => (
+    <Card snap={item} onPress={() => navigate('Snap', { snap: item })} />
+  );
+
   const onRefresh = useCallback(() => {
     refetch();
   }, [refetch]);

diff --git a/src/screens/feed/snap-view.tsx b/src/screens/feed/snap-view.tsx
@@ -16,6 +16,7 @@ import { TouchableOpacity, View } from '@/ui';
 import { Card } from '../feed/card';
 import { CommentInput } from './comment-component';
 import { Comments } from './comment-list';
+import { ScrollView } from '@/ui';
 
 export const SnapView = ({ snap }: { snap: Snap }) => {
   const currentUser = getUserState();
@@ -67,7 +68,7 @@ export const SnapView = ({ snap }: { snap: Snap }) => {
   };
 
   return (
-    <>
+    <ScrollView>
       <View>
         <Card snap={snap} />
         <View className="flex flex-row items-start">
@@ -89,6 +90,7 @@ export const SnapView = ({ snap }: { snap: Snap }) => {
                 </TouchableOpacity>
               </View>
             )}
+
             <View className="m-3 mr-5 rounded-3xl border border-gray-200">
               <CommentInput
                 placeholder={
@@ -98,10 +100,11 @@ export const SnapView = ({ snap }: { snap: Snap }) => {
                 initialContent={editMode ? snap.content : ''}
               />
             </View>
+
             <Comments snap={snap} />
           </View>
         </View>
       </View>
-    </>
+    </ScrollView>
   );
 };