37 resolve issues

.github/workflows/preview.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
 
       - name: Install pnpm

Utils/api.tsx

@@ -91,7 +91,7 @@ export async function getNextPrayerTime(): Promise<NextPrayerResponse | null> {
     }
 
     //get fajr time for next day
-    if (nextPrayer == null) {
+    if (nextPrayer == null || "") {
       const { data: nextDayData, error: nextDayError } = await supabase
         .from("prayer_timings_month_days")
         .select("*")
@@ -114,24 +114,28 @@ export async function getNextPrayerTime(): Promise<NextPrayerResponse | null> {
         nextPrayer.time,
         nextPrayer.ampm
       );
-      elapsedTime = nextPrayerTimeMins - currentTimeMins;
+
       console.log("next prayer time is: ", nextPrayer);
-
+      const minsUntilMidnight = (24 * 60) - currentTimeMins;
+      elapsedTime = minsUntilMidnight + nextPrayerTimeMins;
       const result = { nextPrayer, elapsedTime };
 
       // Validate the result
       if (!validateNextPrayerResponse(result)) {
         throw new Error("Invalid next prayer response");
       }
+
 
       return result;
-    }
+
 
     return null;
+    }
   } catch (error) {
     console.error("Error in getNextPrayerTime:", error);
     throw error; // Re-throw to let React Query handle it
   }
