Make Status Site Calendar Functional with users OOO data

src/app/services/api.ts

@@ -28,6 +28,7 @@ export const api = createApi({
         'User_Standup',
         'TASK_REQUEST',
         'Extension_Requests',
+        'Logs',
     ],
     /**
      * This api has endpoints injected in adjacent files,

src/app/services/logsApi.ts

@@ -0,0 +1,41 @@
+import { api } from './api';
+
+type LogsQueryParams = {
+    username?: string;
+    type?: string;
+    format?: string;
+    dev?: boolean;
+};
+
+export type LogEntry = {
+    type: string;
+    timestamp?: string | number;
+    from?: string | number;
+    until?: string | number;
+    taskTitle?: string;
+};
+
+export type LogsResponse = {
+    data: LogEntry[];
+    message?: string;
+};
+
+export const logsApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getLogs: builder.query<LogsResponse, LogsQueryParams>({
+            query: (params) => ({
+                url: '/logs',
+                params: {
+                    username: params.username,
+                    type: params.type,
+                    format: params.format,
+                    dev: params.dev,
+                },
+            }),
+            providesTags: ['Logs'],
+        }),
+    }),
+    overrideExisting: true,
+});
+
+export const { useLazyGetLogsQuery } = logsApi;

src/components/Calendar/UserSearchField.tsx

@@ -1,16 +1,41 @@
 import { useState, useEffect, ChangeEvent, useRef } from 'react';
+import { useRouter } from 'next/router';
 import classNames from './UserSearchField.module.scss';
 import { useGetAllUsersQuery } from '@/app/services/usersApi';
+import { useLazyGetLogsQuery } from '@/app/services/logsApi';
 import { logs } from '@/constants/calendar';
 import { userDataType } from '@/interfaces/user.type';
 import { useOutsideAlerter } from '@/hooks/useOutsideAlerter';
 
+type LogEntry = {
+    type: string;
+    timestamp?: string | number;
+    from?: string | number;
+    until?: string | number;
+    taskTitle?: string;
+};
+
 type SearchFieldProps = {
-    onSearchTextSubmitted: (user: userDataType | undefined, data: any) => void;
+    onSearchTextSubmitted: (
+        user: userDataType | undefined,
+        data: CalendarData[]
+    ) => void;
     loading: boolean;
 };
 
+type CalendarData = {
+    userId: string;
+    data: {
+        startTime: number | undefined;
+        endTime: number | undefined;
+        status: string;
+    }[];
+};
+
 const SearchField = ({ onSearchTextSubmitted, loading }: SearchFieldProps) => {
+    const router = useRouter();
+    const isDevMode = router.query.dev === 'true';
+
     const handleOutsideClick = () => {
         setDisplayList([]);
     };
@@ -22,13 +47,65 @@ const SearchField = ({ onSearchTextSubmitted, loading }: SearchFieldProps) => {
         filterUser(e.target.value);
     };
 
-    const handleOnSubmit = (e: React.FormEvent) => {
+    const toMs = (value?: number | string) => {
+        if (typeof value === 'string') {
+            const parsed = Date.parse(value);
+            return isNaN(parsed) ? undefined : parsed;
+        }
+        if (typeof value !== 'number') return undefined as unknown as number;
+        return value >= 1e12 ? value : value * 1000;
+    };
+
+    const [triggerGetLogs, { isFetching: isLogsFetching }] =
+        useLazyGetLogsQuery();
+
+    const handleOnSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setDisplayList([]);
         const user = usersList.find(
             (user: userDataType) => user.username === searchText
         );
-        onSearchTextSubmitted(user, data);
+
+        if (!user) {
+            onSearchTextSubmitted(undefined, []);
+            return;
+        }
+
+        // Feature flag: Use different data sources based on dev mode
+        if (!isDevMode) {
+            // Non-dev mode: Use mock data from constants (original behavior)
+            const userData = data.find((item: any) => item.userId === user.id);
+            onSearchTextSubmitted(user, userData ? [userData] : []);
+            return;
+        }
+
+        // Dev mode: Fetch real OOO data from logs API
+        const logsResult = await triggerGetLogs({
+            username: user.username || undefined,
+            type: 'REQUEST_CREATED',
+            format: 'feed',
+            dev: true,
+        });
+
+        const logsResponse = logsResult.data;
+
+        const oooEntries = (logsResponse?.data || [])
+            .filter((log: LogEntry) => log && log.type === 'REQUEST_CREATED')
+            .map((log: LogEntry) => ({
+                startTime: toMs(log.from),
+                endTime: toMs(log.until),
+                status: 'OOO',
+            }))
+            .filter((e) => e.startTime && e.endTime);
+
+        const mapped = [
+            {
+                userId: user.id,
+                data: oooEntries,
+            },
+        ];
+
+        onSearchTextSubmitted(user, mapped);
     };
 
     const { data: userData, isError, isLoading } = useGetAllUsersQuery();