Ft article implementation 109 (#113)

#### What does this PR do?
This PR implements the article management and display features on our
platform. It includes fetching articles from Supabase, filtering by
category, displaying detailed article views, implementing bookmarking
and tracking visited articles, sorting by newest and popularity, and
displaying trending articles.

#### Description of Task to be completed?
- Implemented API calls to fetch articles from Supabase.
- Created components for displaying all articles with pagination.
- Developed filters for categories to allow seamless filtering.
- Implemented detailed view of single articles with related content.
- Enabled users to bookmark articles and tracked visited articles.
- Added sorting options by newest and popularity metrics.
- Implemented a view for displaying trending articles dynamically.

#### How should this be manually tested?
1. Ensure articles are fetched correctly from Supabase API.
2. Test pagination by loading multiple pages of articles.
3. Use category filters to verify articles are displayed correctly.
4. Check detailed article view for accuracy and related content.
5. Bookmark articles and verify persistence across sessions.
6. Track visited articles and ensure the list updates as expected.
7. Test sorting options by verifying order of articles.
8. Verify the display of trending articles based on engagement metrics.

#### Any background context you want to provide?
This PR builds upon our existing content management system, enhancing
the user experience by providing robust article management features. It
integrates closely with our backend services and ensures data
consistency and reliability.

#### What are the relevant pivotal tracker/Trello stories?
- #37
- #81


#### Questions:
Any feedback or questions regarding the implementation are welcome!

Author: Adadie

app/articles/ArticlesDetails.tsx

@@ -1,30 +1,230 @@
 import { useNavigation, useLocalSearchParams, router } from "expo-router";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   View,
   Text,
   Image,
   SafeAreaView,
   ScrollView,
   TouchableOpacity,
+  Share,
 } from "react-native";
+import { supabase } from "../supabase";
 
-import { articles } from "@/app/constants/articlesDummy";
+interface Article {
+  id: string;
+  title: string;
+  image: string;
+  category: string;
+  createdAt: string;
+  content: string[];
+  author: string;
+  views: number;
+}
 
 export default function ArticlesDetails() {
   const navigation = useNavigation();
-  const { id } = useLocalSearchParams();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [article, setArticle] = useState<Article | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [bookmarked, setBookmarked] = useState<boolean>(false);
+  const [userId, setUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchUser();
+  }, []);
+
+  useEffect(() => {
+    if (article && userId) {
+      incrementViews(article, userId);
+    }
+  }, [article, userId]);
+
+  useEffect(() => {
+    if (id && userId) {
+      fetchArticle();
+    } else if (!id) {
+      setLoading(false);
+      setError("No article ID provided");
+    }
+  }, [id, userId]);
+
+  const fetchUser = async () => {
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    if (user) {
+      setUserId(user.id);
+    } else {
+      setError("User not logged in");
+      setLoading(false);
+    }
+  };
+
+  const fetchArticle = async () => {
+    setLoading(true);
+    setError(null);
+
+    const { data: article, error } = await supabase
+      .from("articles")
+      .select("*")
+      .eq("id", id)
+      .single();
+
+    if (error) {
+      console.error("Error fetching article:", error);
+      setError("Failed to load article.");
+      setArticle(null);
+    } else if (article) {
+      setArticle({
+        ...article,
+        content: [
+          article.content__001,
+          article.content__002,
+          article.content__003,
+        ].filter(Boolean),
+      });
+      checkIfBookmarked(article.id);
+    } else {
+      setArticle(null);
+    }
+    setLoading(false);
+  };
+
+  const checkIfBookmarked = async (articleId: string) => {
+    const { data, error } = await supabase
+      .from("bookmarks")
+      .select("*")
+      .eq("user_id", userId)
+      .eq("article_id", articleId)
+      .single();
+
+    if (error) {
+      if (error.code === "PGRST116") {
+        setBookmarked(false);
+      } else {
+        console.log("Error checking bookmark:", error);
+      }
+    } else if (data) {
+      setBookmarked(true);
+    } else {
+      setBookmarked(false);
+    }
+  };
+
+  const toggleBookmark = async () => {
+    if (article) {
+      const isBookmarked = !bookmarked;
+      console.log(
+        `Toggling bookmark for article ID: ${article.id}, new status: ${isBookmarked}`.toUpperCase()
+      );
+
+      if (isBookmarked) {
+        const { data, error } = await supabase
+          .from("bookmarks")
+          .insert([{ user_id: userId, article_id: article.id }]);
+
+        if (error) {
+          console.error("Error adding bookmark:", error);
+        } else {
+          console.log("Bookmark added successfully", data);
+        }
+      } else {
+        const { data, error } = await supabase
+          .from("bookmarks")
+          .delete()
+          .eq("user_id", userId)
+          .eq("article_id", article.id);
+
+        if (error) {
+          console.error("Error removing bookmark:", error);
+        } else {
+          console.log("Bookmark removed successfully", data);
+        }
+      }
 
-  const article = articles.find((article) => article.id === Number(id));
+      setBookmarked(isBookmarked);
+    }
+  };
+
+  const incrementViews = async (
+    article: Article,
+    userId: string
+  ): Promise<void> => {
+    if (!article?.id || !userId) {
+      throw new Error("User ID or Article ID is undefined");
+    }
+
+    try {
+      // Check if the user has already viewed the article
+      const { data: existingView, error: viewError } = await supabase
+        .from("views")
+        .select("*")
+        .eq("user_id", userId)
+        .eq("article_id", article.id)
+        .single();
+
+      if (viewError && viewError.code !== "PGRST116") {
+        // PGRST116: No rows returned
+        throw viewError;
+      }
+
+      if (!existingView) {
+        // User has not viewed the article, so increment the views
+        const { data, error } = await supabase.rpc("increment_views", {
+          article_id: article.id,
+          user_id: userId,
+        });
+
+        if (error) {
+          console.error("Error incrementing views:", error.message);
+        } else {
+          console.log("Views incremented successfully", data);
+        }
+      } else {
+        console.log("User already viewed this article");
+      }
+    } catch (error) {
+      console.error("Error incrementing views:", error);
+    }
+  };
+
+  const shareArticle = () => {
+    if (article) {
+      Share.share({
+        message: `Check out this article: ${article.title}`,
+        url: article.image,
+        title: article.title,
+      })
+        .then((result) => console.log(result))
+        .catch((error) => console.log(error));
+    }
+  };
+
+  const more = () => {
+    console.log("more is clicked");
+  };
+
+  if (loading) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text
+          style={{ fontSize: 20, fontFamily: "UrbanistBold", color: "#212121" }}
+        >
+          Loading...
+        </Text>
+      </View>
+    );
+  }
 
   return (
-    <SafeAreaView style={{ paddingTop: 50, backgroundColor: "white",flex:1 }}>
+    <SafeAreaView style={{ paddingTop: 50, backgroundColor: "white", flex: 1 }}>
       <View
         style={{
           display: "flex",
           flexDirection: "row",
           justifyContent: "space-between",
-          
         }}
       >
         <View
@@ -35,9 +235,7 @@ export default function ArticlesDetails() {
             padding: 15,
           }}
         >
