nurmuhammet/umra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor PrayerTimeCard component to improve remaining time calculation and enhance background color in HomeScreen for better visibility. Added View import in _layout.tsx for layout adjustments.

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-08-20 18:13:32 +05:00
parent 02d23507d2
commit 1ab0c85ece
3 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/PrayerTimeCard.tsx
View File

@@ -4,6 +4,7 @@ import Colors from '@/constants/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { getPrayerTimes, cities } from '@/utils/prayerTimeCalculator';
import i18n from '@/i18n';
import { createIconSetFromFontello } from 'react-native-vector-icons';
type Prayer = {
name: string;
@@ -33,50 +34,60 @@ export default function PrayerTimeCard() {
time: times[key] || '-----',
icon: prayerIconMapping[key],
}));
setPrayerTimes(prayers);
// Find next prayer and calculate remaining time
const now = new Date();
let nextPrayerInfo = null;
for (const prayer of prayers) {
const [hours, minutes] = prayer.time.split(':').map(Number);
const prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
if (prayerDate > now) {
nextPrayerInfo = { name: prayer.name, time: prayer.time };
break;
}
}
if (!nextPrayerInfo && prayers.length > 0) {
// If all prayers for today have passed, next prayer is Fajr of tomorrow
nextPrayerInfo = { name: prayers[0].name, time: prayers[0].time };
}
setNextPrayer(nextPrayerInfo);
}, [selectedCity]);
useEffect(() => {
if (!nextPrayer) return;
const interval = setInterval(() => {
const now = new Date();
const [hours, minutes] = nextPrayer.time.split(':').map(Number);
let prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
if (prayerDate < now) {
prayerDate.setDate(prayerDate.getDate() + 1);
}
const diff = prayerDate.getTime() - now.getTime();
const h = Math.floor(diff / (1000 * 60 * 60));
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
setRemainingTime(`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
calculateRemainingTime();
}, 1000);
const calculateRemainingTime = () => {
const now = new Date();
let nextPrayerInfo: { name: string; time: string } | null = null;
for (const prayer of prayers) {
if (prayer.time === '-----') continue;
const [hours, minutes] = prayer.time.split(':').map(Number);
const prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
if (prayerDate > now) {
nextPrayerInfo = { name: prayer.name, time: prayer.time };
break;
}
}
if (!nextPrayerInfo && prayers.length > 0) {
const firstPrayer = prayers.find(p => p.time !== '-----');
if (firstPrayer) {
nextPrayerInfo = { name: firstPrayer.name, time: firstPrayer.time };
}
}
setNextPrayer(current => {
if (current?.name === nextPrayerInfo?.name) return current;
return nextPrayerInfo;
});
if (nextPrayerInfo) {
const [hours, minutes] = nextPrayerInfo.time.split(':').map(Number);
let prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
if (prayerDate < now) {
prayerDate.setDate(prayerDate.getDate() + 1);
}
const diff = prayerDate.getTime() - now.getTime();
const h = Math.floor(diff / (1000 * 60 * 60));
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
setRemainingTime(`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
} else {
setRemainingTime('');
}
}
calculateRemainingTime();
return () => clearInterval(interval);
}, [nextPrayer]);
}, [selectedCity]);
return (
<ImageBackground