add prayer times

package.json

@@ -1,6 +1,6 @@
 {
   "name": "watcher",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": false,
   "homepage": "https://gamingumar.com/watcher",
   "dependencies": {

src/App.js

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { create } from "apisauce";
 import { GpuBlock } from "./Components/GpuBlock";
 import { Sunrise } from "./Components/Sunrise";
+import { PrayerTimes } from "./Components/PrayerTimes";
 
 const card1 = "http://192.168.1.56:4067/summary";
 const card3 = "http://192.168.1.56:4069/summary";
@@ -111,6 +112,8 @@ function App() {
           )}
           <Sunrise />
 
+          <PrayerTimes />
+
         {/* <GpuBlock gpu={gpu1} title="RTX 3080-OC" />
         <GpuBlock gpu={gpu3} title="RTX 3070-OC" />
         <GpuBlock gpu={gpu2} title="RTX 3070-EG" /> */}

src/Components/PrayerTimes.js

@@ -0,0 +1,69 @@
+/*
+ * File: PrayerTimes.js
+ * Project: watcher
+ * File Created: Saturday, 22nd April 2023 7:41:41 pm
+ * Author: Umar Aamer ([email protected])
+ * -----
+ * Last Modified: Saturday, 22nd April 2023 7:41:42 pm
+ * -----
+ * Copyright 2020 - 2023 While Geek, https://umar.tech
+ */
+import React, { useState, useEffect } from "react";
+import useLocation from "../hooks/useLocation";
+
+export const PrayerTimes = () => {
+  const [prayerTimes, setPrayerTimes] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { latitude, longitude } = useLocation();
+
+  const today = new Date();
+
+  const year = today.getFullYear();
+
+  const month = today.getMonth() + 1;
+
+  const date = today.getDate();
+
+  useEffect(() => {
+    const fetchPrayerTimes = async () => {
+      try {
+        const response = await fetch(
+          `https://api.aladhan.com/v1/calendar/${year}/${month}?latitude=${latitude}&longitude=${longitude}&method=1`
+        );
+
+        const data = await response.json();
+
+        const todayPrayerData = data.data[date - 1].timings;
+
+
+        const formattedData = [];
+
+        for (let key in todayPrayerData) {
+          formattedData.push({
+            key,
+            value: todayPrayerData[key],
+          });
+        }
+
+        setPrayerTimes(formattedData);
+        setIsLoading(false);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchPrayerTimes();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading prayer times...</div>;
+  }
+
+  return (
+    <div>
+      <h2>
+      {prayerTimes[0].key} - {prayerTimes[0].value}</h2>
+    </div>
+  );
+};

src/Components/Sunrise.js

@@ -11,61 +11,32 @@
 import { create } from "apisauce";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
+import useLocation from "../hooks/useLocation";
 
 const api = create({
   baseURL: "",
   headers: { Accept: "application/vnd.github.v3+json" },
 });
 
 export const Sunrise = () => {
-  const [loading, setLoading] = useState(true);
-
   const [data, setData] = useState(null);
 
-  const [coords, setCoords] = useState({
-    lat: "33.6461432",
-    lng: "73.0523224",
-  });
-
-  const _onSuccess = (position) => {
-    const lat = position.coords.latitude;
-    const lng = position.coords.longitude;
-
-    setCoords({
-      lat,
-      lng,
-    });
-
-    setLoading(false);
-  };
-
-  const _onError = () => {
-    setLoading(false);
-  };
+  const location = useLocation()
 
   // fetch sunrise / sunset
   const _fetchData = async () => {
     let res = await api.get(
-      `https://api.sunrise-sunset.org/json?lat=${coords.lat}&lng=${coords.lng}&date=today`
+      `https://api.sunrise-sunset.org/json?lat=${location.latitude}&lng=${location.longitude}&date=today`
     );
 
     if (res.ok) {
       setData(res.data.results);
     }
   };
 
-  useEffect(() => {
-    if (!navigator.geolocation) {
-      // status.textContent = 'Geolocation is not supported by your browser';
-    } else {
-      // status.textContent = 'Locating…';
-      navigator.geolocation.getCurrentPosition(_onSuccess, _onError);
-    }
-  }, []);
-
   useEffect(() => {
     _fetchData();
-  }, [coords]);
+  }, [location]);
 
   if (!data) {
     return null;

src/config.js

@@ -0,0 +1,16 @@
+/*
+ * File: config.js
+ * Project: watcher
+ * File Created: Saturday, 22nd April 2023 9:28:19 pm
+ * Author: Umar Aamer ([email protected])
+ * -----
+ * Last Modified: Saturday, 22nd April 2023 9:28:20 pm
+ * -----
+ * Copyright <<year>> - 2023 WhileGeek, https://umar.tech
+ */
+export const config = {
+  coordinates: {
+    lat: "33.6461432",
+    lng: "73.0523224",
+  }
+}

src/hooks/useLocation.js

@@ -0,0 +1,41 @@
+/*
+ * File: useLocation.js
+ * Project: watcher
+ * File Created: Saturday, 22nd April 2023 9:29:15 pm
+ * Author: Umar Aamer ([email protected])
+ * -----
+ * Last Modified: Saturday, 22nd April 2023 9:29:15 pm
+ * -----
+ * Copyright <<year>> - 2023 WhileGeek, https://umar.tech
+ */
+import { useState, useEffect } from 'react';
+import { config } from '../config';
+
+const useLocation = () => {
+  const [location, setLocation] = useState({
+    latitude: config.coordinates.lat,
+    longitude: config.coordinates.lng,
+  });
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        position => {
+          setLocation({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude
+          });
+        },
+        error => {
+          console.error(error);
+        }
+      );
+    } else {
+      console.error('Geolocation is not supported by this browser.');
+    }
+  }, []);
+
+  return location;
+};
+
+export default useLocation;