notification and timer

Author: Advik-Gupta

package.json

@@ -31,6 +31,7 @@
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "firebase": "^12.3.0",
     "geist": "^1.3.0",
     "lucide-react": "^0.437.0",
     "next": "^14.2.4",

pnpm-lock.yaml

@@ -0,0 +1,72 @@
+import { handleAPIError } from "@/lib/error";
+import api from ".";
+
+export interface GetTimeResponse {
+  server_time: string;
+  round_start_time: string;
+  round_end_time: string;
+}
+
+export interface SetTimeParams {
+  round: string;
+  time: string;
+}
+
+export interface UpdateTimeParams {
+  duration: number;
+}
+
+export interface StartRoundResponse {
+  success: boolean;
+  round: number;
+}
+
+/**
+ * Fetch the current round and server times.
+ */
+export async function getTime(): Promise<GetTimeResponse | null> {
+  try {
+    const response = await api.get<GetTimeResponse>("/GetTime");
+    return response.data;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
+
+/**
+ * Set the end time for a specific round.
+ */
+export async function setTime(
+  data: SetTimeParams,
+): Promise<{ success: boolean }> {
+  try {
+    const response = await api.post<{ success: boolean }>("/SetTime", data);
+    return response.data;
+  } catch (e) {
+    throw handleAPIError(e);
+  }
+}
+
+/**
+ * Update the remaining time of the current round.
+ */
+export async function updateTime(data: UpdateTimeParams): Promise<void> {
+  try {
+    await api.post("/UpdateTime", data);
+  } catch (e) {
+    throw handleAPIError(e);
+  }
+}
+
+/**
+ * Start a new round. Increments internal round counter and sets start times.
+ */
+export async function startRound(): Promise<StartRoundResponse> {
+  try {
+    const response = await api.post<StartRoundResponse>("/StartRound");
+    return response.data;
+  } catch (e) {
+    throw handleAPIError(e);
+  }
+}

src/api/timer.ts

@@ -1,5 +1,6 @@
 "use client";
 import { getLeaderboard, type LeaderboardUser } from "@/api/users";
+import NotificationsSender from "@/components/NotificationsSender";
 import Round from "@/components/round";
 import { useQuery } from "@tanstack/react-query";
 
@@ -21,6 +22,13 @@ function Dashboard() {
         <Round />
       </div>
 
+      <div className="s-sling m-3 mt-10 text-center text-xl font-semibold">
+        Notifications
+      </div>
+      <div className="flex w-full justify-center text-black">
+        <NotificationsSender />
+      </div>
+
       <div className="s-sling m-3 mt-10 text-center text-xl font-semibold">
         Leaderboard
       </div>

src/app/dashboard/page.tsx

@@ -1,10 +1,247 @@
 "use client";
 
+import {
+  getTime,
+  GetTimeResponse,
+  setTime,
+  SetTimeParams,
+  startRound,
+  updateTime,
+  UpdateTimeParams,
+} from "@/api/timer";
+import { useEffect, useState } from "react";
+import { FaPlay, FaPlus, FaStopCircle } from "react-icons/fa";
+
 function Timer() {
+  const [selectedRound, setSelectedRound] = useState("1");
+  const [isRunning, setIsRunning] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [timerData, setTimerData] = useState<GetTimeResponse | null>(null);
+  const [remainingSeconds, setRemainingSeconds] = useState(0);
+  const [duration, setDuration] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+  const [addTimeValue, setAddTimeValue] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  async function fetchTimer() {
+    const data = await getTime();
+    if (data) {
+      setTimerData(data);
+      const now = new Date(data.server_time).getTime();
+      const end = new Date(data.round_end_time).getTime();
+      const diff = Math.max(0, Math.floor((end - now) / 1000));
+      setRemainingSeconds(diff);
+    }
+  }
+
+  useEffect(() => {
+    let tick: NodeJS.Timer;
+    if (isRunning) {
+      tick = setInterval(() => {
+        setRemainingSeconds((prev) => Math.max(0, prev - 1));
+      }, 1000);
+    }
+    return () => clearInterval(tick);
+  }, [isRunning]);
+
+  useEffect(() => {
+    let sync: NodeJS.Timer;
+    if (isRunning) {
+      void fetchTimer();
+      sync = setInterval(() => {
+        void fetchTimer();
+      }, 120_000);
+    }
+    return () => clearInterval(sync);
+  }, [isRunning]);
+
+  const getDurationInSeconds = (d: typeof duration) =>
+    d.hours * 3600 + d.minutes * 60 + d.seconds;
+
+  async function handleSetTime() {
+    const seconds = getDurationInSeconds(duration);
+    const payload: SetTimeParams = {
+      round: selectedRound,
+      time: seconds.toString(),
+    };
+    await setTime(payload);
+    void fetchTimer();
+  }
+
+  async function handleStartRound() {
+    setIsStarting(true);
+    await startRound();
+    setIsRunning(true);
+    setIsStarting(false);
+    void fetchTimer();
+  }
+
+  async function handleAddTime() {
+    const seconds =
+      addTimeValue.hours * 3600 +
+      addTimeValue.minutes * 60 +
+      addTimeValue.seconds;
+    const payload: UpdateTimeParams = { duration: seconds };
+    await updateTime(payload);
+    void fetchTimer();
+    setAddTimeValue({ hours: 0, minutes: 0, seconds: 0 });
+  }
+
+  function formatTime(sec: number) {
+    const h = Math.floor(sec / 3600)
+      .toString()
+      .padStart(2, "0");
+    const m = Math.floor((sec % 3600) / 60)
+      .toString()
+      .padStart(2, "0");
+    const s = (sec % 60).toString().padStart(2, "0");
+    return `${h}:${m}:${s}`;
+  }
+
   return (
-    <div className="min-h-screen text-white">
-      <h1 className="text-2xl font-bold">Timer</h1>
-      <p>Hi from Timer</p>
+    <div className="flex min-h-screen flex-col items-center justify-center p-4 text-white">
+      <h1 className="mb-8 text-3xl font-bold">Timer</h1>
+
+      <div className="flex w-full max-w-lg flex-col items-center gap-6 rounded-xl bg-gray-800 p-8">
+        {/* Round Selection + Duration */}
+        <div className="flex w-full items-center gap-3">
+          <select
+            className="w-28 rounded-lg bg-gray-700 p-2 text-white"
+            value={selectedRound}
+            onChange={(e) => setSelectedRound(e.target.value)}
+          >
+            <option value="1">Round 1</option>
+            <option value="2">Round 2</option>
+            <option value="3">Round 3</option>
+          </select>
+
+          {/* Duration Inputs */}
+          <div className="flex items-center gap-1">
+            <input
+              type="number"
+              min={0}
+              placeholder="HH"
+              className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+              value={duration.hours}
+              onChange={(e) =>
+                setDuration({ ...duration, hours: Number(e.target.value) })
+              }
+            />
+            <span>:</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="MM"
+              className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+              value={duration.minutes}
+              onChange={(e) =>
+                setDuration({ ...duration, minutes: Number(e.target.value) })
+              }
+            />
+            <span>:</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="SS"
+              className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+              value={duration.seconds}
+              onChange={(e) =>
+                setDuration({ ...duration, seconds: Number(e.target.value) })
+              }
+            />
+          </div>
+
+          <button
+            className="ml-2 whitespace-nowrap rounded-lg bg-blue-600 px-4 py-1 text-center text-white transition hover:bg-blue-500"
+            onClick={handleSetTime}
+          >
+            Set Time
+          </button>
+        </div>
+
+        {/* Timer Display + Start/Stop */}
+        <div className="flex w-full items-center justify-between gap-4">
+          <div className="font-mono text-4xl">
+            {formatTime(remainingSeconds)}
+          </div>
+          <button
+            disabled={isStarting}
+            className={`rounded-lg px-4 py-2 transition ${
+              isStarting
+                ? "cursor-not-allowed border-gray-500 bg-gray-500"
+                : isRunning
+                  ? "border-red-600 bg-red-600 hover:bg-red-500"
+                  : "border-green-500 bg-green-500 hover:bg-green-400"
+            }`}
+            onClick={handleStartRound}
+          >
+            {isStarting ? (
+              "Starting..."
+            ) : isRunning ? (
+              <FaStopCircle size={20} />
+            ) : (
+              <FaPlay size={20} />
+            )}
+          </button>
+        </div>
+
+        {/* Add Time Section */}
+        <div className="flex w-full items-center justify-center gap-2">
+          <input
+            type="number"
+            min={0}
+            placeholder="HH"
+            className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+            value={addTimeValue.hours}
+            onChange={(e) =>
+              setAddTimeValue({
+                ...addTimeValue,
+                hours: Number(e.target.value),
+              })
+            }
+          />
+          <span>:</span>
+          <input
+            type="number"
+            min={0}
+            placeholder="MM"
+            className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+            value={addTimeValue.minutes}
+            onChange={(e) =>
+              setAddTimeValue({
+                ...addTimeValue,
+                minutes: Number(e.target.value),
+              })
+            }
+          />
+          <span>:</span>
+          <input
+            type="number"
+            min={0}
+            placeholder="SS"
+            className="w-16 rounded-lg bg-gray-700 p-2 text-center font-mono text-white"
+            value={addTimeValue.seconds}
+            onChange={(e) =>
+              setAddTimeValue({
+                ...addTimeValue,
+                seconds: Number(e.target.value),
+              })
+            }
+          />
+          <button
+            className="flex items-center justify-center rounded-lg bg-gray-700 p-3 hover:bg-gray-600"
+            onClick={handleAddTime}
+          >
+            <FaPlus />
+          </button>
+        </div>
+      </div>
     </div>
   );
 }