Issue 1 create landing page

client/src/components/task_form.tsx

@@ -1,4 +1,4 @@
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 
 import { TimeInput } from "@/components/time_input";
 import { TopicInput } from "@/components/topic_input";

client/src/components/ui/countdown.tsx

@@ -0,0 +1,59 @@
+import React, { ChangeEvent, useEffect,useState } from "react";
+
+import Timer from "./timer";
+
+interface Timed {
+  taskTime: string;
+}
+
+// in future use task data as input
+
+const Countdown = ({ taskTime }: Timed) => {
+  const [timeRemaining, setTimeRemaining] = useState(0);
+  const [completed, setCompleted] = useState(false);
+
+  const completeTask = (event : ChangeEvent<HTMLInputElement>) => {
+    // send post request to update db
+    setCompleted(event.target.checked);
+  }
+
+  useEffect(() => {
+    if (taskTime) {
+      const countdownInterval = setInterval(() => {
+        const [eventHours, eventMins, eventSec] = taskTime
+          .split(":")
+          .map(Number);
+        const d = new Date();
+        let remainingTime =
+          (eventHours - d.getHours()) * 60 * 60 +
+          (eventMins - d.getMinutes()) * 60 +
+          (eventSec - d.getSeconds());
+
+        if (remainingTime <= 0) {
+          remainingTime = 0;
+          clearInterval(countdownInterval);
+        }
+
+        setTimeRemaining(remainingTime);
+      }, 1000);
+
+      return () => clearInterval(countdownInterval);
+    }
+  }, [taskTime, timeRemaining]);
+
+  return (
+    <>
+      {timeRemaining > 0 ? (
+        <div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
+          <h1 className="p-2 font-sans">TIME LEFT</h1>
+          <div>{Timer(timeRemaining)}</div>
+          <input type="checkbox" onChange={completeTask}></input>
+        </div>
+      ) : (
+        <div></div>
+      )}
+    </>
+  );
+};
+
+export default Countdown;

