salat 3.3.1 → 4.1.0

package/dist/app.js

@@ -1,53 +1,13 @@
 #!/usr/bin/env node
 // Project's dependencies
-import { displayResult, getCityId, getCityName, getData, parsePrayerTimesFromResponse, } from "#utils";
-import chalk from "chalk";
-// Project's data
-import { BANNER, LOCAL_STORAGE_PATH } from "#constants";
-import citiesData from "./data/cities.json" with { type: "json" };
-// Setting up localStorage
-import { LocalStorage } from "node-localstorage";
-const args = process.argv;
+import { render } from "ink";
+import React from "react";
+import App from "./ui.js"; // Note the .js extension for ESM imports
+// Project's setup
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
-// Logging function
-const green = (msg) => console.log(chalk.green(msg));
-// Cast citiesData to City[] properly
-const cities = citiesData;
-const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
+const args = process.argv;
 const cityNameArg = args[2];
-const cityName = getCityName(cityNameArg, cities);
-// Convert string ID to number since getCityId returns number and getData expects number
-const cityId = getCityId(cityName, cities);
-const main = async () => {
-    // Printing a banner ('cause I'm cool and I can do it XD)
-    green(BANNER);
-    const storageKey = `${cityName.toLowerCase()}_${new Date().toLocaleDateString()}`;
-    let item = localStorage.getItem(storageKey);
-    // Disable localStorage for local development
-    if (process.env.NODE_ENV === "development") {
-        console.log("development mode: localStorage is disabled");
-        item = null;
-    }
-    let prayers = null;
-    if (item) {
-        prayers = JSON.parse(item);
-    }
-    else {
-        try {
-            const data = await getData(cityId);
-            prayers = parsePrayerTimesFromResponse(data);
-            localStorage.setItem(storageKey, JSON.stringify(prayers));
-        }
-        catch (ex) {
-            //TODO: Use a more descriptive error message
-            console.error("Something went wrong!");
-            console.log(ex);
-            return;
-        }
-    }
-    console.clear();
-    displayResult(prayers, cityName);
+const main = () => {
+    render(React.createElement(App, { cityNameArg }));
 };
-(async () => {
-    await main();
-})();
+main();

package/dist/ui.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LOCAL_STORAGE_PATH } from "#constants";
+import { getCityId, getCityName, getData, getNextPrayer, parsePrayerTimesFromResponse, tConv24, } from "#utils";
+import { Box, Text, useApp } from "ink";
+import { useEffect, useState } from "react";
+// @ts-ignore
+import { format } from "date-fns";
+import { LocalStorage } from "node-localstorage";
+import citiesData from "./data/cities.json" with { type: "json" };
+const cities = citiesData;
+const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
+const App = ({ cityNameArg }) => {
+    const { exit } = useApp();
+    const [prayerTimes, setPrayerTimes] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [resolvedCityName, setResolvedCityName] = useState("");
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const name = getCityName(cityNameArg, cities);
+                setResolvedCityName(name);
+                const storageKey = `${name.toLowerCase()}_${format(new Date(), "yyyy-MM-dd")}`;
+                let item = localStorage.getItem(storageKey);
+                // Disable localStorage for local development
+                if (process.env.NODE_ENV === "development") {
+                    item = null;
+                }
+                if (item) {
+                    setPrayerTimes(JSON.parse(item));
+                }
+                else {
+                    const cityId = getCityId(name, cities);
+                    const data = await getData(cityId);
+                    const prayers = parsePrayerTimesFromResponse(data);
+                    setPrayerTimes(prayers);
+                    localStorage.setItem(storageKey, JSON.stringify(prayers));
+                }
+            }
+            catch (err) {
+                setError(err.message || "An error occurred");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [cityNameArg]);
+    useEffect(() => {
+        if (!loading && (prayerTimes || error)) {
+            // Small delay to ensure render happens
+            // Ink might need a tick to flush the output to stdout
+            const timer = setTimeout(() => {
+                exit();
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [loading, prayerTimes, error, exit]);
+    if (loading) {
+        return _jsx(Text, { children: "Loading prayer times..." });
+    }
+    if (error) {
+        return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+    }
+    if (!prayerTimes) {
+        return _jsx(Text, { color: "red", children: "Could not fetch prayer times." });
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83E\uDDED ", resolvedCityName, ", Morocco"] }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83D\uDCC5 ", format(new Date(), "PPPP")] }) }), prayerTimes && (_jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "Next Prayer: " }), _jsx(Text, { bold: true, children: getNextPrayer(prayerTimes, new Date()).prayer })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Time: " }), _jsx(Text, { children: tConv24(getNextPrayer(prayerTimes, new Date()).time) })] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "Remaining: " }), _jsx(Text, { color: "yellow", children: getNextPrayer(prayerTimes, new Date()).timeLeft })] })] })), _jsx(Box, { flexDirection: "column", children: Object.entries(prayerTimes).map(([prayer, time]) => {
+                    const isNext = prayer === getNextPrayer(prayerTimes, new Date()).prayer;
+                    return (_jsxs(Box, { children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: isNext ? "cyan" : "white", bold: isNext, children: prayer }) }), _jsx(Box, { marginRight: 2, children: _jsx(Text, { color: isNext ? "cyan" : "gray", children: "-->" }) }), _jsx(Text, { color: isNext ? "yellow" : "green", bold: isNext, children: tConv24(time) })] }, prayer));
+                }) })] }));
+};
+export default App;

