📝 chore(types): add missing TypeScript types for various variables

Author: ge85riz

frontend/src/components/ProtectedRoute.tsx

@@ -3,6 +3,7 @@ import { useAuth } from "../contexts/AuthContext";
 import { Spin } from "utils/antd.tsx";
 import type { Role } from "types/employee.ts";
 import toast from "react-hot-toast";
+import React from "react";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -31,7 +32,7 @@ export function ProtectedRoute({ children, allowedRoles }: ProtectedRouteProps)
   const hasRequiredRole = user?.roles?.some(role => allowedRoles.includes(role as Role));
 
   if (!hasRequiredRole) {
-    toast.error("You are not authorized for this action.");
+    if (user) toast.error("You are not authorized for this action.");
     return <Navigate to="/login" state={{ from: location }} replace />;
   }
 

frontend/src/components/canvas/EventListeners.tsx

@@ -18,7 +18,7 @@ import type { AppState } from "components/canvas/reducers/CanvasReducer.tsx";
 import React from "react";
 import type { Table } from "components/canvas/elements/Table.tsx";
 import type { KonvaEventObject } from "konva/lib/Node";
-import type { Wall } from "components/canvas/elements/Wall.tsx";
+import type { QuickWallProps, Wall } from "components/canvas/elements/Wall.tsx";
 import type { SelectionRectangleType } from "components/canvas/elements/SelectionRectangle.tsx";
 import { validateCanvasElementDeletion } from "components/canvas/utils/functions.tsx";
 import toast from "react-hot-toast";