client/src/components/ui/currentTask.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+
+import Countdown from "./countdown";
+import TimeDisplay from "./timeDisplay";
+
+interface Task {
+  id: number;
+  start_time: string;
+  end_time: string;
+}
+
+interface Tasks {
+  tasks: Task[];
+}
+
+const CurrentTask = ({ tasks }: Tasks) => {
+  const [currentTasks, setCurrentTasks] = useState<Task[]>([]);
+  const [currentTask, setCurrentTask] = useState<Task>(
+    {
+      id : 1,
+      start_time : "00:00:00",
+      end_time : "00:00:00"
+    }
+  );
+
+  useEffect(() => {
+    function getCurrentTask() {
+      setCurrentTasks([]);
+      tasks.forEach((task) => {
+        const [startHours, startMins, startSec] = task.start_time
+          .split(":")
+          .map(Number);
+        const [endHours, endMins, endSec] = task.end_time
+          .split(":")
+          .map(Number);
+
+        const d = new Date();
+        const start_time = startHours * 60 * 60 + startMins * 60 + startSec;
+        const end_time = endHours * 60 * 60 + endMins * 60 + endSec;
+        const cur_time =
+          d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
+        console.log(
+          startHours,
+          " ",
+          endHours,
+          " ",
+          endHours,
+          " ",
+          endMins,
+          " ",
+          d.getHours(),
+          " ",
+          d.getMinutes(),
+        );
+        console.log(start_time, " ", end_time, " ", cur_time);
+
+        if (start_time <= cur_time && end_time >= cur_time) {
+          setCurrentTasks((prevTasks) => [...prevTasks, task]);
+        }
+      });
+      setCurrentTask(currentTasks[0]);
+    }
+
+    getCurrentTask();
+  }, [tasks]);
+
+  const updateTask = (status : string) => {
+    if (status == "finished") {
+      setCurrentTask(currentTasks[0]);
+    }
+  }
+
+  return (
+    <>
+      <ul>
+        {currentTasks.length <= 0 ? (
+          <>
+            <div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
+              <h1 className="p-2 font-sans">NO CURRENT TASKS</h1>
+              <div>MAKE ONE?</div>
+            </div>
+          </>
+        ) : (
+          <>
+            {currentTasks.map((task: Task) => (
+              <li key={task.id}>
+                <Countdown taskTime={task.end_time} />
+              </li>
+            ))}
+          </>
+        )}
+      </ul>
+      <div>
+        {currentTasks.length > 0 ? (
+          <TimeDisplay statusSignal={updateTask} end_time={currentTasks[0].end_time} />
+        ):(
+          <></>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CurrentTask;

client/src/components/ui/logout.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+  const router = useRouter();
+  function logout() {
+    localStorage.removeItem("access");
+    localStorage.removeItem("refresh");
+    localStorage.removeItem("user_id");
+
+    router.push("/login");
+  }
+
+  return (
+    <button
+      onClick={logout}
+      className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white"
+    >
+      Logout
+    </button>
+  );
+}

client/src/components/ui/navbar.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { LogoutButton } from "@/components/ui/logout";
+
+export function Navbar() {
+  return (
+    <nav className="relative bg-indigo-800 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div className="relative flex h-16 items-center justify-between">
+          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+            <div className="hidden sm:ml-6 sm:block">
+              <div className="flex space-x-4">
+                <a
+                  href="#"
+                  aria-current="page"
+                  className="rounded-md bg-gray-950/50 px-3 py-2 text-sm font-medium text-white"
+                >
+                  Tasks
+                </a>
+                <a
+                  href="#"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white"
+                >
+                  Timetable
+                </a>
+                <a
+                  href="#"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white"
+                >
+                  Focus
+                </a>
+                <LogoutButton />
+              </div>
+            </div>
+          </div>
+          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div>
+        </div>
+      </div>
+    </nav>
+  );
+}

client/src/components/ui/taskDisplay.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function TaskDisplay(task_name: string) {
+  return (
+    <div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
+      <h1 className="mb-2 font-inter text-4xl font-semibold">Current Focus</h1>
+      <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+        {task_name}
+      </div>
+    </div>
+  );
+}

client/src/components/ui/timeDisplay.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+
+import Timer from "./timer";
+
+interface TimeDisplayProps {
+  statusSignal: (data: string) => void;
+  time: string;
+  current: boolean;
+}
+
+export default function TimeDisplay({
+  statusSignal,
+  time,
+  current,
+}: TimeDisplayProps) {
+  const [timeRemaining, setTimeRemaining] = useState(0);
+
+  useEffect(() => {
+    const getTimeRemaining = setInterval(() => {
+      const [Hours, Mins, Sec] = time.split(":").map(Number);
+
+      const d = new Date();
+      const time_serial = Hours * 60 * 60 + Mins * 60 + Sec;
+      const cur_time =
+        d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
+
+      let remaining_time = 0;
+
+      remaining_time = time_serial - cur_time;
+      if (remaining_time <= 1) {
+        clearInterval(getTimeRemaining);
+      }
+
+      setTimeRemaining(remaining_time);
+    }, 1000);
+
+    return () => clearInterval(getTimeRemaining);
+  }, [time, timeRemaining]);
+
+  useEffect(() => {
+    if (timeRemaining <= 1) {
+      statusSignal("finished");
+    }
+  }, [timeRemaining, statusSignal]);
+
+  return (
+    <div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
+      {current ? (
+        <>
+          <h1 className="mb-2 font-inter text-4xl font-semibold">Timer</h1>
+        </>
+      ) : (
+        <>
+          <h1 className="mb-2 font-inter text-4xl font-semibold">Next Task</h1>
+        </>
+      )}
+      <div className="time_left">{Timer(timeRemaining)}</div>
+      <div></div>
+    </div>
+  );
+}

client/src/components/ui/timer.tsx

@@ -0,0 +1,33 @@
+const Timer = (timeRemaining: number) => {
+  const formatTime = (time: number) => {
+    const seconds = Math.floor(time % 60);
+    const minutes = Math.floor((time / 60) % 60);
+    const hours = Math.floor((time / (60 * 60)) % 24);
+
+    return (
+      <div className="countdown-display">
+        <div className="countdown-value">
+          {hours > 0 ? (
+            <>
+              {hours.toString()}
+              <span>:</span>
+            </>
+          ) : (
+            <></>
+          )}
+          {minutes.toString().padStart(2, "0")}
+          <span>:</span>
+          {seconds.toString().padStart(2, "0")}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+      {formatTime(timeRemaining)}
+    </div>
+  );
+};
+
+export default Timer;