package/dist/utils.js

@@ -1,15 +1,14 @@
 import { API_URL, DEFAULT_CITY, NOT_FOUND_ERROR } from "#constants";
-import chalk from "chalk";
+import { addDays, differenceInSeconds, format, parse } from "date-fns";
 import domino from "domino";
 import fetch from "node-fetch";
 import prayersData from "./data/prayers.json" with { type: "json" };
-const error = (msg) => console.error(chalk.red(msg));
 export const getCityName = (arg, cities) => {
     if (arg == null)
         return DEFAULT_CITY;
     const index = getCityIndex(arg, cities);
     if (index === -1) {
-        error(NOT_FOUND_ERROR);
+        console.error(NOT_FOUND_ERROR);
         return DEFAULT_CITY;
     }
     return arg;
@@ -44,22 +43,32 @@ export const parsePrayerTimesFromResponse = (response) => {
         return acc;
     }, {});
 };
-function tConv24(time24) {
-    const [hours, minutes] = time24.split(":");
-    const hour = Number(hours);
-    const formattedHour = hour % 12 || 12;
-    const formattedHourWithZero = (formattedHour + "").padStart(2, "0");
-    const formattedMinutes = minutes.padStart(2, "0");
-    const formattedTime = `${formattedHourWithZero}:${formattedMinutes}`;
-    const ampm = hour < 12 ? "AM" : "PM";
-    return `${formattedTime} ${ampm}`;
+export function tConv24(time24) {
+    const date = parse(time24, "HH:mm", new Date());
+    return format(date, "hh:mm a");
 }
-export const displayResult = (prayers, city) => {
-    if (!prayers)
-        return;
-    console.log(` 🧭 ${city}, Morocco\n\n 📆 ${new Date().toDateString()}\n`);
-    Object.keys(prayers).forEach((key) => {
-        console.log(` ${chalk.cyan(key.padEnd(7, " "))} --> ${chalk.green(tConv24(prayers[key]))}`);
+export function getNextPrayer(prayerTimes, now) {
+    const prayerNames = ["Fajr", "Chorouq", "Dhuhr", "Asr", "Maghrib", "Ishae"];
+    const prayersWithDates = prayerNames.map((name) => {
+        const time = prayerTimes[name];
+        const prayerDate = parse(time, "HH:mm", now);
+        return { name, date: prayerDate, time };
     });
-    console.log("\n");
-};
+    let next = prayersWithDates.find((p) => p.date > now);
+    if (!next) {
+        const firstPrayerName = prayerNames[0];
+        const firstTime = prayerTimes[firstPrayerName];
+        const tomorrowFajr = addDays(parse(firstTime, "HH:mm", now), 1);
+        next = { name: firstPrayerName, date: tomorrowFajr, time: firstTime };
+    }
+    const diffSec = differenceInSeconds(next.date, now);
+    const h = Math.floor(diffSec / 3600);
+    const m = Math.floor((diffSec % 3600) / 60);
+    const s = diffSec % 60;
+    const timeLeft = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return {
+        prayer: next.name,
+        time: next.time,
+        timeLeft,
+    };
+}

package/dist/utils.test.js

@@ -1,5 +1,6 @@
 import * as constants from '#constants';
-import { getCityId, getCityName, parsePrayerTimesFromResponse } from '#utils';
+import { getCityId, getCityName, getNextPrayer, parsePrayerTimesFromResponse } from '#utils';
+import { parseISO } from 'date-fns';
 import { describe, expect, it, vi } from 'vitest';
 // Mock cities data
 const mockCities = [
@@ -17,12 +18,14 @@ describe('utils', () => {
         });
         it('should return default city and log error if city does not exist', () => {
             // Spy on console.error using vitest
-            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
             expect(getCityName('UnknownCity', mockCities)).toBe(constants.DEFAULT_CITY);
             // We expect some error message to be logged. 
             // The actual implementation logs with chalk.red, so we just check it was called.
-            expect(consoleSpy).toHaveBeenCalled();
-            consoleSpy.mockRestore();
+            expect(consoleLogSpy.mock.calls.length + consoleErrorSpy.mock.calls.length).toBeGreaterThan(0);
+            consoleLogSpy.mockRestore();
+            consoleErrorSpy.mockRestore();
         });
         it('should be case insensitive', () => {
             expect(getCityName('casablanca', mockCities)).toBe('casablanca');
@@ -72,4 +75,42 @@ describe('utils', () => {
             expect(results).toHaveProperty('Dhuhr');
         });
     });
+    describe('getNextPrayer', () => {
+        const prayerTimes = {
+            Fajr: "05:30",
+            Chorouq: "07:00",
+            Dhuhr: "12:30",
+            Asr: "15:45",
+            Maghrib: "18:20",
+            Ishae: "19:50"
+        };
+        it('should return Fajr if current time is before Fajr', () => {
+            const now = parseISO('2026-02-07T04:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Fajr');
+            expect(result.time).toBe('05:30');
+            expect(result.timeLeft).toBe('01:30:00');
+        });
+        it('should return Dhuhr if current time is between Chorouq and Dhuhr', () => {
+            const now = parseISO('2026-02-07T10:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Dhuhr');
+            expect(result.time).toBe('12:30');
+            expect(result.timeLeft).toBe('02:30:00');
+        });
+        it('should return tomorrow Fajr if current time is after Ishae', () => {
+            const now = parseISO('2026-02-07T21:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Fajr');
+            expect(result.time).toBe('05:30');
+            // From 21:00 to 05:30 next day is 8 hours and 30 minutes
+            expect(result.timeLeft).toBe('08:30:00');
+        });
+        it('should handle seconds correctly in timeLeft', () => {
+            const now = parseISO('2026-02-07T12:29:45');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Dhuhr');
+            expect(result.timeLeft).toBe('00:00:15');
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "salat",
-  "version": "3.3.1",
+  "version": "4.1.0",
   "imports": {
     "#*": "./dist/*.js"
   },
@@ -12,10 +12,12 @@
   },
   "type": "module",
   "dependencies": {
-    "chalk": "^5.3.0",
+    "date-fns": "^4.1.0",
     "domino": "^2.1.6",
+    "ink": "^6.6.0",
     "node-fetch": "^3.3.2",
-    "node-localstorage": "^3.0.5"
+    "node-localstorage": "^3.0.5",
+    "react": "^19.2.4"
   },
   "scripts": {
     "dev": "node --no-warnings --loader ts-node/esm src/app.ts",
@@ -40,7 +42,8 @@
     "@types/node": "^25.2.1",
     "@types/node-fetch": "^2.6.13",
     "@types/node-localstorage": "^1.3.3",
-    "nodemon": "^3.1.0",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"

package/src/app.ts

@@ -1,72 +1,18 @@
 #!/usr/bin/env node
 
 // Project's dependencies
-import {
-  displayResult,
-  getCityId,
-  getCityName,
-  getData,
-  parsePrayerTimesFromResponse,
-} from "#utils";
-import chalk from "chalk";
+import { render } from "ink";
+import React from "react";
+import App from "./ui.js"; // Note the .js extension for ESM imports
 
-// Project's data
-import { BANNER, LOCAL_STORAGE_PATH } from "#constants";
-import { City, PrayerTimes } from "#types";
-import citiesData from "./data/cities.json" with { type: "json" };
-
-// Setting up localStorage
-import { LocalStorage } from "node-localstorage";
-
-const args = process.argv;
+// Project's setup
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 
-// Logging function
-const green = (msg: string) => console.log(chalk.green(msg));
-
-// Cast citiesData to City[] properly
-const cities: City[] = citiesData as City[];
-
-const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
-
+const args = process.argv;
 const cityNameArg = args[2];
-const cityName = getCityName(cityNameArg, cities);
-// Convert string ID to number since getCityId returns number and getData expects number
-const cityId = getCityId(cityName, cities);
-
-const main = async () => {
-  // Printing a banner ('cause I'm cool and I can do it XD)
-  green(BANNER);
-
-  const storageKey = `${cityName.toLowerCase()}_${new Date().toLocaleDateString()}`;
-  let item = localStorage.getItem(storageKey);
-
-  // Disable localStorage for local development
-  if (process.env.NODE_ENV === "development") {
-    console.log("development mode: localStorage is disabled");
-    item = null;
-  }
-  let prayers: PrayerTimes | null = null;
-
-  if (item) {
-    prayers = JSON.parse(item);
-  } else {
-    try {
-      const data = await getData(cityId);
-      prayers = parsePrayerTimesFromResponse(data);
-      localStorage.setItem(storageKey, JSON.stringify(prayers));
-    } catch (ex) {
-      //TODO: Use a more descriptive error message
-      console.error("Something went wrong!");
-      console.log(ex);
-      return;
-    }
-  }
 
-  console.clear();
-  displayResult(prayers, cityName);
+const main = () => {
+  render(React.createElement(App, { cityNameArg }));
 };
 
-(async () => {
-  await main();
-})();
+main();

package/src/types.ts

@@ -3,13 +3,12 @@ export interface City {
   name: string;
 }
 
-export interface PrayerDef {
-  prayer: string;
-}
+
+export type PrayerName = "Fajr"| "Chorouq"| "Dhuhr"| "Asr"| "Maghrib"| "Ishae"
 
 export interface PrayerTime {
-  prayer: string;
+  prayer: PrayerName;
   time: string;
 }
 
-export type PrayerTimes = Record<string, string>;
+export type PrayerTimes = Record<PrayerName, string>;

package/src/ui.tsx

@@ -0,0 +1,132 @@
+import { LOCAL_STORAGE_PATH } from "#constants";
+import { City, PrayerTimes } from "#types";
+import {
+    getCityId,
+    getCityName,
+    getData,
+    getNextPrayer,
+    parsePrayerTimesFromResponse,
+    tConv24,
+} from "#utils";
+import { Box, Text, useApp } from "ink";
+import React, { useEffect, useState } from "react";
+// @ts-ignore
+import { format } from "date-fns";
+import { LocalStorage } from "node-localstorage";
+import citiesData from "./data/cities.json" with { type: "json" };
+
+const cities: City[] = citiesData as City[];
+const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
+
+interface AppProps {
+	cityNameArg?: string;
+}
+
+const App: React.FC<AppProps> = ({ cityNameArg }) => {
+	const { exit } = useApp();
+	const [prayerTimes, setPrayerTimes] = useState<PrayerTimes | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [resolvedCityName, setResolvedCityName] = useState<string>("");
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				const name = getCityName(cityNameArg, cities);
+				setResolvedCityName(name);
+
+				const storageKey = `${name.toLowerCase()}_${format(new Date(), "yyyy-MM-dd")}`;
+				let item = localStorage.getItem(storageKey);
+
+				// Disable localStorage for local development
+				if (process.env.NODE_ENV === "development") {
+					item = null;
+				}
+
+				if (item) {
+					setPrayerTimes(JSON.parse(item));
+				} else {
+					const cityId = getCityId(name, cities);
+					const data = await getData(cityId);
+					const prayers = parsePrayerTimesFromResponse(data);
+					setPrayerTimes(prayers);
+					localStorage.setItem(storageKey, JSON.stringify(prayers));
+				}
+			} catch (err: any) {
+				setError(err.message || "An error occurred");
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+	}, [cityNameArg]);
+
+	useEffect(() => {
+		if (!loading && (prayerTimes || error)) {
+			// Small delay to ensure render happens
+			// Ink might need a tick to flush the output to stdout
+			const timer = setTimeout(() => {
+				exit();
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [loading, prayerTimes, error, exit]);
+
+	if (loading) {
+		return <Text>Loading prayer times...</Text>;
+	}
+
+	if (error) {
+		return <Text color="red">Error: {error}</Text>;
+	}
+
+	if (!prayerTimes) {
+		return <Text color="red">Could not fetch prayer times.</Text>;
+	}
+
+	return (
+		<Box flexDirection="column" padding={1}>
+			<Box marginBottom={1}>
+				<Text>🧭 {resolvedCityName}, Morocco</Text>
+			</Box>
+			<Box marginBottom={1}>
+				<Text>📅 {format(new Date(), "PPPP")}</Text>
+			</Box>
+			{prayerTimes && (
+				<Box borderStyle="round" borderColor="cyan" paddingX={1} marginBottom={1} flexDirection="column">
+					<Box>
+						<Text bold color="cyan">Next Prayer: </Text>
+						<Text bold>{getNextPrayer(prayerTimes, new Date()).prayer}</Text>
+					</Box>
+					<Box>
+						<Text>Time: </Text>
+						<Text>{tConv24(getNextPrayer(prayerTimes, new Date()).time)}</Text>
+					</Box>
+					<Box>
+						<Text color="yellow">Remaining: </Text>
+						<Text color="yellow">{getNextPrayer(prayerTimes, new Date()).timeLeft}</Text>
+					</Box>
+				</Box>
+			)}
+			<Box flexDirection="column">
+				{Object.entries(prayerTimes).map(([prayer, time]) => {
+					const isNext = prayer === getNextPrayer(prayerTimes!, new Date()).prayer;
+					return (
+						<Box key={prayer}>
+							<Box width={10}>
+								<Text color={isNext ? "cyan" : "white"} bold={isNext}>{prayer}</Text>
+							</Box>
+							<Box marginRight={2}>
+								<Text color={isNext ? "cyan" : "gray"}>--&gt;</Text>
+							</Box>
+							<Text color={isNext ? "yellow" : "green"} bold={isNext}>{tConv24(time)}</Text>
+						</Box>
+					);
+				})}
+			</Box>
+		</Box>
+	);
+};
+
+export default App;

package/src/utils.test.ts

@@ -1,7 +1,8 @@
 
 import * as constants from '#constants';
 import { City } from '#types';
-import { getCityId, getCityName, parsePrayerTimesFromResponse } from '#utils';
+import { getCityId, getCityName, getNextPrayer, parsePrayerTimesFromResponse } from '#utils';
+import { parseISO } from 'date-fns';
 import { describe, expect, it, vi } from 'vitest';
 
 // Mock cities data
@@ -23,14 +24,17 @@ describe('utils', () => {
 
         it('should return default city and log error if city does not exist', () => {
             // Spy on console.error using vitest
-            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+            const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
             
             expect(getCityName('UnknownCity', mockCities)).toBe(constants.DEFAULT_CITY);
             
             // We expect some error message to be logged. 
             // The actual implementation logs with chalk.red, so we just check it was called.
-            expect(consoleSpy).toHaveBeenCalled();
-            consoleSpy.mockRestore();
+            expect(consoleLogSpy.mock.calls.length + consoleErrorSpy.mock.calls.length).toBeGreaterThan(0);
+            
+            consoleLogSpy.mockRestore();
+            consoleErrorSpy.mockRestore();
         });
 
         it('should be case insensitive', () => {
@@ -89,4 +93,47 @@ describe('utils', () => {
             expect(results).toHaveProperty('Dhuhr');
         });
     });
+
+    describe('getNextPrayer', () => {
+        const prayerTimes = {
+            Fajr: "05:30",
+            Chorouq: "07:00",
+            Dhuhr: "12:30",
+            Asr: "15:45",
+            Maghrib: "18:20",
+            Ishae: "19:50"
+        };
+
+        it('should return Fajr if current time is before Fajr', () => {
+            const now = parseISO('2026-02-07T04:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Fajr');
+            expect(result.time).toBe('05:30');
+            expect(result.timeLeft).toBe('01:30:00');
+        });
+
+        it('should return Dhuhr if current time is between Chorouq and Dhuhr', () => {
+            const now = parseISO('2026-02-07T10:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Dhuhr');
+            expect(result.time).toBe('12:30');
+            expect(result.timeLeft).toBe('02:30:00');
+        });
+
+        it('should return tomorrow Fajr if current time is after Ishae', () => {
+            const now = parseISO('2026-02-07T21:00:00');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Fajr');
+            expect(result.time).toBe('05:30');
+            // From 21:00 to 05:30 next day is 8 hours and 30 minutes
+            expect(result.timeLeft).toBe('08:30:00');
+        });
+
+        it('should handle seconds correctly in timeLeft', () => {
+            const now = parseISO('2026-02-07T12:29:45');
+            const result = getNextPrayer(prayerTimes, now);
+            expect(result.prayer).toBe('Dhuhr');
+            expect(result.timeLeft).toBe('00:00:15');
+        });
+    });
 });

package/src/utils.ts

@@ -1,17 +1,16 @@
 import { API_URL, DEFAULT_CITY, NOT_FOUND_ERROR } from "#constants";
-import { City, PrayerDef, PrayerTimes } from "#types";
-import chalk from "chalk";
+import { City, PrayerName, PrayerTimes } from "#types";
+import { addDays, differenceInSeconds, format, parse } from "date-fns";
 import domino from "domino";
 import fetch from "node-fetch";
 import prayersData from "./data/prayers.json" with { type: "json" };
 
-const error = (msg: string) => console.error(chalk.red(msg));
 
 export const getCityName = (arg: string | undefined, cities: City[]): string => {
   if (arg == null) return DEFAULT_CITY;
   const index = getCityIndex(arg, cities);
   if (index === -1) {
-    error(NOT_FOUND_ERROR);
+    console.error(NOT_FOUND_ERROR);
     return DEFAULT_CITY;
   }
   return arg;
@@ -39,7 +38,7 @@ export const parsePrayerTimesFromResponse = (response: string): PrayerTimes => {
   const document = window.document;
   const tds = document.getElementsByTagName("td");
 
-  const prayers: (PrayerDef & { time?: string })[] = JSON.parse(
+  const prayers: { prayer: PrayerName; time?: string }[] = JSON.parse(
     JSON.stringify(prayersData)
   );
 
@@ -58,29 +57,46 @@ export const parsePrayerTimesFromResponse = (response: string): PrayerTimes => {
   }, {} as PrayerTimes);
 };
 
-function tConv24(time24: string): string {
-  const [hours, minutes] = time24.split(":");
-  const hour = Number(hours);
-  const formattedHour = hour % 12 || 12;
-  const formattedHourWithZero = (formattedHour + "").padStart(2, "0");
-  const formattedMinutes = minutes.padStart(2, "0");
-  const formattedTime = `${formattedHourWithZero}:${formattedMinutes}`;
-  const ampm = hour < 12 ? "AM" : "PM";
-  return `${formattedTime} ${ampm}`;
+
+export function tConv24(time24: string): string {
+  const date = parse(time24, "HH:mm", new Date());
+  return format(date, "hh:mm a");
 }
 
-export const displayResult = (
-  prayers: PrayerTimes | undefined | null,
-  city: string
-) => {
-  if (!prayers) return;
-  console.log(` 🧭 ${city}, Morocco\n\n 📆 ${new Date().toDateString()}\n`);
-  Object.keys(prayers).forEach((key) => {
-    console.log(
-      ` ${chalk.cyan(key.padEnd(7, " "))} --> ${chalk.green(
-        tConv24(prayers[key])
-      )}`
-    );
+export function getNextPrayer(
+  prayerTimes: PrayerTimes,
+  now: Date
+): { prayer: string; time: string; timeLeft: string } {
+  const prayerNames: PrayerName[] = ["Fajr", "Chorouq", "Dhuhr", "Asr", "Maghrib", "Ishae"];
+
+  const prayersWithDates = prayerNames.map((name) => {
+    const time = prayerTimes[name];
+    const prayerDate = parse(time, "HH:mm", now);
+    return { name, date: prayerDate, time };
   });
-  console.log("\n");
-};
+
+  let next = prayersWithDates.find((p) => p.date > now);
+
+  if (!next) {
+    const firstPrayerName = prayerNames[0];
+    const firstTime = prayerTimes[firstPrayerName];
+    const tomorrowFajr = addDays(parse(firstTime, "HH:mm", now), 1);
+    next = { name: firstPrayerName, date: tomorrowFajr, time: firstTime };
+  }
+
+  const diffSec = differenceInSeconds(next.date, now);
+  const h = Math.floor(diffSec / 3600);
+  const m = Math.floor((diffSec % 3600) / 60);
+  const s = diffSec % 60;
+
+  const timeLeft = `${String(h).padStart(2, "0")}:${String(m).padStart(
+    2,
+    "0"
+  )}:${String(s).padStart(2, "0")}`;
+
+  return {
+    prayer: next.name,
+    time: next.time,
+    timeLeft,
+  };
+}

package/tsconfig.json

@@ -13,7 +13,8 @@
     "baseUrl": "./",
     "paths": {
       "#*": ["./src/*.ts"]
-    }
+    },
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules"],