fetch daily reminder

Author: rzlm

Utils/datafetching.tsx

@@ -45,6 +45,13 @@ export const fetchTodaysEvents = async () => {
 
 
 //get ayah here
+export async function getDailyReminder(id:string) {
+    const { data, error } = await supabase.from('daily_reminders').select('*').eq('id', id).single()
+    if (error) {
+        throw error
+    }
+    return data
+}
 
 
 

Utils/formatDate.tsx

@@ -0,0 +1,11 @@
+
+
+// function to get id number of ayah/hadith based on date
+export default function getReminderId() {
+    const today = new Date();
+    const date = today.getDate();
+    const month = today.getMonth();
+    const year = today.getFullYear();
+    const id = (date * month * year) % 98  ;
+    return id.toString();
+}

Utils/utils.tsx

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native'
 import { TextInput } from 'react-native'
 import { Search } from 'lucide-react-native'
 import { CircleX } from 'lucide-react-native'
-const HalalFood = () => {
+const halalFood = () => {
   return (
     <ScrollView className='flex flex-col  h-screen px-6 pt-4 bg-[#F8F5FF] '>
       <View className="items-center mx-4 ">
@@ -31,4 +31,4 @@ const HalalFood = () => {
   )
 }
 
-export default HalalFood
+export default halalFood

app/(tabs)/Halalfood.tsx

@@ -1,19 +1,40 @@
 import { Text, View } from "react-native";
+import getReminderId from "@/Utils/utils";
+import { getDailyReminder } from "@/Utils/datafetching";
+import { useState, useEffect } from "react";
+type Reminder = {
+  id: string
+  english: string
+  arabic: string
+  reference: string
+
+}
+const reminderId =  getReminderId();
+
 const AyahCard = () => {
+  const [ayah, setAyah] = useState<Reminder>()
+ 
+    useEffect(() => {
+    getDailyReminder(reminderId).then((data) => {
+      setAyah(data)
+    })
+  }, [])
+
+
+
+  
   return (
     <View className="flex flex-col rounded-xl my-4 justify-start text-start bg-slate-50 shadow-md shadow-slate-200 p-6 w-full ">
         <Text className="card-title text-[#2E046D] text-left pb-2">
           Ayah of the Day
         </Text>
         <Text className="card-text text-gray-700 py-2 justify-end ">
-        فَٱصْبِرْ عَلَىٰ مَا يَقُولُونَ وَسَبِّحْ بِحَمْدِ رَبِّكَ قَبْلَ طُلُوعِ ٱلشَّمْسِ وَقَبْلَ ٱلْغُرُوبِ
-
+          {ayah?.arabic}
         </Text>
         <Text className="card-text text-gray-700 py-2 justify-end ">
-        So be patient ˹O Prophet˺ with what they say. And glorify the praises of your Lord before sunrise and before sunset.
-         </Text>   
+        {ayah?.english}         </Text>   
          <Text className="card-text text-gray-400 pt-2">
-            Surah Qaf, Ayah 39
+         {ayah?.reference}
          </Text>
       </View>
   )

app/components/AyahCard.tsx

@@ -3,6 +3,8 @@ import {ChevronRight} from "lucide-react-native";
 import { fetchTodaysEvents } from "@/Utils/datafetching";
 import { useState, useEffect } from "react";
 import { Link } from "expo-router";
+import { useRouter } from 'expo-router';
+
 type EventInfoProps = {
   name: string
   date: string
@@ -17,6 +19,7 @@ const EventCard= () => {
       setEvents(data)
     })
   }, [])
+  const router = useRouter();
 
 
 
@@ -29,7 +32,7 @@ const EventCard= () => {
         {events.length > 0 ? "Today's Events" : "No events today"}
         </Text>
         <Link href="/events">
-          <Pressable>
+          <Pressable onPress={() => router.navigate('/events')} >
               <View className="flex flex-row items-center justify-end p-2 rounded bg-violet-100">
               <Text className="  text-[#5636A7]  ">All events </Text>
               <ChevronRight size={18} color="#5636A7" />

app/components/EventCard.tsx

@@ -40,11 +40,13 @@ const HalalfoodCard:React.FC<Props> = ({name, description, location, link, image
       <View className='flex flex-row '>
         <Text className="text-lg font-semibold text-[#5636A7]"> {name} </Text>
       </View>
-        <View className='flex flex-col justify-between w-full py-4 font-bold'>
-            <Text className="text-md  text-gray-600 py-2 ">{description} </Text>
-            <Text className="text-md  text-gray-500">Category: {category} </Text>
-            <Text className="text-md  text-gray-500">Method: {method} </Text>
-            <Text className="text-md  text-gray-500">Location: {location} </Text>
+        <View className='flex flex-col justify-between w-full py-2 font-bold'>
+            <Text className="text-md  text-gray-600  ">{description} </Text>
+            <View className='py-2'>
+              <Text className="text-md  text-gray-500">Category: {category} </Text>
+              <Text className="text-md  text-gray-500">Method: {method} </Text>
+              <Text className="text-md  text-gray-500">Location: {location} </Text>
+            </View>
            <View className='flex flex-row justify-end'>
             {link && <Pressable className="bg-[#5636A7] w-36 p-2  rounded-xl text-center mt-2 flex flex-row items-center justify-center" onPress={() => Linking.openURL(link)}>
                         <Text className="text-white text-center font-semibold ">Order now</Text>

app/components/HalalfoodCard.tsx

@@ -27,10 +27,11 @@ export const IconComponent:React.FC<ButtonProps> = ({icon, link, text}: ButtonPr
     <>
 
         <View className="items-center text-center">
-          <Link href={link as any}>
+          <Link href={link as any} asChild>
             <Pressable
             onPressIn={onPress}
             onPressOut={onPress}
+
             className={`items-center w-16 h-16 p-4 text-center shadow-md shadow-slate-200 bg-[#F9FAFB] justify-center  rounded-xl ${isPressed ? "bg-[#ededed]" : "bg-[#F9FAFB]"}`}>
                 {icon}
             </Pressable>

app/components/Icon.tsx

@@ -26,18 +26,19 @@ const PrayerCard = () => {
         <Text className="text-4xl font-bold text-white">6:00 AM</Text>
       </View>
 
-      <View className="" >
+      <View className="flex flex-row  justify-between" >
         <Text className="text-white ">
           in 1 hour 42 min
         </Text>
-      </View>
-      <Pressable>
+        <Pressable>
         <Link href="/prayertimes">
-        <View className="flex flex-row  justify-end ">
+        <View className=" ">
           <Text className="text-white underline">View all timings</Text>
         </View>
         </Link>
       </Pressable>
+      </View>
+     
      </LinearGradient> 
     </View>
   )