Fix all TypeScript/ESLint errors

- Update GitHub Actions workflow to include frontend linting

Author: m-danya

.github/workflows/pytest.yml .github/workflows/on-push.yml.github/workflows/pytest.yml renamed to .github/workflows/on-push.yml

@@ -1,8 +1,8 @@
 on:
   push:
-name: pytest, ruff, mypy
+name: pytest, ruff, mypy, frontend
 jobs:
-  test:
+  test-backend:
     runs-on: ubuntu-latest
     steps:
       #----------------------------------------------
@@ -47,3 +47,28 @@ jobs:
       - name: Run mypy
         run: |
           uv run mypy planty
+
+  test-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Run ESLint
+        working-directory: frontend
+        run: npm run lint
+
+      - name: Check TypeScript compilation
+        working-directory: frontend
+        run: npm run build

compose.yaml

@@ -1,8 +1,8 @@
 services:
   minio:
     image: minio/minio
-    ports:
-      - "0.0.0.0:9000:9000"
+    # ports:
+    # - "0.0.0.0:9000:9000"
     volumes:
       - minio-volume:/data
     command: server --console-address ":9001" /data
@@ -32,8 +32,8 @@ services:
   db:
     image: postgres:16
     restart: always
-    ports:
-      - ${PLANTY_DB_PORT}:5432
+    # ports:
+    #   - ${PLANTY_DB_PORT}:5432
     environment:
       - POSTGRES_DB=${PLANTY_DB_NAME}
       - POSTGRES_PASSWORD=${PLANTY_DB_PASS}

frontend/.eslintignore

@@ -0,0 +1 @@
+components/ui/*

frontend/Dockerfile.frontend

@@ -9,8 +9,5 @@ COPY . .
 
 EXPOSE 3000
 
-# TODO: fix build errors and use this to avoid using dev server in production:
-# RUN npm run build
-# CMD ["npm", "start"]
-
-CMD ["npm", "run", "dev"]
+RUN npm run build
+CMD ["npm", "start"]

frontend/api/api-calls.tsx

@@ -1,4 +1,4 @@
-import { Api, RecurrenceInfo } from "@/api/Api";
+import { Api, RecurrenceInfo, TaskUpdateRequest } from "@/api/Api";
 
 const api = new Api().api;
 
@@ -49,21 +49,9 @@ export async function moveTask(
   }
 }
 
-export async function updateTask(updateTaskData: {
-  id: string;
-  title?: string;
-  description?: string;
-  due_to?: string;
-  recurrence: RecurrenceInfo | null;
-}) {
+export async function updateTask(updateTaskData: TaskUpdateRequest) {
   try {
-    const result = await api.updateTaskApiTaskPatch({
-      id: updateTaskData.id,
-      title: updateTaskData.title,
-      description: updateTaskData.description,
-      due_to: updateTaskData.due_to,
-      recurrence: updateTaskData.recurrence,
-    });
+    const result = await api.updateTaskApiTaskPatch(updateTaskData);
     console.log("Task edited successfully:", result);
     return result;
   } catch (error: any) {

frontend/app/(main)/archived/page.tsx

@@ -1,10 +1,6 @@
 import { Section } from "@/components/tasks/section";
 
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
+export default async function Page() {
   // TODO: fetch initial data here to avoid flickering?
   return <Section sectionId="archived" />;
 }

frontend/components/calendar-view.tsx

@@ -47,16 +47,17 @@ function CalendarView() {
     tasksByDate,
     overdueTasks,
     isLoading,
-    isError,
     mutate: mutateTasksByDate,
   } = useTasksByDate(weekStart, weekEnd, isCurrentWeekSelected);
 
-  const handleDateSelect = (date: Date) => {
-    setSelectedDate(date);
-    setIsPopoverOpen(false);
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      setSelectedDate(date);
+      setIsPopoverOpen(false);
+    }
   };
 
-  function getWeekRange(date: Date): string {
+  function getWeekRange(): string {
     const today = new Date();
     const currentWeekStart = startOfWeek(today, { weekStartsOn: 1 });
     const isCurrentWeek = weekStart.getTime() === currentWeekStart.getTime();
@@ -100,7 +101,7 @@ function CalendarView() {
     return `${baseFormat}  ·  ${format(date, "EEEE", { locale: enUS })}`;
   }
 
-  const weekRange = selectedDate ? getWeekRange(selectedDate) : "";
+  const weekRange = selectedDate ? getWeekRange() : "";
 
   const allTasks = [
     ...(isCurrentWeekSelected && overdueTasks?.length

frontend/components/left-panel/app-sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Archive, Calendar, Search, Settings2, Sparkles } from "lucide-react";
+import { Archive, Calendar, Search, Settings2 } from "lucide-react";
 import * as React from "react";
 
 import { siGithub } from "simple-icons";

frontend/components/left-panel/edit-section-dialog.tsx

@@ -8,15 +8,13 @@ import {
 } from "@/components/ui/dialog";
 import { useRef } from "react";
 import { SectionEditDialogForm } from "./section-edit-dialog-form";
+import { SectionResponse } from "@/api/Api";
 
 interface EditSectionDialogProps {
   isOpened: boolean;
   onOpenChange: (open: boolean) => void;
-  section: {
-    id: string;
-    title: string;
-  };
-  onSubmit: (section: any) => void;
+  section: SectionResponse;
+  onSubmit: (section: { id: string; title: string }) => void;
 }
 
 export function EditSectionDialog({

frontend/components/left-panel/logo.tsx

@@ -1,8 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 export function Logo() {
-  const router = useRouter();
   return (
     <div className="flex justify-center w-full">
       <div className="w-40">