Untitled
unknown
plain_text
a year ago
5.3 kB
5
Indexable
import React, { useEffect, useState } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import { useStore } from '../utils/state'; import { url } from '../utils/config'; function PrayerTimeService() { const setData = useStore(state => state.setPrayerTimes); const setLoading = useStore(state => state.setLoading); const [currentSecond, setCurrentSecond] = useState("0"); useEffect(() => { fetch(url) .then((resp) => resp.json()) .then((json) => createPrayerList(json)) .then((test) => setData(test)) .catch((error) => console.error(error)) .finally(() => setLoading(false)); const startTime = () => { let dateNow = new Date(); setCurrentSecond(dateNow.getSeconds()); //console.log("Repetition...") }; let interval = setInterval(() => startTime(), 1000); return () => { clearInterval(interval); }; }, []); function formatTime(seconds) { const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const remainingSeconds = seconds % 60; const testResult = hours + "h " + minutes + "m " + remainingSeconds + "s"; //console.log(testResult) return `${hours}h ${minutes}m ${remainingSeconds}s`; } function calculateRemainingSeconds(data, item) { const dateNow = new Date(); const dateTarget = new Date(); dateTarget.setHours(data[item].split(":")[0]) dateTarget.setMinutes(data[item].split(":")[1]) const targetHour = dateTarget.getHours(); // Set your target hour here (24-hour format) const targetMinute = dateTarget.getMinutes(); // Set your target minute here const currentHour = dateNow.getHours(); const currentMinute = dateNow.getMinutes(); const currentS = currentSecond; let testResult = ( (targetHour - currentHour) * 3600 + (targetMinute - currentMinute) * 60 - currentS ); console.log("currentSecond: " + formatTime(testResult)) return formatTime(testResult); } const getCurrentNextPrayer = data => { let currentPrayer = ""; let nextPrayer = ""; const dateNow = new Date(); const dateTarget = new Date(); for (let item in data) { if (item !== "date") { dateTarget.setHours(data[item].split(":")[0]) dateTarget.setMinutes(data[item].split(":")[1]) if (dateNow.getTime() < dateTarget.getTime()) { //Next Prayer found, and loop break nextPrayer = item; break; } //Previous Prayer found currentPrayer = item; } } //console.log("currentPray: " + currentPrayer + " Next Pray: " + nextPrayer) return [currentPrayer, nextPrayer]; } function createPrayerList(data) { let prayerList = []; let currentAndNextPrayer = getCurrentNextPrayer(data); let currentPrayer = currentAndNextPrayer[0]; let nextPrayer = currentAndNextPrayer[1]; for (let item in data) { if (item !== "date") { if (item == currentPrayer && item !== "terbit") { //<Text>{calculateRemainingSeconds(data, item)}</Text> prayerList.push( <View style={styles.itemCurrent}> <Text>{item} {data[item]}</Text> </View> ) } else if (item == nextPrayer && item !== "terbit") { //calculateRemainingSeconds(data, item); prayerList.push( <View style={styles.itemNext}> <Text>{currentSecond}</Text> <Text>{item} {data[item]}</Text> </View> ) } else { prayerList.push( <View style={styles.item}> <Text>{item} {data[item]}</Text> </View> ) } } } console.log("currentPray: " + currentPrayer + " Next Pray: " + nextPrayer) return prayerList; } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "grey", padding: 10, }, boxList: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "grey", padding: 10, }, title: { fontSize: 30, fontWeight: "bold", }, itemCurrent: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, itemNext: { backgroundColor: 'darkyellow', padding: 20, marginVertical: 8, marginHorizontal: 16, }, item: { backgroundColor: 'darkgrey', padding: 10, marginVertical: 8, marginHorizontal: 16, }, }); export default PrayerTimeService;
Editor is loading...
Leave a Comment