@@ -41,7 +41,7 @@ export const handleKeyDown = (
   dispatch: (action: Action) => void,
   setSelectedIds: React.Dispatch<React.SetStateAction<UUID[]>>,
   setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>,
-  selectedIds: UUID[], setQuickWallCoordinates: any,
+  selectedIds: UUID[], setQuickWallCoordinates: React.Dispatch<React.SetStateAction<QuickWallProps>>,
   state: AppState) => {
   // we have to skip key handling if user is typing in an input or textarea
   const tag = (e.target as HTMLElement).tagName.toLowerCase();
@@ -158,7 +158,7 @@ export function handleDoubleClickOnElement(
 export function handleMouseUp(isSelecting: React.RefObject<boolean>, selectionRectangle: SelectionRectangleType,
                               state: AppState,
                               stageRef: React.RefObject<Konva.Stage | null>,
-                              rectRefs: any,
+                              rectRefs: React.RefObject<Map<UUID, Konva.NodeConfig>>,
                               dispatch: (action: Action) => void,
                               setSelectionRectangle: React.Dispatch<React.SetStateAction<SelectionRectangleType>>,
                               setSelectedIds: React.Dispatch<React.SetStateAction<UUID[]>>) {
@@ -184,7 +184,7 @@ export function handleMouseUp(isSelecting: React.RefObject<boolean>, selectionRe
     // we are checking if rectangle intersects with selection box
     return Konva.Util.haveIntersection(
       selBox,
-      rectRefs.current.get(rect.id).getClientRect({ relativeTo: stageRef.current }),
+      rectRefs.current.get(rect.id)!.getClientRect({ relativeTo: stageRef.current }),
     );
   });
   dispatch(setChairIdForManualAssignment(null));
@@ -198,7 +198,7 @@ export const handleMouseMove = (
   stageRef: React.RefObject<Konva.Stage | null>,
   isSelecting: React.RefObject<boolean>,
   selectionRectangle: SelectionRectangleType,
-  setSelectionRectangle) => {
+  setSelectionRectangle: React.Dispatch<React.SetStateAction<SelectionRectangleType>>) => {
 
   const container = stageRef!.current?.container();
   if (container && (isShiftPressed || state.buildMode === 1)) {
@@ -224,11 +224,11 @@ export const handleMouseDown = (
   isSelecting: React.RefObject<boolean>,
   dispatch: (action: Action) => void,
   setSelectedIds: React.Dispatch<React.SetStateAction<UUID[]>>,
-  setSelectionRectangle,
+  setSelectionRectangle: React.Dispatch<React.SetStateAction<SelectionRectangleType>>,
   scale: number,
   state: AppState,
-  quickWallCoordinates,
-  setQuickWallCoordinates) => {
+  quickWallCoordinates: QuickWallProps,
+  setQuickWallCoordinates: React.Dispatch<React.SetStateAction<QuickWallProps>>) => {
   const stage = e.target.getStage()!;
   const pointer = stageRef.current!.getPointerPosition()!;
   isSelecting.current = e.evt.shiftKey;
@@ -294,7 +294,13 @@ export const handleDragStart = (dispatch: (action: Action) => void) => {
 };
 
 // handle drag end for elements
-export const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>, el: ElementProperties, dispatch: (action: Action) => void, state: AppState, rectRefs, stageRef: React.RefObject<Konva.Stage | null>) => {
+export const handleDragEnd = (
+  e: Konva.KonvaEventObject<DragEvent>,
+  el: ElementProperties,
+  dispatch: (action: Action) => void,
+  state: AppState,
+  rectRefs: React.RefObject<Map<UUID, Konva.NodeConfig>>,
+  stageRef: React.RefObject<Konva.Stage | null>) => {
   const shape = e.target;
   const x = shape.x();
   const y = shape.y();
@@ -493,9 +499,13 @@ export const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>, el: ElementP
 
 };
 
-export const handleTransformEnd = (transformerRef, state: AppState, dispatch: (action: Action) => void, setSelectedIds: React.Dispatch<React.SetStateAction<UUID[]>>) => {
-  const nodes = transformerRef.current!.nodes();
+export const handleTransformEnd = (
+  transformerRef: React.RefObject<Konva.Transformer | null>,
+  state: AppState,
+  dispatch: (action: Action) => void,
+  setSelectedIds: React.Dispatch<React.SetStateAction<UUID[]>>) => {
 
+  const nodes = transformerRef.current!.nodes();
   const selectedIds = [];
   const updates = [];
   for (const node of nodes) {
@@ -538,7 +548,7 @@ export const handleTransformEnd = (transformerRef, state: AppState, dispatch: (a
           };
     updates.push(update);
   }
-  // @ts-ignore
+
   dispatch(updateMultipleElements(updates));
   dispatch(setChairIdForManualAssignment(null));
   setSelectedIds(selectedIds);

frontend/src/components/canvas/KonvaCanvas.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useCanvas } from "./contexts/CanvasContext.tsx";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Group, Layer, Stage, Transformer } from "react-konva";
@@ -11,7 +12,7 @@ import useApiService from "services/apiService.ts";
 import { useParams } from "react-router-dom";
 import StagePreview from "components/canvas/elements/StagePreview.tsx";
 import NeighbourArrows from "components/canvas/elements/NeighbourArrows.tsx";
-import SelectionRectangle from "components/canvas/elements/SelectionRectangle.tsx";
+import SelectionRectangle, { type SelectionRectangleType } from "components/canvas/elements/SelectionRectangle.tsx";
 import {
   handleDoubleClickOnElement,
   handleDragEnd,
@@ -28,12 +29,14 @@ import {
   handleWheel,
 } from "components/canvas/EventListeners.tsx";
 import type { Chair } from "components/canvas/elements/Chair.tsx";
+import type { QuickWallProps } from "components/canvas/elements/Wall.tsx";
 
 
 const TYPE_ORDER: { [key in ShapeType]: number } = {
   rectTable: 2,
   circleTable: 3,
   chair: 4,
+  room: 0,
   wall: 1,
   quickWall: 1,
   arrow: 5,
@@ -47,7 +50,7 @@ export interface KonvaCanvasProps {
   isFullWidth?: boolean,
 }
 
-function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanvasProps) {
+export function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanvasProps) {
   const { state, dispatch } = useCanvas();
   let stageRef = useRef<Konva.Stage | null>(null);
   let { schematicsId } = useParams();
@@ -62,18 +65,24 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [scale, setScale] = useState(1);
   const [containerSize, setContainerSize] = useState({ width: 800, height: 600 });
-  const [quickWallCoordinates, setQuickWallCoordinates] = useState<{
-    x1?: number;
-    y1?: number;
-  }>({ x1: undefined, y1: undefined });
+  const [quickWallCoordinates, setQuickWallCoordinates] = useState<QuickWallProps>({ x1: undefined, y1: undefined });
   const { getSchematics } = useApiService();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [initiated, setInitiated] = useState(false);
   const [isShiftPressed, setIsShiftPressed] = useState(false);
   const dragLayer = useRef<Konva.Layer | null>(null);
   const mainLayer = useRef<Konva.Layer | null>(null);
-
-  const [selectionRectangle, setSelectionRectangle] = useState({
+  const isSelecting = useRef(false);
+  const transformerRef = useRef<Konva.Transformer>(null);
+  const rectRefs = useRef(new Map());
+  // we sort elements according to their types so that they are drawn properly
+  // this sort operation causes overhead initially but negligible afterward
+  // we use this hash function to limit these unnecessary re-sorts to only positions/properties change
+  const elementTypesHash = useMemo(() =>
+      state.elements?.map(el => el.type).join(","),
+    [state.elements],
+  );
+  const [selectionRectangle, setSelectionRectangle] = useState<SelectionRectangleType>({
     visible: false,
     x1: 0,
     y1: 0,
@@ -107,10 +116,6 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
     fetchData();
   }, [dispatch, getSchematics, initiated, schematicsId, state.canvasPosition, state.scale]);
 
-  useEffect(() => {
-    window.scrollTo(0, 0); // we have to scroll to top-left corner of the page, otherwise it looks bad
-  }, []);
-
   // Measure container size
   useEffect(() => {
     const updateContainerSize = () => {
@@ -128,20 +133,17 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
     return () => window.removeEventListener("resize", updateContainerSize);
   }, [isFullWidth]);
 
-  const isSelecting = useRef(false);
-  const transformerRef = useRef<Konva.Transformer>(null);
-  const rectRefs = useRef(new Map());
-
+  // if selectedIds change, then capture them into Transformer so that we can scale or rotate them
   useEffect(() => {
     if (selectedIds.length && transformerRef.current) {
       const nodes = selectedIds.map(id => rectRefs.current.get(id)).filter(node => node);
-
       transformerRef.current.nodes(nodes);
     } else if (transformerRef.current) {
       transformerRef.current.nodes([]);
     }
   }, [selectedIds]);
 
+  // if build mode changes, then reset quickwall
   useEffect(() => {
     if (state.buildMode === 0) setQuickWallCoordinates({ x1: undefined, y1: undefined });
   }, [state.buildMode]);
@@ -165,12 +167,6 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
     };
   }, [dispatch, setSelectedIds, setIsShiftPressed, selectedIds, setQuickWallCoordinates, stageRef]);
 
-// unnecessary re-sorts when only positions/properties change
-  const elementTypesHash = useMemo(() =>
-      state.elements?.map(el => el.type).join(","),
-    [state.elements],
-  );
-
   useEffect(() => {
     if (state.elements?.length > 1) {
       state.elements.sort((a, b) => {
@@ -342,5 +338,3 @@ function KonvaCanvas({ stageReference, schematicsUUID, isFullWidth }: KonvaCanva
     </div>
   );
 }
-
-export default KonvaCanvas;

frontend/src/components/canvas/actions/actions.tsx

@@ -9,7 +9,8 @@ import type { Text } from "components/canvas/elements/Text.tsx";
 
 export interface Action {
   type: string;
-  payload: any | number | string | string[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload: number | string | string[] | any;
   setSelectedIds?: Dispatch<SetStateAction<string[]>>;
 }
 

frontend/src/components/canvas/elements/Wall.tsx

@@ -3,6 +3,11 @@ import { v4 as uuidv4 } from "uuid";
 import type { ElementProperties, ShapeType, UUID } from "components/canvas/utils/constants.tsx";
 import { handleMouseOut, handleMouseOver } from "components/canvas/utils/functions.tsx";
 
+export type QuickWallProps = {
+  x1?: number;
+  y1?: number;
+}
+
 export class Wall implements ElementProperties {
   id: UUID;
   type: ShapeType;

frontend/src/components/canvas/reducers/CanvasReducer.tsx

@@ -202,9 +202,7 @@ export function reducer(state: AppState, action: Action) {
         return updated;
       });
 
-      // eslint-disable-next-line
-      // @ts-ignore
-      action.setSelectedIds(Object.values(idMap));
+      if (action.setSelectedIds) action.setSelectedIds(Object.values(idMap));
 
       return {
         ...state,

frontend/src/components/canvas/utils/constants.tsx

@@ -5,7 +5,7 @@ import { Arrow, ArrowRender } from "components/canvas/elements/Arrow.tsx";
 import { Text, TextRender } from "components/canvas/elements/Text.tsx";
 
 export type UUID = string;
-export type ShapeType = "chair" | "rectTable" | "circleTable" | "wall" | "quickWall" | "arrow" | "text";
+export type ShapeType = "chair" | "rectTable" | "circleTable" | "wall" | "quickWall" | "arrow" | "text" | "room";
 export type AlgorithmType = "table" | "distance";
 
 export const DIET_TYPE_COLORS: Record<string, string> = {
@@ -23,6 +23,21 @@ export const EMPLOYMENT_TYPE_COLORS: Record<string, string> = {
   THESIS: "purple",
 };
 
+export enum DietaryPreference {
+  VEGETARIAN = "Vegetarian",
+  VEGAN = "Vegan",
+  LACTOSE_FREE = "Lactose Free",
+  FRUCTOSE_FREE = "Fructose Free",
+  GLUTEN_FREE = "Gluten Free",
+}
+
+export enum EmploymentType {
+  FULLTIME = "Full Time",
+  PARTTIME = "Part Time",
+  WORKING_STUDENT = "Working Student",
+  THESIS = "Thesis",
+}
+
 export interface ElementProperties {
   id: UUID;
   type: ShapeType;

frontend/src/contexts/AuthContext.tsx

@@ -1,9 +1,9 @@
 import { createContext, type ReactNode, useCallback, useContext, useEffect, useState } from "react";
-import type { AuthState, User, UserType } from "../types/auth";
+import type { AuthState, UserType } from "../types/auth";
 import { authService } from "../services/authService";
 
 interface AuthContextType extends AuthState {
-  login: (credentials: User) => Promise<void>;
+  login: (credentials: UserType) => Promise<void>;
   logout: () => void;
 }
 

frontend/src/pages/Employees/EmployeeForm.tsx

@@ -1,7 +1,8 @@
 import { DatePicker, Form, Input, Select } from "utils/antd.tsx";
-import { DietaryPreference, Role } from "types/employee";
+import { Role } from "types/employee";
 import { DietTypeTag } from "components/DietTypeTag.tsx";
 import dayjs from "dayjs";
+import { DietaryPreference } from "components/canvas/utils/constants.tsx";
 
 const { Option } = Select;
 

frontend/src/pages/Employees/EmployeesList.tsx

@@ -10,7 +10,7 @@ import {
 } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { useNavigate } from "react-router-dom";
-import { type Employee, getFullName, Role } from "types/employee.ts";
+import { type Employee, getFullName, type Profile, Role } from "types/employee.ts";
 import useApiService from "services/apiService.ts";
 import toast from "react-hot-toast";
 import { Breadcrumb } from "components/Breadcrumb";
@@ -326,7 +326,9 @@ export const EmployeesList = () => {
   const handleAddAllEmployees = async () => {
     if (!importedRows.length) return;
     // Map importedRows to EmployeeCreateDTO-like objects
-    const payload = importedRows.map(row => ({
+    const payload: (Omit<Employee, "profile"> & {
+      profile: Omit<Profile, "id" | "dietTypes" | "isVisitor">
+    })[] = importedRows.map(row => ({
       profile: {
         name: row.name.trim(),
         lastName: row.lastName.trim(),
@@ -353,7 +355,7 @@ export const EmployeesList = () => {
         employees.push(...result.insertedEmployees.map(e => ({ ...e, key: e.profile.id })));
         setEmployees([...employees]);
       }
-    } catch (err) {
+    } catch {
       toast.error("Failed to import employees");
     } finally {
       setLoading(false);