Merge pull request #70 from bambu-group-03/feat/like_and_fav_snaps

feat: front asks back for snap liked and re snaps

src/api/snaps/types.ts

@@ -1,10 +1,13 @@
 export type Snap = {
   id: number;
+  username: string;
   author: string;
   content: string;
   created_at: string;
   likes: number;
+  has_liked: boolean;
   shares: number;
+  has_shared: boolean;
   favs: number;
-  username: string;
+  numberComments: number;
 };

src/screens/feed/card.tsx

@@ -7,21 +7,27 @@ import CommentButton from './comment-button';
 import HeartButton from './heart-button';
 import ResnapButton from './re-snap-button';
 import ShareButton from './share-button';
+import axios, { AxiosInstance } from 'axios';
 
 type Props = {
   snap: Snap;
+  client: AxiosInstance;
   onPress?: () => void;
 };
-export const Card = ({ snap, onPress = () => {} }: Props) => {
-  const [isRetweeted, setIsRetweeted] = useState(false);
-  const [isLiked, setIsLiked] = useState(false);
-  const [commentCount, setCommentCount] = useState(0);
+export const Card = ({ snap, client, onPress = () => {} }: Props) => {
+  const [isRetweeted, setIsRetweeted] = useState(snap.has_shared);
+  const [isLiked, setIsLiked] = useState(snap.has_liked);
+  const [commentCount, setCommentCount] = useState(
+    snap.numberComments ? snap.numberComments : 0
+  );
   const formattedDate = new Date(snap.created_at).toLocaleDateString('en-US', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
   });
 
+  console.log(snap);
+
   return (
     <Pressable className="flex shrink-0 p-4 pb-0" onPress={onPress}>
       <TouchableOpacity className="group block shrink-0">
@@ -56,12 +62,61 @@ export const Card = ({ snap, onPress = () => {} }: Props) => {
               <ResnapButton
                 isResnaped={isRetweeted}
                 reSnapCount={snap.shares}
-                onPress={() => setIsRetweeted(!isRetweeted)}
+                onPress={() => {
+                  let interaction = '';
+                  let method = '';
+
+                  if (isRetweeted) {
+                    interaction = '/unshare/';
+                    method = 'DELETE';
+                    snap.shares--;
+                  } else {
+                    interaction = '/share/';
+                    method = 'POST';
+                    snap.shares++;
+                  }
+
+                  client({
+                    url: snap.author + interaction + snap.id,
+                    method: method,
+                  }).then((response) => {
+                    console.log(
+                      'response.data by ' + interaction + response.status
+                    );
+                  });
+
+                  setIsRetweeted(!isRetweeted);
+                }}
               />
               <HeartButton
                 isLiked={isLiked}
                 likeCount={snap.likes}
-                onPress={() => setIsLiked(!isLiked)}
+                onPress={async () => {
+                  let interaction = '';
+                  let method = '';
+
+                  if (isLiked) {
+                    interaction = '/unlike/';
+                    method = 'DELETE';
+                    snap.likes--;
+                  } else {
+                    interaction = '/like/';
+                    method = 'POST';
+                    snap.likes++;
+                  }
+
+                  client({
+                    url: snap.author + interaction + snap.id,
+                    method: method,
+                  }).then((response) => {
+                    console.log(
+                      'response.data by' + interaction,
+                      response.status
+                    );
+                  });
+
+                  setIsLiked(!isLiked);
+                }}
               />
               <CommentButton
                 commentCount={commentCount}

src/screens/feed/list.tsx

@@ -6,12 +6,16 @@ import type { Snap } from '@/api';
 import { useSnaps } from '@/api';
 import { getUserState } from '@/core';
 import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
+import axios from 'axios';
 
 import { Card } from './card';
 
 const INCREMENT_RENDER = 10;
 const INITIAL_RENDER = 20;
 
+const BASE_INTERACTION_URL =
+  'https://api-content-discovery-luiscusihuaman.cloud.okteto.net/api/interactions/';
+
 export const Feed = () => {
   const currentUser = getUserState();
   const { data, isLoading, isError } = useSnaps({
@@ -20,15 +24,23 @@ export const Feed = () => {
   const { navigate } = useNavigation();
 
   // State to track the number of items to render
-  const [renderCount, setRenderCount] = useState(INITIAL_RENDER); // Adjust the initial count as needed
+  const [renderCount, setRenderCount] = useState(INITIAL_RENDER);
+
+  const client = axios.create({
+    baseURL: BASE_INTERACTION_URL,
+  });
 
   // Corrected renderItem function
   const renderItem = ({ item, index }: { item: Snap; index: number }) => {
     // Render the item only if its index is within the current renderCount
     console.log(`renderItem: ${index}: ${renderCount}`);
     if (index < renderCount) {
       return (
-        <Card snap={item} onPress={() => navigate('Snap', { id: item.id })} />
+        <Card
+          snap={item}
+          client={client}
+          onPress={() => navigate('Snap', { id: item.id })}
+        />
       );
     }
     return null;

src/screens/feed/snap.tsx

@@ -7,6 +7,7 @@ import { ActivityIndicator, FocusAwareStatusBar, Text, View } from '@/ui';
 
 export const Snap = () => {
   const { params } = useRoute<RouteProp<'Snap'>>();
+
   const { data, isLoading, isError } = useSnap({
     variables: { tweet_id: params.id },
   });