-          <TouchableOpacity
-            onPress={() => router.back()}
-          >
+          <TouchableOpacity onPress={() => router.back()}>
             <Image
               style={{ marginTop: 10 }}
               source={require("../../assets/articlesImages/vuuu.png")}
@@ -52,19 +250,23 @@ export default function ArticlesDetails() {
             padding: 15,
           }}
         >
-          <TouchableOpacity>
+          <TouchableOpacity onPress={toggleBookmark}>
             <Image
               style={{ height: 22.57, width: 18.13, padding: 10 }}
-              source={require("../../assets/articlesImages/rwanda.png")}
+              source={
+                bookmarked
+                  ? require("../../assets/articlesImages/Bookmarked.png")
+                  : require("../../assets/articlesImages/rwanda.png")
+              }
             />
           </TouchableOpacity>
-          <TouchableOpacity>
+          <TouchableOpacity onPress={shareArticle}>
             <Image
               style={{ height: 11.07, width: 11.07, padding: 10 }}
               source={require("../../assets/articlesImages/rwiza.png")}
             />
           </TouchableOpacity>
-          <TouchableOpacity>
+          <TouchableOpacity onPress={more}>
             <Image
               style={{ height: 1.17, width: 1.17, padding: 10 }}
               source={require("../../assets/articlesImages/Group.png")}
@@ -82,19 +284,17 @@ export default function ArticlesDetails() {
             gap: 5,
           }}
         >
-          <TouchableOpacity>
-            {article?.image && (
-              <Image
-                style={{
-                  height: 240,
-                  width: "100%",
-                  borderRadius: 24,
-                  justifyContent: "center",
-                }}
-                source={article?.image}
-              />
-            )}
-          </TouchableOpacity>
+          {article?.image && (
+            <Image
+              style={{
+                height: 240,
+                width: "100%",
+                borderRadius: 24,
+                justifyContent: "center",
+              }}
+              source={{ uri: article.image }}
+            />
+          )}
           <View>
             <Text
               style={{
@@ -115,17 +315,24 @@ export default function ArticlesDetails() {
                 padding: 15,
                 gap: 10,
                 marginTop: 5,
+                justifyContent: "space-between",
               }}
             >
               <Text
                 style={{
-                  color: "#424242",
+                  color: "#246BFD",
                   fontSize: 10,
-                  marginTop: 10,
+                  backgroundColor: "#E0E7FF",
+                  borderRadius: 6,
+                  height: 24,
+                  width: 59,
+                  textAlign: "center",
+                  padding: 5,
+                  marginTop: 5,
                   fontFamily: "UrbanistRegular",
                 }}
               >
-                {article?.date}
+                {article?.category}
               </Text>
               <Text
                 style={{
@@ -134,31 +341,31 @@ export default function ArticlesDetails() {
                   backgroundColor: "#E0E7FF",
                   borderRadius: 6,
                   height: 24,
-                  width: 59,
+                  width: "auto",
                   textAlign: "center",
                   padding: 5,
                   marginTop: 5,
                   fontFamily: "UrbanistRegular",
                 }}
               >
-                {article?.category}
+                {article?.author}
               </Text>
             </View>
           </View>
-            {article?.content.map((content, index) => (
-              <Text
-                key={index}
-                style={{
-                  fontSize: 16,
-                  color: "#424242",
-                  fontFamily: "UrbanistRegular",
-                  marginBottom: 20,
-                  paddingHorizontal: 10,
-                }}
-              >
-                {content}
-              </Text>
-            ))}
+          {article?.content.map((section, index) => (
+            <Text
+              key={index}
+              style={{
+                fontSize: 16,
+                color: "#424242",
+                fontFamily: "UrbanistRegular",
+                marginBottom: 20,
+                paddingHorizontal: 10,
+              }}
+            >
+              {section}
+            </Text>
+          ))}
         </View>
       </ScrollView>
     </SafeAreaView>