+
 }
 
 export async function getPrayerTimingsForDay(
@@ -197,27 +201,27 @@ export const fetchEvents = async () => {
 };
 export const fetchTodaysEvents = async () => {
   const today = new Date();
-  const startOfDay = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
-  ).toISOString();
-  const datepart = startOfDay.split("T")[0];
-  const noon = datepart + "T12:00:00.000Z";
-  console.log(startOfDay);
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  const day = String(today.getDate()).padStart(2, '0');
+  const todayDate = `${year}-${month}-${day}`;
+
+  console.log('Fetching events for:', todayDate);
 
   const { data, error } = await supabase
     .from("events")
     .select("*")
     .eq("status", "published")
-    .eq("date", noon)
+    .gte("date", todayDate)
+    .lt("date", new Date(today.getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0])
     .order("created_at", { ascending: false });
 
-  console.log(data);
+  console.log('Today\'s events:', data);
+
   if (error) {
     throw error;
   }
-  return data;
+  return data || [];
 };
 
 export async function getImageByID(id: string) {

Utils/utils.tsx

@@ -18,9 +18,18 @@ export function timeToMinutes(timeString:string, ampm:string) {
     if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
       return -1;
     }
-    if(ampm == "PM") {
-        return 720 + hours * 60 + minutes
+    let hours24 = hours;
+    if (ampm === "AM") {
+      if (hours === 12) {
+        hours24 = 0; 
+      }
+    } else if (ampm === "PM") {
+      if (hours !== 12) {
+        hours24 = hours + 12; 
+      }
     }
+    const totalMinutes = hours24 * 60 + minutes;
+    console.log(`${timeString} ${ampm} = ${hours24}:${minutes.toString().padStart(2, '0')} = ${totalMinutes} mins`);
 
-    return hours * 60 + minutes;
+    return totalMinutes;
   }

app.config.ts

@@ -1,5 +1,4 @@
 import { ConfigContext, ExpoConfig } from "expo/config";
-import { version } from "./package.json";
 
 // Replace these with your EAS project ID and project slug.
 // You can find them at https://expo.dev/accounts/[account]/projects/[project].
@@ -26,7 +25,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     ...config,
     name: name,
-    version, // Automatically bump your project version with `npm version patch`, `npm version minor` or `npm version major`.
+    version:"1.0.0", // Automatically bump your project version with `npm version patch`, `npm version minor` or `npm version major`.
     slug: PROJECT_SLUG, // Must be consistent across all environments.
     orientation: "portrait",
     userInterfaceStyle: "automatic",
@@ -78,13 +77,13 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       [
         "expo-splash-screen",
         {
-          image: "./assets/images/app-logo1.png",
-          imageWidth: 250,
+          image: "./assets/images/MSA_Logo.png",
+          imageWidth: 200,
           resizeMode: "cover",
           backgroundColor: "#ffffff",
           dark: {
             image: "./assets/images/app-logo1.png",
-            imageWidth: 250,
+            imageWidth: 200,
             resizeMode: "cover",
             backgroundColor: "#191818"
           }

app/(tabs)/Halalfood.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   ScrollView,
   Text,
@@ -7,11 +7,12 @@ import {
   Linking,
   ActivityIndicator,
 } from 'react-native';
-import { Pressable } from 'react-native-gesture-handler';
+import { Pressable } from 'react-native';
 import { ChevronDown, ChevronUp, Search } from 'lucide-react-native';
 
 import HalalfoodCard from '../components/HalalFood/HalalfoodCard';
 import { fetchHalalDirectory } from '@/Utils/api';
+import { Screen } from "../components/Screen/Screen"
 
 type Place = {
   name: string;
@@ -114,6 +115,7 @@ const HalalFood = () => {
   );
 
   return (
+    <Screen>
     <ScrollView className="flex flex-col h-screen px-6 pt-4 bg-background">
       <View className="items-center mx-4">
         <View className="w-full flex-row items-center gap-3 py-3 border border-gray-300 dark:border-gray-600 bg-foreground rounded-xl shadow-md dark:shadow-none  px-3">
@@ -249,6 +251,8 @@ const HalalFood = () => {
         </View>
       </View>
     </ScrollView>
+    </Screen>
+
   );
 };
 

app/(tabs)/_layout.tsx

@@ -14,7 +14,7 @@ const {colorScheme, setColorScheme} = useColorScheme();
 
   return (
     <ThemeProvider value={theme}>
-    <Tabs screenOptions={{ tabBarActiveTintColor: theme.colors.primary
+    <Tabs screenOptions={{  tabBarActiveTintColor: theme.colors.primary
 , tabBarInactiveTintColor: '#A9A9A9', tabBarStyle: { backgroundColor: theme.colors.background }, headerStyle: { backgroundColor: theme.colors.background }, headerTitleStyle: { color: theme.colors.text }
     }}>
       <Tabs.Screen

app/(tabs)/events.tsx

@@ -1,39 +1,50 @@
 import { View, Text } from 'react-native'
-import React from 'react'
 import Event from '../components/Event/Event'
 import { ScrollView } from 'react-native'
 import { fetchEvents } from '@/Utils/api'
 import { useQuery } from '@tanstack/react-query'
 
+import { Screen } from "../components/Screen/Screen"
+
 const events = () => {
 
   const {data: events, isLoading, error} = useQuery({
     queryKey: ['events'],
     queryFn: fetchEvents,
   })
   if (isLoading) return (
-    <View className='h-screen px-6 pt-4 bg-background items-center justify-center'>
+   <Screen>
+   <View className='h-screen px-6 pt-4 bg-background items-center justify-center'>
       <Text className='text-lg mx-4'>Loading events...</Text>
     </View>
+    </Screen>
   )
   if (error) return (
-    <View className='h-screen px-6 pt-4 bg-background items-center justify-center'>
+    <Screen>
+      <View className='h-screen px-6 pt-4 bg-background items-center justify-center'>
       <Text className='text-lg mx-4'>Error loading events</Text>
     </View>
+    </Screen>
   )
   if (!events || events.length == 0 ) return (
-    <View className='h-screen px-6 pt-4 bg-background '>
+   <Screen> <View className='h-screen px-6 pt-4 bg-background '>
         <Text className="text-3xl font-bold text-primary pb-2 ">
           Announcements
         </Text>
       <Text className='text-lg mx-4 my-8 items-center justify-center text-textPrimary'>There are no events at the moment</Text>
     </View>
+    </Screen>
   )
 
+
+
+
   return (
+<Screen>     
     <ScrollView
-         className="flex flex-col  h-screen px-6 pt-4 bg-background "
-       >
+      className="flex-grow px-6 pt-4"
+      contentContainerStyle={{ paddingBottom: 24 }}
+    >
       <View className="items-center mx-4 ">
       <View className="flex flex-row justify-between w-full px-4 ">
         <Text className="text-3xl font-bold text-primary pb-2 ">
@@ -47,7 +58,9 @@ const events = () => {
       }
       </View>
       </View>
+
     </ScrollView>
+    </Screen> 
   )
 }
 

app/(tabs)/index.tsx

@@ -1,19 +1,20 @@
-import { Text, View, Pressable, ScrollView, SafeAreaView, Image } from "react-native";
+import { Text, View, ScrollView, Image } from "react-native";
 import { Clock3, Globe, MapPin } from "lucide-react-native";
 import MSA_Logo from "../../assets/images/MSA_Logo.png"
 import EventCard from "../components/EventCard/EventCard";
 import PrayerCard from "../components/PrayerCard/PrayerCard";
 import AyahCard from "../components/AyahCard/AyahCard";
-import * as Linking from 'expo-linking';
+import { Screen } from "../components/Screen/Screen"
 import IconComponent from "../components/Icon/Icon";
 import { useState } from "react";
 // import Push from "../PushNotifications";
+
 export default function Index() {
 
   const [isPressed, setIsPressed] = useState(false);
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <Screen >
       <ScrollView contentContainerStyle={{ paddingBottom: 24 }} className="px-6 pt-6">
         <View className="w-full">
           {/* Header with Donate Button */}
@@ -85,6 +86,6 @@ export default function Index() {
 
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </Screen>
   );
 }

app/(tabs)/prayertimes.tsx

@@ -10,14 +10,13 @@ import {
 } from "lucide-react-native";
 import { Pressable } from "react-native";
 import PrayerCard from "../components/PrayerCard/PrayerCard";
-import React, { useState } from "react";
+import  { useState } from "react";
 import PrayerTiming from "../components/PrayerTiming/PrayerTiming";
 import NotificationSettings from "../components/NotificationSettings/NotificationSettings";
 import NotificationDebug from "../components/NotificationDebug/NotificationDebug";
 import { getPrayerTimingsForDay } from "@/Utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { StatusBar } from "expo-status-bar";
-
+import { Screen } from "../components/Screen/Screen";
 const prayertimes = () => {
   const [isPressedInc, setIsPressedInc] = useState(false);
 
@@ -77,17 +76,21 @@ const prayertimes = () => {
 
   if (isLoading)
     return (
-      <View className="h-screen px-6 pt-4 bg-background items-center justify-center">
+      <Screen><View className="h-screen px-6 pt-4 bg-background items-center justify-center">
         <Text className="text-lg mx-4">Loading prayer times...</Text>
       </View>
+      </Screen>
     );
   if (error)
     return (
-      <View className="h-screen px-6 pt-4 bg-background items-center justify-center">
+     <Screen> <View className="h-screen px-6 pt-4 bg-background items-center justify-center">
         <Text className="text-lg mx-4">Error loading prayer times</Text>
       </View>
+      </Screen>
     );
   return (
+    <Screen>
+
     <ScrollView className="flex flex-col  h-screen px-6 pt-4 bg-background ">
       <View className="items-center p-2 rounded-xl bg-base-200 mb-2 ">
         <View className="flex flex-row items-center justify-between w-full bg-foreground rounded-xl ">
@@ -174,6 +177,7 @@ const prayertimes = () => {
         </View>
       </View>
     </ScrollView>
+    </Screen>
   );
 };
 

app/_layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import  { useEffect } from "react";
 import {
   StatusBar,
   View,
@@ -32,7 +32,7 @@ import "../global.css";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ButtonComponent } from "./components/ButtonComponent/ButtonComponent";
 import { Drawer } from "expo-router/drawer";
-import ScreenButtonComponent from "./components/ScreenButtonComponent/ScreenButtonComponent";
+import {ScreenButtonComponent} from "./components/ScreenButtonComponent/ScreenButtonComponent";
 import {
   useQuery,
   useMutation,
@@ -47,7 +47,7 @@ import {
   arePrayerNotificationsEnabled,
 } from "@/Utils/prayerNotifications";
 import { usePostHog, PostHogProvider } from 'posthog-react-native'
-
+import ThemeSection from "./components/ThemeSection/ThemeSection"
 const queryClient = new QueryClient();
 
 // Prevent the splash screen from auto-hiding before asset loading is complete
@@ -201,17 +201,17 @@ export default function RootLayout() {
                         />
                         <ButtonComponent
                           icon={<CircleUser size={20} color={iconColor} />}
-                          link="https://www.wlumsa.org/contact"
+                          link="https://www.wlumsa.org/guidebook"
                           text="Become a General Member"
                           type="2"
                         />
 
-                        <ButtonComponent
+                        {/* <ButtonComponent
                           icon={<Banknote size={20} color={iconColor} />}
                           link="https://www.wlumsa.org/contact"
                           text="Donate to the MSA"
                           type="2"
-                        />
+                        /> */}
                         <ButtonComponent
                           icon={<MessageCircle size={20} color={iconColor} />}
                           link="https://www.wlumsa.org/contact"
@@ -286,6 +286,7 @@ export default function RootLayout() {
                           link="https://www.youtube.com/@WLUMSA"
                         />
                       </View>
+                      <ThemeSection/>
                     </View>
                   </SafeAreaView>
                 </DrawerContentScrollView>